Silverlight 2Jukka Wallasvaarahttp://jukkawallasvaara.spaces.live.com/Microsoft

SilverlightTehokas monen alustan käyttäjäkokemus• Media on yhtenä osana monipuolisten internet-

sovellusten luontia• Asennus on nopeaa ja helppoa loppukäyttäjälle• Yhdenmukainen käyttäjäkokemus eri ympäristöissä• Windows, Mac, Linux, Mobiili / IE, Firefox, Safari

Joustava ohjelmointimalli ja yhteensopivat työkalut• Integroituu nykyisiin web -tekniikoihin• Perustuu .NET Framework ympäristöön• Omat roolipohjaiset työkalut

käyttöliittymäsuunnittelijoille ja kehittäjille

Tehokas, kustannusoptimaallinen ja entistä laadukkaampi media

• HD tuki mobiililaitteisiin: SMPTE VC-1• Laaja mediaekosysteemi• Ratkaisut reaaliaikaiseen- ja tilauspohjaiseen

julkaisuun

Silverlight 2• Media

– Käyttäjäkokemuksen parantaminen• Adaptive Streaming• Progressive Download

• Sovellukset– RIA -sovelluksiin entistä tehokkaampia ja

häkellyttävämpiä mahdollisuuksia.• Mobiili

– Tulevat sovellusympäristöt

Silverlight 2 ominaisuuksia..• 2D, Graphics• Audio, Video• Animations• Text, Text Input*• Controls*• Layout*• Styles/Templates*• Data Binding*• Networking

– HTTP/S and Sockets*

* Silverlight 2

• .NET Support*• C# and VB.NET*

• LINQ*• XML APIs*• Generics*• HTML Integration*

• JSON Serializer• Local storage*• Crypto APIs (AES)*• Threading*

.NET + Silverlight• Monialusta ja -selainlaajennus

– Mac, Windows, Linux, Mobiili: Windows Mobile ja Nokia (S60, S40 ja internet tablet)

– Safari, Firefox, IE, Konquererja Opera

– 4.3MB asennuspaketti helpolla asennusprosessilla

• Hyvin tuottava kehitysympäristö– Monikielituki – VB, C#, JavaScript, Python, Ruby– Laajat luokkakirjastot toiminnallisuuksia käytössä

• Visual Studio ja Expression -työkalut käytössä

Silverlight vs. työpöytäsovellukset

• Silverlight:in .NET on osajoukko täydestä .NET Framework:sta– Tarkoitettu tukemaan RIA- ja Mediasovelluksia

• Common core .NET kehitysmalli– Common APIt samoja selain- ja työpöytä-

sovelluksissa– Common WPF UI ohjelmointimallit samoja selain-

ja työpöytäsovelluksissa– Käytössä samat sovelluskehityksen ja

käyttöliittymäsuunnittelun työkalut• Silverlight:in XAML on osajoukko WPF UI

frameworkistä

Silverlight ”Sandbox"

• Sovelluksilla turvallinen hiekkalaatikko

• HTML sivujen tapainen aktivointimalli– Selaimen sisällä ei erillisiä tietoturvaherjoja– Sovellukset estetty tekemästä haitallisia toimintoja

• Silverlight mahdollistaa lisätoiminnallisuuksia selainsovelluksiin:– Turvallinen eristetty tallennustapa (isolated storage)– Sovelluspohjainen tiedostojen latauskontrolli– Cross domain -tuki

Silverlight ja WebselainHTML:n hallinta uudesta nimiavaruudesta

HtmlPage.Window.Navigate("http://www.microsoft.com");String server = HtmlPage.Document.DocumentUri.Host;

HtmlPage.Window.Navigate("http://www.microsoft.com");String server = HtmlPage.Document.DocumentUri.Host;

using System.Windows.Browser;using System.Windows.Browser;

HtmlElement myButton = HtmlPage.Document.GetElementById("myButtonID");myButton.AttachEvent("onclick", new EventHandler(this.myButtonClicked));

private void myButtonClicked(object sender, EventArgs e) { ... }

HtmlElement myButton = HtmlPage.Document.GetElementById("myButtonID");myButton.AttachEvent("onclick", new EventHandler(this.myButtonClicked));

private void myButtonClicked(object sender, EventArgs e) { ... }

Staattinen HtmlPage luokka tarjoaa ohjelmakahvan

Tapahtumat, metodikutsut ja ominaisuudet saatavilla

Silverlight ja Webselain

• Skripti-integraatio:– HTML -sivun JavaScript voi kutsua Silverlightin

metodeja– Silverlight -sovellus voi kutsua JavaScript:n

metodeja HTML sivulla•Selain toiminnallisuus:

– kirjanmerkit– selaimen Takaisin/Eteenpäin toiminnallisuus

Tuumasta toimeenSilverlight 2

Mitä tarvitaan...• Työkalut:

– Silverlight 2 Beta1– Silverlight Tools for Visual Studio 2008 Beta 1– Expression Blend 2.5 March Preview

• Kaikki tarvittava löytyy: www.silverlight.net – Ladattavat työkalut ja dokumentit– Visual Studion object browser on hyvä tapa

API:en katsomiseen

Demo: My First Silverlight

XAML, elementit ja kontrollit

XAML

• XAML = eXtensible Application Markup Language

• Joustava XML pohjainen dokumentti skeema

• Tehokkaat työkalut käytössä– Ja siltikin luettavaa ja käsin muunnettaa

XAML esimerkki

<Grid>

<TextBlock FontSize="32" Text="Hello world" />

</Grid>

<Grid>

<TextBlock FontSize="32" Text="Hello world" />

</Grid>

Hello world

Markup = Object Model

<TextBlock FontSize="32" Text="Hello world" /><TextBlock FontSize="32" Text="Hello world" />

TextBlock t = new TextBlock();t.FontSize = 32;t.Text = "Hello world";

TextBlock t = new TextBlock();t.FontSize = 32;t.Text = "Hello world";

=

Kaikki, mitä voidaan esittää XAML:ssa voidaan myös ohjelmallisesti luoda tai muuttaa.

<TextBlock />

<TextBlock>Hello</TextBlock><TextBlock>Hello</TextBlock> Hello

<TextBlock FontSize="18">Hello</TextBlock>

<TextBlock FontSize="18">Hello</TextBlock>

Hello

<TextBlock FontFamily="Courier New">Hello</TextBlock>

<TextBlock FontFamily="Courier New">Hello</TextBlock>Hello

<TextBlock TextWrapping="Wrap" Width="100"> Hello there, how are you?</TextBlock>

<TextBlock TextWrapping="Wrap" Width="100"> Hello there, how are you?</TextBlock>

Hello there, how are you?

<TextBlock> Hello there,<LineBreak/>how are you?</TextBlock>

<TextBlock> Hello there,<LineBreak/>how are you?</TextBlock>

Hello there, how are you?

Elementit• <Rectangle />• <Ellipse />• <Line />• <Polygon />• <PolyLine />• <Path />

x:Name

• Kontrollin nimeäminen mahdollistaa sen hallitsemisen sovelluskoodista– Visual Studio luo automaattisesti oliot kaikille

x:name elementeille

<Button x:Name=“btnButton”/><Button x:Name=“btnButton”/>

public void Page_Loaded(sender, MouseEventArgs e) { btnButton.Content = “Push Me!”;}

public void Page_Loaded(sender, MouseEventArgs e) { btnButton.Content = “Push Me!”;}

Tapahtumien luonti• Tapahtumakäsittelijät voidaan esitellä

XAML:ssa

• Tai määritellä code-behind tiedostossa– VB – "Handles" avainsanalla– C# -- ohjelmallisesti Page_Loaded vaiheen

esittelyssä

<Button x:Name=“btnButton” Content=“Push Me” Click=“btnButton_Click“/>

<Button x:Name=“btnButton” Content=“Push Me” Click=“btnButton_Click“/>

public void btnButton_Click(object sender, RoutedEventArgs e) { // todo: add code}

public void btnButton_Click(object sender, RoutedEventArgs e) { // todo: add code}

Siveltimet (Brushes)• Kuvaavat, miten objekti on “maalattu”

– Objektien maalaukseen (esim. Fill)– Viivojen maalaukseen (esim. Stroke)

• Siveltimien vaihtoehdot:– Solid color brushes – Gradient brushes– Image brushes– Video brushes

Demo: Tuning My Silverlight

Kontrollit• Uudelleen käytettäviä käyttöliittymä-

elementtejä, joissa on käyttöliittymä ja toiminnallisuus mukana.

<Button x:Name=“MyButton” Content=“Push Me” Width=“150” Height=“50” />

<Button x:Name=“MyButton” Content=“Push Me” Width=“150” Height=“50” />

Button b = new Button();b.Width = 150;b.Height = 50;b.Content = “Push Me";

Button b = new Button();b.Width = 150;b.Height = 50;b.Content = “Push Me";

Joitakin Beta1 kontrolleja..

Form Controls:– TextBox– Button– Toggle/Repeat Button– CheckBox– RadioButton– ListBox

Layout Controls:• StackPanel• Grid / GridSplitter• Canvas• MultiScaleImage

Core Controls:• Border• Image• MediaElement• MultiScaleImage• ToolTip• ScrollViewer

Navigation Controls:• HyperlinkButton• Popup

High-Level Controls:

Calendar

DataGrid

Slider

DateTimePicker

Shapes:Ellipse

Rectangle

Line

TextBlock

Path

Deep Zoom

• Tarjoaa saumattoman katselukokemuksen valtavien kuvien kanssa

• Ladataan vain se osa kuvasta, joka sillä hetkellä on tarpeen.

• Muuntaa suuret kuvat monipuolisesti käytettäviksi ja skaalautuviksi kokonaisuuksiksi

Deep Zoom

• Esikäsittelyohjelma pilkkoo kuvan 256 x 256 palasiin

• Luo kustakin vastaavasta alueesta matalamman resoluution kuvat.

Deep Zoom – Miten se toimii?• Kun kuva näytetään päätelaitteessa,

matalimman resoluution kuva ladataan ensin• Kun tarkemman resoluution kuvat on ladattu,

ne vaihdetaan pehmeästi tarkempaan

Deep Zoom – Miten se toimii?• Kun kuva näytetään päätelaitteessa,

matalimman resoluution kuva ladataan ensin• Kun tarkemman resoluution kuvat on ladattu,

ne vaihdetaan pehmeästi tarkempaan

Deep Zoom – Miten se toimii?• Kun kuva näytetään päätelaitteessa,

matalimman resoluution kuva ladataan ensin• Kun tarkemman resoluution kuvat on ladattu,

ne vaihdetaan pehmeästi tarkempaan

Deep Zoom

• Käytetään MultiScaleImage -kontrollilla• Kuvamateriaali ja XML -kuvaustiedosto

luodaan Deep Zoom Composer - esikäsittelytyökalulla

Demo: Deep Zoom

Seadragon– Photosynth– Deep Zoom

Yhteenveto• Silverlight tarjoaa uskomattoman tehokkaan alustan

RIA -sovellusten tekemiseen– Yksi sama helposti jaettava sovellus useamman

käyttöympäristön selaimeen.– Näyttävien ja suorituskykyisten sovellusten teko on

helppoa ja tehokasta• Silverlight mahdollistaa yhden sovelluskehitysmallin

eri Windows, Mac, Linux ja Mobiililaitteille.

• Lopullinen Silverlight 2 ja sen työkalut saatavissa myöhemmin tänä vuonna.

Jukka WallasvaaraMicrosofthttp://jukkawallasvaara.spaces.live.com/

Kiitos