WPF/E Introduksjon til Olav Tollefsen Utvikler- og plattformteamet Microsoft Norge.

Presentasjon om: "WPF/E Introduksjon til Olav Tollefsen Utvikler- og plattformteamet Microsoft Norge."— Utskrift av presentasjonen:

1 WPF/E Introduksjon til Olav Tollefsen (olavt@microsoft.com) Utvikler- og plattformteamet Microsoft Norge

2 Introduksjon til Microsoft Silverlight Olav Tollefsen (olavt@microsoft.com) ) Utvikler- og plattformteamet Microsoft Norge

3 Microsoft Silverlight cross-browser cross-platform plug-in for delivering the next generation of media experiences & rich interactive applications (RIAs) for the Web

4 Hvorfor Silverlight? Muliggjør bedre brukeropplevelse / mer funksjonalitet for web applikasjoner Vektor grafikk, Media, Animasjon Lett å integrere med eksisterende løsninger XAML kode for å beskrive GUI JavaScript eventhåndtering / kode (.NET codebehind senere) Støtte for å kjøre på flere plattformer og browsere Liten runtime (1.1MB) som lastes ned første gang Internet Explorer, Firefox Windows, Macintosh

5 V1 Plattform støtte

6 Silverlight applikasjoner

7 Hva er forskjellen på Silverlight og Windows Presentation Foundation? Windows Presentation Foundation er Microsoft’s strategiske plattform for å bygge Windows applikasjoner Kjører kun på Windows og krever.NET 3.0 runtime installert Støtter full.NET programmeringsmodell Kan kjøres utenfor browser som en selvstendig applikasjon

8 Hva er forskjellen på Silverlight og Windows Presentation Foundation? Silverlight er laget for å nå “alle” web brukere Kjører kun i browser Støtter flere platformer Støtter et subset av WPF sine muligheter Støtter ikke en full.NET programmeringsmodell (kjører på andre plattformer)

9 Hvordan bygge en Silverlight applikasjon?

10 Template for Visual Studio 2005 Ligger under Tools katalogen i SDK

11 Template for Visual Studio 2005

12

13 Instansiering av Silverlight i browser

14 XAML (GUI)

15 JavaScript (kode)

16 Debugging av JavaScript

17 Vista: Kjør VS 2005 som Administrator

18 Opprette Silverlight prosjekt

19 Verktøy for å bygge Silverlight applikasjone

20 Designer-Developer Productivity •Microsoft Tools for Designer & Developers •Declarative Programming through XAML •Third Party Tools (e.g. Aurora by Mobiform, ZAM 3D by Electric Rain) Designers design With XAML designers & developers can streamline their collaboration Developers add business logic

21 Kode: Visual Studio 2005 (Orcas blir bedre)

22 Grafikk-elementer: Expression Design (vektorbasert, XAML)

23 HTML sider: Expression Web (JavaScript / CSS)

24 XAML GUI: Expression Blend

25 Expression Media Encoder (Beta 2)

26 Hva inneholder Silverlight som plattform?

27 Interactive Content Experiences Powerful vector graphics engine Device independent resolution scaling Flexible animation system Enable declarative animation of any element Declarative markup approach enables great tool integration and designer/dev workflow Easy AJAX scripting with JavaScript

28 Media Support Built-in Audio and Video Codec Support MP3 and WMA Audio WMV video Supports downloading media via standard HTTP requests (works with any web server) Will also support broadcast/live streaming later this spring for webcasts, events, etc. Supports 720 HD video, full screen projection, and best compression in industry

29 Drawing with XAML Basic Vocabulary of Silverlight XAML Elements CanvasBrushes Basic shapes Rectange, Ellipse, Line, Polygon, etc. TextBlockImage

30 XAML Sample For example: <Canvas xmlns="..." xmlns:x="..."> xmlns:x="..."> </Canvas> <Canvas xmlns="..." xmlns:x="..."> xmlns:x="..."> </Canvas>

31 Canvas Is a Drawing Surface Children have relative positions: <Rectangle Canvas.Top="25" Canvas.Left="25" <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill=“Yellow" /> Width="200" Height="150" Fill=“Yellow" /></Canvas> <Rectangle Canvas.Top="25" Canvas.Left="25" <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill=“Yellow" /> Width="200" Height="150" Fill=“Yellow" /></Canvas> The Canvas The Rectangle

32 Canvas (2) Position relative to first Canvas parent: <Rectangle Canvas.Top="25" Canvas.Left="25" <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="Black" /> Width="200" Height="150" Fill="Black" /> <Canvas Canvas.Top="25" Canvas.Left="25" <Canvas Canvas.Top="25" Canvas.Left="25" Width="150" Height="100" Width="150" Height="100" Background="Red"> Background="Red"> <Ellipse Canvas.Top="25" <Ellipse Canvas.Top="25" Canvas.Left="25" Canvas.Left="25" Width="150" Width="150" Height="75" Height="75" Fill=“White" /> Fill=“White" /> </Canvas> <Rectangle Canvas.Top="25" Canvas.Left="25" <Rectangle Canvas.Top="25" Canvas.Left="25" Width="200" Height="150" Fill="Black" /> Width="200" Height="150" Fill="Black" /> <Canvas Canvas.Top="25" Canvas.Left="25" <Canvas Canvas.Top="25" Canvas.Left="25" Width="150" Height="100" Width="150" Height="100" Background="Red"> Background="Red"> <Ellipse Canvas.Top="25" <Ellipse Canvas.Top="25" Canvas.Left="25" Canvas.Left="25" Width="150" Width="150" Height="75" Height="75" Fill=“White" /> Fill=“White" /> </Canvas>

33 Shapes

34 Integrating Media Used to show media (music or video) Control Video with Code No Built-in Controls – You build the UI in XAML <Canvas xmlns="..." xmlns:x="..."> xmlns:x="..."> </Canvas> <Canvas xmlns="..." xmlns:x="..."> xmlns:x="..."> </Canvas>

35 Naming Objects in XAML XAML objects can be named by adding a x:Name attribute to the element: They can then be referenced by other XAML elements elsewhere in the file Can then be programmed against via code <Canvas> <Ellipse x:Name="theCircle" Width="100" <Ellipse x:Name="theCircle" Width="100" Height="100" Fill="Yellow" /> Height="100" Fill="Yellow" /></Canvas><Canvas> <Ellipse x:Name="theCircle" Width="100" <Ellipse x:Name="theCircle" Width="100" Height="100" Fill="Yellow" /> Height="100" Fill="Yellow" /></Canvas>

36 Find XAML object via script findName(name) method on Silverlight control var wpfeControl = document.getElementById("WpfeControl1"); var theCircle = wpfeControl.findName("theCircle"); if (theCircle != null) theCircle.opacity =.5; theCircle.opacity =.5; var wpfeControl = document.getElementById("WpfeControl1"); var theCircle = wpfeControl.findName("theCircle"); if (theCircle != null) theCircle.opacity =.5; theCircle.opacity =.5; <Canvas xmlns="..." xmlns:x="..."> xmlns:x="..."> <Ellipse x:Name="theCircle" Width="100" <Ellipse x:Name="theCircle" Width="100" Height="100" Fill="Yellow" /> Height="100" Fill="Yellow" /></Canvas> <Canvas xmlns="..." xmlns:x="..."> xmlns:x="..."> <Ellipse x:Name="theCircle" Width="100" <Ellipse x:Name="theCircle" Width="100" Height="100" Fill="Yellow" /> Height="100" Fill="Yellow" /></Canvas>

37 CreateFromXaml method Allows dynamic Silverlight object creation and insertion into existing XAML tree Enables very interesting AJAX scenarios where the XAML fragment is created and returned from a server var wpfeControl = document.getElementById("WpfeControl1"); var rootCanvas2 = wpfeControl.findName("canvas2"); var fragment =' '; var newRect = wpfeControl.createFromXaml(fragment); var newRect = wpfeControl.createFromXaml(fragment); rootCanvas2.children.add(newRect); var wpfeControl = document.getElementById("WpfeControl1"); var rootCanvas2 = wpfeControl.findName("canvas2"); var fragment =' '; var newRect = wpfeControl.createFromXaml(fragment); var newRect = wpfeControl.createFromXaml(fragment); rootCanvas2.children.add(newRect);

38 Silverlight Events Standard Events LoadedMouseMoveMouseEnterMouseLeaveMouseLeftButtonDownMouseLeftButtonUp Use.NET / ASP.NET AJAX event pattern: function onMouseEnter(sender, eventargs) { sender.Fill = “Red”; sender.Fill = “Red”;} function onMouseEnter(sender, eventargs) { sender.Fill = “Red”; sender.Fill = “Red”;}  New in Feb CTP:  KeyUp  KeyDown  GotFocus  LostFocus

39 Silverlight Event Example <Canvas xmlns="..." xmlns:x="..."> xmlns:x="..."> <Ellipse MouseEnter="javascript:onMouseEnter" <Ellipse MouseEnter="javascript:onMouseEnter" MouseLeave="javascript:onMouseLeave" MouseLeave="javascript:onMouseLeave" Height="100" Width="100" Fill="Teal" /> Height="100" Width="100" Fill="Teal" /> <Ellipse Canvas.Left="120“ <Ellipse Canvas.Left="120“ MouseEnter="javascript:onMouseEnter" MouseEnter="javascript:onMouseEnter" MouseLeave="javascript:onMouseLeave" MouseLeave="javascript:onMouseLeave" Height="100" Width="100" Fill="Teal" /> Height="100" Width="100" Fill="Teal" /></Canvas> <Canvas xmlns="..." xmlns:x="..."> xmlns:x="..."> <Ellipse MouseEnter="javascript:onMouseEnter" <Ellipse MouseEnter="javascript:onMouseEnter" MouseLeave="javascript:onMouseLeave" MouseLeave="javascript:onMouseLeave" Height="100" Width="100" Fill="Teal" /> Height="100" Width="100" Fill="Teal" /> <Ellipse Canvas.Left="120“ <Ellipse Canvas.Left="120“ MouseEnter="javascript:onMouseEnter" MouseEnter="javascript:onMouseEnter" MouseLeave="javascript:onMouseLeave" MouseLeave="javascript:onMouseLeave" Height="100" Width="100" Fill="Teal" /> Height="100" Width="100" Fill="Teal" /></Canvas> function onMouseEnter(sender) { sender.Fill = “Coral”; sender.Fill = “Coral”;} function onMouseLeave(sender) { sender.Fill = “Teal”; sender.Fill = “Teal”;} function onMouseEnter(sender) { sender.Fill = “Coral”; sender.Fill = “Coral”;} function onMouseLeave(sender) { sender.Fill = “Teal”; sender.Fill = “Teal”;}

40 Bygge en Silverlight Media applikasjon

41 Where To Learn More Silverlight Dev Center on MSDN Great SDK documentation and Quickstart samples Good blogs to watch: http://blogs.msdn.com/mharsh/http://blogs.msdn.com/jstegman/http://www.thewpfblog.com/

42 © 2005 Microsoft Corporation. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.