[ XAML: умерщвление flash-а ]
[ Введение ]
Грядёт эра новой ОС от Microsoft - Windows Vista. Ни для кого не секрет, что в ней множество новшеств, фич и
наворотов. Одна из самых важных и значимых для программера - это новомодная технология .NET. Что она из себя представляет?
Это, по сути дела, виртуальная машина, подобно SUNовской, которая призвана решить множество проблем, с которыми
сталкивается большинство программеров. В эту новую платформу вошли несколько языков, и каждый может найти для себя то,
что ему по душе. Я не буду перечислять их названия, а расскажу об одном из них - это XAML. Вообще, весь этот замес вокруг
языка назвали Windows Presentation Foundation (WPF). Всё это реализовано в третьей версии пакета Microsoft Framework
(не путать с Metasploit Framework от H D Moore) и, проще говоря, представляет собой мега-улучшенный HTML+XML, если можно
так выразиться. С его помощью теперь легко и просто можно создавать динамичные объекты, не прибегая к всякого рода
графическим функциям. Многие обвиняют Microsoft, что, мол, опять создают свои собственные гибриды популярных технологий и
пытаются навязать своё. Я скажу вот что - Microsoft, проделав громадную работу, совершенствует старые технологии и
существенно тем самым облегчает жизнь программерам и дизайнерам. Использовать её либо нет, решать только тебе, и скажу
сразу, игра стоит свеч. Чтобы не быть многословным, предложу посетить следующий урлик
http://channel9.msdn.com/playground/wpfe/PageTurn/default.html.
Не поленись и загрузи метровый рантайм, для того чтобы увидеть лишь ту малу часть, на что способна WPF. Кстати,
некоторые уже называют WPF "убийцей Flash'а". Честно говоря, технологии настолько разные в реализации, что я бы не стал их
сравнивать, но с виду действительно можно подумать, что это флеш. Итак, я заинтересовал тебя, и мы едем дальше.
[ Что нужно? ]
В Windows Vista все необходимые компоненты для работы (но не разработки) уже присутствуют, но если ты, как и я,
не любишь быстро перебираться на сырые и непроверенные продукты, то мы всё будем настраивать под ХР. Хотя сама Microsoft
настоятельно рекомендует всё проектировать именно из-под Висты и, если это веб-ориентированное приложение, то непременно
использовать седьмого осла. Но не во всём же потакать мелкомягким. Для того чтобы WPF приложения успешно работали у тебя
на машине, необходимо установить Microsoft Framework 3. После установки должна появиться новая служба Windows
Presentation Foundation Font Cache 3.0.0.0, так что не пугайся при виде нового процесса PresentationFontCache.exe в
диспетчере задач :). Но для разработки приложений этого будет недостаточно. Если же у тебя уже стоит Microsoft Visual
Studio 2005 Team Suit, то достаточно поставить Visual Studio 2005 extensions for .NET Framework 3.0 (WCF & WPF),
November 2006 CTP, и при создании нового проекта в ветках дотнетовских языков (С#, VB) можно увидеть новый компонент
Framework 3. Как раз в нём и будут доступны приложения WPF. Если же Microsoft Visual Studio 2005 не наблюдается у тебя
на компе и ты не хочешь её ставить, могу предложить Microsoft Expression Web, Expression Blend, Expression Design, либо
Expression Media (http://www.microsoft.com/products/expression/en/default.mspx). Каждая из них заточена под определённые
задачи. Что интересно, сами эти продукты написаны с использованием технологии WPF. Но я бы рекомендовал использовать
именно студию. Для полноценной проверки работоспособности приложения не помешало бы в самом начале установить IIS и
сделать это перед установкой студии (это важно, иначе потом могут возникнуть трудности с регистрацией веб-сервера в
студии), но это необязательно, всё будет работать посредством броузера.
[ Создаём проект ]
Итак, у тебя всё установлено, и ты готов приступить. Я буду использовать студию, так что запускаем её, создаём
новый проект, выбираем язык программирования по вкусу (поддерживающий платформу .NET), в нём ветку .NET Framework 3 и
тип проекта - XAML Browser Application (WPF). У нас будет веб-приложение, т.е. оно будет исполняться в броузере. Кстати
говоря, в большинстве случаев написанный код на XAML можно приспособить и для Desktop-приложений. Портирование нашего
проекта на Windows Application (WPF) будет твоим домашним заданием, к тому же это не так уж и сложно. Так, что там ещё?
Ах да, даём имя своему проекту, указываем произвольный путь, где он будет храниться, и давим ОК.
Студия сгенерит кучу всяких файликов, но нам пока будет необходим только Page1.xaml-файл. В файле Page1.xaml.cs
(если ты выбрал C#) будет размещаться шарповый сопроводительный код - его пока не трогаем. В самом начале будет открыт
только readme.txt, смело закрывай его и открывай Page1.xaml. Это можно сделать во вкладке справа - Solution Explorer,
двойной клик по нему. Откроется окно, разделённое на две части. Вверху будет превью нашего проекта, внизу сам XAML-код,
собственно. Если сделать какое-либо изменение в коде и нажать кнопку "Design", то студия моментально протранслирует код,
и в случае ошибки непременно сообщит :).
Так что корректность кода можно определить без компиляции. Тем, кто программировал на ASP.NET, знакомо такое
положение дел. Итак, вместо тегов (нодов, кому как удобней) <Grid> </Grid> помещаем следующий код:
<TextBlock TextAlignment="Center" FontSize="16pt" Foreground="#CCCCFF"
RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<RotateTransform x:Name="MyAnimatedRotateTransform" Angle="0" />
</TextBlock.RenderTransform>
Hello World!
</TextBlock>
Очень напоминает XML, не так ли? Но возможности будут намного круче, хотя пока это - не более чем статическая
строка. Чтобы получше понять, что к чему, просто поэкспериментируй со значениями в блоке TextBlock. Далее переходим в
режим "Design", убеждаемся, что нет серьёзных нарушений в грамматике, т.е. выкрика "Whoops!" не наблюдается, и
компилируем (F5). Запуститься браузер и отобразит нам нашу строку. Обрати внимание, что просмотреть исходный код через
браузер нельзя. Почему? Думаю будет понятно после публикации проекта. Теперь придадим нашей паге простенькую динамику.
Ниже, между нашим кодом и закрывающим тегом </Page> , добавляем следующий код:
<Page.Triggers>
<EventTrigger RoutedEvent="Page.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyAnimatedRotateTransform"
Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:0:5" RepeatBehavior="Forever" />
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Page.Triggers>
Снова компилим. Ну вот, уже кое-что. Всё простенько_ и ничего сложного. Если ты уже проектировал веб-приложения,
то подумай, сколько бы понадобилось HTML- и JavaScript-кода, чтобы создать такое. На флеше тоже быстро, но сколько он
сожрёт трафа? А наши либы и обработчики графики уже на винте. И не нужно ставить никакие плагины-плееры к браузеру, он
тесно координирует свои действия с фреймвёрком. Кстати, игры, просмотр видео и создание мультов - всё это подвластно WPF.
Добавим ещу парочку компонентов для наглядности. Чтобы не запутаться в коде, предлагаю удалить весь вставленный
текст и заменить его следующим:
<StackPanel>
<Canvas Width="700" Height="400" HorizontalAlignment="Center">
<TextBlock Canvas.Top="100" Canvas.Left="50"
TextAlignment="Center" FontSize="30pt" Foreground="#CCCCFF"
RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<RotateTransform x:Name="MyAnimatedRotateTransform" Angle="0" />
</TextBlock.RenderTransform>
По кругу
</TextBlock>
<TextBlock Canvas.Top="100" Canvas.Left="300" Name="scaledText"
TextAlignment="Center" FontSize="30pt" Foreground="Gray"
RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<ScaleTransform x:Name="MyAnimatedScaleTransform" ScaleX="1" ScaleY="1" />
</TextBlock.RenderTransform>
Ближе - Дальше
</TextBlock>
<TextBlock Canvas.Top="250" Canvas.Left="150"
TextAlignment="Center" FontSize="30pt" Foreground="Orange"
RenderTransformOrigin="0.5,0.5">
<TextBlock.RenderTransform>
<SkewTransform x:Name="MyAnimatedSkewTransform" AngleX="0" AngleY="0" />
</TextBlock.RenderTransform>
Вращение
</TextBlock>
<TextBlock Canvas.Top="30" Canvas.Left="300" Name="translatedText"
FontSize="30pt">
<TextBlock.RenderTransform>
<TranslateTransform x:Name="MyAnimatedTranslateTransform" X="0" Y="0" />
</TextBlock.RenderTransform>
Движение
</TextBlock>
</Canvas>
</StackPanel>
<Page.Triggers>
<EventTrigger RoutedEvent="Page.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimation
Storyboard.TargetName="MyAnimatedRotateTransform"
Storyboard.TargetProperty="Angle"
From="0" To="360" Duration="0:0:5" RepeatBehavior="Forever" />
<ParallelTimeline RepeatBehavior="Forever" AutoReverse="True">
<DoubleAnimation
Storyboard.TargetName="MyAnimatedScaleTransform"
Storyboard.TargetProperty="ScaleX"
From="0" To="3" Duration="0:0:7" />
<DoubleAnimation
Storyboard.TargetName="MyAnimatedScaleTransform"
Storyboard.TargetProperty="ScaleY"
From="0" To="3" Duration="0:0:7" />
</ParallelTimeline>
<ParallelTimeline RepeatBehavior="Forever" AutoReverse="True">
<DoubleAnimation
Storyboard.TargetName="MyAnimatedSkewTransform"
Storyboard.TargetProperty="AngleX"
From="-45" To="70" Duration="0:0:10" />
<DoubleAnimation
Storyboard.TargetName="MyAnimatedSkewTransform"
Storyboard.TargetProperty="AngleY"
From="-45" To="70" Duration="0:0:10" />
</ParallelTimeline>
<ParallelTimeline RepeatBehavior="Forever" AutoReverse="True">
<DoubleAnimation
Storyboard.TargetName="MyAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
From="0" To="100" Duration="0:0:5" />
<DoubleAnimation
Storyboard.TargetName="MyAnimatedTranslateTransform"
Storyboard.TargetProperty="Y"
From="0" To="200" Duration="0:0:5" />
</ParallelTimeline>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Page.Triggers>
Компилим, и теперь в браузере уже несколько динамичных объектов. Если ты всё же не поленился и установил IIS,
то теперь можно сделать публикацию, и уже через него лицезреть плоды творчества. Лезем в Build -> Publish имя_проекта, в
открывшемся окне давим на кнопку "Brose" и в новом окне выбираем Local IIS, давим на кнопку "Create New Web Application" и
в созданную папочку помещаем наш проект. Next->Next->Finish. Всё, теперь наше приложение доступно через веб-сервер.
Также его можно залить и на удалённый веб-сервант, FTP-сервер, либо просто сохранить на файловой системе, в том числе и
на удалённой машине. Обрати внимание, что если посмотреть, что получилось в результате публикации, то можно заметить,
что от XAML-инструкций и следов не осталось :) , тем самым в некотором роде защищаются исходники, но это не основная цель,
главное, что программить паги стало намного легче и мы получили неплохую возможность этим пользоваться.
ЗЫ. Подробнее о технологии на сайте Microsoft: http://msdn2.microsoft.com/en-us/asp.net/bb187401.aspx
ЗЫЫ. Фотки ищи в addons/xaml/*
