Your SlideShare is downloading. ×
0
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

3,438

Published on

Autor: Michał Żyliński …

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,438
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
23
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 i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?<br />Michał Żyliński (Michal.Zylinski@microsoft.com,<br />http://blogs.msdn.com/michalz)<br />
  2. Agenda<br />Silverlight – wprowadzenie<br />Pierwsza aplikacja na wylot<br />Grafika i animacja<br />Biznes<br />Smaczki<br />
  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. 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. Architektura<br />
  6. Warsztat pracy<br />Web<br />Design<br />Blend<br />Encoder<br />
  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. 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. Ś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. … 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ę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. 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. Demo<br />{HelloWorld} i wszystko jasne<br />
  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. 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. 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. Demo<br />Grafika i animacja<br />
  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. Praca z danymi<br />Binding<br />OneWay<br />OneTime<br />TwoWay<br />Bindowanie 2 kontrolek<br />DataContext<br />ItemSource<br />
  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. 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. 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. 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. DEMO<br />Binding i Sample Data<br />
  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. Skórki - przykład<br />
  29. DEMO<br />Modyfikacja wyglądu kontrolek<br />
  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. DEMO<br />Visual State Manager<br />
  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. 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. 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. 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. … 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. 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. 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. Integracja HTML DOM - SilverlightSystem.Windows.Browser<br />HtmlPage.<br />Window<br />jest<br />ScriptableObject<br />HtmlDocument<br />HtmlElement<br />HtmlObject<br />
  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. 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. 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. 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. Demo<br />Sketchflow<br />
  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. Deep Zoom<br />Narzędzie dzieli obraz na fragmenty 256 x 256pix<br />Następnie generuje zdjęcia niższej rozdzielczości<br />
  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. 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. 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. Deep Zoom w Silverlight<br />Wyświetlany przez MultiScaleImage<br />Narzędzie Deep Zoom Composer przygotowuje grafiki oraz plik XML z opisem<br />
  51. DEMO<br />Deep Zoom<br />
  52. Q&A?<br />Michal.Zylinski@microsoft.com<br />(pamiętajcie o Microsoft BizSpark i WebsiteSpark)<br />

×