0
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?<br />Michał Żyliński (Michal.Zylinski@micr...
Agenda<br />Silverlight – wprowadzenie<br />Pierwsza aplikacja na wylot<br />Grafika i animacja<br />Biznes<br />Smaczki<b...
Platforma aplikacyjna Microsoft .NETPełne spektrum możliwości<br />Wspólna architektura i narzędzia<br />Wdrażanie<br />Pr...
Filozofia<br />Cykl produkcji 9-12 miesięcy (zwykle 2-3 wersje nieoficjalne)<br />Ścisła współpraca ze społecznością (http...
Architektura<br />
Warsztat pracy<br />Web<br />Design<br />Blend<br />Encoder<br />
Warsztat pracy cd.<br />Visual Studio (może być Web Developer  Express) lub Eclipse Tools for Microsoft Silverlight<br />S...
Warsztat pracy cd.<br />Możliwość tworzenia aplikacji Silverlight w środowisku Eclipse<br />Działa również pod Mac OS X<br...
Święty Graal programistów<br /><Button Width="100">OK<br />  <Button.Background><br />LightBlue<br />  </Button.Background...
… 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</li></li></ul><li>Ciekawsze elementy XAML<br />Property attribute<br /...
Ciekawsze elementy XAML, c.d.<br />Content attribute<br /><TextBlock Text=„Username:” /><br />Content element<br /><TextBl...
Demo<br />{HelloWorld} i wszystko jasne<br />
Grafika<br />Większość elementów bazuje na wektorach:<br /><Rectangle /><br /><Ellipse /><br /><Line /><br /><Polygon /><b...
Pozycjonowanie elementów<br />Właściwości Margin, Padding, itd.<br />Gotowe kontenery<br />Canvas<br />Grid<br />StackPane...
Animacje<br />Perspektywa obiektowa, każda właściwość wizualna może podlegać zmianom w czasie<br />Storyboards oparte o kl...
Demo<br />Grafika i animacja<br />
Kontrolki<br />Komplet standardowych kontrolek na pokładzie (TextBox, TextBlock, CheckBox, Button itd.)<br />Dodatkowe kon...
Praca z danymi<br />Binding<br />OneWay<br />OneTime<br />TwoWay<br />Bindowanie 2 kontrolek<br />DataContext<br />ItemSou...
Binding do 1 wartości (XAML)<br /><Grid x:Name="LayoutRoot" Background="White" HorizontalAlignment="Center" > <TextBoxVert...
Binding do 1 wartości (CS)<br />// Obiekt biznesowy<br />public classRecording<br />{<br />public Recording() { }<br />   ...
Binding do kolekcji<br /><StackPanel x:Name="LayoutRoot" Background="White"> <ComboBox x:Name="ComboBox1" Margin="5" Heigh...
Sample Data<br />Prototypy zwykle wymagają wizualizacji informacji<br />Sample Data – szybkie modelowanie przykładowych da...
DEMO<br />Binding i Sample Data<br />
Wygląd<br />Aplikowanie styli in-line<br />Słabo skalowalne przy dużych projektach<br />Szablony / tematy (Resources)<br /...
Skórki - przykład<br />
DEMO<br />Modyfikacja wyglądu kontrolek<br />
Visual State Manager (VSM)<br />Warstwa abstrakcji pozwalająca zarządzać wyglądem z perspektywy stanów kontrolki<br />Np. ...
DEMO<br />Visual State Manager<br />
Komunikacja<br />Usługi sieciowe<br />Generacja silnie typowanych klas proxy<br />Alternatywnie: XML-RPC (http://code.goog...
Komunikacja przez HTTP(s)<br />Bazuje na przeglądarce internetowej (ciasteczka, nagłówki)<br />Cross-domain<br />Plik poli...
Usługi Web Services<br />Klasy proxy generowane przez Visual Studio (add service reference)<br />JSON, SOAP, REST/POX, itp...
Przetwarzanie danych<br />LanguageIntegratedQuery<br />Składnia T-SQL zintegrowana z językiem C#<br />Weryfikacja na etapi...
… z perspektywy PHP<br />Dowolny interfejs usługowy (SOAP, XML-RPC, JSON)<br />Dla super leniwych, gotowe snippety do osad...
Bezpieczeństwo<br />Aplikacje Silverlight działają w środowisku chronionym – sandbox<br />Isolatedstorage – brak bezpośred...
Integracja z OS<br />Operacje I/O:<br />File (Create, Exists, Delete, OpenDialog, SaveDialog)<br />Directory (Exists, Crea...
Integracja HTML DOM - SilverlightSystem.Windows.Browser<br />HtmlPage.<br />Window<br />jest<br />ScriptableObject<br />Ht...
Dostęp do HTML DOM z kodu zarządzanego<br />Nowa przestrzeń nazw<br />usingSystem.Windows.Browser;<br />Statyczna klasa Ht...
Dostęp do kodu zarządzanego z JavaScript<br />Oznacz właściwość, zdarzenie lub metodę jako [Scriptable]<br />[Scriptable]<...
Smaczki: behaviors<br />Możliwość stworzenia własnych, powtarzalnych wzorców zachowań<br />Niezależne od obiektów/kontrole...
Smaczki: SketchFlow<br />Expression Blend  pozwala na szybkie, wizualne prototypowanie aplikacji<br />Działa niezależnie o...
Demo<br />Sketchflow<br />
Smaczki: Deep Zoom<br />Płynne przeglądanie i powiększanie dowolnej wielkości obrazów<br />Tylko dane, które aktualnie ogl...
Deep Zoom<br />Narzędzie dzieli obraz na fragmenty 256 x 256pix<br />Następnie generuje zdjęcia niższej rozdzielczości<br />
Deep Zoom – jak działa?<br />Obrazy najniższej rozdzielczości wyświetlane w pierwszej kolejności<br />Po pobraniu obrazów ...
Deep Zoom – jak działa?<br />Obrazy najniższej rozdzielczości wyświetlane w pierwszej kolejności<br />Po pobraniu obrazów ...
Upcoming SlideShare
Loading in...5
×

Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?

3,452

Published on

Autor: Michał Żyliński

Projektujesz serwisy lub aplikacje internetowe i czujesz, że popadasz w rutynę? Zobacz, co może zaoferować Silverlight, ninja i czarny koń technologii RIA.

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,452
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?"

  1. 1. Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?<br />Michał Żyliński (Michal.Zylinski@microsoft.com,<br />http://blogs.msdn.com/michalz)<br />
  2. 2. Agenda<br />Silverlight – wprowadzenie<br />Pierwsza aplikacja na wylot<br />Grafika i animacja<br />Biznes<br />Smaczki<br />
  3. 3. Platforma aplikacyjna Microsoft .NETPełne spektrum możliwości<br />Wspólna architektura i narzędzia<br />Wdrażanie<br />Projektowanie<br />Programowanie<br />Przeglądarka<br />Aplikacja kliencka<br />
  4. 4. Filozofia<br />Cykl produkcji 9-12 miesięcy (zwykle 2-3 wersje nieoficjalne)<br />Ścisła współpraca ze społecznością (http://dotnet.uservoice.com/)<br />Większość projektów ma charakter otwarty (np. Silverlight Control Toolkit)<br />Niezależność (przeglądarka, system operacyjny, technologia serwerowa, urządzenie)<br />
  5. 5. Architektura<br />
  6. 6. Warsztat pracy<br />Web<br />Design<br />Blend<br />Encoder<br />
  7. 7. Warsztat pracy cd.<br />Visual Studio (może być Web Developer Express) lub Eclipse Tools for Microsoft Silverlight<br />Silverlightruntime<br />Silverlight SDK<br />Silverlight Tools for Visual Studio 2010<br />Expression Blend 4 Beta<br />
  8. 8. Warsztat pracy cd.<br />Możliwość tworzenia aplikacji Silverlight w środowisku Eclipse<br />Działa również pod Mac OS X<br />Open source<br />Rozwijane zewnętrznymi siłami przy wsparciu MS<br />http://www.eclipse4sl.org/<br />
  9. 9. Święty Graal programistów<br /><Button Width="100">OK<br /> <Button.Background><br />LightBlue<br /> </Button.Background><br /></Button><br />Button b1 = new Button();<br />b1.Content = "OK";<br />b1.Background = newSolidColorBrush (Colors.LightBlue);<br />b1.Width = 100;<br />Dim b1 As New Button<br />b1.Content = "OK"<br />b1.Background = New _SolidColorBrush _ (Colors.LightBlue)<br />b1.Width = 100<br /><ul><li>Jeden sposób definiowania wyglądu aplikacji
  10. 10. … pozwalający na prosty, deklaratywny sposób opisu
  11. 11. Separacja zasobów od kodu
  12. 12. Prosta linia podziału pomiędzy projektantami a programistami
  13. 13. Łatwy w przetwarzaniu i generowaniu przez narzędzia</li></li></ul><li>Ciekawsze elementy XAML<br />Property attribute<br /><Canvas Background=„White”><br />Property element<br /><Canvas><br /> <Canvas.Background><br /> <SolidColorBrush Color=„White”/><br /> </Canvas.Background><br /> </Canvas><br />
  14. 14. Ciekawsze elementy XAML, c.d.<br />Content attribute<br /><TextBlock Text=„Username:” /><br />Content element<br /><TextBlock><br />Username:<br /></TextBlock><br />Attached property<br /> <TextBlock Grid.Column=„0” Grid.Row=„1” /><br />
  15. 15. Demo<br />{HelloWorld} i wszystko jasne<br />
  16. 16. Grafika<br />Większość elementów bazuje na wektorach:<br /><Rectangle /><br /><Ellipse /><br /><Line /><br /><Polygon /><br /><PolyLine /><br /><Path /><br />Grafika rastrowa: PNG i JPG<br />Łatwy import z zewnętrznych narzędzi (gotowe wsparcie dla AI i PS)<br />Wsparcie dla pixelshaderów<br />Możliwość operacji bezpośrednio na bitmapach<br />Transformacje<br />
  17. 17. Pozycjonowanie elementów<br />Właściwości Margin, Padding, itd.<br />Gotowe kontenery<br />Canvas<br />Grid<br />StackPanel<br />WrapPanel<br />Border<br />CustomLayout<br />
  18. 18. Animacje<br />Perspektywa obiektowa, każda właściwość wizualna może podlegać zmianom w czasie<br />Storyboards oparte o klatki kluczowe<br /><DoubleAnimation  Duration="0:0:10"  Storyboard.TargetName="myTranslate"  Storyboard.TargetProperty="X"  To="700"  AutoReverse="True"  RepeatBehavior="Forever"/><br />
  19. 19. Demo<br />Grafika i animacja<br />
  20. 20. Kontrolki<br />Komplet standardowych kontrolek na pokładzie (TextBox, TextBlock, CheckBox, Button itd.)<br />Dodatkowe kontrolki np. z Silverlight Control Toolkit (wykresy, kalendarze itd.)<br />
  21. 21. Praca z danymi<br />Binding<br />OneWay<br />OneTime<br />TwoWay<br />Bindowanie 2 kontrolek<br />DataContext<br />ItemSource<br />
  22. 22. Binding do 1 wartości (XAML)<br /><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> <br />
  23. 23. Binding do 1 wartości (CS)<br />// Obiekt biznesowy<br />public classRecording<br />{<br />public Recording() { }<br /> public Recording(string artistName, string cdName, DateTime release)<br /> {<br />Artist = artistName;<br />Name = cdName;<br />ReleaseDate = release;<br /> }<br /> public string Artist { get; set; }<br /> public string Name { get; set; }<br /> public DateTimeReleaseDate { get; set; }<br />// OverridetheToStringmethod.<br />public overridestringToString()<br /> { <br /> return Name + " by " + Artist + ", Released: " + ReleaseDate.ToShortDateString();<br /> } <br />}<br />// Binding<br />textBox1.DataContext = new Recording("Chris Sells", "Chris Sells Live",<br />newDateTime(2008, 2, 5));<br />
  24. 24. Binding do kolekcji<br /><StackPanel x:Name="LayoutRoot" Background="White"> <ComboBox x:Name="ComboBox1" Margin="5" Height="40" Width="300" ItemsSource="{BindingMode=OneWay}" /><br /></StackPanel> <br />
  25. 25. Sample Data<br />Prototypy zwykle wymagają wizualizacji informacji<br />Sample Data – szybkie modelowanie przykładowych danych (generowanych w locie)<br />Pełna kontrola nad zawartością i wyglądem<br />Łatwa migracja do docelowych źródeł danych<br />
  26. 26. DEMO<br />Binding i Sample Data<br />
  27. 27. Wygląd<br />Aplikowanie styli in-line<br />Słabo skalowalne przy dużych projektach<br />Szablony / tematy (Resources)<br />Page.xaml – ograniczone do okna<br />App.xaml<br />Możliwość tworzenia skórek tematycznych (np. przechowywanych w osobnych plikach XAML niezależnie od aplikacji)<br />Kaskadowość, dziedziczenie<br />Zmiany w trakcie działania aplikacji<br />
  28. 28. Skórki - przykład<br />
  29. 29. DEMO<br />Modyfikacja wyglądu kontrolek<br />
  30. 30. Visual State Manager (VSM)<br />Warstwa abstrakcji pozwalająca zarządzać wyglądem z perspektywy stanów kontrolki<br />Np. MouseOver, MouseDown, itp.<br />Możliwość definiowania stylu kontrolki w poszczególnych stanach<br />Możliwość definiowania charakteru przejść pomiędzy stanami<br />
  31. 31. DEMO<br />Visual State Manager<br />
  32. 32. Komunikacja<br />Usługi sieciowe<br />Generacja silnie typowanych klas proxy<br />Alternatywnie: XML-RPC (http://code.google.com/p/xmlrpc-silverlight)<br />Komunikacja request/response<br />WebClient<br />HTTPWebRequest<br />Sockety TCP/IP<br />Asynchroniczna komunikacja<br />Cross-domain (wymagany plik policy)<br />
  33. 33. Komunikacja przez HTTP(s)<br />Bazuje na przeglądarce internetowej (ciasteczka, nagłówki)<br />Cross-domain<br />Plik policy (silverlight -> flash policy)<br />Tworzenie żądania<br />Uri dataLocation = new Uri("http://localhost/oceny.xml");<br />BrowserHttpWebRequest request = <br /> new BrowserHttpWebRequest(dataLocation);<br />HttpWebResponse response =<br /> (HttpWebResponse)request.GetResponse();<br />Przetwarzanie odpowiedzi serwera<br />StreamReaderresponseReader = new StreamReader(response.GetResponseStream());<br />string RawResponse = responseReader.ReadToEnd();<br />
  34. 34. Usługi Web Services<br />Klasy proxy generowane przez Visual Studio (add service reference)<br />JSON, SOAP, REST/POX, itp.<br />Windows Communication Foundation (WCF)<br />Metoda usługi sieciowej<br />[WebMethod]<br />public List<Transaction> GetTransactionList() { ... }<br />Wywoływanie usługi z poziomu klienta<br />proxy = new BankProxy();<br />transactionList = proxy.GetTransactionList().ToList();<br />
  35. 35. Przetwarzanie danych<br />LanguageIntegratedQuery<br />Składnia T-SQL zintegrowana z językiem C#<br />Weryfikacja na etapie kompilacji<br />Dla XML lub dowolnych innych kolekcji (IEnumerable)<br />varlistaObiektow= from oin DowolnaKolekcjawhere (o.Id>10) orderbyo.Namedescending select o;<br />
  36. 36. … z perspektywy PHP<br />Dowolny interfejs usługowy (SOAP, XML-RPC, JSON)<br />Dla super leniwych, gotowe snippety do osadzania SL w stronach PHP (np. <br />renderSilverlightControl($height, $width, $source)<br />displaySilverlightVideo($source, $height, $width)<br />http://php.miniprojects.org/phpsilverlight/<br />Alternatywnie np. WebORB for PHP<br />(http://www.themidnightcoders.com/products/weborb-for-php/overview.html)<br />
  37. 37. Bezpieczeństwo<br />Aplikacje Silverlight działają w środowisku chronionym – sandbox<br />Isolatedstorage – brak bezpośredniego dostępu do zasobów systemowych<br />Kawałek przestrzeni pozwalającej na przechowywanie danych w strukturze słownikowej (klucz-wartość) lub struktury katalogi/pliki<br />Dostępna w kontekście jednego użytkownika i jednej aplikacji<br />Domyślna wielkość – 1MB (z możliwością powiększenia)<br />Przechowywanie danych tekstowych i binarnych<br />Użytkownik ma kontrolę nad isolatedstorage<br />
  38. 38. Integracja z OS<br />Operacje I/O:<br />File (Create, Exists, Delete, OpenDialog, SaveDialog)<br />Directory (Exists, Create, Delete, GetFileNames)<br />Quota (GetCurrentQuota, IncreaseQuotaTo, GetAvailableSpace)<br />Scenariusze offline<br />Wystarczy zmiana manifestu aplikacji!<br />Wykrywanie podłączenia do sieci <br />Integracja z powłoką systemową (menu start, pulpit)<br />Wykorzystywanie właściwości Win7 (multitouch, integracja z GPS)<br />Elewacja uprawnień (dostęp do mikrofonu, kamery)<br />
  39. 39. Integracja HTML DOM - SilverlightSystem.Windows.Browser<br />HtmlPage.<br />Window<br />jest<br />ScriptableObject<br />HtmlDocument<br />HtmlElement<br />HtmlObject<br />
  40. 40. Dostęp do HTML DOM z kodu zarządzanego<br />Nowa przestrzeń nazw<br />usingSystem.Windows.Browser;<br />Statyczna klasa HtmlPage– punkt dostępowy<br />HtmlPage.Navigate("http://www.microsoft.com");<br />String server = HtmlPage.DocumentUri.Host;<br />Podpinamy zdarzenia, wywołujemy metody, dostajemy się do właściwości<br />HtmlElementmyButton =<br />HtmlPage.Document.GetElementByID("myButtonID");<br />myButton.AttachEvent("onclick", new<br />EventHandler(this.myButtonClicked));<br />privatevoidmyButtonClicked(object sender, EventArgs e) <br />{ ... }<br />
  41. 41. Dostęp do kodu zarządzanego z JavaScript<br />Oznacz właściwość, zdarzenie lub metodę jako [Scriptable]<br />[Scriptable]<br />public void Search(string Name) { ... }<br />Zarejestruj „punkt dostępowy” do obiektu<br />WebApplication.Current.RegisterScriptableObject<br /> ("EntryPoint", this);<br />Wykorzystaj kod zarządzany z poziomu JavaScript<br />var control = document.getElementById("SilverlightControl");<br />control.Content.EntryPoint.Search(input.value);<br />
  42. 42. Smaczki: behaviors<br />Możliwość stworzenia własnych, powtarzalnych wzorców zachowań<br />Niezależne od obiektów/kontrolek<br />Znacznie ułatwia komunikację projektant <-> programista<br />2 typy:<br />Akcje (kiedy …. zrób … )<br />Zachowania <br />Behave<br />
  43. 43. Smaczki: SketchFlow<br />Expression Blend pozwala na szybkie, wizualne prototypowanie aplikacji<br />Działa niezależnie od typu aplikacji: WPF, Silverlight<br />Gotowy player pozwalający na interaktywną prezentację u klienta<br />Start<br />Navigation<br />Main Menu<br />Data Entry<br />
  44. 44. Demo<br />Sketchflow<br />
  45. 45. Smaczki: Deep Zoom<br />Płynne przeglądanie i powiększanie dowolnej wielkości obrazów<br />Tylko dane, które aktualnie ogląda użytkownik<br />Symuluje grafikę wektorową<br />
  46. 46. Deep Zoom<br />Narzędzie dzieli obraz na fragmenty 256 x 256pix<br />Następnie generuje zdjęcia niższej rozdzielczości<br />
  47. 47. Deep Zoom – jak działa?<br />Obrazy najniższej rozdzielczości wyświetlane w pierwszej kolejności<br />Po pobraniu obrazów lepszej jakości, następuje płynne podmienianie<br />
  48. 48. Deep Zoom – jak działa?<br />Obrazy najniższej rozdzielczości wyświetlane w pierwszej kolejności<br />Po pobraniu obrazów lepszej jakości, następuje płynne podmienianie<br />
  49. 49. Deep Zoom – jak działa?<br />Obrazy najniższej rozdzielczości wyświetlane w pierwszej kolejności<br />Po pobraniu obrazów lepszej jakości, następuje płynne podmienianie<br />
  50. 50. Deep Zoom w Silverlight<br />Wyświetlany przez MultiScaleImage<br />Narzędzie Deep Zoom Composer przygotowuje grafiki oraz plik XML z opisem<br />
  51. 51. DEMO<br />Deep Zoom<br />
  52. 52. Q&A?<br />Michal.Zylinski@microsoft.com<br />(pamiętajcie o Microsoft BizSpark i WebsiteSpark)<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×