Знайомство з silverlight

Продукти та технології: Microsoft Silverlight (раніше відома під кодовим ім'ям WPF / E), Microsoft Expression Blend

В даному технічному документі міститься загальний огляд технології Silverlight і визначається її місце серед інструментів розробки веб-додатків нового покоління. (8 друкованих сторінок)

На цій сторінці…

Що таке Silverlight?

Silverlight - це назва нової технології подання даних в Інтернеті, призначеної для запуску на різних платформах. Вона дозволяє створювати насичені, візуально привабливі веб-сторінки, що працюють в різних браузерах, пристроях і настільних операційних системах (наприклад Apple Macintosh). Ключем до можливостей Silverlight, як і до всієї технології подання WPF (Windows Presentation Foundation) платформи Microsoft .NET Framework 3.0, є XAML (eX tensible A pplication M arkup L anguage, розширювана мова розмітки додатків).

Еволюція розробки веб-додатків. Перехід до Web.Next

Коли Тім Бернерс-Лі, співробітник CERN, винаходив сучасну технологію «веб», він задумував її як систему, що дозволяє зберігати і пов'язувати між собою статичні документи в мережевому середовищі. З плином часу і розвитком технологій наступним логічним кроком стала поява «активних» оновлюваних документів, які створюються за запитом з урахуванням призначеної для користувача інформації або часових параметрів. Це стало можливим завдяки таким технологіям, як CGI. Ще якийсь час по тому, можливість створення документів в Інтернеті стала основною, а технологія пройшла шлях від CGI через Java і ASP до ASP.NET.

Технологія ASP.NET стала віхою на шляху розробника до швидкого створення якісних веб-додатків за допомогою парадигми розробки на стороні сервера і оптимально підібраних інструментів серії Visual Studio.

Найбільшим бар'єром для веб-додатків став інтерфейс користувача, де технічні обмеження завадили надати той же зручність, що і клієнтські програми для ПК, що працюють з локальними даними.

Технологія Silverlight - наступний крок на шляху розширення можливостей, які розробники і дизайнери можуть надати споживачам. Вона дає дизайнерам можливість висловити свої творчі ідеї та зберегти результат в тому форматі, який можна відразу ж публікувати в Інтернеті. Дизайнери могли і раніше проектувати веб-сторінки, що надають багаті можливості користувачеві, але програмісти, які реалізують їх задуми, були змушені рахуватися з обмеженнями веб-платформ. В рамках моделі Silverlight будь створене дизайнерами рішення зберігається у вигляді XAML. Цей XAML-документ згодом автоматично вбудовується в веб-сторінку за допомогою середовища виконання Silverlight. В результаті дизайнер і програміст можуть працювати над кінцевим результатом більш злагоджено, ніж будь-коли раніше.

Однак, вистачить з нас теорії. Давайте перейдемо до практики і подивимося, яким вийде наш перший проект Silverlight.

Створення простого додатка за технологією Silverlight

Для початку спробуємо створити за допомогою Microsoft Expression Blend дуже просте XAML-додаток для Silverlight. Для цього в меню File (Файл) виберемо пункт New project (Створити проект), після чого з'явиться діалогове вікно New Project (Створення проекту).

Мал. 1. Створення нового проекту Silverlight з допомогою Expression Blend

Останній містить код для завантаження і створення екземпляра елемента управління Silverlight. Все це - частина комплекту Silverlight SDK.

Така схема використовується для поділу сторінки (default.html), коду створення екземплярів (default.html.js), дизайну (Scene.xaml) і обробників подій (Scene.xaml.js). Але вистачить теорії, приступимо до розробки.

Вибравши файл WMV і додавши його до проекту, ми побачимо, як той з'явиться в браузері проекту, а на поле буде додано елемент Media.

Мал. 2. Додавання медіа-елемента на XAML-поле

Додамо до додатка два текстових блоку, приписавши їм текст Play (Відтворення) і Stop (Зупинка) і імена txtPlay і txtStop відповідно. По завершенні XAML-код буде виглядати приблизно так:

Тепер додамо в код цих блоків обробники подій. Для цього оголосимо обробник клацання миші за допомогою атрибута MouseLeftButtonDown. До текстового блоку txtPlay додамо обробник DoPlay. а до блоку txtStop - обробник DoStop. По завершенні XAML буде виглядати так:

У медіа-елемента є методи Play і Stop. використовувані для запуску і зупинки відтворення.

Як викликається Silverlight

HTML-сторінка містить виклик методу createSilverlight (), що знаходиться в фоновому коді Default.html.js.

У нього передається ряд властивостей, в тому числі ті, що використовуються для вказівки відображуваного XAML-коду, зовнішнього вигляду елемента управління Silverlight і обробників подій onLoad і onError.

Властивість source: використовується для визначення XAML, який потрібно відобразити на сторінці. Це може бути зовнішній файл (як в нашому випадку) або розташований на сторінці іменований тег