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>

<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