Silverlight i PHP
-
Upload
michal-zylinski -
Category
Education
-
view
562 -
download
0
Transcript of Silverlight i PHP
![Page 1: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/1.jpg)
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji
internetowych?
Michał Żyliński ([email protected],http://blogs.msdn.com/michalz)
![Page 2: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/2.jpg)
Agenda
• Silverlight – wprowadzenie• Pierwsza aplikacja na wylot• Grafika i animacja• Biznes• Smaczki
![Page 3: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/3.jpg)
Projektowanie
Programowanie
Wspólna architektura i narzędzia
Wdrażanie
Przeglądarka
Aplikacja kliencka
Platforma aplikacyjna Microsoft .NETPełne spektrum możliwości
![Page 4: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/4.jpg)
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)
![Page 5: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/5.jpg)
Architektura
![Page 6: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/6.jpg)
Warsztat pracy
WebDesignBlend
Encoder
ProgramistaProjektant
![Page 7: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/7.jpg)
Warsztat pracy cd.1. Visual Studio (może być Web Developer
Express) lub Eclipse Tools for Microsoft
Silverlight
2. Silverlight runtime
3. Silverlight SDK
4. Silverlight Tools for Visual Studio 2010
5. Expression Blend 4 Beta
![Page 8: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/8.jpg)
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/
![Page 9: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/9.jpg)
Ś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="100">OK <Button.Background> LightBlue </Button.Background></Button>
Button b1 = new Button();b1.Content = "OK";b1.Background = new SolidColorBrush (Colors.LightBlue);b1.Width = 100;
Dim b1 As New Buttonb1.Content = "OK"b1.Background = New _ SolidColorBrush _ (Colors.LightBlue)b1.Width = 100
![Page 10: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/10.jpg)
Ciekawsze elementy XAML
• Property attribute
<Canvas Background=„White”>
• Property element<Canvas>
<Canvas.Background><SolidColorBrush Color=„White”/>
</Canvas.Background></Canvas>
![Page 11: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/11.jpg)
Ciekawsze elementy XAML, c.d.
• Content attribute
<TextBlock Text=„Username:” />
• Content element
<TextBlock>Username:
</TextBlock>
• Attached property
<TextBlock Grid.Column=„0” Grid.Row=„1” />
![Page 12: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/12.jpg)
DEMO{Hello World} i wszystko jasne
![Page 13: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/13.jpg)
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 pixel shaderów• Możliwość operacji bezpośrednio na bitmapach• Transformacje
![Page 14: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/14.jpg)
Pozycjonowanie elementów
• Właściwości Margin, Padding, itd.• Gotowe kontenery– Canvas– Grid– StackPanel– WrapPanel– Border– Custom Layout
![Page 15: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/15.jpg)
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"/>
![Page 16: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/16.jpg)
DEMOGrafika i animacja
![Page 17: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/17.jpg)
Kontrolki
• Komplet standardowych kontrolek na pokładzie
(TextBox, TextBlock, CheckBox, Button itd.)
• Dodatkowe kontrolki np. z Silverlight Control
Toolkit (wykresy, kalendarze itd.)
![Page 18: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/18.jpg)
Praca z danymi• Binding
• OneWay
• OneTime
• TwoWay
• Bindowanie 2 kontrolek
• DataContext
• ItemSource
![Page 19: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/19.jpg)
Binding do 1 wartości (XAML)
<Grid x:Name="LayoutRoot" Background="White" HorizontalAlignment="Center" >
<TextBox VerticalAlignment="Top" IsReadOnly="True" Margin="5"
TextWrapping="Wrap" Height="50" Width="200" Text="{Binding
Mode=OneWay}" x:Name="textBox1"/> </Grid>
![Page 20: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/20.jpg)
Binding do 1 wartości (CS)// Obiekt biznesowypublic 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 + " by " + Artist + ", Released: " + ReleaseDate.ToShortDateString(); } }
// BindingtextBox1.DataContext = new Recording("Chris Sells", "Chris Sells Live", new DateTime(2008, 2, 5));
![Page 21: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/21.jpg)
Binding do kolekcji
<StackPanel x:Name="LayoutRoot" Background="White">
<ComboBox x:Name="ComboBox1" Margin="5"
Height="40" Width="300" ItemsSource="{Binding
Mode=OneWay}" />
</StackPanel>
![Page 22: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/22.jpg)
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
![Page 23: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/23.jpg)
DEMOBinding i Sample Data
![Page 24: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/24.jpg)
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
![Page 25: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/25.jpg)
Skórki - przykład
![Page 26: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/26.jpg)
DEMOModyfikacja wyglądu kontrolek
![Page 27: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/27.jpg)
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
![Page 28: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/28.jpg)
DEMOVisual State Manager
![Page 29: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/29.jpg)
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)
![Page 30: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/30.jpg)
Komunikacja przez HTTP(s)
• Bazuje na przeglądarce internetowej (ciasteczka, nagłówki)• Cross-domain
– Plik policy (silverlight -> flash policy)
StreamReader responseReader = new StreamReader(response.GetResponseStream());string RawResponse = responseReader.ReadToEnd();
StreamReader responseReader = new StreamReader(response.GetResponseStream());string RawResponse = responseReader.ReadToEnd();
Uri dataLocation = new Uri("http://localhost/oceny.xml");BrowserHttpWebRequest request = new BrowserHttpWebRequest(dataLocation);HttpWebResponse response = (HttpWebResponse)request.GetResponse();
Uri dataLocation = new Uri("http://localhost/oceny.xml");BrowserHttpWebRequest request = new BrowserHttpWebRequest(dataLocation);HttpWebResponse response = (HttpWebResponse)request.GetResponse();
Tworzenie żądania
Przetwarzanie odpowiedzi serwera
![Page 31: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/31.jpg)
Usługi Web Services
• Klasy proxy generowane przez Visual Studio (add service reference)
• JSON, SOAP, REST/POX, itp.• Windows Communication Foundation (WCF)
[WebMethod]public List<Transaction> GetTransactionList() { ... }
[WebMethod]public List<Transaction> GetTransactionList() { ... }
proxy = new BankProxy();transactionList = proxy.GetTransactionList().ToList();
proxy = new BankProxy();transactionList = proxy.GetTransactionList().ToList();
Metoda usługi sieciowej
Wywoływanie usługi z poziomu klienta
![Page 32: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/32.jpg)
Przetwarzanie danych
• Language Integrated Query
• Składnia T-SQL zintegrowana z językiem C#
• Weryfikacja na etapie kompilacji
• Dla XML lub dowolnych innych kolekcji
(IEnumerable)
var listaObiektow = from o in DowolnaKolekcja where (o.Id > 10) orderby o.Name descending select o ;
![Page 33: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/33.jpg)
… 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)
![Page 34: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/34.jpg)
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
![Page 35: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/35.jpg)
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)
![Page 36: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/36.jpg)
Dostęp do HTML DOM z kodu zarządzanego
Nowa przestrzeń nazw
HtmlPage.Navigate("http://www.microsoft.com");String server = HtmlPage.DocumentUri.Host;
HtmlPage.Navigate("http://www.microsoft.com");String server = HtmlPage.DocumentUri.Host;
using System.Windows.Browser;using System.Windows.Browser;
HtmlElement myButton = HtmlPage.Document.GetElementByID("myButtonID");myButton.AttachEvent("onclick", new EventHandler(this.myButtonClicked));
private void myButtonClicked(object sender, EventArgs e) { ... }
HtmlElement myButton = HtmlPage.Document.GetElementByID("myButtonID");myButton.AttachEvent("onclick", new EventHandler(this.myButtonClicked));
private void myButtonClicked(object sender, EventArgs e) { ... }
Statyczna klasa HtmlPage – punkt dostępowy
Podpinamy zdarzenia, wywołujemy metody, dostajemy się do właściwości
![Page 37: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/37.jpg)
Dostęp do kodu zarządzanego z JavaScript
Oznacz właściwość, zdarzenie lub metodę jako [Scriptable]
WebApplication.Current.RegisterScriptableObject ("EntryPoint", this);
WebApplication.Current.RegisterScriptableObject ("EntryPoint", this);
[Scriptable]public void Search(string Name) { ... }
[Scriptable]public void Search(string Name) { ... }
var control = document.getElementById("SilverlightControl");control.Content.EntryPoint.Search(input.value);
var control = document.getElementById("SilverlightControl");control.Content.EntryPoint.Search(input.value);
Zarejestruj „punkt dostępowy” do obiektu
Wykorzystaj kod zarządzany z poziomu JavaScript
![Page 38: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/38.jpg)
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
![Page 39: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/39.jpg)
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
Main Menu Data Entry
Navigation
![Page 40: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/40.jpg)
DEMOSketchflow
![Page 41: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/41.jpg)
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ą
![Page 42: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/42.jpg)
Deep Zoom
• Narzędzie dzieli obraz na fragmenty 256 x 256 pix
• Następnie generuje zdjęcia niższej rozdzielczości
![Page 43: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/43.jpg)
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
![Page 44: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/44.jpg)
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
![Page 45: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/45.jpg)
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
![Page 46: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/46.jpg)
Deep Zoom w Silverlight
• Wyświetlany przez MultiScaleImage• Narzędzie Deep Zoom Composer przygotowuje grafiki
oraz plik XML z opisem
![Page 47: Silverlight i PHP](https://reader035.fdocument.pub/reader035/viewer/2022062513/55626474d8b42aed7d8b4e57/html5/thumbnails/47.jpg)
DEMODeep Zoom