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

  • 3,349 views
Uploaded 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.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,349
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
22
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?
    Michał Żyliński (Michal.Zylinski@microsoft.com,
    http://blogs.msdn.com/michalz)
  • 2. Agenda
    Silverlight – wprowadzenie
    Pierwsza aplikacja na wylot
    Grafika i animacja
    Biznes
    Smaczki
  • 3. Platforma aplikacyjna Microsoft .NETPełne spektrum możliwości
    Wspólna architektura i narzędzia
    Wdrażanie
    Projektowanie
    Programowanie
    Przeglądarka
    Aplikacja kliencka
  • 4. 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)
  • 5. Architektura
  • 6. Warsztat pracy
    Web
    Design
    Blend
    Encoder
  • 7. 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
  • 8. 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/
  • 9. Ś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
    • 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
  • Ciekawsze elementy XAML
    Property attribute
    <Canvas Background=„White”>
    Property element
    <Canvas>
    <Canvas.Background>
    <SolidColorBrush Color=„White”/>
    </Canvas.Background>
    </Canvas>
  • 14. Ciekawsze elementy XAML, c.d.
    Content attribute
    <TextBlock Text=„Username:” />
    Content element
    <TextBlock>
    Username:
    </TextBlock>
    Attached property
    <TextBlock Grid.Column=„0” Grid.Row=„1” />
  • 15. Demo
    {HelloWorld} i wszystko jasne
  • 16. 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
  • 17. Pozycjonowanie elementów
    Właściwości Margin, Padding, itd.
    Gotowe kontenery
    Canvas
    Grid
    StackPanel
    WrapPanel
    Border
    CustomLayout
  • 18. 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"/>
  • 19. Demo
    Grafika i animacja
  • 20. Kontrolki
    Komplet standardowych kontrolek na pokładzie (TextBox, TextBlock, CheckBox, Button itd.)
    Dodatkowe kontrolki np. z Silverlight Control Toolkit (wykresy, kalendarze itd.)
  • 21. Praca z danymi
    Binding
    OneWay
    OneTime
    TwoWay
    Bindowanie 2 kontrolek
    DataContext
    ItemSource
  • 22. 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>
  • 23. 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));
  • 24. Binding do kolekcji
    <StackPanel x:Name="LayoutRoot" Background="White"> <ComboBox x:Name="ComboBox1" Margin="5" Height="40" Width="300" ItemsSource="{BindingMode=OneWay}" />
    </StackPanel>
  • 25. 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
  • 26. DEMO
    Binding i Sample Data
  • 27. 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
  • 28. Skórki - przykład
  • 29. DEMO
    Modyfikacja wyglądu kontrolek
  • 30. 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
  • 31. DEMO
    Visual State Manager
  • 32. 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)
  • 33. 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();
  • 34. 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();
  • 35. 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;
  • 36. … 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)
  • 37. 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
  • 38. 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)
  • 39. Integracja HTML DOM - SilverlightSystem.Windows.Browser
    HtmlPage.
    Window
    jest
    ScriptableObject
    HtmlDocument
    HtmlElement
    HtmlObject
  • 40. 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)
    { ... }
  • 41. 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);
  • 42. 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
  • 43. 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
  • 44. Demo
    Sketchflow
  • 45. 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ą
  • 46. Deep Zoom
    Narzędzie dzieli obraz na fragmenty 256 x 256pix
    Następnie generuje zdjęcia niższej rozdzielczości
  • 47. 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
  • 48. 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
  • 49. 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
  • 50. Deep Zoom w Silverlight
    Wyświetlany przez MultiScaleImage
    Narzędzie Deep Zoom Composer przygotowuje grafiki oraz plik XML z opisem
  • 51. DEMO
    Deep Zoom
  • 52. Q&A?
    Michal.Zylinski@microsoft.com
    (pamiętajcie o Microsoft BizSpark i WebsiteSpark)