Михаил ЧерномордиковDeveloper Evangelist, Microsoft Россия

mikcher@microsoft.comhttp://blogs.msdn.com/mikcher

http://www.remix.ru

http://www.remix.ru

Кросс-браузернаякросс-платформенная

реализация .NET

для построения и распространения следующего поколения

медиаи

богатых интерактивных приложений (RIA)

для Web

http://www.remix.ru

Аудитория Silverlight

Поставщики контентаПривлекать посетителей интерактивными высококачественными сайтами, включая видео и игры с низкой ценой

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

Конечные пользователиСайты одинаково хорошо работают на Windows и Mac с однократной легкой установкой плагина (~4.5MB)

http://www.remix.ru

Архитектура Silverlight

XAMLXAML

Browser Host

Integrated Networking

Stack

DOM Integration

InstallerJavaScript

Engine

Presentation Core

.NET for Silverlight

Inputs

KeyboardMouse

Ink

Media

WMV / VC1WMAMP3

ControlsLayout

Editing

UI Core

2D VectorsAnimation

Text

ImagesTransform

s

DRM

Media

Dynamic LanguagesRuby Python

BCLGeneric

sCollections

Web Services

RESTRSS

SOAP

POXJSON

Data

LINQ LINQ-to-XML

WPF for SilverlightExtensible

Controls

Common Language Runtime

ASP.NET AJAX Libs<asp:xaml

><asp:media>

Server Silverlight 1

Silverlight 2

Legend

http://www.remix.ru

Производительность Silverlight 2

DHTML = 64 fps Flash 9 / Flex 2 = 65 fps

Java (Swing) = 64 fps

Silverlight 1.0 = 64 fps

Silverlight 2 = 462 fps

www.bubblemark.com

Silverlight – текущий статус Silverlight 1.0 – вышел осенью 2007 Silverlight 2 – вышел 14 октября 2008

Установка с http://silverlight.net/getstarted/○ Silverlight 2 Runtime○ Silverlight Tools for Visual Studio 2008 SP1○ Expression Blend 2 SP1

Silverlight Toolkit – вышел 29 октября 2008Элементы управления

○ AutoCompleteBox, Chart, DockPanel, Label, Expander, TreeView, UpDown, ViewBox, WrapPanel, ImplicitStyleManager

Темы Silverlight 3 – 2009 год

AAC, H.264, 3D, hardware acceleration

http://www.remix.ru

Медиа сценарий Богатые возможности по работе с медиа

(полноэкранное, HD, потоковое, adaptive) Простое создание медиаплеера на сайте Комплексное медиа-решение Интерактивная реклама NBCOlympics.com – в среднем сессия

пользователя длилась 27 минут

Бизнес сценарий Интерактивные бизнес-приложения Конкурентное преимущество Технология Deep Zoom Авиалинии, финансы, медицина и др.

Развлекательный сценарий

Казуальные игры Создание своих собственных игр (Popfly) Использование технологии Deep Zoom Комплексное решение для развлечений

http://www.remix.ru

Presentation Core – Графика 2D графика

Основа на векторной графике Стандартные фигуры + «пути» (Paths) Маски и клиппинг Трансформации: skew, rotate, scale, translate, matrix

Основы анимации Основанная на времени Поддержка линейной, дискретной и сплайновой анимации Типы анимационных свойств:

○ Double, Color, Point Анимация и графика могут быть определены в XAML-

разметке ил в коде

Presentation Core - Видео

Качество

• Поддержка HD• Кодек VC-1

Интерактивность

• Видео – полноценный «житель»• Медиамаркеры• Видеокисть

Стоимость• Windows Media Server• Adaptive streaming• Byte range seeking• Silverlight Streaming• Throttling (c IIS7)

Форматы

• Видео: VC-1, WMV v7,v8,v9 • Аудио: WMA V7, V8, V9, MP3, WMA 10 Pro Защита контента

• PlayReady DRM для онлайн-просмотра

Декларативная разработка с XAML

Extensive Application Markup LanguageExtensive Application Markup Language•Декларативная разметка, поддержка инструментами

•Код и представление разделены•Подмножество Windows Presentation

Foundation XAML

<Button Width="100"> OK <Button.Background> LightBlue </Button.Background></Button>

XAML

Button b1 = new Button();b1.Content = "OK";b1.Background = new SolidColorBrush(Colors.LightBlue);b1.Width = 100;

C#

Dim b1 As New Buttonb1.Content = "OK"b1.Background = New _ SolidColorBrush(Colors.LightBlue)b1.Width = 100

VB.NET

http://www.remix.ru

Элементы управления

• Microsoft предоставляет готовый набор элементов• Поставка с исходными

кодами и юнит-тестами • Смоделированы после

элементов управления WPF

• Расширяемые

• Большая партнерская экосистема с более специфическими элементами управления

http://www.remix.ru

Styling - стилизация• Определение стилей для задания внешнего вида

http://www.remix.ru

Skinning – поддержка шаблонов • Полностью заменяет текущее представление, оставляя

прежнюю логику работы

http://www.remix.ru

Data Templates – шаблоны данных

<DataTemplate x:Key="carTemplate"> <Border BorderBrush="Blue" BorderThickness="2" Background="LightGray" Margin="10" Padding="15,15,15,5"> <StackPanel> <Image HorizontalAlignment="Center" Source="{Binding Path=Image}" /> <Border HorizontalAlignment="Center" BorderBrush="Navy" Background="#DDF“ BorderThickness="1" Margin="10" Padding="3"> <TextBlock FontSize="18" TextContent="{Binding Path=Model}" /> </Border> </StackPanel> </Border></DataTemplate>

class Car{ string Image {get;set} string Model {get;set]}

http://www.remix.ru

Databinding – связывание данных Двустороннее связывание данных между

пользовательским интерфейсом и бизнес-объектами

Уведомление через INotifyPropertyChanged DataContext наследуется через визуальное

дерево отрисовки

Из XAML

Из кода

http://www.remix.ru

<TextBlock Text="{Binding Nasdaq.Points, Mode=OneWay}"/>

Binding binding = new Binding("Nasdaq.Points");binding.Mode = BindingMode.OneWay;TextBlock tb = new TextBlock();tb.SetBinding(TextBlock.TextProperty, binding)

DeepZoom• Работа с изображениями любого размера и разрешения

с оптимизацией ширина канала и размера загрузки• Плавные переходы и масштабирование

http://www.remix.ru

http://www.remix.ru

Рефакторинг .NET

http://www.remix.ru

Core Base Class LibrarySystem.WindowsSystem.Windows.ControlsSystem.Windows.InputSystem.Windows.InteropSystem.Windows.MediaSystem.Windows.ShapesSystem.Windows.Threading

System.Windows.Browser

SystemSystem.CollectionsSystem.Collections.GenericSystem.DiagnosticsSystem.GlobalizationSystem.IOSystem.IO.- IsolatedStorageSystem.ReflectionSystem.SecuritySystem.Security.CryptographySystem.TextSystem.Threading

SystemSystem.Collections.GenericSystem.ComponentModelSystem.DiagnosticsSystem.Text.RegularExpressions

System.LinqSystem.Linq.ExpressionsSystem.Runtime.CompilerServicesSystem.Security.Cryptography

System.XmlSystem.XmlSchemaSystem.Xml.Serialization

LINQ Позволяет исполнять специальные запросы с проверкой

синтаксиса, строгой типизацией и Intellisense Работает на любом источнике на базе IEnumerable<T>

Поддерживает фильтрацию и сортировку данных в памяти

Унифицированный доступ к различным источникам○ LINQ to XML○ LINQ to JSON*○ LINQ to Objects

var filteredPlayers = from p in players where p.HomeRuns > 20 orderby p.HomeRuns descending select p;

Возвращает отсортированный список всех игроков с 20+ домашних игр

http://www.remix.ru

Dynamic Language Run-time (DLR)• Движок и языки с открытым исходным кодом• Script Server (Chiron) для локальной разработки• Возможности по отладкеclass App: def __init__(self): self.scene = Application.Current.LoadRootVisual("app.xaml") def start(self): self.scene.Message.Text = "Welcome to Silverlight and IronPython!" App().start()

class App def initialize @scene = System::Windows::Application.Current.LoadRootVisual "app.xaml" end def start @scene.find_name('message').text = "Welcome to Silverlight and IronRuby!" end end App.new.start

Import("System.Windows.Application") function App() { this.scene = Application.Current.LoadRootVisual("app.xaml") } App.prototype.start = function() {this.scene.Message.Text = "Welcome to Silverlight and Managed JScript!" } app = new App app.start()

http://www.remix.ru

http://www.remix.ru

Сетевое взаимодействие• Асинхронные HTTP-запросы

• GET/POST • Доступ к большинству заголовков, cookies

• Использует сетевой стек браузера• Работа с кэшем, аутентификация, прокси,

сжатие данных

http://www.remix.ru

Веб-сервисыSOAP 1.1

○ Базовый профиль○ Несколько ограничений (например, не

поддерживаются SOAP Faults)Асинхронный доступРабота в соответствии с кросс-доменными

ограничениямиСвязывание данных через прокси

http://www.remix.ru

Сокеты• Только TCP • Асинхронный API • Нет явного связывания, нет поддержки

режиме listen/accept• Ограничения по портам (4502-4534) void Connect(AddressFamily family){ SocketAsyncEventArgs connectArgs = new SocketAsyncEventArgs(); connectArgs.RemoteEndPoint = new DnsEndPoint( Application.Current.Host.Source.Host, 4502); connectArgs.Completed += new EventHandler<SocketAsyncEventArgs>(OnConnectCompleted); socket = new Socket(family, SocketType.Stream, ProtocolType.Tcp); if (!socket.ConnectAsync(connectArgs)) OnConnectCompleted(socket, connectArgs);}

http://www.remix.ru

Поддержка кросс-доменного доступа• 2 формата:

• Flash policy file• Silverlight policy file

<?xml version="1.0"?><!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"><cross-domain-policy> <allow-access-from domain="*" /></cross-domain-policy>

Cross-domain.xml

clientaccesspolicy.xml

<?xml version="1.0"?><access-policy> <cross-domain-access> <policy> <allow-from> <domain uri="http://customers.shop.com”/>" <domain uri="http://partner.com/app.xap"/> </allow-from> <grant-to> <grant path="/sales/serialnumbers.xml" /> <grant path="/partners" include-subpaths="false"/> </grant-to> </policy> </cross-domain-access></access-policy>

http://www.remix.ru

http://www.remix.ru

OpenFileDialog• Обеспечивает родной интерфейс ОС• Sandboxed API возвращает безопасное имя

файла и поток на чтение• Поддержка нескольких файлов

http://www.remix.ru

OpenFileDialog ofd= new OpenFileDialog();ofd.Filter = "Text Files (*.txt)|*.txt|All files (*.*)|*.*";if (ofd.ShowDialog() == DialogResult.OK) {

Isolated Storage• Основанный на потоках доступ к приватным файлам

и каталогам• Основан на классах IsolatedStorage в .NET Framework• Чтение и запись текстовых и бинарных данных• Отдельное хранилище на каждое приложение• Код приложения может запросить увеличение места

• Запрос пользователю на увеличение квоты• Квота находится внутри заранее определенного

объема• Увеличение квоты возможно только после явного

согласия пользователя

http://www.remix.ru

Silverlight Silverlight ComponentComponent

(XAML, .NET)(XAML, .NET)

AJAX ControlAJAX Control(Script)(Script)

ASP.NET AJAX ASP.NET AJAX Server ControlServer Control

Silverlight на сервере Silverlight работает с любым сервером

Единственное требование – обработка XAML и XAP-файлов

Использование техник AJAX может улучшить интерфейс ASP.NET AJAX поддерживает дополнительную

интеграцию<asp:xaml><asp:media>

http://www.remix.ru

HTML/AJAX и интеграция с .NET

веб-страница

HTMLHTML SilverligSilverlightht

HTMLHTMLHTML HTML + +

Silverlight Silverlight

веб-страница

http://www.remix.ru

Работа с HTML/Javascript

HtmlObjectHtmlObjectHtmlObjectHtmlObject

ScriptObjectScriptObjectScriptObjectScriptObject

HtmlDocHtmlDocumentument

HtmlDocHtmlDocumentument

HtmlWinHtmlWindowdow

HtmlWinHtmlWindowdow

HtmlElemHtmlElementent

HtmlElemHtmlElementent

http://www.remix.ru

Доступ к HTML DOM из кодаHTML-доступ через пространство имен

HtmlPage.Navigate("http://www.microsoft.com");String server = HtmlPage.DocumentUri.Host;

using System.Windows.Browser;

HtmlElement myButton = HtmlPage.Document.GetElementByID("myButtonID");myButton.AttachEvent("onclick", new EventHandler(this.myButtonClicked));

private void myButtonClicked(object sender, EventArgs e) { ... }

Статический класс HtmlPage – единый доступ

События, методы и свойства

http://www.remix.ru

Доступ к коду из JavaScript

1.- Пометка свойств, методов и событий как [Scriptable]

HtmlPage.RegisterScriptableObject ("EntryPoint", this);

[ScriptableMember]public void Search(string Name) { ... }

var control = document.getElementById("SilverlightControl");control.Content.EntryPoint.Search(input.value);

2.- Регистрация объектов

3.- Доступ к коду из скрипта

http://www.remix.ru

http://www.remix.ru

Совместная работа разработчика и дизайнера

Взаимодействие дизайнера и разработчика

• Инструментарий Инструментарий Microsoft Microsoft для дизайнеров и для дизайнеров и разработчиковразработчиков

• Декларативная разработка с Декларативная разработка с помощью помощью XAMLXAML

Создает дизайнСоздает дизайн Добавляет бизнес логикуДобавляет бизнес логику

Дизайнер Разработчик

Интеграция с ASP.NET

• Два серверных элемента в ASP.NET• Поставляются с SDK: System.Web.Silverlight.dll• Развертываются в папку /bin• Доступны в design-time в Visual Studio

• Соответствующие AJAX-типы• Оба элемента предоставляют клиентский

доступ через JavaScript

http://www.remix.ru

Silverlight и WPF Silverlight связан с WPF

Плюс дополнительные веб-возможности и кросс-платформенность

Минус мощность локальных ресурсов

Стратегия повторного использованияТе же уменияТе же инструментыТе же XAML и внешний видSilverlight-код работает в WPF с минимальными

изменениями

http://www.remix.ru

Silverlight и .NET: вместе веселее Мощная библиотека для разработки

Поддержка нескольких языков Последние инновации (LINQ, Generics) Интеграция с AJAX

Удобные инструменты Visual Studio Expression Studio

Кросс-платформенность и кросс-браузерность Официальная поддержка в Safari, Firefox и Internet Explorer Официальная поддержка Mac OS X и Windows Любой веб-сервер Быстрая и легкая установка

Безопасное расширение веб-песочницы Off-line storage, OpenFileDialog, Sockets, cross-domain

http://www.remix.ru

http://www.remix.ru

Михаил ЧерномордиковDeveloper Evangelist, Microsoft Россия

mikcher@microsoft.comhttp://blogs.msdn.com/mikcher

http://www.remix.ru