Silverlight Training

Михаил Черномордиков
Developer Evangelist, Microsoft Россия
mikcher@microsoft.com
http://blogs.msdn.com/mikcher
http://www.remix.ru
http://www.remix.ru
Кросс-браузерная
кросс-платформенная
реализация .NET
для построения и распространения
следующего поколения
медиа
и
богатых интерактивных
приложений (RIA)
для
http://www.remix.ru
Web
Аудитория Silverlight
Поставщики контента
Привлекать посетителей интерактивными
высококачественными сайтами, включая видео и игры с
низкой ценой
Разработчики и дизайнеры
Ролевые средства для разработчиков и дизайнеров, с
использованием существующих навыков и знаний и с
базированием на существующих приложениях
Конечные пользователи
Сайты одинаково хорошо работают на Windows и Mac с
однократной легкой установкой плагина (~4.5MB)
http://www.remix.ru
Архитектура Silverlight
LINQ
Data
WPF for Silverlight
LINQ-to-XML
Extensible Controls
Dynamic
Languages
Ruby
Python
.NET for Silverlight
Web Services
REST
RSS
SOAP
BCL
Generic Collections
s
POX
JSON
Server
ASP.NET
AJAX
Libs
<asp:xaml>
<asp:media>
Common Language Runtime
XAML
UI Core
2D Vectors
Animation
Text
Images
Transforms
Inputs
Media
Controls
DRM
Keyboard
Mouse
Ink
WMV / VC1
WMA
MP3
Layout
Editing
Media
Presentation Core
Integrated
Networking
Stack
Browser Host
DOM
Integration
Installer
http://www.remix.ru
JavaScript
Engine
Silverlight 1
Silverlight 2
Legend
Производительность Silverlight 2
DHTML = 64 fps
Flash 9 / Flex 2 = 65 fps
Java (Swing) = 64 fps
Silverlight 1.0 = 64 fps
www.bubblemark.com
Silverlight 2 = 462 fps
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 Language
•
•
•
Декларативная разметка, поддержка инструментами
Код и представление разделены
Подмножество Windows Presentation Foundation XAML
XAML
<Button Width="100"> OK
<Button.Background>
LightBlue
</Button.Background>
</Button>
C#
Button b1 = new Button();
b1.Content = "OK";
b1.Background = new
SolidColorBrush(Colors.LightBlue);
b1.Width = 100;
http://www.remix.ru
VB.NET
Dim b1 As New Button
b1.Content = "OK"
b1.Background = New _
SolidColorBrush(Colors.LightBlue)
b1.Width = 100
Элементы управления
• Microsoft
предоставляет готовый
набор элементов
• Поставка с исходными
кодами и юнит-тестами
• Смоделированы после
элементов управления
WPF
• Расширяемые
• Большая партнерская
экосистема с более
специфическими
элементами
управления
http://www.remix.ru
Styling - стилизация
•
Определение стилей для задания внешнего вида
http://www.remix.ru
Skinning – поддержка шаблонов
• Полностью заменяет текущее представление, оставляя
прежнюю логику работы
http://www.remix.ru
Data Templates – шаблоны данных
class Car
{
string Image {get;set}
string Model {get;set]
}
DataTemplate
<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>
http://www.remix.ru
Databinding – связывание данных
Двустороннее связывание данных между
пользовательским интерфейсом и бизнесобъектами
 Уведомление через INotifyPropertyChanged
 DataContext наследуется через визуальное
дерево отрисовки


Из XAML
<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)
http://www.remix.ru
DeepZoom
• Работа с изображениями любого размера и разрешения
с оптимизацией ширина канала и размера загрузки
• Плавные переходы и масштабирование
http://www.remix.ru
http://www.remix.ru
Рефакторинг .NET
http://www.remix.ru
Core Base Class Library
System
System.Collections
System.Collections.Generic
System.Diagnostics
System.Globalization
System.IO
System.IO.IsolatedStorage
System.Reflection
System.Security
System.Security.Cryptography
System.Text
System.Threading
System
System.Collections.Generic
System.ComponentModel
System.Diagnostics
System.Text.RegularExpressions
System.Windows
System.Windows.Controls
System.Windows.Input
System.Windows.Interop
System.Windows.Media
System.Windows.Shapes
System.Windows.Threading
System.Windows.Browser
System.Linq
System.Linq.Expressions
System.Runtime.CompilerServices
System.Security.Cryptography
System.Xml
System.XmlSchema
System.Xml.Serialization
LINQ

Позволяет исполнять специальные запросы с проверкой
синтаксиса, строгой типизацией и Intellisense
 Работает на любом источнике на базе IEnumerable<T>


Поддерживает фильтрацию и сортировку данных в
памяти
Унифицированный доступ к различным источникам
○ LINQ to XML
○ LINQ to JSON*
○ LINQ to Objects
Возвращает отсортированный список
всех игроков с 20+ домашних игр
var filteredPlayers = from p in players
where p.HomeRuns > 20
orderby p.HomeRuns descending
select p;
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/crossdomain-policy.dtd">
<cross-domain-policy>
<allow-access-from domain="*" />
</cross-domain-policy>
<?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>
clientaccesspolicy.xml
http://www.remix.ru
Cross-domain.xml
http://www.remix.ru
OpenFileDialog
• Обеспечивает родной интерфейс ОС
• Sandboxed API возвращает безопасное имя
файла и поток на чтение
• Поддержка нескольких файлов
OpenFileDialog ofd= new
OpenFileDialog();
ofd.Filter =
"Text Files (*.txt)|*.txt|All files
(*.*)|*.*";
if (ofd.ShowDialog() ==
DialogResult.OK) {
http://www.remix.ru
Isolated Storage
• Основанный на потоках доступ к приватным файлам
и каталогам
• Основан на классах IsolatedStorage в .NET Framework
• Чтение и запись текстовых и бинарных данных
• Отдельное хранилище на каждое приложение
• Код приложения может запросить увеличение места
• Запрос пользователю на увеличение квоты
• Квота находится внутри заранее определенного
объема
• Увеличение квоты возможно только после явного
согласия пользователя
http://www.remix.ru
Silverlight на сервере

Silverlight работает с любым сервером
 Единственное требование – обработка XAML и XAP-
файлов
 Использование техник AJAX может улучшить интерфейс

ASP.NET AJAX поддерживает дополнительную
интеграцию
 <asp:xaml>
 <asp:media>
ASP.NET AJAX
Server Control
AJAX Control
(Script)
Silverlight
Component
(XAML, .NET)
http://www.remix.ru
HTML/AJAX и интеграция с .NET
веб-страница
HTML Silverlight
веб-страница
HTML
+
Silverlight
http://www.remix.ru
Работа с HTML/Javascript
ScriptObject
HtmlObject
HtmlElement
HtmlDocument
HtmlWindow
http://www.remix.ru
Доступ к HTML DOM из кода
HTML-доступ через пространство имен
using System.Windows.Browser;
Статический класс HtmlPage – единый доступ
HtmlPage.Navigate("http://www.microsoft.com");
String server = HtmlPage.DocumentUri.Host;
События, методы и свойства
HtmlElement myButton =
HtmlPage.Document.GetElementByID("myButtonID");
myButton.AttachEvent("onclick", new
EventHandler(this.myButtonClicked));
private void myButtonClicked(object sender, EventArgs e)
{ ... }
http://www.remix.ru
Доступ к коду из JavaScript
1.- Пометка свойств, методов и событий как [Scriptable]
[ScriptableMember]
public void Search(string Name) { ... }
2.- Регистрация объектов
HtmlPage.RegisterScriptableObject ("EntryPoint", this);
3.- Доступ к коду из скрипта
var control = document.getElementById("SilverlightControl");
control.Content.EntryPoint.Search(input.value);
http://www.remix.ru
http://www.remix.ru
Совместная работа разработчика и дизайнера
=
Взаимодействие дизайнера и разработчика
Дизайнер
Разработчик
•
Инструментарий Microsoft для
дизайнеров и разработчиков
•
Декларативная разработка с
помощью XAML
Создает дизайн
Добавляет бизнес логику
Интеграция с 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.com
http://blogs.msdn.com/mikcher
http://www.remix.ru