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

2. Agenda Silverlight – wprowadzenie Pierwsza aplikacja na wylot Grafika i animacja Biznes Smaczki

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

4. Filozofia Cykl 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 pracy Web Design Blend Encoder

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

8. 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/

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

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. Grafika Wię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ów Możliwość operacji bezpośrednio na bitmapach Transformacje

17. Pozycjonowanie elementów Właściwości Margin, Padding, itd. Gotowe kontenery Canvas Grid StackPanel WrapPanel Border CustomLayout

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

19. Demo Grafika i animacja

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

21. Praca z danymi Binding OneWay OneTime TwoWay Bindowanie 2 kontrolek DataContext ItemSource

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 biznesowy public 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(); } } // Binding textBox1.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 Data Prototypy zwykle wymagają wizualizacji informacji Sample 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. DEMO Binding i Sample Data

27. Wygląd Aplikowanie styli in-line Słabo skalowalne przy dużych projektach Szablony / tematy (Resources) Page.xaml – ograniczone do okna App.xaml Możliwość tworzenia skórek tematycznych (np. przechowywanych w osobnych plikach XAML niezależnie od aplikacji) Kaskadowość, dziedziczenie Zmiany w trakcie działania aplikacji

28. Skórki - przykład

29. DEMO Modyfikacja wyglądu kontrolek

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

31. DEMO Visual State Manager

32. Komunikacja Usługi sieciowe Generacja silnie typowanych klas proxy Alternatywnie: XML-RPC (http://code.google.com/p/xmlrpc-silverlight) Komunikacja request/response WebClient HTTPWebRequest Sockety TCP/IP Asynchroniczna komunikacja Cross-domain (wymagany plik policy)

33. 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("http://localhost/oceny.xml"); BrowserHttpWebRequest request = new BrowserHttpWebRequest(dataLocation); HttpWebResponse response = (HttpWebResponse)request.GetResponse(); Przetwarzanie odpowiedzi serwera StreamReaderresponseReader = new StreamReader(response.GetResponseStream()); string RawResponse = responseReader.ReadToEnd();

34. 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();

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

36. … z perspektywy PHP Dowolny 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ństwo Aplikacje Silverlight działają w środowisku chronionym – sandbox Isolatedstorage – 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 isolatedstorage

38. 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) Elewacja uprawnień (dostęp do mikrofonu, kamery)

39. Integracja HTML DOM - SilverlightSystem.Windows.Browser HtmlPage. Window jest ScriptableObject HtmlDocument HtmlElement HtmlObject

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

41. 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 ("EntryPoint", this); Wykorzystaj kod zarządzany z poziomu JavaScript var control = document.getElementById("SilverlightControl"); control.Content.EntryPoint.Search(input.value);

42. Smaczki: 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 … ) Zachowania Behave

43. Smaczki: SketchFlow Expression Blend 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

44. Demo Sketchflow

45. Smaczki: Deep Zoom Płynne przeglądanie i powiększanie dowolnej wielkości obrazów Tylko dane, które aktualnie ogląda użytkownik Symuluje grafikę wektorową

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

47. 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

48. 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

49. 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

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

51. DEMO Deep Zoom

52. Q&A? Michal.Zylinski@microsoft.com (pamiętajcie o Microsoft BizSpark i WebsiteSpark)