Silverlight z bliska i na wylot

Silverlight z bliska i na wylot Michał Żyliński (Michal.Zylinski@microsoft.com, http://blogs.msdn.com/michalz) Bartłomiej Zass (Bartlomiej.Zass@microsoft.com)

Agenda • Czym jest Silverlight? Od pomysłu do realizacji • Pierwsza aplikacja – narzędzia i architektura • Na wylot: • Grafika i animacja • Zarządzanie danymi • Zagadnienia programistyczne (komunikacja, bezpieczeństwo itp.) • Media • Integracja z przeglądarką • Co w przyszłości? • Gdy sprawy się komplikują… • Zastosowania • Co dalej?

Platforma aplikacyjna Microsoft .NET Pełne spektrum możliwości Wspólna architektura i narzędzia Wdrażanie Programowanie Projektowanie Przeglądarka Aplikacja kliencka

Święty Graal programistów • Jeden sposób definiowania wyglądu aplikacji • … pozwalający na prosty, deklaratywny sposób opisu • Separacja zasobów od kodu • Prosta linia podziału pomiędzy projektantami a programistami • Łatwy w przetwarzaniu i generowaniu przez narzędzia <Button Width=quot;100quot;>OK Button b1 = new Button(); Dim b1 As New Button <Button.Background> b1.Content = quot;OKquot;; b1.Content = quot;OKquot; LightBlue b1.Background = new b1.Background = New _ </Button.Background> SolidColorBrush SolidColorBrush _ </Button> (Colors.LightBlue); (Colors.LightBlue) b1.Width = 100; b1.Width = 100

Microsoft Silverlight = Niezależna od przeglądarki Niezależna od platformy Niezależna od urządzenia Wtyczka pozwalająca na tworzenie interaktywnych aplikacji internetowych Wykorzystująca możliwości platformy .NET

Architektura Silverlight 1 .NET for Silverlight Server Dane WPF for Silverlight Silverlight 2 LINQ LINQ-to-XML Extensible Controls Web Services ASP.NET AJAX Legenda REST Języki dynamic BCL POX Libs <asp:xaml> RSS JSON Ruby Python Generic Collections SOAP <asp:media> s Common Language Runtime XAML UI Core Inputs Media Controls DRM 2D Vectors Images Keyboard WMV / VC1 Layout Media Animation Transforms Mouse WMA Editing Text Ink MP3 Presentation Core Integrated DOM JavaScript Networking Installer Integration Engine Stack Browser Host

Silverlight w liczbach 18 miesięcy od czasu premiery

Silverlight w liczbach 300m+ 18 miesięcy Pobranych od premiery wtyczek

Silverlight w liczbach 400,000 18 miesięcy 300m+ Programistów od czasu Pobranych & premiery wtyczek projektantów Source: Microsoft Developer Tracker 2008 Report

Silverlight w liczbach 400,000 200+ 18 miesięcy 300m+ Programistów partnerów w od czasu Pobranych & 30 krajach premiery wtyczek projektantów

Silverlight w liczbach 400,000 200+ 200+ 18 miesięcy 300m+ Programistów Stron i partnerów w od czasu Pobranych & produktów 30 krajach premiery wtyczek projektantów MS

Silverlight w liczbach Tysiące 400,000 200+ 200+ 18 miesięcy 300m+ aplikacji na Programistów Stron i partnerów w od czasu Pobranych całym & produktów 30 krajach premiery wtyczek świecie projektantów MS www.silverlight.net/showcase

Warsztat pracy Web Design Blend Media Encoder Projektant Programista

Warsztat pracy cd. 1. Visual Studio (może być Web Developer Express) 2. Silverlight runtime 3. Silverlight SDK 4. Silverlight Tools for Visual Studio 2008 5. Expression Blend 3 Beta Wszystko to (i wiele więcej) dostępne przez Web Platform Installer: http://www.microsoft.com/web

Warsztat pracy cd. • Możliwość tworzenia aplikacji Silverlight w środowisku Eclipse • Działa również pod Mac OS X • Open Source • Rozwijane zewnętrznymi siłami przy wsparciu MS http://www.eclipse4sl.org/

{Hello World} i wszystko jasne

Grafika • XAML, XAML, XAML i wszechobecne wektory • Rozmieszczenie elementów • Canvas, Grid, StackPanel, Border, Custom Layout • Margin, Padding, itd. • Przestrzeń 3D • Integracja z innymi narzędziami • np. Adobe Photoshop, Adobe Illustrator

Grafika – c.d. • Bitmap API • Pixel Shaders • Praca z tekstem (wsparcie dla lokalnych czcionek) • Akceleracja hardware’owa GPU • Kolory systemowe

Deep Zoom • Płynne przeglądanie i powiększanie ogromnych obrazów • Tylko dane, które aktualnie ogląda użytkownik • Symuluje grafikę wektorową

Deep Zoom • Narzędzie dzieli obraz na fragmenty 256 x 256 pix • Następnie generuje zdjęcia niższej rozdzielczości

Deep Zoom – jak działa? • Obrazy najniższej rozdzielczości wyświetlane w pierwszej kolejności • Po pobraniu obrazów lepszej jakości, następuje płynne podmienianie

Deep Zoom w Silverlight • Wyświetlany przez MultiScaleImage • Narzędzie Deep Zoom Composer przygotowuje grafiki oraz plik XML z opisem

Grafika w różnych odsłonach

Animacja • Wszystko jest obiektem • Transformacje, skala, przezroczystość, itp. • Storyboard • Animować można dowolną właściwość • Modyfikacja wartości (od-do-co ile) • Typy animacji • Animacja liniowa • Spline • Własny typ, wzór, itp. • Key frames

Liniowo – od kuchni <DoubleAnimation Duration=quot;0:0:10quot; Storyboard.TargetName=quot;myTranslatequot; Storyboard.TargetProperty=quot;Xquot; To=quot;700quot; AutoReverse=quot;Truequot; RepeatBehavior=quot;Foreverquot;/>

KeyFrames – od kuchni <DoubleAnimationUsingKeyFrames Duration=quot;0:0:4.5quot; Storyboard.TargetName=quot;myTranslatequot; Storyboard.TargetProperty=quot;Yquot; RepeatBehavior=quot;Foreverquot;> <LinearDoubleKeyFrame Value=quot;0quot; KeyTime=quot;0:0:0quot;/> <SplineDoubleKeyFrame Value=quot;375quot; KeyTime=quot;0:0:2.2quot; KeySpline=quot;0, 0, 0.5, 0quot;/> <LinearDoubleKeyFrame Value=quot;375quot; KeyTime=quot;0:0:2.25quot;/> <SplineDoubleKeyFrame Value=quot;0quot; KeyTime=quot;0:0:4.5quot; KeySpline=quot;0, 0, 0, 0.5quot;/> </DoubleAnimationUsingKeyFrames>

Jak wprowadzić wektory w ruch?

Praca z danymi - kontrolki • Dołączanie kontrolek przez pliki DLL • UserControls • Silverlight Control Toolkit • Otwarty kod • Bardzo częste release’y projektu

Binding - podstawy • Binding • OneWay • OneTime • TwoWay • Bindowanie 2 kontrolek • DataContext • ItemSource

Binding do 1 wartości (XAML) <Grid x:Name=quot;LayoutRootquot; Background=quot;Whitequot; HorizontalAlignment=quot;Centerquot; > <TextBox VerticalAlignment=quot;Topquot; IsReadOnly=quot;Truequot; Margin=quot;5quot; TextWrapping=quot;Wrapquot; Height=quot;50quot; Width=quot;200quot; Text=quot;{Binding Mode=OneWay}quot; x:Name=quot;textBox1quot;/> </Grid>

Binding do 1 wartości (CS) // Obiekt biznesowy public class Recording { public Recording() { } public Recording(string artistName, string cdName, DateTime release) { Artist = artistName; Name = cdName; ReleaseDate = release; } public string Artist { get; set; } public string Name { get; set; } public DateTime ReleaseDate { get; set; } // Override the ToString method. public override string ToString() { return Name + quot; by quot; + Artist + quot;, Released: quot; + ReleaseDate.ToShortDateString(); } } // Binding textBox1.DataContext = new Recording(quot;Chris Sellsquot;, quot;Chris Sells Livequot;, new DateTime(2008, 2, 5));

Binding do kolekcji <StackPanel x:Name=quot;LayoutRootquot; Background=quot;Whitequot;> <ComboBox x:Name=quot;ComboBox1quot; Margin=quot;5quot; Height=quot;40quot; Width=quot;300quot; ItemsSource=quot;{Binding Mode=OneWay}quot; /> </StackPanel>

Skórki • Aplikowanie styli in-line • Nie ma sensu dla wielu kontrolek powielać te same wpisy • Szablony / tematy (Resources) • Page.xaml – ograniczone do okna • App.xaml • Style też są obiektem – możliwość tworzenia skórek tematycznych (np. przechowywanych w osobnych plikach XAML niezależnie od aplikacji) • Kaskadowość, dziedziczenie • Zmiany w trakcie działania aplikacji

Skórki - przykład

Visual State Manager (VSM) • Definiowane stany kontrolek • Np. MouseOver, MouseDown, itp. • Możliwość definiowania stylu kontrolki w poszczególnych stanach • Możliwość definiowania charakteru przejść pomiędzy stanami • Obsługują wszystkie kontrolki dostarczane przez Microsoft • Zalecenia dla firm tworzących kontrolki

DataTemplate • Możliwość zmodyfikowania wyglądu elementów • Np. DataGrid!!! • Inne – np. Combobox <ComboBox x:Name=quot;ComboWithTemplatequot; ItemsSource=quot;{Binding Mode=OneWay}quot; > <ComboBox.ItemTemplate> <DataTemplate> <StackPanel Orientation=quot;Horizontalquot; Margin=quot;2quot;> <TextBlock Text=quot;Artist:quot; Margin=quot;2quot; /> <TextBlock Text=quot;{Binding Artist}quot; Margin=quot;2quot; /> <TextBlock Text=quot;CD Name:quot; Margin=quot;10,2,0,2quot; /> <TextBlock Text=quot;{Binding Name}quot; Margin=quot;2quot; /> </StackPanel> </DataTemplate> </ComboBox.ItemTemplate> </ComboBox>

Bindowanie a szablony Dane (obiekty .NET): Bindujemy do ItemsControl (lista): {{FileName=“Html.html”, FileImageUrl=“html.jpg”}, {FileName=“Image.jpg”, FileImageUrl=“jpg.jpg”}}

LINQ • Language Integrated Query • Składnia T-SQL zintegrowana z językiem C# • Weryfikacja na etapie kompilacji • Dla XML lub dowolnych kolekcji (IEnumerable) • Już nie tylko XQuery…

Kontrolki i Data Binding

Komunikacja przez HTTP(s) • Bazuje na przeglądarce internetowej (ciasteczka, nagłówki) • Cross-domain • Plik policy (silverlight -> flash policy) Tworzenie żądania Uri dataLocation = new Uri(quot;http://localhost/oceny.xmlquot;); BrowserHttpWebRequest request = new BrowserHttpWebRequest(dataLocation); HttpWebResponse response = (HttpWebResponse)request.GetResponse(); Przetwarzanie odpowiedzi serwera StreamReader responseReader = new StreamReader(response.GetResponseStream()); string RawResponse = responseReader.ReadToEnd();

Usługi Web Services • Klasy proxy generowane przez Visual Studio (add service reference) • JSON, SOAP, REST/POX, itp. • Windows Communication Foundation (WCF) Metoda usługi sieciowej [WebMethod] public List<Transaction> GetTransactionList() { ... } Wywoływanie usługi z poziomu klienta proxy = new BankProxy(); transactionList = proxy.GetTransactionList().ToList();

Asynchroniczna komunikacja • Wsparcie zarówno dla synchronicznej i asynchronicznej komunikacji Wywołaj asynchroniczne zapytanie proxy.BeginGetTransactionList( new AsyncCallback(OnTransactionDataLoaded), null); Po otrzymaniu odpowiedzi – wywołaj kod private void OnTransactionDataLoaded(IAsyncResult iar) { transactionList = proxy.EndGetTransactionList(iar).ToList(); }

Komunikacja - inne • Wielowątkowość!!! • Sockets • Połączenia lokalne (bezpośrednie)

Komunikacja i połączenia

Bezpieczeństwo • Aplikacje Silverlight działają w środowisku chronionym – sandbox • Isolated storage – brak bezpośredniego dostępu do zasobów systemowych • Kawałek przestrzeni pozwalającej na przechowywanie danych w strukturze słownikowej (klucz-wartość) lub struktury katalogi/pliki • Dostępna w kontekście jednego użytkownika i jednej aplikacji • Domyślna wielkość – 1MB (z możliwością powiększenia) • Przechowywanie danych tekstowych i binarnych • Użytkownik ma kontrolę nad isolated storage

Integracja z OS • Operacje I/O: • File (Create, Exists, Delete, OpenDialog, SaveDialog) • Directory (Exists, Create, Delete, GetFileNames) • Quota (GetCurrentQuota, IncreaseQuotaTo, GetAvailableSpace) • Scenariusze offline • Wystarczy zmiana manifestu aplikacji! • Wykrywanie podłączenia do sieci • Integracja z powłoką systemową (menu start, pulpit) • Wykorzystywanie właściwości Win7 (multitouch, integracja z GPS)

Integracja z systemem operacyjnym

Multimedia • Silverlight zawiera wbudowane kodeki: • Wideo: VC-1, WMV 7,8,9, H.264 (Nowość) • Audio: WMA 7-10 Pro, MP3, AAC (Nowość) • Jakość aż do pełnego HD (1080p) • Od v.2 wsparcie dla PlayReady DRM (kompatybilne wstecz z WM DRM) • Od v.3 odtwarzanie multimediów może wykorzystywać zewnętrzne kodeki – otwarta architektura • Akceleracja sprzętowa (przydatna szczególnie przy pełnoekranowym HD)

Multimedia • MediaElement - elastyczna, w pełni programowalna kontrolka • Gotowce: • Expression Encoder • Visual Studio (kontrolka MediaPlayer)

Multimedia - dygresja serwerowa • Bezpłatne rozszerzenia do Windows Server 2008 • Windows Media Services • IIS Media Services • Rozszerzenie funkcjonalności serwera WWW • Smooth Streaming (również w trybie Live!) • Web Playlists • Bitrate throttling • Edge caching • Advanced logging

Expression Encoder i IIS w akcji

Behaviors • Możliwość stworzenia własnych, powtarzalnych wzorców zachowań • Niezależne od obiektów/kontrolek • Znacznie ułatwia komunikację projektant <-> programista • 2 typy: • Akcje (kiedy …. zrób … ) Behave • Zachowania

Behaviors

Integracja HTML DOM - Silverlight System.Windows.Browser ScriptableObject jest HtmlPage. HtmlObject Window HtmlDocument HtmlElement

Dostęp do HTML DOM z kodu zarządzanego Nowa przestrzeń nazw using System.Windows.Browser; Statyczna klasa HtmlPage – punkt dostępowy HtmlPage.Navigate(quot;http://www.microsoft.comquot;); String server = HtmlPage.DocumentUri.Host; Podpinamy zdarzenia, wywołujemy metody, dostajemy się do właściwości HtmlElement myButton = HtmlPage.Document.GetElementByID(quot;myButtonIDquot;); myButton.AttachEvent(quot;onclickquot;, new EventHandler(this.myButtonClicked)); private void myButtonClicked(object sender, EventArgs e) { ... }

Dostęp do kodu zarządzanego z JavaScript Oznacz właściwość, zdarzenie lub metodę jako [Scriptable] [Scriptable] public void Search(string Name) { ... } Zarejestruj „punkt dostępowy” do obiektu WebApplication.Current.RegisterScriptableObject (quot;EntryPointquot;, this); Wykorzystaj kod zarządzany z poziomu JavaScript var control = document.getElementById(quot;SilverlightControlquot;); control.Content.EntryPoint.Search(input.value);

SketchFlow • Blend 3 pozwala na szybkie, wizualne prototypowanie aplikacji • Działa niezależnie od typu aplikacji: WPF, Silverlight • Gotowy player pozwalający na interaktywną prezentację u klienta Start Navigation Main Menu Data Entry

Architektura • Dużo nacisku na separację 3 warstw aplikacji i porządek w kodzie • Patterns & Practices • Dział w Microsoft składający się z architektów, który opracowuje opisy najlepszych praktyk architektonicznych • Tworzenie specjalnych frameworków, przykładów poprawnie zaprojektowanych architektur • Application Architecture Guidance • PRISM • .NET RIA Services

…zamiast case studies

Woodgrove Financials • Demo aplikacji finansowej przygotowanej na Financial Services Developer Conference 2008 • Przykład wykorzystania RIA do rozwiązania typowych problemów dziedzinowych: agregacja i wizualizacja danych, bogata, intuicyjna nawigacja, alternatywne podejście do obsługi klienta • Kod źródłowy: http://www.financialdevelopers.com/ • Wersja on-line: http://www.cookingwithxaml.com/meals/financials/ default.html

Woodgrove Financials cd.

Patient Journey Demonstrator • Przykładowa aplikacja prezentująca możliwości Microsoft Health Common User Interface (http://www.mscui.net) • MS CUI to zbiór zaleceń praktycznych dotyczących projektowania interfejsu aplikacji medycznych oraz gotowych kontrolek i przykładów (WPF i Silverlight) • PJD to przykład realizacji całkowitego scenariusza obsługi pacjenta: od rejestracji po badania specjalistyczne • Doskonałe wykorzystanie idei S+S (ścisła integracja z zewnętrznymi usługami, elastyczne i skalowalne UI)

Patient Journey Demonstrator cd.

Ciekawostki ze świata • www.kbb.com/KBB/PerfectCarFinder/PhotoEdition.asp x • http://code.google.com/p/myspace-silverlight-sdk/ • http://www.netflix.com • http://www.k2.com/en/displaycontent.aspx?ID=901 • http://dobbschallenge2.com/ - a jednak się gra 

Program BizSpark

Program BizSpark • Oferta dla młodych przedsiębiorców (nie tylko przedsiębiorstw!) • Formalne kryteria: • Działalność software’owa • Mniej niż 3 lata • Poniżej 0,5 mln $ przychodu • Dostęp do programu poprzez jednego z polskich partnerów biznesowych

Program BizSpark - partnerzy

Następne kroki • Konferencje, seminaria, warsztaty… • Np. Microsoft Web Days 2009 w Warszawie (22. kwietnia) • Lokalne społeczności • Np. Krakowska Grupa .NET (szczegóły na http://www.ms-groups.pl) • Bezpośrednio • Michał Żyliński (michal.zylinski@microsoft.com, http://blogs.msdn.com/michalz) • Bartłomiej Zass (bartlomiej.zass@microsoft.com)

s © 2009 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Silverlight z bliska i na wylot

by Michal Zylinski on Apr 17, 2009

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 34

Statistics

Silverlight z bliska i na wylot — Presentation Transcript