Использование динамических языков в Silverlight 2

Использование Ruby и JavaScript

В предыдущем разделе мы поэтапно рассмотрели процесс настройки Visual Studio для создания динамических приложений на IronPython. Dynamic Language Runtime также поддерживает языки Ruby и Dynamic JavaScript, поэтому рассмотрим, как можно создать такое же приложение с их использованием.

Использование Ruby

Начнем процесс с создания структуры проекта, включая HTML-файл и XAML-файл, аналогичной той, что использовалась для IronPython в предыдущем разделе. Но в данном случае, в папке app вместо файла app.py для кода на Ruby создается файл app.rb. Также не забудьте выполнить все настройки для запуска Chiron, также как это делалось в предыдущем примере. (Вернитесь к рис. 14.4, на котором представлены все необходимые настройки).

Вставьте в app.rb код на IronRuby:

include System: :Windows
include System: :Windows: :Controls
def handleClick(sender, eventArgs)
sender.text = "Hello World, from Ruby!" end
class App def initialize
@scene = Application.Current.LoadRootVisual(UserControl.new(), "app.xaml") end
def start
@scene.find  name('txtMessage').mouse  left button  up { |sender, args| handleClick(sender, args) } end end App.new.start

Как видите, все очень похоже на пример с IronPython. Включаются пространства имен System. Windows и System.Windows.Controls. Затем описывается обработчик события handleClick для изменения текста по щелчку.

После этого объявляется класс App. Конструктор класса загружает XAML и использует его для инициализации класса. Событие Start связывает обработчик события с TextBlock txtMessage, описанным в XAML

Теперь при выполнении приложения мы получаем такие же результаты: TextBlock отображает "Hello World," и затем, когда пользователь щелкает текст, к этому тексту добавляется "from Ruby!".

Использование Dynamic JavaScript

Чтобы использовать JavaScript, выполните туже процедуру, что в предыдущих двух примерах; т.е. создайте Веб-сайт в Visual Studio и добавьте в него файлы HTML и XAML He забудьте также настроить проект на использование Chiron. Как это сделать, показано на рис. 14.4.

На этот раз, вместо файлов app.py или app.rb в каталог app добавляется файл app.jsx. Редактируйте содержимое файла app.jsx, добавляя в него следующий JavaScript-код:

Import("System. Windows.Application") 
Import("System. Windows.Controls.UserControl")

function handleClick(sender, eventArgs) {
 sender.Text = sender.Text + " from Dynamic JavaScript"; 
}

function App() { 
 this.scene = Application.Current.Load 
 RootVisual(new UserControl(), "app.xaml") 
}

App.prototype.start = function() {
 this.scene.txtMessage.MouseLeftButtonUp += handleClick 
}

app = new App 
app.start()

Как видите, код по-прежнему предельно понятен. Управляемый JavaScript использует выражение Import для добавления ссылок на классы SystemWindows.Application и System.Windows.Controls.UserControl. В JavaScript само приложение является функцией, в которую добавляются свойства, поэтому scene является членом функции App и описывается путем загрузки XAML Событие MouseLeftButtonUp обрабатывается функцией handleClick. Это определяется в функции start приложения.

Как и в предыдущих примерах, handleClick добавляет определенный текст, в данном случае, это "from Dynamic JavaScript" (из Dynamic JavaScript), в строку в txtMessage TextBlock, описанного в XAML.

Результат абсолютно аналогичен предыдущим двум примерам. Приложение отображает сообщение "Hello World," и выводит дополнительный текст, когда пользователь щелкает сообщение.

Более сложный пример

Первым приложением Silverlight, которое увидело свет (еще когда Silverlight назывался WPF/E), было приложение с часами. Как оно выглядит, представлено на рис. 14.9.

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

Рис. 14.9. Часы на Silverlight

Сначала рассмотрим XAML для часов. Обратите внимание, что это лишь фрагмент XAML, представляющий три стрелки часов и их анимацию:

<Canvas x:Class="System.Windows.Controls.Canvas" 
        xmlns="http://schemas.microsoft.com/client/2007" 
        xmlns:x=" http://schemas.microsoft.com/winfx/2006/xaml" 
        Opacity="0" x:Name="parentCanvas">
  <Canvas.Triggers>
    <EventTrigger RoutedEvent="Canvas.Loaded">
      <EventTrigger.Actions>
        <BeginStoryboard>
          <Storyboard>
            <DoubleAnimation x:Name="hour animation" Storyboard.TargetName="hourHandTransform" 
                             Story="" board.TargetProperty="Angle" From="180" To="540" 
                             Duration="12:0:0" RepeatBehavior="Forever"/>
            <DoubleAnimation x:Name="minute animation" Storyboard.TargetName="minuteHandTransform" 
                             Story="" board.TargetProperty="Angle" From="180" To="540" 
                             Duration="1:0:0" RepeatBehavior="Forever"/>
            <DoubleAnimation x:Name="second  animation" Storyboard.TargetName="secondHandTransform" 
                             Story="" board.TargetProperty="Angle" From="180" To="540" 
                             Duration="0:1:0" RepeatBehavior="Forever"/>
          </Storyboard>
        </BeginStoryboard>
      </EventTrigger.Actions>
    </EventTrigger>
  </Canvas.Triggers>
  <!--   Часовая стрелка -->
  <Path Data="M -4, 16 l 3 40 3 0 2 -40 z" Fill = "white">
    <Path.RenderTransform>
      <TransformGroup>
        <RotateTransform x:Name="hourHandTransform" Angle="180"/>
        <TranslateTransform X="150.5" Y="145"/>
      </TransformGroup>
    </Path.RenderTransform>
  </Path>
  <!--    Минутная стрелка -->
  <Path Data="M -4, 16 l 3 70 3 0 2 -70 z" Fill = "white">
    <Path.RenderTransform>
      <TransformGroup>
        <RotateTransform x:Name="minuteHandTransform" Angle="180"/>
        <TranslateTransform X="150.5" Y="145"/>
      </TransformGroup>
    </Path.RenderTransform>
  </Path>
  <!--   Секундная стрелка -->
  <Path Data="M -1, 16 l 0 70 2 0 0 -70 z" Fi="" ll= "red">
    <Path.RenderTransform>
      <TransformGroup>
        <RotateTransform x:Name="secondHandTransform" Angle="180"/>
        <TranslateTransform X="150.5" Y="145"/>
      </TransformGroup>
    </Path.RenderTransform>
  </Path>
</Canvas>

XAML начинается с размещения трех анимаций в соответствующих элементах Storyboard. Стрелки часов можно рассматривать как вращающиеся прямые, поэтому для их анимации используется тип DoubleAnimation, обеспечивающий изменение угла поворота. Подробнее о реализации этого в XAML рассказывает "Трансформация и анимация в XAML" , "Трансформация и анимация в XAML".

Следует обратить внимание на имена анимаций: hour animation (анимация часов) , minute animation (анимация минут) и second animation (анимация секунд), соответственно. Помните об этом при рассмотрении кода. В качестве цели каждой анимации задана именованная трансформация: hourHandTransform (Трансформация часовой стрелки) реализует отсчет часов, minuteHandTransform

(Трансформация минутной стрелки) реализует отсчет минут и secondHandTransform (Трансформация секундной стрелки) отвечает за перемещение секундной стрелки. Эти трансформации можно будет увидеть ниже в XAML Каждая стрелка реализована как объект Path, и с каждым из этих контуров ассоциирована одна из упомянутых выше трансформаций.

Итак, анимации запускаются в Canvas.Loaded и повторяются постоянно, обеспечивая перемещение стрелок по циферблату часов на 360 градусов за заданный промежуток времени. Но как инициализировать их, чтобы они представляли текущее время? Вот для этого понадобиться написать код.