Начинаем разработку на Silverlight: Часть 1

Начинаем разработку на Silverlight: Часть 1: Инструментарий и первое
приложение (Hello World)
Это первая статья из серии статей про разработку на Silverlight. Она основана на оригинальной серии
статей Тима Хьюа (Tim Heuer). В этой серии статьей с нуля будет разработано приложение, которое
ищет в Twitter сообщения с ключевыми словами и автоматически обновляет результат через
выбранный интервал времени. Перед тем как приступить непосредственно к разработке большого
приложения, убедимся, что у нас есть весь необходимый инструментарий для разработки и
разберёмся с некоторыми основами разработки на Silverlight.
Инструментарий
Как и любому разработчику, всё, что реально необходимо для разработки – это простой текстовый
редактор и компилятор, но сейчас было бы странно не использовать доступный инструментарий. То
что будет рассмотрено ниже – это набор инструментов, который позволяет разрабатывать на
Silverlight просто и быстро. Не все они являются необходимыми (всё что действительно нужно – это
notepad и компилятор, если вы хардкорный разработчик). Некоторые из них даже не бесплатные. Но
я рекомендую их использовать не потому что я работаю в Microsoft, а потому что я считаю, что это
лучший инструментарий для работы.
Visual Studio 2010
Для разработки на Silverlight потребуется Visual Studio 2010. Если у вас нет Visual Studio 2010, можно
использовать бесплатную версию Microsoft Visual Web Developer 2010 Express. Если вы собираетесь
разрабатывать для баз данных, можно воспользоваться бесплатной Microsoft SQL Server 2008 R2
Express
Silverlight Tools for Visual Studio
Silverlight Tools for Visual Studio – это дополнительно скачиваемый пакет, который устанавливает SDK,
среду исполнения для отладки и набор дополнений к Visual Studio (шаблоны проектов, цели сборки и
т.д.). Этот пакет, установленный поверх Visual Studio, предоставляет разработчику всё, что
необходимо, чтобы разрабатывать Silverlight приложения.
И Visual Studio, и Silverlight Tools for Visual Studio могут быть скачаны отдельно. Если Visual Studio уже
установлен, можно скачать и установить Silverlight Tools. Если Visual Studio не установлен, можно
воспользоваться программой Web Platform Installer, которая установить Visual Studio, SQL Server
Express и Silverlight Tools и все необходимые зависимости. Скачать Web Platform Installer можно здесь:
Если Visual Studio уже установлена, для установки Silverlight Tools также можно воспользоваться
WebPI, или же их можно скачать отдельно Silverlight Tools for Visual Studio
Expression Blend
Expression Blend – это интерактивный визуальный дизайнер для XAML, технологии описания
интерфейса для приложений Silverlight и Windows Presentation Foundation (WPF). Это отличное
средство разработки, которое позволяет просто манипулировать слоями, анимацией, стилями и
шаблонами. Это базовое средство разработки на XAML. Однако, Expression Blend не доступен
бесплатно. Он входит в некоторые уровни подписки MSDN, также он может быть приобретён, как
часть Expression Studio. Для целей изучения разработки на Silverlight, можно скачать пробную версию
Expression Blend. В следующей части Expression Blend будет использоваться для создания интерфейса
приложения.
Silverlight Toolkit
Silverlight Toolkit – это набор дополнительных элементов управления в дополнение к доступным в
составе основного SDK. Набор включает в себя разнообразные полезные элементы управления, такие
как календарь, выбор даты, дерево, закладки и т.д., а главное, все они доступны в исходных кодах,
так что их можно изучать и дополнять функционал.
Silverlight Toolkit доступен для скачивания с CodePlex и некоторые элементы управление из него будут
использоваться в приложении, которое будет разрабатываться на протяжении этой серии статей.
Есть и другие наборы элементов управления и инструментария, которые можно использовать,
например, .NET RIA Services, которые будут обсуждаться в дальнейшем. Но набор, описанный выше,
это минимальный рекомендуемый мной набор для разработки на Silverlight. Перед тем как
продолжить чтение, желательно их все установить.
Среда разработки
После установки средств разработки, в диалоге New Project в Visual Studio появятся группа проектов
на Silverlight:
После установки, разработчику будут доступны, как минимум, шаблоны Silverlight Application,
Silverlight Class Library и Silverlight Navigation Application. Наличие других шаблонов, которые видны на
снимке экрана, зависит от того какой дополнительный инструментарий установлен.
Для начала, выберем шаблон Silverlight Navigation Application, и дадим имя приложению (Я назову его
TwitterSearchMonitor).
В следующем окне, которое появится после нажатия кнопки OK, будет запрос на создание вебпроекта, который будет хостить наш Silverlight проект:
Для нового Silverlight приложения рекомендуется создавать веб-проект. Это позволит
разрабатываемому приложению на Silverlight исполняться в веб-контексте. Это позволяет избежать
лишних проблем при доступе к веб-сервисам из локальной файловой системы. Запуск приложения
сразу под HTTP позволит избежать самых распространенных ошибок при отладке доступа к вебсервисам. Можно выбрать из нескольких типов веб-приложений, если не уверены, какой тип
необходим, можно просто оставить тип по умолчанию.
Структура проекта
После создания приложения из шаблона, структура приложения будет выглядеть следующим
образом:
Создано два приложения: веб-приложение (которое хостит Silverlight приложение) с заранее
созданной тестовой страницей для приложения Silverlight и собственно само Silverlight приложение.
Рассмотрим проект Silverlight приложения.
Есть несколько ключевых файлов о которых надо помнить в процессе изучения серии статей:



App.xaml – это файл ресурсов приложения. Здесь располагаются глобальные ресурсы (это
будет рассмотрено при использовании стилей) или глобальные события (происходящие при
старте приложения). Этот файл также является точкой входа приложения.
MainPage.xaml – это часть выбранного шаблона приложения. Название MainPaige не очень
удачное, но именно оно используется шаблоном проекта по умолчанию. Этот страница
представляет интерфейс, который видит пользователь при старте приложения.
Папка Assets/Views – содержит файлы, картинки, стили и т.д., а также другие ресурсы,
относящиеся к интерфейсу пользователя приложения.
Файлы XAML определяют интерфейс приложения. Это просто XML файлы с языком разметки XAML.
Подробнее это будет рассмотрено на следующих шагах.
Если собрать приложение (сделайте это), можно заметить, что в папке ClientBin веб-приложения
появится новый файл с расширением XAP. Это наше скомпилированное Silverlight приложение. В
реальности – это архив (ZIP) с другим расширением файла. Если переименовать его в ZIP и открыть
архиватором, можно будет увидеть его содержимое.
Файл XAP – это то, что передаётся браузеру. Этот файл располагается на веб-сервере и доставляется
пользователю. XAP файл хостится на обычной HTML странице, которая хостит Silverlight приложение,
используя тег <object>.
Замечание: Silverlight – это клиентская технология, которая может хоститься на лбом сервере.
Это может быть любой тип веб-сервера, который может отдать XAP файл вместе с
правильным MIME типом (application/x-silverlight-app). Если веб-сервер умеет это делать,
неважно какого он типа.
При создании проекта из стандартного шаблона создаются ASP.NET и HTML тестовые страницы.
Поскольку в смысле тестирования нашего приложение они одинаковые, то одну из страниц можно
удалить для упрощения.
Добавление элементов управления на страницу XAML
Выбранный нами шаблон приложения – шаблон навигационного приложения, что означает, что
некоторые функции навигации в него уже встроены. Это достаточно новый функционал в Silverlight,
позволяющий иметь нечто вроде «мастер страницы» для приложения. Если посмотреть в папку Views,
можно увидеть About.xaml, ErrorWindows.xaml и Home.xaml. Давайте посмотрим на Home.xaml, так
как это первое загружаемое представление. Если щелкнуть по этому файлу двойным щелчком,
откроется окно Visual Studio c загруженным XAML.
На этой странице можно увидеть код XAML, который определяет представление в элементе Grid,
который содержит некоторые другие элементы управления, такие как StackPanel и TextBlocks
(элемент управления StackPanel будет рассмотрен в следующей части). Это всё базовый набор
элементов управления Silverlight. Элемент TextBlock позволяет отобразить текст пользователю. Если
сейчас запустить приложение (нажмите F5, чтобы запуститься в режиме отладки – отредактируйте
web.config, чтобы включить отладку) можно увидеть что-то подобное:
Обратите внимание, что текст в запущенном приложении совпадает с текстом в элементе управления
TextBlock в XAML. Также обратите внимание на стиль ссылок в правом верхнем углу. Это элементы
управления навигацией, которые позволяют переходить к отдельным представлениям. Давайте
добавим немого XAML и разберёмся, как писать код.
В файл Home.xaml, после второго TextBlock добавьте элемент управления Button, используя XAML:
<TextBlock x:Name="HeaderText" Style="{StaticResource HeaderTextStyle}"
Text="Home"/>
<TextBlock x:Name="ContentText" Style="{StaticResource ContentTextStyle}"
Text="Home page content"/>
<Button Content="Нажми меня" x:Name="MyButton" FontSize="18" Width="150" Height="45"/>
В окне дизайна кнопка отобразится сразу же после текста «Home page content». Обратили внимание
на атрибут x:Name? Это уникальный идентификатор элемента, который помогает ссылаться на него в
коде. Считайте это ID атрибутом элемента управления. Давайте теперь добавим какие-нибудь
действия при нажатии на эту кнопку. Есть два способа привязать событие к кнопке Button (или
любому другому элементу управления). В XAML, прямо в определении Button, можно добавить
атрибут Click и система InteliSense автоматически спросит, хотим ли мы сгенерировать новый
обработчик событий:
Можно связать обработчик событий напрямую в коде страницы Home.xaml.cs не указывая его в XAML
файле:
public Home()
{
InitializeComponent();
MyButton.Click +=new RoutedEventHandler(MyButton_Click);
}
Оба способа работают. Можете использовать любой из них. Для упрощения здесь будет
использоваться определение метода в XAML. Теперь в функции MyButton_Click можно написать
управляемый код, который будет изменять интерфейс или вызывать другие функции. Завершим наш
пример «Hellp World» приложения, добавив код, который будет изменятьтекст в TextBlock HeaderText
(HeaderText – это x:Name, так что можно ссылаться на неё напрямую в коде) на «Hello World». Чтобы
сделать это допишем следующий код в функцию:
private void MyButton_Click(object sender, RoutedEventArgs e)
{
HeaderText.Text = "Hello World!";
}
После выполнения этих изменений и запуск приложения заново (F5) можно увидит нашу кнопу, а при
нажатии на неё будет меняться текст, как показано ниже:
Следующие шаги
Мы создали наше первое Hello World приложение на Silverlight. Для того, чтобы написать
приложение, работающие с Twitter надо сделать намного больше. В следующей части мы изменим
вид нашего приложения.