silverlight i php
TRANSCRIPT
Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji
internetowych?
Michał Żyliński ([email protected],http://blogs.msdn.com/michalz)
Agenda
• Silverlight – wprowadzenie• Pierwsza aplikacja na wylot• Grafika i animacja• Biznes• Smaczki
Projektowanie
Programowanie
Wspólna architektura i narzędzia
Wdrażanie
Przeglądarka
Aplikacja kliencka
Platforma aplikacyjna Microsoft .NETPełne spektrum możliwości
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)
Architektura
Warsztat pracy
WebDesignBlend
Encoder
ProgramistaProjektant
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
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/
Ś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
Ciekawsze elementy XAML
• Property attribute
<Canvas Background=„White”>
• Property element<Canvas>
<Canvas.Background><SolidColorBrush Color=„White”/>
</Canvas.Background></Canvas>
Ciekawsze elementy XAML, c.d.
• Content attribute
<TextBlock Text=„Username:” />
• Content element
<TextBlock>Username:
</TextBlock>
• Attached property
<TextBlock Grid.Column=„0” Grid.Row=„1” />
DEMO{Hello World} i wszystko jasne
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
Pozycjonowanie elementów
• Właściwości Margin, Padding, itd.• Gotowe kontenery– Canvas– Grid– StackPanel– WrapPanel– Border– Custom Layout
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"/>
DEMOGrafika i animacja
Kontrolki
• Komplet standardowych kontrolek na pokładzie
(TextBox, TextBlock, CheckBox, Button itd.)
• Dodatkowe kontrolki np. z Silverlight Control
Toolkit (wykresy, kalendarze itd.)
Praca z danymi• Binding
• OneWay
• OneTime
• TwoWay
• Bindowanie 2 kontrolek
• DataContext
• ItemSource
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>
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));
Binding do kolekcji
<StackPanel x:Name="LayoutRoot" Background="White">
<ComboBox x:Name="ComboBox1" Margin="5"
Height="40" Width="300" ItemsSource="{Binding
Mode=OneWay}" />
</StackPanel>
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
DEMOBinding i Sample Data
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
Skórki - przykład
DEMOModyfikacja wyglądu kontrolek
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
DEMOVisual State Manager
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)
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
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
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 ;
… 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)
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
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)
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
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
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
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
DEMOSketchflow
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ą
Deep Zoom
• Narzędzie dzieli obraz na fragmenty 256 x 256 pix
• Następnie generuje zdjęcia niższej rozdzielczości
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
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
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
Deep Zoom w Silverlight
• Wyświetlany przez MultiScaleImage• Narzędzie Deep Zoom Composer przygotowuje grafiki
oraz plik XML z opisem
DEMODeep Zoom
