Silverlight 2 Jukka Wallasvaara jukkawallasvaara.spaces.live/ Microsoft

1. Silverlight 2 Jukka Wallasvaara http://jukkawallasvaara.spaces.live.com/ Microsoft

2. Silverlight Tehokasmonenalustankäyttäjäkokemus • Media on yhtenäosanamonipuolisteninternet- sovellustenluontia • Asennus on nopeaajahelppoaloppukäyttäjälle • Yhdenmukainenkäyttäjäkokemuseriympäristöissä • Windows, Mac, Linux, Mobiili/ IE, Firefox, Safari Joustavaohjelmointimallijayhteensopivattyökalut • Integroituunykyisiin web -tekniikoihin • Perustuu .NET Framework ympäristöön • Omatroolipohjaisettyökalutkäyttöliittymäsuunnittelijoillejakehittäjille Tehokas, kustannusoptimaallinenjaentistälaadukkaampi media • HD tukimobiililaitteisiin: SMPTE VC-1 • Laajamediaekosysteemi • Ratkaisutreaaliaikaiseen- jatilauspohjaiseenjulkaisuun

3. 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

5. Silverlight 2 ominaisuuksia.. • .NET Support* • C# and VB.NET* • LINQ* • XML APIs* • Generics* • HTML Integration* • JSON Serializer • Local storage* • Crypto APIs (AES)* • Threading* • 2D, Graphics • Audio, Video • Animations • Text, Text Input* • Controls* • Layout* • Styles/Templates* • Data Binding* • Networking • HTTP/S and Sockets* • * Silverlight 2

6. .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ä

7. Silverlight vs. työpöytäsovellukset • Silverlight:in .NET on osajoukko täydestä .NET Framework:sta • Tarkoitettu tukemaan RIA-ja Mediasovelluksia • Common core .NETkehitysmalli • Common APItsamoja selain- ja työpöytä- sovelluksissa • Common WPF UIohjelmointimallit 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ä

8. 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

9. Silverlight ja Webselain HTML:n hallinta uudesta nimiavaruudesta usingSystem.Windows.Browser; StaattinenHtmlPageluokkatarjoaaohjelmakahvan HtmlPage.Window.Navigate("http://www.microsoft.com"); String server = HtmlPage.Document.DocumentUri.Host; Tapahtumat, metodikutsutjaominaisuudetsaatavilla HtmlElementmyButton = HtmlPage.Document.GetElementById("myButtonID"); myButton.AttachEvent("onclick", newEventHandler(this.myButtonClicked)); private void myButtonClicked(object sender, EventArgs e) { ... }

10. 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

11. Tuumasta toimeenSilverlight2

12. 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 Studionobject browser on hyvätapa API:en katsomiseen

13. Demo: My First Silverlight

14. XAML, elementit ja kontrollit

15. XAML • XAML = eXtensible Application Markup Language • Joustava XML pohjainendokumenttiskeema • Tehokkaattyökalutkäytössä • Jasiltikinluettavaajakäsinmuunnettaa

16. XAML esimerkki <Grid> <TextBlockFontSize="32" Text="Hello world" /> </Grid> Hello world

17. Markup = Object Model <TextBlockFontSize="32" Text="Hello world" /> • = TextBlock t = new TextBlock(); t.FontSize = 32; t.Text = "Hello world"; Kaikki, mitävoidaanesittääXAML:ssavoidaanmyösohjelmallisestiluoda tai muuttaa.

18. <TextBlock /> <TextBlock>Hello</TextBlock> Hello <TextBlockFontSize="18">Hello</TextBlock> Hello <TextBlock FontFamily="Courier New">Hello</TextBlock> Hello Hello there, how are you? <TextBlockTextWrapping="Wrap" Width="100"> Hello there, how are you? </TextBlock> Hello there, how are you? <TextBlock> Hello there,<LineBreak/>how are you? </TextBlock>

19. <Rectangle /> <Ellipse /> <Line /> <Polygon /> <PolyLine /> <Path /> Elementit

20. x:Name • Kontrollin nimeäminen mahdollistaa sen hallitsemisen sovelluskoodista • Visual Studio luo automaattisesti oliot kaikille x:name elementeille <Button x:Name=“btnButton”/> public void Page_Loaded(sender, MouseEventArgs e) { btnButton.Content= “Push Me!”; }

21. 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“/> public void btnButton_Click(object sender, RoutedEventArgs e) { // todo: add code }

22. Siveltimet (Brushes) • Kuvaavat, mitenobjekti on “maalattu” • Objektienmaalaukseen (esim. Fill) • Viivojenmaalaukseen (esim. Stroke) • Siveltimienvaihtoehdot: • Solid color brushes • Gradient brushes • Image brushes • Video brushes

23. Demo: Tuning My Silverlight

24. 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 b = new Button(); b.Width = 150; b.Height = 50; b.Content = “Push Me";

25. 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

26. Deep Zoom • Tarjoaasaumattomankatselukokemuksenvaltavienkuvienkanssa • Ladataan vain se osakuvasta, jokasillähetkellä on tarpeen. • Muuntaasuuretkuvatmonipuolisestikäytettäviksijaskaalautuviksikokonaisuuksiksi

27. Deep Zoom • Esikäsittelyohjelmapilkkookuvan 256 x 256 palasiin • Luokustakinvastaavastaalueestamatalammanresoluutionkuvat.

28. Deep Zoom – Miten se toimii? • Kun kuvanäytetäänpäätelaitteessa, matalimmanresoluutionkuvaladataanensin • Kun tarkemmanresoluutionkuvat on ladattu, ne vaihdetaanpehmeästitarkempaan

29. Deep Zoom – Miten se toimii? • Kun kuvanäytetäänpäätelaitteessa, matalimmanresoluutionkuvaladataanensin • Kun tarkemmanresoluutionkuvat on ladattu, ne vaihdetaanpehmeästitarkempaan

30. Deep Zoom – Miten se toimii? • Kun kuvanäytetäänpäätelaitteessa, matalimmanresoluutionkuvaladataanensin • Kun tarkemmanresoluutionkuvat on ladattu, ne vaihdetaanpehmeästitarkempaan

31. Deep Zoom • KäytetäänMultiScaleImage -kontrollilla • Kuvamateriaalija XML -kuvaustiedostoluodaan Deep Zoom Composer - esikäsittelytyökalulla

32. Demo: Deep Zoom Seadragon Photosynth Deep Zoom

33. 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.

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