Введение в Silverlight 5

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

Хотя Silverlight еще довольно молодая технология - самая первая бета-вервия вышла в конце 2006 года, но она уже прошла большой путь. На сегодня текущей версией является Silverlight 5. Изначально создаваемый для Windows, сейчас Silverlight, благодаря проекту Mono, поддерживается в той или иной степени и другими ОС, том числе созданными на базе ядра Линукс, а также мобильной системой Windows Phone 7. Кроме того, Silverlight-приложения могут запускаться как в браузере, будучи органичной частью веб-страницы, так и в качестве обычных десктопных приложений.

Какие возможности предлагает Silverlight? Silverlight предоставляет функционал для создания динамичных сайтов и RIA-приложений. Он удобен при работе с графикой, в том числе с трехмерной, мультимедиа, он позволяет создавать интерактивные приложения с богатым и масштабируемым интерфейсом. Одной из особенностей Silverlight 5 является интеграция с XNA, что позволяет задействовать потенциал этой платформы.

Хотя для создания приложений нужно использвоать языки C# или VB.NET, а также XAML для интерфейса, Silverlight-приложения могут работать и без платформы .NET - необходимо лишь установить плагин Silverlight размером около 5-6 Мб для соответствующего браузера. В настоящее время Silverlight поддерживается всеми распространенными браузерами.

Для того, чтобы создавать Silverlight-приложения, нам потребуется среда разработки Visual Web Developer 2010 Express и средства разработки Silverlight 5 Tools for Visual Studio 2010 SP1 (их можно найти на официальном сайте http://www.silverlight.net/downloads)

Начало работы с Silverlight

После установке всего необходимого инструментария откроем среду Visual Web Developer 2010 Express. Затем в меню File (Файл) выберем New Project (Создать проект). В диалоговом окне создания проекта выберем шаблон Silverlight Application и назовем проект как-нибудь (например, SilverlightCalculator) и нажмем OK:

Далее в следующем окне от нас потребуется установить ряд параметров:

Что представляют эти параметры? Флажок Host the Silverlight Application in a new Web syte позволяет создать веб-проект, ассоциированный с данным Silverlight-приложением. При выборе этого флажка для нас становится доступным выбор типа создаваемого веб-проекта в поле New Web project type, где мы можем выбрать либо обычный ASP.NET веб-проект, либо веб-сайт либо проект MVC. Поскольку веб-проект мы создавать не будем, снимите галочку с этого флажка.

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

Ниже флажок Enable WCF RIA Services позволяет включить поддержку WCF-служб для приложения. Но в данном случае он нам не нужен, поэтому оставим его не отмеченным. Итоговые настройки должны выглядеть следующим образом:

После этого среда нам окроется проект с некоторыми автоматически генерируемыми файлами и кодом.

Теперь построем первое приложение. И начнем с Hello World. Для начала перейдем в окно XAML. Сейчас его содержимое выглядит следующим образом:

<UserControl x:Class="SilverlightCalculator.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">

    </Grid>
</UserControl>

Если вы раньше не работали с XAML, то вам следует знать, что XAML представляет язык на основе XML, который используется для декларативного описания интерфейса. Окно приложения в Silverlight представляет класс UserControl, поэтому с него и начинается объявление интерфейса.

В первой строке вы также встретите x:Class="SilverlightCalculator.MainPage". То есть наше окно - это класс MainPage, определенный в пространстве имен нашего проекта SilverlightCalculator и унаследованный от класса UserControl.

Далее в выражениях xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" мы подключаем в проект пространства имен XAML. Вражение xmlns:x означает, что мы отображаем пространства имен, идущее после знака равно, на литерал x.

В последней строке объявления окна d:DesignHeight="300" d:DesignWidth="400" мы устанавливаем размеры окна. Далее идет объявление корневого элемента Grid, который пока ничего не содержит.

С этим файлом интерфейса, который по умолчанию имеет имя MainPage.xaml, связан файл кода MainPage.xaml.cs, который также пока пуст:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace SilverlightCalculator
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
    }
}

Изменение кода приложения

Добавим в элемент Grid кнопку и зададим обработчик нажатия этой кнопки. Тогда XAML-файл будет выглядеть так:

<UserControl x:Class="SilverlightCalculator.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DesignHeight="300" d:DesignWidth="400">

    <Grid x:Name="LayoutRoot" Background="White">
		<Button Click="Button_Click">Hello World</Button>
    </Grid>
</UserControl>

У нас автоматически должен сгенерироваться обработчик Button_Click. Если этого не произошло, его можно добавить вручную. Код приложения в итоге должен выглядеть так:

using System;
.............

namespace SilverlightCalculator
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }
		
		private void Button_Click(object sender, RoutedEventArgs e)
        {
			MessageBox.Show("Hello Wolrd!");
		}
    }
}

Теперь нажмем F5 и запустим наше приложение. Откроется веббраузер, в котором вы увидите нашу кнопку.

После запуска проект компилируется, и создается ряд файлов. Вы можете их найти в папке bin->Debug(Release) проекта.

Здесь есть несколько файлов. В первую очередь надо отметить два файла. Первый - AppManifest.xml. Это файл манифеста приложения, необходимый для создания пакета. Второй - файл сборки приложения со всем функционалом (в данном случае SilverlightCalculator.dll). Именно из этих файлов формируется пакет с расширением XAP (в данном случае SilverlightCalculator.xap). По сути это архивный файл, в который и включаются все файлы приложения.

Также автоматически Visual Studio генерирует тестовую html-страничку, которая уже содержит всю необходимую разметку для запуска silverlight- приложения (в нашем случае файл SilverlightCalculatorTestPage.html). Если мы откроем файл в текстовом редакторе, то внизу файла после объявлений стилей и скриптов мы увидим разметку элемента object, который содержит ссылку на наше приложение:

.....................
    <form id="form1" runat="server" style="height:100%">
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
		  <param name="source" value="SilverlightCalculator.xap"/>
		  <param name="onError" value="onSilverlightError" />
		  <param name="background" value="white" />
		  <param name="minRuntimeVersion" value="5.0.61118.0" />
		  <param name="autoUpgrade" value="true" />
		  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=5.0.61118.0" style="text-decoration:none">
 			  <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
		  </a>
	    </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
    </form>

Как вы видите, в строке <param name="source" value="SilverlightCalculator.xap"/> указан пакет xap нашего приложения. Таким образом мы можем указывать для страницы нужное нам silverlight-приложение. Также обратите внимание на другие свойства. Так, в четвертой строке у нас заданы ширина и высота со значением 100%. Это настройки по умолчанию. Поэтому, когда мы запускаем приложение, оно растягивается на все окно браузера. Но мы можем изменить эти значения по своему усмотрению.