1. Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?Michał Żyliński (Michal.Zylinski@microsoft.com,http://blogs.msdn.com/michalz)

2. AgendaSilverlight – wprowadzeniePierwsza aplikacja na wylotGrafika i animacjaBiznesSmaczki

3. Platforma aplikacyjna Microsoft .NETPełne spektrum możliwościWspólna architektura i narzędziaWdrażanieProjektowanieProgramowaniePrzeglądarkaAplikacja kliencka

4. FilozofiaCykl produkcji 9-12 miesięcy (zwykle 2-3 wersje nieoficjalne)Ścisła współpraca ze społecznością (http://dotnet.uservoice.com/)Większość projektów ma charakter otwarty (np. Silverlight Control Toolkit)Niezależność (przeglądarka, system operacyjny, technologia serwerowa, urządzenie)

5. Architektura

6. Warsztat pracyWebDesignBlendEncoder

7. Warsztat pracy cd.Visual Studio (może być Web Developer Express) lub Eclipse Tools for Microsoft SilverlightSilverlightruntimeSilverlight SDKSilverlight Tools for Visual Studio 2010Expression Blend 4 Beta

8. Warsztat pracy cd.Możliwość tworzenia aplikacji Silverlight w środowisku EclipseDziała również pod Mac OS XOpen sourceRozwijane zewnętrznymi siłami przy wsparciu MShttp://www.eclipse4sl.org/

9. Święty Graal programistów<Button Width="100">OK <Button.Background>LightBlue </Button.Background></Button>Button b1 = new Button();b1.Content = "OK";b1.Background = newSolidColorBrush (Colors.LightBlue);b1.Width = 100;Dim b1 As New Buttonb1.Content = "OK"b1.Background = New _SolidColorBrush _ (Colors.LightBlue)b1.Width = 100Jeden sposób definiowania wyglądu aplikacji

10. … pozwalający na prosty, deklaratywny sposób opisu

11. Separacja zasobów od kodu

12. Prosta linia podziału pomiędzy projektantami a programistami

13. Łatwy w przetwarzaniu i generowaniu przez narzędziaCiekawsze elementy XAMLProperty attribute<Canvas Background=„White”>Property element<Canvas> <Canvas.Background> <SolidColorBrush Color=„White”/> </Canvas.Background> </Canvas>

14. Ciekawsze elementy XAML, c.d.Content attribute<TextBlock Text=„Username:” />Content element<TextBlock>Username:</TextBlock>Attached property <TextBlock Grid.Column=„0” Grid.Row=„1” />

15. Demo{HelloWorld} i wszystko jasne

16. GrafikaWiększość elementów bazuje na wektorach:<Rectangle /><Ellipse /><Line /><Polygon /><PolyLine /><Path />Grafika rastrowa: PNG i JPGŁatwy import z zewnętrznych narzędzi (gotowe wsparcie dla AI i PS)Wsparcie dla pixelshaderówMożliwość operacji bezpośrednio na bitmapachTransformacje

17. Pozycjonowanie elementówWłaściwości Margin, Padding, itd.Gotowe konteneryCanvasGridStackPanelWrapPanelBorderCustomLayout

18. AnimacjePerspektywa obiektowa, każda właściwość wizualna może podlegać zmianom w czasieStoryboards oparte o klatki kluczowe<DoubleAnimation Duration="0:0:10" Storyboard.TargetName="myTranslate" Storyboard.TargetProperty="X" To="700" AutoReverse="True" RepeatBehavior="Forever"/>

19. DemoGrafika i animacja

20. KontrolkiKomplet standardowych kontrolek na pokładzie (TextBox, TextBlock, CheckBox, Button itd.)Dodatkowe kontrolki np. z Silverlight Control Toolkit (wykresy, kalendarze itd.)

21. Praca z danymiBindingOneWayOneTimeTwoWayBindowanie 2 kontrolekDataContextItemSource

22. Binding do 1 wartości (XAML)<Grid x:Name="LayoutRoot" Background="White" HorizontalAlignment="Center" > <TextBoxVerticalAlignment="Top" IsReadOnly="True" Margin="5" TextWrapping="Wrap" Height="50" Width="200" Text="{BindingMode=OneWay}" x:Name="textBox1"/> </Grid>

23. Binding do 1 wartości (CS)// Obiekt biznesowypublic classRecording{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 DateTimeReleaseDate { get; set; }// OverridetheToStringmethod.public overridestringToString() { return Name + " by " + Artist + ", Released: " + ReleaseDate.ToShortDateString(); } }// BindingtextBox1.DataContext = new Recording("Chris Sells", "Chris Sells Live",newDateTime(2008, 2, 5));

24. Binding do kolekcji<StackPanel x:Name="LayoutRoot" Background="White"> <ComboBox x:Name="ComboBox1" Margin="5" Height="40" Width="300" ItemsSource="{BindingMode=OneWay}" /></StackPanel>

25. Sample DataPrototypy zwykle wymagają wizualizacji informacjiSample Data – szybkie modelowanie przykładowych danych (generowanych w locie)Pełna kontrola nad zawartością i wyglądemŁatwa migracja do docelowych źródeł danych

26. DEMOBinding i Sample Data

27. WyglądAplikowanie styli in-lineSłabo skalowalne przy dużych projektachSzablony / tematy (Resources)Page.xaml – ograniczone do oknaApp.xamlMożliwość tworzenia skórek tematycznych (np. przechowywanych w osobnych plikach XAML niezależnie od aplikacji)Kaskadowość, dziedziczenieZmiany w trakcie działania aplikacji

28. Skórki - przykład

29. DEMOModyfikacja wyglądu kontrolek

30. Visual State Manager (VSM)Warstwa abstrakcji pozwalająca zarządzać wyglądem z perspektywy stanów kontrolkiNp. MouseOver, MouseDown, itp.Możliwość definiowania stylu kontrolki w poszczególnych stanachMożliwość definiowania charakteru przejść pomiędzy stanami

31. DEMOVisual State Manager

32. KomunikacjaUsługi siecioweGeneracja silnie typowanych klas proxyAlternatywnie: XML-RPC (http://code.google.com/p/xmlrpc-silverlight)Komunikacja request/responseWebClientHTTPWebRequestSockety TCP/IPAsynchroniczna komunikacjaCross-domain (wymagany plik policy)

33. Komunikacja przez HTTP(s)Bazuje na przeglądarce internetowej (ciasteczka, nagłówki)Cross-domainPlik policy (silverlight -> flash policy)Tworzenie żądaniaUri dataLocation = new Uri("http://localhost/oceny.xml");BrowserHttpWebRequest request = new BrowserHttpWebRequest(dataLocation);HttpWebResponse response = (HttpWebResponse)request.GetResponse();Przetwarzanie odpowiedzi serweraStreamReaderresponseReader = new StreamReader(response.GetResponseStream());string RawResponse = responseReader.ReadToEnd();

34. Usługi Web ServicesKlasy 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 klientaproxy = new BankProxy();transactionList = proxy.GetTransactionList().ToList();

35. Przetwarzanie danychLanguageIntegratedQuerySkładnia T-SQL zintegrowana z językiem C#Weryfikacja na etapie kompilacjiDla XML lub dowolnych innych kolekcji (IEnumerable)varlistaObiektow= from oin DowolnaKolekcjawhere (o.Id>10) orderbyo.Namedescending select o;

36. … z perspektywy PHPDowolny interfejs usługowy (SOAP, XML-RPC, JSON)Dla super leniwych, gotowe snippety do osadzania SL w stronach PHP (np. renderSilverlightControl($height, $width, $source)displaySilverlightVideo($source, $height, $width)http://php.miniprojects.org/phpsilverlight/Alternatywnie np. WebORB for PHP(http://www.themidnightcoders.com/products/weborb-for-php/overview.html)

37. BezpieczeństwoAplikacje Silverlight działają w środowisku chronionym – sandboxIsolatedstorage – brak bezpośredniego dostępu do zasobów systemowychKawałek przestrzeni pozwalającej na przechowywanie danych w strukturze słownikowej (klucz-wartość) lub struktury katalogi/plikiDostępna w kontekście jednego użytkownika i jednej aplikacjiDomyślna wielkość – 1MB (z możliwością powiększenia)Przechowywanie danych tekstowych i binarnychUżytkownik ma kontrolę nad isolatedstorage

38. Integracja z OSOperacje I/O:File (Create, Exists, Delete, OpenDialog, SaveDialog)Directory (Exists, Create, Delete, GetFileNames)Quota (GetCurrentQuota, IncreaseQuotaTo, GetAvailableSpace)Scenariusze offlineWystarczy 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)Elewacja uprawnień (dostęp do mikrofonu, kamery)

39. Integracja HTML DOM - SilverlightSystem.Windows.BrowserHtmlPage.WindowjestScriptableObjectHtmlDocumentHtmlElementHtmlObject

40. Dostęp do HTML DOM z kodu zarządzanegoNowa przestrzeń nazwusingSystem.Windows.Browser;Statyczna klasa HtmlPage– punkt dostępowyHtmlPage.Navigate("http://www.microsoft.com");String server = HtmlPage.DocumentUri.Host;Podpinamy zdarzenia, wywołujemy metody, dostajemy się do właściwościHtmlElementmyButton =HtmlPage.Document.GetElementByID("myButtonID");myButton.AttachEvent("onclick", newEventHandler(this.myButtonClicked));privatevoidmyButtonClicked(object sender, EventArgs e) { ... }

41. Dostęp do kodu zarządzanego z JavaScriptOznacz właściwość, zdarzenie lub metodę jako [Scriptable][Scriptable]public void Search(string Name) { ... }Zarejestruj „punkt dostępowy” do obiektuWebApplication.Current.RegisterScriptableObject ("EntryPoint", this);Wykorzystaj kod zarządzany z poziomu JavaScriptvar control = document.getElementById("SilverlightControl");control.Content.EntryPoint.Search(input.value);

42. Smaczki: behaviorsMożliwość stworzenia własnych, powtarzalnych wzorców zachowańNiezależne od obiektów/kontrolekZnacznie ułatwia komunikację projektant <-> programista2 typy:Akcje (kiedy …. zrób … )Zachowania Behave

43. Smaczki: SketchFlowExpression Blend pozwala na szybkie, wizualne prototypowanie aplikacjiDziała niezależnie od typu aplikacji: WPF, SilverlightGotowy player pozwalający na interaktywną prezentację u klientaStartNavigationMain MenuData Entry

44. DemoSketchflow

45. Smaczki: Deep ZoomPłynne przeglądanie i powiększanie dowolnej wielkości obrazówTylko dane, które aktualnie ogląda użytkownikSymuluje grafikę wektorową

46. Deep ZoomNarzędzie dzieli obraz na fragmenty 256 x 256pixNastępnie generuje zdjęcia niższej rozdzielczości

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

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