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

Introduksjon til Microsoft Silverlight Olav Tollefsen ) Utvikler- og plattformteamet Microsoft Norge

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

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

V1 Plattform støtte

Silverlight applikasjoner

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

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)

Hvordan bygge en Silverlight applikasjon?

Template for Visual Studio 2005 Ligger under Tools katalogen i SDK

Template for Visual Studio 2005

Instansiering av Silverlight i browser

XAML (GUI)

JavaScript (kode)

Debugging av JavaScript

Vista: Kjør VS 2005 som Administrator

Opprette Silverlight prosjekt

Verktøy for å bygge Silverlight applikasjone

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

Kode: Visual Studio 2005 (Orcas blir bedre)

Grafikk-elementer: Expression Design (vektorbasert, XAML)

HTML sider: Expression Web (JavaScript / CSS)

XAML GUI: Expression Blend

Expression Media Encoder (Beta 2)

Hva inneholder Silverlight som plattform?

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

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

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

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

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

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>

Shapes

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>

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>

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>

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);

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

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”;}

Bygge en Silverlight Media applikasjon

Where To Learn More Silverlight Dev Center on MSDN Great SDK documentation and Quickstart samples Good blogs to watch:

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