Silverlight Training
реклама
Михаил Черномордиков Developer Evangelist, Microsoft Россия [email protected] 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 Россия [email protected] http://blogs.msdn.com/mikcher http://www.remix.ru
