Silverlight 2.0: платформа для интерактивных Веб-приложений
13 мая 2008
Рубрика: Статьи, присланные на конкурс.
Автор: Андрей Скляревский.

Маленький внедряемый в браузер компонент Microsoft Silverlight впервые вышел стабильной версией в сентябре 2007 года. Основная направленность первой версии Silverlight заключалась в мультимедийных приложениях, содержащих в себе векторную графику, анимацию, видео высокой четкости, звук и некоторую функциональную нагрузку.

pic

Однако для чего-то большего Silverlight 1.0 использовать затруднительно, так как программирование поддерживается только на уровне встроенного в браузер исполнителя JavaScript кода и отсутствуют стандартные элементы управления, такие как текстовые поля, кнопки и т.д.
Сильно меняется ситуация в Silverlight 2.0: мультимедийная сила остается на своем месте, а вдобавок к ней среди основного прибавляется:
1. Сверхкомпактная и кросс-платформенная реализация .NET Framework, включая XML и JSON сериализацию, LINQ to Objects и LINQ to XML, классы для работы с сетью (включая клиента WCF) и т.д.
2. Механизм представления, совместимый с Windows Presentation Foundation, с основными элементами управления для бизнес-приложений (TextBox, Button, ListBox, StackPanel, DockPanel, Grid, DataGrid и другие), однако без поддержки аппаратного ускорения (это вызвано, скорее всего, необходимостью в кросс-платформенности Silverlight).
3. Dynamic Language Runtime – выросший из IronPython open-source проект Microsoft, позволяющий компилировать специальным образом код на динамических языках, таких как Python, Ruby и Jscript.Net, и исполнять его в среде .NET. Фактически для Silverlight 2.0 можно будет писать на любом из этих трех динамических языках.
4. .NET классы для работы с Document Object Model HTML странички, на которой расположен Silverlight элемент.
5. Упаковка Silverlight элемента в один XAP-архив, что снижает скачиваемый пользователем размер файла и избавляет от необходимости копировать кучу XAML-файлов при внедрении.

Кроме всего прочего, по словам Скотта Гутри (вице-президента Microsoft Developer Division), Silverlight Tools будут устанавливаться на любую версию Visual Studio, включая бесплатные Express-редакции, что позволит начать разрабатывать приложения для Silverlight без каких-либо дополнительных затрат (при условии работы в ОС Windows). На данный момент Beta-версия Silverlight Tools на Express-редакции не устанавливается. Для дизайнеров есть платный Expression Blend, версия 2.5 которого будет поддерживать создание дизайна для Silverlight 2.0.
Так же, как и предыдущая, вторая версия Silverlight обладает кросс-платформенностью, официально поддерживаются Веб-браузеры Mozilla Firefox и Internet Explorer в Windows 2000+, а также и Safari в Mac OS X. Кроме этого, официально подтверждены планы на поддержку Opera, которая, по некоторым сведениям, уже может отображать Silverlight элементы при использовании специальных приемов.

pic

Сразу после выхода первой версии Silverlight Microsoft и Novell объявили о сотрудничестве, благодаря которому Microsoft предоставит Novell кодеки для воспроизведения видео- и аудио-содержания и тестировочные пакеты, а Novell создаст Moonlight: 100% совместимую реализацию Silverlight для систем, которые поддерживаются на данный момент open-source реализацией .NET Framework от Novell – Mono. Мигель де Иказа, создатель Mono, писал в своем блоге, что первоочередной для Moonlight будет поддержка Linux.

Снимок от Мигеля де Иказа: 3 работающих на Moonlight «штучки» (desklets) в Linux:

pic

Таким образом, Silverlight содержит впечатляющие средства работы с графикой, позволяет легко воплощать самые сложные дизайнерские решения, имеет силу .NET Framework, и работать это все будет на всех ведущих платформах и браузерах. Дистрибутив Silverlight 2.0 имеет размер порядка 4,38 Мб, сама установка при этом происходит в режиме «без вопросов», поэтому, учитывая также и имя компании-разработчика, распространяться Silverlight 2.0, скорее всего, будет достаточно быстро по мере появления значительных Веб-разработок на его основе.

Как извлечь из этого пользу нам, рядовым Веб-разработчикам? Интернет уже давно перестал быть просто инструментом для выкладки информации через сложные технические механизмы и для легкого получения уже выложенной информации. Сегодня Интернет наполнен Веб-службами самого широкого профиля, начиная от упрощающих совместную работу по выкладке информации (например, Википедия), позволяющих знакомиться и общаться (блоги, мгновенные сообщения, службы знакомств, фотосервисы и т.д.) и заканчивая чисто деловыми Веб-приложениями, позволяющими автоматизировать какие-либо бизнес-процессы, такие, как специализированный документооборот, планирование и т.д.

Эти Веб-службы, объединенные под общим названием Web 2.0, обычно называют RIA (англ. «Rich Internet Application» или «Rich Interactive Application» — богатые интерактивные приложения). Подавляющее большинство из них реализовано на HTML и JavaScript, принципах AJAX (Asynchronous JavaScript and XML). Однако со временем стало ясно, что AJAX не может сделать Веб-разработку такой же комфортной, как и разработку для рабочего стола. И сегодня разные производители ПО предлагают новые способы разработки RIA, одним из которых является Silverlight.

pic

На рисунке: пример RIA на Silverlight для поиска по сервису Digg, работающий внутри браузера Safari в Mac OS X, написанный Скоттом Гутри в своем блоге.

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

Для разработки нам понадобится Visual Studio 2008 с установленной опцией «Visual Web Developer» и Microsoft Silverlight Tools Beta 1 for Visual Studio 2008. При создании проекта необходимо выбрать тип проекта Silverlight Application:

pic

Назовем проект YozuvTizimiKonverter. После этого Visual Studio спросит, нужно ли создать ASP.NET проект для этого Silverlight проекта, можно просто нажать OK.
Перед нами появляется файл Page.xaml. Попробуем придать нашему элементу некоторую черту оформления и расширить его на все браузерное пространство:
Добавим фон, для чего необходимо убрать атрибут Background=«White» у элемента Grid , а внутрь самого элемента добавить следующий код:

Перед нами появляется файл Page.xaml. Попробуем придать нашему элементу некоторую черту оформления и расширить его на все браузерное пространство:
Добавим фон, для чего необходимо убрать атрибут Background=«White» у элемента Grid , а внутрь самого элемента добавить следующий код:

<Grid.Background>
    <RadialGradientBrush RadiusX="1" RadiusY="1" Center="1,1">
        <GradientStop Color="White" Offset="0" />
        <GradientStop Color="#B0D0E0" Offset="0.25" />
        <GradientStop Color="White" Offset="1" />
    </RadialGradientBrush>
</Grid.Background>

Таким образом, мы установили нужное нам значение для свойства Background у Grid, посмотрим, что получилось (для этого можно нажать F5 или Debug -> Start Debugging в меню):

pic

Расширим поле работы Silverlight элемента на весь экран, для чего достаточно убрать атрибуты Width=«400» Height=«300» у тега UserControl. При запуске увидим, что белая граница пропала, а Silverlight объект распространяется на все браузерное пространство.

Теперь перейдем к добавлению функциональности, начнем с базового размещения элементов, добавив внутрь Grid с именем LayoutRoot следующий код:

<Grid Margin="8">
    <Grid.ColumnDefinitions>
        <ColumnDefinition />
        <ColumnDefinition />
    </Grid.ColumnDefinitions>
    <Grid.RowDefinitions>
        <RowDefinition Height="30" />
        <RowDefinition />
    </Grid.RowDefinitions>

    <TextBlock Text="Ўзбек тили" Grid.Column="0" Grid.Row="0"  />
    <TextBlock Text="O‘zbek tili" Grid.Column="1" Grid.Row="0" />
    
    <TextBox x:Name="textCyrillic" AcceptsReturn="True" Grid.Column="0" Grid.Row="1" />
    <TextBox x:Name="textLatin" IsReadOnly="True" AcceptsReturn="True" Grid.Column="1" Grid.Row="1" />
</Grid>

Запустив, увидим на страничке два текстовых поля, причем в правом поле текст не редактируется. Свойство AcceptsReturn позволяет размещать в текстовом поле многострочный текст. Наша цель – конвертировать текст, вводимый на кириллице в левое текстовое поле (с именем textCyrillic), в латиницу, и выводить результат в текстовое поле textLatin справа. Для этого нам понадобится обрабатывать событие TextChanged у текстового поля textCyrillic, заменять символы кириллицы на соответствующие им символы латиницы и выводить результат в textLatin. Обрабатывать событие достаточно легко, нужно написать атрибут TextChanged у элемента TextBox, и Visual Studio сама предложит создать обработчик этого события:

pic

Выберем в меню View -> Code и увидим созданный обработчик textCyrillic_TextChanged, в который нам и нужно будет добавить логику конвертера.

Сам механизм достаточно прост: составим словарь соответствия символов или дифтонгов кириллицы латинице, затем создадим объект типа StringBuilder, пройдемся по словарю и произведем замену.
Внутри файла Page.xaml.cs, в единственный там класс Page, добавим поле словаря ConversionTable:

private Dictionary<string, string> ConversionTable = new Dictionary<string, string> {
  { "ац", "ats" }, { "оц", "ots" },  { "уц", "uts" }, { "иц", "its" }, { "ец", "yets" },
  { "Ац", "Ats" }, { "Оц", "Ots" },  { "Уц", "Uts" }, { "Иц", "Its" }, { "Ец", "Yets" },
  { "ўе", "o‘e" }, { "Ўе", "O‘ye" }, { "ье", "ye" },  { "ЬЕ", "Ye" },   { "ЕЦ", "YeTS" },  
  { "ае", "aye" }, { "ое", "oye" },  { "уе", "uye" }, { "ие", "iye" },
  { "Ае", "Aye" }, { "Ое", "Oye" },  { "Уе", "Uye" }, { "Ие", "Iye" },
  { "АЕ", "AYe" }, { "ОЕ", "OYe" },  { "УЕ", "UYe" }, { "ИЕ", "IYe" }, { "ЎЕ", "O‘Ye" },
  { "а", "a" },    { "А", "A" },  { "б", "b" },   { "Б", "B" },  { "в", "v" },   { "В", "V" },
  { "г", "g" },    { "Г", "G" },  { "дж", "j" },  { "Дж", "J" }, { "д", "d" },   { "Д", "D" },
  { " е", " ye" }, { "е", "e" },  { " Е", " Ye" }, { "E", "E" }, { "ё", "yo" },  { "Ё", "Yo" },
  { "ж", "j" },    { "Ж", "J" },  { "з", "z" },   { "З", "Z" },  { "и", "i" },   { "И", "I" },
  { "й", "y" },    { "Й", "Y" },  { "к", "k" },   { "К", "K" },  { "л", "l" },   { "Л", "L" },
  { "м", "m" },    {  "М", "M" }, { "н", "n" },   { "Н", "N" },  { "о", "o" },   { "О", "O" },
  { "п", "p" },    { "П", "P" },  { "р", "r" },   { "Р", "R" },  { "с", "s" },   { "С", "S" },
  { "т", "t" },    { "Т", "T" },  { "у", "u" },   { "У", "U" },  { "ў", "o‘" },  { "Ў", "O‘" },
  { "ғ", "g‘" },   { "Ғ", "G‘" }, { "ф", "f" },   { "Ф", "F" },  { "х", "x" },   { "Х", "X" },
  { "ҳ", "h" },    { "Ҳ", "H" },  { "қ", "q" },   { "Қ", "Q" },  { "ц", "s" },   { "Ц", "S" },
  { "ч", "ch" },   { "Ч", "Ch" }, { "ш", "sh" },  { "Ш", "Sh" }, { "щ", "sch" },{ "Щ", "Sch" },
  { "ъ", "‘" },    { "Ъ", "‘" },  { "ы", "i" },   { "Ы", "I" },  { "ь", "" },   { "Ь", "" },
  { "э", "e" },    { "Э", "E" },  { "ю", "yu" },  { "Ю", "Yu" }, { "я", "ya" },  { "Я", "Ya" },
  { "‘y", "y" }
};

При составлении данного словаря использовалось описание правил узбекской латиницы с Википедии: http://uz.wikipedia.org/wiki/Vikipediya:O%CA%BBzbek_lotin_alifbo_qoydalari

Теперь напишем сам обработчик события TextChanged следующим образом:

private void textCyrillic_TextChanged(object sender, TextChangedEventArgs e) {
   StringBuilder cyrillicText = new StringBuilder(textCyrillic.Text);
   foreach (var pair in ConversionTable) {
      cyrillicText.Replace(pair.Key, pair.Value);
   }
   textLatin.Text = cyrillicText.ToString();
}

Итак, почти все готово: при изменении текста в поле слева он будет мгновенно конвертироваться и выводиться в поле справа, уже на латинице. Но возникают следующие маленькие неприятности: во-первых, текстовое поле не переносит текст на следующую строку, когда он выходит за рамки, а во-вторых, текстовые поля совсем закрыли задний фон элемента. С первым сейчас справиться не получится, так как Silverlight 2.0 Beta 1 не поддерживает свойство TextWrapping у TextBox (скорее всего, его поддержка появится в будущем), поэтому используем обходной путь – добавим элемент прокрутки к текстовому полю, а для второго нам понадобится добавить отступы для текстового элемента и сделать его фон прозрачным.
Так же, как и в случае с WPF, у Silverlight проектов есть файл App.xaml, в котором можно определить стили элементов управления для последующего использования в приложении. Определим стили для элементов ScrollViewer и TextBox следующим кодом (его нужно вставить внутрь элемента Application.Resources):

<Style TargetType="ScrollViewer" x:Key="TextScroll">
    <Setter Property="HorizontalScrollBarVisibility" Value="Auto" />
    <Setter Property="VerticalScrollBarVisibility" Value="Auto" />
    <Setter Property="Margin" Value="4,0,4,0" />
</Style>
<Style TargetType="TextBox" x:Key="TextBoxDefault">
    <Setter Property="BorderThickness" Value="0" />
    <Setter Property="Background" Value="#C0FFFFFF" />
</Style>

Теперь заменим XAML код определения текстовых полей textCyrillic и textLatin на следующий фрагмент:

<ScrollViewer Style="{StaticResource TextScroll}" Grid.Column="0" Grid.Row="1">
  <TextBox x:Name="textCyrillic" Style="{StaticResource TextBoxDefault}"  
    TextChanged="textCyrillic_TextChanged" AcceptsReturn="True" />
</ScrollViewer>
<ScrollViewer Style="{StaticResource TextScroll}" Grid.Column="1" Grid.Row="1">
  <TextBox x:Name="textLatin" Style="{StaticResource TextBoxDefault}" IsReadOnly="True"
    AcceptsReturn="True" />
</ScrollViewer>

Таким образом, мы положили текстовые поля в элементы ScrollViewer, необходимые для того, чтобы прокрутка автоматически появлялась, когда текст в полях выходит за рамки. Посмотрим, что получилось – конвертер готов!

pic

Данный конвертер использует лишь маленькую часть потенциала Silverlight. Его можно было бы реализовать и при помощи других средств (HTML + JavaScript), однако это работало бы намного медленнее, выглядело бы хуже, а разработка, скорее всего, заняла бы существенно больше времени. Silverlight – большое и интересное поле для экспериментов и отличное средство для реализации новых идей, может быть, грядущего Web 3.0?

Автор: Андрей Скляревский, .NET разработчик, Microsoft Most Valuable Professional

Информация о конкурсе Версия для печати

Orphus system
Подписывайтесь на канал infoCOM.UZ в Telegram, чтобы первыми узнавать об ИКТ новостях Узбекистана
В Telegram
В Одноклассники
ВКонтакте