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,291 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,291
Views on SlideShare
4,264
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)