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

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

Platforma aplikacyjna Microsoft .NETPełne spektrum możliwości
Wspólna architektura i narzędzia
Wdrażanie
Projektowanie
Programowanie
Przeglądarka
Aplikacja kliencka

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
Web
Design
Blend
Encoder

Warsztat pracy cd.
Visual Studio (może być Web Developer Express) lub Eclipse Tools for Microsoft Silverlight
Silverlightruntime
Silverlight SDK
Silverlight Tools for Visual Studio 2010
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
<Button Width="100">OK
<Button.Background>
LightBlue
</Button.Background>
</Button>
Button b1 = new Button();
b1.Content = "OK";
b1.Background = newSolidColorBrush (Colors.LightBlue);
b1.Width = 100;
Dim b1 As New Button
b1.Content = "OK"
b1.Background = New _SolidColorBrush _ (Colors.LightBlue)
b1.Width = 100
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

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
{HelloWorld} 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 pixelshaderó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
CustomLayout

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"/>

Demo
Grafika 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" > <TextBoxVerticalAlignment="Top" IsReadOnly="True" Margin="5" TextWrapping="Wrap" Height="50" Width="200" Text="{BindingMode=OneWay}" x:Name="textBox1"/> </Grid>

Binding do 1 wartości (CS)
// Obiekt biznesowy
public classRecording
{
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 DateTimeReleaseDate { get; set; }
// OverridetheToStringmethod.
public overridestringToString()
{
return Name + " by " + Artist + ", Released: " + ReleaseDate.ToShortDateString();
}
}
// Binding
textBox1.DataContext = new Recording("Chris Sells", "Chris Sells Live",
newDateTime(2008, 2, 5));

Binding do kolekcji
<StackPanel x:Name="LayoutRoot" Background="White"> <ComboBox x:Name="ComboBox1" Margin="5" Height="40" Width="300" ItemsSource="{BindingMode=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

DEMO
Binding 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

DEMO
Modyfikacja 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

DEMO
Visual 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)
Tworzenie żądania
Uri dataLocation = new Uri("http://localhost/oceny.xml");
BrowserHttpWebRequest request =
new BrowserHttpWebRequest(dataLocation);
HttpWebResponse response =
(HttpWebResponse)request.GetResponse();
Przetwarzanie odpowiedzi serwera
StreamReaderresponseReader = new StreamReader(response.GetResponseStream());
string RawResponse = responseReader.ReadToEnd();

Usługi Web Services
Klasy proxy generowane przez Visual Studio (add service reference)
JSON, SOAP, REST/POX, itp.
Windows Communication Foundation (WCF)
Metoda usługi sieciowej
[WebMethod]
public List<Transaction> GetTransactionList() { ... }
Wywoływanie usługi z poziomu klienta
proxy = new BankProxy();
transactionList = proxy.GetTransactionList().ToList();

Przetwarzanie danych
LanguageIntegratedQuery
Składnia T-SQL zintegrowana z językiem C#
Weryfikacja na etapie kompilacji
Dla XML lub dowolnych innych kolekcji (IEnumerable)
varlistaObiektow= from oin DowolnaKolekcjawhere (o.Id>10) orderbyo.Namedescending 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
Isolatedstorage – 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 isolatedstorage

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)

Integracja HTML DOM - SilverlightSystem.Windows.Browser
HtmlPage.
Window
jest
ScriptableObject
HtmlDocument
HtmlElement
HtmlObject

Dostęp do HTML DOM z kodu zarządzanego
Nowa przestrzeń nazw
usingSystem.Windows.Browser;
Statyczna klasa HtmlPage– punkt dostępowy
HtmlPage.Navigate("http://www.microsoft.com");
String server = HtmlPage.DocumentUri.Host;
Podpinamy zdarzenia, wywołujemy metody, dostajemy się do właściwości
HtmlElementmyButton =
HtmlPage.Document.GetElementByID("myButtonID");
myButton.AttachEvent("onclick", new
EventHandler(this.myButtonClicked));
privatevoidmyButtonClicked(object sender, EventArgs e)
{ ... }

Dostęp do kodu zarządzanego z JavaScript
Oznacz właściwość, zdarzenie lub metodę jako [Scriptable]
[Scriptable]
public void Search(string Name) { ... }
Zarejestruj „punkt dostępowy” do obiektu
WebApplication.Current.RegisterScriptableObject
("EntryPoint", this);
Wykorzystaj kod zarządzany z poziomu JavaScript
var control = document.getElementById("SilverlightControl");
control.Content.EntryPoint.Search(input.value);

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
Navigation
Main Menu
Data Entry

Demo
Sketchflow

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 256pix
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 w Silverlight
Wyświetlany przez MultiScaleImage
Narzędzie Deep Zoom Composer przygotowuje grafiki oraz plik XML z opisem

DEMO
Deep Zoom

Q&A?
Michal.Zylinski@microsoft.com
(pamiętajcie o Microsoft BizSpark i WebsiteSpark)

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

by PHPCon Poland on May 29, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 27

Statistics

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