Эй, сценарист!Да будет Silverlight!

Сотрудники группы Microsoft Scripting Guys

Загрузить исходный код для этой статьи: HeyScriptingGuy2007_10.exe (156KB)

История человечества полна примеров столкновений противоположных сил: римляне против полчищ варваров; Монтекки против Капулетти; Авторы сценариев против тех, кто полагает, что статья о написании сценариев системного администрирования должна рассуждать о написании сценариев системного администрирования, а не о, скажем, исторических столкновениях противоположных сил. [Или, скажем еще, о пирожках с мясом ... —Ред.]

Мир компьютеров тоже не защищен от таких вот столкновений. В частности, всякий помнит о борьбе между разработчиками и системными администраторами. Как однажды, изучив ситуацию, сказал Карл Маркс: «Либо этот человек мертв, либо у меня остановились часы».

Нет, постойте, виноват, это сказал все-таки Граучо Маркс. Карл Маркс сказал «Искусство – всегда и везде тайное признание, и в то же время – вечное движение своей эпохи». Честно говоря, у нас нет ни малейшего представления, чтобы это значило. Да и вообще, Граучо Маркс был куда веселее, чем Карл Маркс, даже несмотря на то, что остроты Граучо не имеют особого отношения к борьбе разработчиков с системными администраторами.

Тем не менее, мы вполне убеждены, что это именно Карл Маркс в свое время заставлял авторов сценариев наизусть повторять каждое утро перед работой торжественную клятву: «системные администраторы – не разработчики!». И вот это чистая правда: системные администраторы никогда не были разработчиками. Разработчики – это такие люди, которые пишут компьютерные программы, а системные администраторы – это такие люди, которые... ну, по правде, мы сомневаемся, чтобы кто-нибудь в Майкрософт в самом деле знал, чем были заняты системные администраторы. Но что бы это ни было, это точно не написание компьютерных программ.

И конечно, Карл Маркс еще написал песню «The Times, They Are A-Changing» («Времена – они меняются»). (Ну или, по крайней мере, он нам сказал, что написал ее.)

В частности, благодаря центру сценариев TechNet Script Center (microsoft.com/technet/scriptcenter) системные администраторы постепенно обнаружили такую штуку, как VBScript и начали писать собственные служебные программы, программы, которые хотя и не так полны и всеобъемлющи, как обычные компьютерные программы, все же выполняют полезные задачи управления. Создавая эти программы, системные администраторы вынуждены прибегать к приемам, весьма сходным с теми, которыми пользуются разработчики.

И это даже еще не верхняя половина айсберга. С приходом Windows PowerShell™ (microsoft.com/technet/scriptcenter/hubs/msh.mspx) Microsoft® .NET Framework перестает быть запретной зоной для системных администраторов и авторов сценариев. Windows Vista® представила мировой общественности мини-приложения (microsoft.com/technet/scriptcenter/topics/vista/gadgets-pt1.mspx), поставив системных администраторов – по крайней мере, тех из них, кто пишет сценарии, – в равные условия с разработчиками. А теперь (звучит барабанная дробь) на сцене весь в белом появляется Microsoft Silverlight, «кроссплатформенный подключаемый модуль для всех обозревателей, открывающий путь в следующее поколение основанных на .NET Framework возможностей использования мультимедиа и разнообразных интерактивных приложений в Интернете».

Впечатляет, не так ли? Но вы, быть может, спросите нас, какое все это имеет отношение к пишущим сценарии системным администраторам, вроде нас с вами? Честно говоря, мы и сами не знаем наверняка. Но с помощью Silverlight очень просто создавать очень привлекательные пользовательские интерфейсы и мультимедийные презентации. И хотя маркетинговые материалы упорно называют Silverlight способом создавать приложения для Интернета, есть одно малоизвестное обстоятельство: похоже, что Silverlight не хуже работает и для приложений HTML, или HTA (microsoft.com/technet/scriptcenter/hubs/htas.mspx), горячо любимых авторами сценариев. Так что попробовать Silverlight, может, и стоит.

Прежде чем мы продолжим...

Мы хотим отметить, что сегодня мы не собираемся обсуждать многочисленные возможности и использования Silverlight; наша главная задача – показать вам достаточно фрагментов кода, чтобы вы смогли сами начать баловаться с этой технологией. Если вы хотите установить Silverlight (это, кстати, бесплатно), зайдите на главную страницу Silverlight по адресу microsoft.com/silverlight. Разные пакеты SDK, примеры проектов и массу других полезных вещей можно найти по адресу silverlight.net/GetStarted.

А сейчас мы предположим, что вы уже установили Silverlight. Кроме того, мы предположим, что вы уже сходили в раздел загрузок кода на веб-узле журнала TechNet Magazine (technetmagazine.com/code07.aspx) и загрузили файлы, описанные на рис. 1.

Figure 1 Компоненты проекта Silverlight

Файл SampleProject.js не обязательно нужен, по крайней мере для того, чтобы читать статью за этот месяц. Silverlight позволяет присоединять сценарии к объектам и событиям в вашем проекте; эти сценарии можно либо прямо закодировать в свой HTML-файл, либо (как в нашем случае) прочитать их из внешнего файла «include» (включить) вроде этого. А еще мы превратим файл SampleProject.html в HTA: просто переименуйте его в SampleProject.hta. Просто, правда?

Теперь сохраните все эти файлы в одну папку. И приготовьтесь – сейчас будет весело!

XAML-файл

Как вы уже могли догадаться, все самое интересное в этой рубрике «Эй, сценарист!» связано с XAML-файлом. (Так получилось, что XAML произносится «замель» и рифмуется с «глазами». Или «низами». Или даже «железами».) XAML – это сокращение от Extensible Application Markup Language. Помимо прочего, XAML позволяет создавать пользовательские интерфейсы с помощью языка, похожего на XML. Становится ли от этого легче кому-то – системному администратору, если быть точным – создавать пользовательские интерфейсы? Сейчас вы все узнаете.

Чтобы начать это увлекательное приключение, запустите программу «Блокнот» и откройте файл SampleProject.xaml. Если там есть какой-нибудь код, замените его таким:

<Canvas
 xmlns="https://schemas.microsoft.com/
    client/2007"
 xmlns:x="https://schemas.microsoft.com/
    winfx/2006/xaml">
</Canvas>

Примечание. SampleProject.hta уже заранее настроен так, что загружает информацию из SampleProject.xaml. Для использования другого XAML-файла придется подправить файл CreateSilverlight.js.

Скопировав код, сохраните файл и дважды щелкните SampleProject.hta. Догадались, что там будет? Точно! Большое скучное серое окно.

Да подождите, ну куда же вы! Именно это там и должно быть.

Все это выглядит не очень здорово потому, что мы еще ничего не сделали: все, чего мы пока что добились -- мы добавили в наш XAML-файл Canvas (холст). Но это важный шаг. В конце концов, если вы соберетесь писать маслом, то в первую очередь вам понадобится холст. То же самое и с Silverlight: прежде, чем мы сможем добавлять в свой проект элементы, нам нужен холст, на котором мы будем «рисовать». И теперь он у нас есть.

Кстати, почему мы получили серое окно размером 300 на 300 пикселов? Все просто: таковы параметры по умолчанию в файле CreateSilverlight.js. Если они вам не нравятся, просто откройте CreateSilverlight.js и настройте их по вкусу. Не хотите ли белый холст 800 пикселов шириной и 300 пикселов высотой? (А для тех примеров, которые мы будем приводить, именно такой вы и хотите.) Тогда просто убедитесь, что у вас в CreateSilverlight.js есть три такие строки:

width:'800', // Width of rectangular region of 
             // control in pixels.
height:'300', // Height of rectangular region 
              // of control in pixels.
background:'white', // Background color of
                    // control.

Примечание. Стоит заметить: в оригинальном файле .js фон имеет значение #D6D6D6. Теперь мы сделали его белым (white). Оказывается, что в XAML-файле можно использовать для обозначения цветов как значения RGB, так и названия цветов. (Полный список значений и названий цветов есть по адресу msdn2.microsoft.com/bb188314.aspx.) И хотя мы, сценаристы, больше всего любим называть цвета значениями RGB («Мой дом? Он FFFFFACD с FFCD5C5C отделкой»), мы решили использовать здесь названия цветов.

Бесплатный совет: в качестве фона не обязательно использовать только один цвет. Скопируйте код с рис. 2 в свой XAML-файл и посмотрите, что получится.

Figure 2 Красивые цвета

<Canvas
 xmlns="https://schemas.microsoft.com/client/2007"
 xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
 Width="800"
 Height="300">
 
 <Canvas.Background>
 <LinearGradientBrush>
 <GradientStop Color="Blue" Offset="0.0" />
 <GradientStop Color="Black" Offset="1.0" />
 </LinearGradientBrush>
 </Canvas.Background>

</Canvas>

Попробовали? Здорово, да?

Конечно, чистый холст сам по себе не то чтобы слишком интересен. Поэтому давайте добавим на этот холст какой-нибудь объект. Хотя Silverlight позволяет добавлять самые разные объекты (в том числе эллипсы, прямоугольники, прямые и даже, удивительное дело, многоугольники), мы добавим на свой холст старое доброе проверенное текстовое поле. Как? Вставив в наш XAML-файл между тегами <Canvas> и </Canvas> следующие теги:

<TextBlock 
 Name="Test"
 FontSize="40"
 FontFamily="Georgia"
 FontWeight="Bold"
 Canvas.Top="20" 
 Canvas.Left="20"
 Text="The TechNet Script Center">
</TextBlock>

Как видите, вся эта тема с XAML – это не так и трудно. Мы начали с использования тега <TextBlock>, не забыв включить в него разные параметры TextBlock (наподобие Name и FontSize). Затем мы говорим, что закончили с этим TextBlock, с помощью тега </TextBlock>. Что в этом такого хорошего? То, что примерно так же в XAML-файл добавляется любой другой объект. Хотите прямоугольник в 300 пикселов шириной и 100 пикселов высотой? Никаких проблем:

<Rectangle
 Height="300" 
 Width="100" 
 Fill="Blue">
</Rectangle> 

К слову, добавляя на холст фигуру (вроде прямоугольника), не забудьте указать цвет Fill (заливки) и/или цвет Stroke (штриха). Если этого не сделать, Silverlight добавит на холст прозрачный прямоугольник. Прямоугольник там будет, но вы его не увидите, если у вас, конечно, не какое-нибудь там магическое рентгеновское зрение.

Собственно, о цветах Fill и Stroke: именно с их помощью раскрашиваются некоторые объекты Silverlight. Для других объектов понадобится кисть, вроде LinearGradientBrush, которую мы показали (но о которой не рассказали) в бесплатном совете. Если вам хочется раскрасить объекты одним цветом, можно взять кисть с оригинальным названием SolidColorBrush. Например, посмотрите на теги XAML на рис. 3, которые «красят» наш текст (с технической точки зрения, окрашивается параметр TextBlock Foreground) в красный.

Figure 3 Раскраска текста

<TextBlock 
 Name="Test"
 FontSize="40"
 FontFamily="Georgia"
 FontWeight="Bold"
 Canvas.Top="20" 
 Canvas.Left="20"
 Text="The TechNet Script Center">

 <TextBlock.Foreground>
 <SolidColorBrush Name="test_brush" Color="red"/>
 </TextBlock.Foreground>

</TextBlock>

Чтобы получилось еще веселее, попробуйте функцию ImageBrush, которая заполняет текст картинкой:

<TextBlock.Foreground>
 <ImageBrush Name="test_brush" ImageSource="Sunset.jpg"/>
</TextBlock.Foreground>

А вот и еще подсказка: если вы используете ImageBrush, то наверняка хотите увеличить значение FontSize, потому что чем больше текст, тем лучше эффект.

Попробуйте и посмотрите, что получится. Вы будете впечатлены пропорционально.

Но подождите. Вы еще ничего не видели

Нам нужно уравнять положение: пока что все самое вкусное мы оставляли себе. То, что в Silverlight можно отображать текст – это здорово; еще лучше то, что можно рисовать прямоугольники, эллипсы и многоугольники. Но все это меркнет по сравнению с анимациями, которые можно добавить в проект Silverlight.

Опять же, все, что мы можем сделать в этой статье, – это показать вам пару способов создавать анимацию в Silverlight; у нас просто нет места на большее. (Не судите нас строго; мы все время предлагаем переименовать журнал TechNet Magazine в журнал Hey, Scripting Guy! Magazine, но наши письма, видимо, не доходят куда надо.)

Без дальнейших проволочек, вот отличный эффект, от которого наш текст медленно (но верно) станет более четким. Добавьте код с рис. 4 между тегами <TextBlock> и </TextBlock> в своем XAML-файле.

Figure 4 Приемы работы с TextBlock

<TextBlock.Triggers>
 <EventTrigger RoutedEvent=
     "TextBlock.Loaded">
 <BeginStoryboard>
 <Storyboard>
 <DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="Opacity"
 From="0.0" To="1.0" 
 Duration="0:0:5" />
 </Storyboard>
 </BeginStoryboard>
 </EventTrigger>
</TextBlock.Triggers>

Надо признать, это выглядит так, как будто тут в крупных размерах происходит какая-то чепуха; к счастью, большинство этого – просто заготовка. Во-первых, нельзя просто добавить в XAML-файл анимацию; нужно указать, когда она должна сыграть. Для этого придется указать набор триггеров (Triggers) для TextBlock. В нашем случае мы создадим триггер, запускающий анимацию всегда, когда загружается TextBlock:

<EventTrigger RoutedEvent="TextBlock.Loaded">

В Silverlight анимации происходят по раскадровке (Storyboard) (термин позаимствован из кино). Поэтому есть теги <BeginStoryboard> и <Storyboard>.

Чтобы текст проявился, нужно изменить свойство Opacity (непрозрачность). Мы постепенно увеличим это значение с 0.0 (прозрачный) до 1.0 (сплошной цвет). Так как Opacity оказалось по стечению обстоятельств свойством типа Double (свойством, основанным на числовом значении двойной точности), мы используем анимацию DoubleAnimation. А как, спросите вы, мы используем анимацию DoubleAnimation? Ну, просто, указав объект, из которого мы делаем анимацию (в нашем случае Test, имя, присвоенное TextBlock); определив целевое свойство (Opacity); и затем указав и диапазон анимации (от непрозрачности 0.0 до непрозрачности 1.0) и продолжительность всей анимации (5 секунд). Другими словами:

<DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="Opacity"
 From="0.0" To="1.0" 
 Duration="0:0:5" />

Примечание. Обязательно используйте синтаксис 0:0:5 (часы, минуты, секунды), чтобы указать 5 секунд. Если взять просто значение 5, ошибки не будет, но анимация займет 5 дней.

Попробовали? А теперь попробуйте вот это: в теге DoubleAnimation установите значение параметра AutoReverse на True:

AutoReverse="True"

Анимация сперва проявит текст, а потом он снова поблекнет.

Установите значение параметра RepeatBehavior на Forever (навсегда) и текст продолжит проявляться и исчезать... ну, до конца времен:

RepeatBehavior="Forever"

Или навсегда – это долговато? Тогда пусть RepeatBehavior будет, скажем, 3x, и анимация повторится 3 раза и прекратится.

RepeatBehavior="3x"

Все это очень здорово, мы сами так все время говорим. Но что, если вам не нравится текст, который то появляется, то исчезает? Что если вы предпочитаете текст, который постепенно меняет цвет? Что ж, тогда нужно воспользоваться анимацией ColorAnimation:

<ColorAnimation 
 Storyboard.TargetName="test_brush"
 Storyboard.TargetProperty="Color"
 From="Red" To="Blue" Duration="0:0:5" />

Примечание. Начните пробовать это с нашего красного текста. Ведь помните, мы уже показали, как сделать текст красным.

Правда, увлекательно? Но вы, кажется, разочарованы. Ага, и вот почему: ColorAnimation – это замечательно, но вы ведь на самом деле надеялись, что предметы будут летать по всему экрану. Эй, не падать духом! Какой программой была бы Silverlight, если бы с ее помощью нельзя было заставить предметы летать по экрану?! Попробуйте следующее:

<DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="(Canvas.Left)" 
 To="150"
 Duration="0:0:5" />

Как можно видеть, мы заставили наш TextBlock медленно переместиться с исходной позиции в точку на 150 пикселов левее края холста (Canvas.Left). Если бы мы хотели, чтобы TextBlock двигался вверх-вниз, мы бы просто использовали параметр Canvas.Top:

<DoubleAnimation
 Storyboard.TargetName="Test"
 Storyboard.TargetProperty="(Canvas.Top)" 
 To="150"
 Duration="0:0:5" />

А не можем ли мы—сердце уходит в пятки—совместить эти анимации и заставить TextBlock двигаться и вбок и вверх-вниз? Это выше нашего понимания. Но вот подсказка: скопируйте обе анимации в свой XAML-файл (прямо друг за другом) и посмотрите, что из этого выйдет.

Примечание. Ну да, мы вас надули. Мы с самого начала знали, что можно совместить эти анимации. По сути, в один проект Silverlight можно натолкать целую стопку анимаций. Это чуть сложнее — возможно, понадобится добавить дополнительные теги, чтобы одна анимация заканчивалась до того, как начнется следующая. Но зато это дает возможность создавать всякие необычные анимации, просто набрав пару тегов, похожих на XML.

Простите, друзья; представление окончено

Да, мы понимаем. Нам тоже не хочется заканчивать, особенно когда мы начали подбираться к действительно интересным штукам. Но не беспокойтесь; мы не прощаемся навечно. Если вы хотите узнать больше о Silverlight, напишите нам по адресу scripter@microsoft.com. Если будет много интересующихся, что ж, хорошо, мы посмотрим, нельзя ли сделать что-нибудь в будущих статьях. Конечно, не забывайте также заглянуть в центр сценариев TechNet Script Center (microsoft.com/technet/scriptcenter/resources/tnmag/archive.mspx); мы разместим для вас ссылки на полные примеры XAML (экXAMLяры?). А до тех пор, как говорили Карл Маркс и Фридрих Энгельс в конце своего манифеста в письме с Брюссельского коммунистического корреспондентского комитета Г.А. Коттгену, «Спокойной ночи и, пожалуйста, будьте аккуратны за рулем по дороге домой».

Сотрудники группы Microsoft Scripting Guys работают на... ну хорошо, получают зарплату в корпорации Майкрософт. Когда они не играют в бейсбол, не тренируют бейсбольную команду, не смотрят бейсбол и не занимаются другими делами, они ведут проект Script Center в журнале TechNet. Веб-узел проекта находится по адресу www.scriptingguys.com .

© 2008 Корпорация Майкрософт и компания CMP Media, LLC. Все права защищены; полное или частичное воспроизведение без разрешения запрещено.