• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,167
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
1
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 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)
  • 2. 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?
  • 3. Platforma aplikacyjna Microsoft .NET Pełne spektrum możliwości Wspólna architektura i narzędzia Wdrażanie Programowanie Projektowanie Przeglądarka Aplikacja kliencka
  • 4. Ś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
  • 5. 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
  • 6. 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
  • 7. Silverlight w liczbach 18 miesięcy od czasu premiery
  • 8. Silverlight w liczbach 300m+ 18 miesięcy Pobranych od premiery wtyczek
  • 9. Silverlight w liczbach 400,000 18 miesięcy 300m+ Programistów od czasu Pobranych & premiery wtyczek projektantów Source: Microsoft Developer Tracker 2008 Report
  • 10. Silverlight w liczbach 400,000 200+ 18 miesięcy 300m+ Programistów partnerów w od czasu Pobranych & 30 krajach premiery wtyczek projektantów
  • 11. 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
  • 12. 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
  • 13. Warsztat pracy Web Design Blend Media Encoder Projektant Programista
  • 14. 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
  • 15. 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/
  • 16. {Hello World} i wszystko jasne
  • 17. 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
  • 18. Grafika – c.d. • Bitmap API • Pixel Shaders • Praca z tekstem (wsparcie dla lokalnych czcionek) • Akceleracja hardware’owa GPU • Kolory systemowe
  • 19. Deep Zoom • Płynne przeglądanie i powiększanie ogromnych obrazów • Tylko dane, które aktualnie ogląda użytkownik • Symuluje grafikę wektorową
  • 20. Deep Zoom • Narzędzie dzieli obraz na fragmenty 256 x 256 pix • Następnie generuje zdjęcia niższej rozdzielczości
  • 21. 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
  • 22. 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
  • 23. 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
  • 24. Deep Zoom w Silverlight • Wyświetlany przez MultiScaleImage • Narzędzie Deep Zoom Composer przygotowuje grafiki oraz plik XML z opisem
  • 25. Grafika w różnych odsłonach
  • 26. 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
  • 27. 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;/>
  • 28. 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>
  • 29. Jak wprowadzić wektory w ruch?
  • 30. Praca z danymi - kontrolki • Dołączanie kontrolek przez pliki DLL • UserControls • Silverlight Control Toolkit • Otwarty kod • Bardzo częste release’y projektu
  • 31. Binding - podstawy • Binding • OneWay • OneTime • TwoWay • Bindowanie 2 kontrolek • DataContext • ItemSource
  • 32. 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>
  • 33. 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));
  • 34. 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>
  • 35. 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
  • 36. Skórki - przykład
  • 37. 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
  • 38. 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>
  • 39. Bindowanie a szablony Dane (obiekty .NET): Bindujemy do ItemsControl (lista): {{FileName=“Html.html”, FileImageUrl=“html.jpg”}, {FileName=“Image.jpg”, FileImageUrl=“jpg.jpg”}}
  • 40. 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…
  • 41. Kontrolki i Data Binding
  • 42. 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();
  • 43. 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();
  • 44. 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(); }
  • 45. Komunikacja - inne • Wielowątkowość!!! • Sockets • Połączenia lokalne (bezpośrednie)
  • 46. Komunikacja i połączenia
  • 47. 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
  • 48. 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)
  • 49. Integracja z systemem operacyjnym
  • 50. 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)
  • 51. Multimedia • MediaElement - elastyczna, w pełni programowalna kontrolka • Gotowce: • Expression Encoder • Visual Studio (kontrolka MediaPlayer)
  • 52. 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
  • 53. Expression Encoder i IIS w akcji
  • 54. 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
  • 55. Behaviors
  • 56. Integracja HTML DOM - Silverlight System.Windows.Browser ScriptableObject jest HtmlPage. HtmlObject Window HtmlDocument HtmlElement
  • 57. 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) { ... }
  • 58. 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);
  • 59. 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
  • 60. 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
  • 61. …zamiast case studies
  • 62. 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
  • 63. Woodgrove Financials cd.
  • 64. 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)
  • 65. Patient Journey Demonstrator cd.
  • 66. 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 
  • 67. Program BizSpark
  • 68. 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
  • 69. Program BizSpark - partnerzy
  • 70. 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)
  • 71. 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.