Silverlight i PHP - jak budować interfejs nowoczesnych aplikacji internetowych?
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 4,283 views

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.

Statistics

Views

Total Views
4,283
Views on SlideShare
4,256
Embed Views
27

Actions

Likes
1
Downloads
21
Comments
0

1 Embed 27

http://www.slideshare.net 27

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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 – 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
    • DEMO
      Deep Zoom
    • Q&A?
      Michal.Zylinski@microsoft.com
      (pamiętajcie o Microsoft BizSpark i WebsiteSpark)