1. Silverlight z bliska i na wylot
Michał Żyliński (Michal.Zylinski@microsoft.com,
http://blogs.msdn.com/michalz)
Bartłomiej Zass (Bartlomiej.Zass@microsoft.com)
2. Agenda
• Czym jest Silverlight? Od pomysłu do realizacji
• Pierwsza aplikacja – narzędzia i architektura
• Na wylot:
• Grafika i animacja
• Zarządzanie danymi
• Zagadnienia programistyczne (komunikacja, bezpieczeństwo itp.)
• Media
• Integracja z przeglądarką
• Co w przyszłości?
• Gdy sprawy się komplikują…
• Zastosowania
• Co dalej?
3. Platforma aplikacyjna Microsoft .NET
Pełne spektrum możliwości
Wspólna architektura i
narzędzia
Wdrażanie
Programowanie Projektowanie
Przeglądarka Aplikacja kliencka
4. Ś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=quot;100quot;>OK Button b1 = new Button(); Dim b1 As New Button
<Button.Background> b1.Content = quot;OKquot;; b1.Content = quot;OKquot;
LightBlue b1.Background = new b1.Background = New _
</Button.Background> SolidColorBrush SolidColorBrush _
</Button> (Colors.LightBlue); (Colors.LightBlue)
b1.Width = 100; b1.Width = 100
5. Microsoft Silverlight =
Niezależna od przeglądarki
Niezależna od platformy
Niezależna od urządzenia
Wtyczka pozwalająca na tworzenie
interaktywnych aplikacji
internetowych
Wykorzystująca możliwości
platformy .NET
6. Architektura
Silverlight 1
.NET for Silverlight Server
Dane WPF for Silverlight
Silverlight 2
LINQ LINQ-to-XML Extensible Controls Web Services ASP.NET
AJAX Legenda
REST
Języki dynamic BCL POX Libs
<asp:xaml>
RSS
JSON
Ruby Python Generic Collections SOAP <asp:media>
s
Common Language Runtime
XAML
UI Core Inputs Media Controls DRM
2D Vectors Images Keyboard WMV / VC1 Layout Media
Animation Transforms Mouse WMA Editing
Text Ink MP3
Presentation Core
Integrated
DOM JavaScript
Networking Installer
Integration Engine
Stack
Browser Host
9. Silverlight w liczbach
400,000
18 miesięcy 300m+ Programistów
od czasu Pobranych
&
premiery wtyczek
projektantów
Source: Microsoft Developer Tracker 2008 Report
10. Silverlight w liczbach
400,000 200+
18 miesięcy 300m+ Programistów partnerów w
od czasu Pobranych
&
30 krajach
premiery wtyczek
projektantów
11. Silverlight w liczbach
400,000 200+
200+
18 miesięcy 300m+ Programistów Stron i
partnerów w
od czasu Pobranych
& produktów
30 krajach
premiery wtyczek
projektantów MS
12. Silverlight w liczbach
Tysiące
400,000 200+
200+
18 miesięcy 300m+ aplikacji na
Programistów Stron i
partnerów w
od czasu Pobranych całym
& produktów
30 krajach
premiery wtyczek
świecie
projektantów MS
www.silverlight.net/showcase
13. Warsztat pracy
Web
Design
Blend
Media
Encoder
Projektant Programista
14. Warsztat pracy cd.
1. Visual Studio (może być Web Developer Express)
2. Silverlight runtime
3. Silverlight SDK
4. Silverlight Tools for Visual Studio 2008
5. Expression Blend 3 Beta
Wszystko to (i wiele więcej) dostępne
przez Web Platform Installer:
http://www.microsoft.com/web
15. 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/
17. Grafika
• XAML, XAML, XAML i wszechobecne wektory
• Rozmieszczenie elementów
• Canvas, Grid, StackPanel, Border, Custom Layout
• Margin, Padding, itd.
• Przestrzeń 3D
• Integracja z innymi narzędziami
• np. Adobe Photoshop, Adobe Illustrator
18. Grafika – c.d.
• Bitmap API
• Pixel Shaders
• Praca z tekstem (wsparcie dla lokalnych czcionek)
• Akceleracja hardware’owa GPU
• Kolory systemowe
19. Deep Zoom
• Płynne przeglądanie i powiększanie ogromnych obrazów
• Tylko dane, które aktualnie ogląda użytkownik
• Symuluje grafikę wektorową
20. Deep Zoom
• Narzędzie dzieli obraz na
fragmenty 256 x 256 pix
• Następnie generuje zdjęcia
niższej rozdzielczości
21. 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
22. 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
23. 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
24. Deep Zoom w Silverlight
• Wyświetlany przez MultiScaleImage
• Narzędzie Deep Zoom Composer przygotowuje
grafiki oraz plik XML z opisem
26. Animacja
• Wszystko jest obiektem
• Transformacje, skala, przezroczystość, itp.
• Storyboard
• Animować można dowolną właściwość
• Modyfikacja wartości (od-do-co ile)
• Typy animacji
• Animacja liniowa
• Spline
• Własny typ, wzór, itp.
• Key frames
30. Praca z danymi - kontrolki
• Dołączanie kontrolek przez pliki DLL
• UserControls
• Silverlight Control Toolkit
• Otwarty kod
• Bardzo częste release’y projektu
33. Binding do 1 wartości (CS)
// Obiekt biznesowy
public 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 + quot; by quot; + Artist + quot;, Released: quot; + ReleaseDate.ToShortDateString();
}
}
// Binding
textBox1.DataContext = new Recording(quot;Chris Sellsquot;, quot;Chris Sells Livequot;,
new DateTime(2008, 2, 5));
35. Skórki
• Aplikowanie styli in-line
• Nie ma sensu dla wielu kontrolek powielać te same wpisy
• Szablony / tematy (Resources)
• Page.xaml – ograniczone do okna
• App.xaml
• Style też są obiektem – możliwość tworzenia skórek
tematycznych (np. przechowywanych w osobnych plikach
XAML niezależnie od aplikacji)
• Kaskadowość, dziedziczenie
• Zmiany w trakcie działania aplikacji
37. Visual State Manager (VSM)
• Definiowane stany kontrolek
• Np. MouseOver, MouseDown, itp.
• Możliwość definiowania stylu kontrolki w poszczególnych
stanach
• Możliwość definiowania charakteru przejść pomiędzy stanami
• Obsługują wszystkie kontrolki dostarczane przez Microsoft
• Zalecenia dla firm tworzących kontrolki
38. DataTemplate
• Możliwość zmodyfikowania wyglądu elementów
• Np. DataGrid!!!
• Inne – np. Combobox
<ComboBox x:Name=quot;ComboWithTemplatequot; ItemsSource=quot;{Binding Mode=OneWay}quot; >
<ComboBox.ItemTemplate>
<DataTemplate>
<StackPanel Orientation=quot;Horizontalquot; Margin=quot;2quot;>
<TextBlock Text=quot;Artist:quot; Margin=quot;2quot; />
<TextBlock Text=quot;{Binding Artist}quot; Margin=quot;2quot; />
<TextBlock Text=quot;CD Name:quot; Margin=quot;10,2,0,2quot; />
<TextBlock Text=quot;{Binding Name}quot; Margin=quot;2quot; />
</StackPanel>
</DataTemplate>
</ComboBox.ItemTemplate>
</ComboBox>
39. Bindowanie a szablony
Dane (obiekty .NET):
Bindujemy do ItemsControl (lista):
{{FileName=“Html.html”, FileImageUrl=“html.jpg”},
{FileName=“Image.jpg”, FileImageUrl=“jpg.jpg”}}
40. LINQ
• Language Integrated Query
• Składnia T-SQL zintegrowana z językiem C#
• Weryfikacja na etapie kompilacji
• Dla XML lub dowolnych kolekcji (IEnumerable)
• Już nie tylko XQuery…
42. 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(quot;http://localhost/oceny.xmlquot;);
BrowserHttpWebRequest request =
new BrowserHttpWebRequest(dataLocation);
HttpWebResponse response =
(HttpWebResponse)request.GetResponse();
Przetwarzanie odpowiedzi serwera
StreamReader responseReader = new
StreamReader(response.GetResponseStream());
string RawResponse = responseReader.ReadToEnd();
43. 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();
44. Asynchroniczna komunikacja
• Wsparcie zarówno dla synchronicznej i asynchronicznej
komunikacji
Wywołaj asynchroniczne zapytanie
proxy.BeginGetTransactionList(
new AsyncCallback(OnTransactionDataLoaded), null);
Po otrzymaniu odpowiedzi – wywołaj kod
private void OnTransactionDataLoaded(IAsyncResult iar)
{
transactionList = proxy.EndGetTransactionList(iar).ToList();
}
45. Komunikacja - inne
• Wielowątkowość!!!
• Sockets
• Połączenia lokalne (bezpośrednie)
47. 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
48. 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)
50. Multimedia
• Silverlight zawiera wbudowane kodeki:
• Wideo: VC-1, WMV 7,8,9, H.264 (Nowość)
• Audio: WMA 7-10 Pro, MP3, AAC (Nowość)
• Jakość aż do pełnego HD (1080p)
• Od v.2 wsparcie dla PlayReady DRM (kompatybilne wstecz z
WM DRM)
• Od v.3 odtwarzanie multimediów może wykorzystywać
zewnętrzne kodeki – otwarta architektura
• Akceleracja sprzętowa (przydatna szczególnie przy
pełnoekranowym HD)
51. Multimedia
• MediaElement - elastyczna, w pełni programowalna kontrolka
• Gotowce:
• Expression Encoder
• Visual Studio (kontrolka MediaPlayer)
52. Multimedia - dygresja serwerowa
• Bezpłatne rozszerzenia do Windows Server 2008
• Windows Media Services
• IIS Media Services
• Rozszerzenie funkcjonalności serwera WWW
• Smooth Streaming (również w trybie Live!)
• Web Playlists
• Bitrate throttling
• Edge caching
• Advanced logging
56. Integracja HTML DOM - Silverlight
System.Windows.Browser
ScriptableObject
jest HtmlPage.
HtmlObject Window
HtmlDocument HtmlElement
57. Dostęp do HTML DOM z kodu
zarządzanego
Nowa przestrzeń nazw
using System.Windows.Browser;
Statyczna klasa HtmlPage – punkt dostępowy
HtmlPage.Navigate(quot;http://www.microsoft.comquot;);
String server = HtmlPage.DocumentUri.Host;
Podpinamy zdarzenia, wywołujemy metody, dostajemy się
do właściwości
HtmlElement myButton =
HtmlPage.Document.GetElementByID(quot;myButtonIDquot;);
myButton.AttachEvent(quot;onclickquot;, new
EventHandler(this.myButtonClicked));
private void myButtonClicked(object sender, EventArgs e)
{ ... }
58. 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
(quot;EntryPointquot;, this);
Wykorzystaj kod zarządzany z poziomu JavaScript
var control = document.getElementById(quot;SilverlightControlquot;);
control.Content.EntryPoint.Search(input.value);
59. SketchFlow
• Blend 3 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
60. Architektura
• Dużo nacisku na separację 3 warstw aplikacji i porządek w
kodzie
• Patterns & Practices
• Dział w Microsoft składający się z architektów, który opracowuje opisy
najlepszych praktyk architektonicznych
• Tworzenie specjalnych frameworków, przykładów poprawnie
zaprojektowanych architektur
• Application Architecture Guidance
• PRISM
• .NET RIA Services
62. Woodgrove Financials
• Demo aplikacji finansowej przygotowanej na Financial
Services Developer Conference 2008
• Przykład wykorzystania RIA do rozwiązania typowych
problemów dziedzinowych: agregacja i wizualizacja
danych, bogata, intuicyjna nawigacja, alternatywne podejście
do obsługi klienta
• Kod źródłowy: http://www.financialdevelopers.com/
• Wersja on-line:
http://www.cookingwithxaml.com/meals/financials/ default.html
64. Patient Journey Demonstrator
• Przykładowa aplikacja prezentująca możliwości Microsoft
Health Common User Interface (http://www.mscui.net)
• MS CUI to zbiór zaleceń praktycznych dotyczących
projektowania interfejsu aplikacji medycznych oraz gotowych
kontrolek i przykładów (WPF i Silverlight)
• PJD to przykład realizacji całkowitego scenariusza obsługi
pacjenta: od rejestracji po badania specjalistyczne
• Doskonałe wykorzystanie idei S+S (ścisła integracja z
zewnętrznymi usługami, elastyczne i skalowalne UI)
66. Ciekawostki ze świata
• www.kbb.com/KBB/PerfectCarFinder/PhotoEdition.asp
x
• http://code.google.com/p/myspace-silverlight-sdk/
• http://www.netflix.com
• http://www.k2.com/en/displaycontent.aspx?ID=901
• http://dobbschallenge2.com/ - a jednak się gra
69. Program BizSpark
• Oferta dla młodych przedsiębiorców (nie tylko
przedsiębiorstw!)
• Formalne kryteria:
• Działalność software’owa
• Mniej niż 3 lata
• Poniżej 0,5 mln $ przychodu
• Dostęp do programu poprzez jednego z polskich partnerów
biznesowych
71. Następne kroki
• Konferencje, seminaria, warsztaty…
• Np. Microsoft Web Days 2009 w Warszawie (22. kwietnia)
• Lokalne społeczności
• Np. Krakowska Grupa .NET (szczegóły na http://www.ms-groups.pl)
• Bezpośrednio
• Michał Żyliński
(michal.zylinski@microsoft.com, http://blogs.msdn.com/michalz)
• Bartłomiej Zass (bartlomiej.zass@microsoft.com)
