Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji

internetowych?

Michał Żyliński (Michal.Zylinski@microsoft.com,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

Q&A?

Michal.Zylinski@microsoft.com

(pamiętajcie o Microsoft BizSpark i WebsiteSpark)