Presentation is loading. Please wait.

Presentation is loading. Please wait.

Developing with Microsoft Silverlight Mark Johnston Developer & Platform Group Microsoft UK April 2007.

Similar presentations


Presentation on theme: "Developing with Microsoft Silverlight Mark Johnston Developer & Platform Group Microsoft UK April 2007."— Presentation transcript:

1 Developing with Microsoft Silverlight Mark Johnston Developer & Platform Group Microsoft UK April 2007

2 ? www

3 Agenda Overview 1.0 and 1.1 releases Scenarios How to build sites that use Silverlight XAML Graphics, Brushes, Text, Media, Transforms JavaScript Programmability Animation Tools Designer and Developer

4 Building Applications With.NET web deskt op media & RIA web deskt op

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

6 Silverlight Overview Enable richer interactive web experiences Vector Graphics, Media, Animation Integrate cleanly within existing sites XML markup with AJAX JavaScript Easily incorporated within HTML pages Cross Browser and Cross Platform Enabled via small, one-time, 1.1Mb download IE, FireFox, Safari support on Windows and Macintosh systems (both Intel and PPC)

7 A few core Silverlight scenarios Media Interactive Content Experiences Rich Internet Applications

8 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

9 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

10 Rich Internet Applications Future: not all features enabled in 1.1 Silverlight Alpha Rich control encapsulation model Databinding Layout managers Built-in common controls.NET Framework programming model for these scenarios

11 Media and Interactive Content Demo

12 Silverlight Consumer Installation Experience

13 Silverlight 1.0 and 1.1 Browser Host Deploy Friction-Free InstallerFriction-Free Installer Auto-UpdaterAuto-Updater Browser Host Deploy Friction-Free InstallerFriction-Free Installer Auto-UpdaterAuto-Updater Application ServicesApplication Services Presentation Core UI Core Vector Text AnimationImages UI Core Vector Text AnimationImagesInputs Keyboard Mouse Input Inputs Media VC-1 WMA MP3 Media DRMMediaDRMMedia Controls Layout Editing Controls.NET for Silverlight XAMLXAML DataMediaDataMediaWPF Extensible Controls WPF DLR Ruby Python DLR BCL Generics Collections BCL NetworkingRESTRSSSOAPNetworkingRESTRSSSOAP POXJSONPOXJSON V1.0V1.0V1.1V1.1 MS Ajax LibraryMS Ajax Library DOM IntegrationDOM Integration MS Ajax LibraryMS Ajax Library DOM IntegrationDOM Integration Friction-Free InstallerFriction-Free Installer Auto-UpdaterAuto-Updater Friction-Free InstallerFriction-Free Installer Auto-UpdaterAuto-Updater

14 .NET for Silverlight & Desktop.NET for Silverlight is a factored subset of the full.NET Desktop ~ 50 MB (Windows Only) Silverlight +.NET Alpha ~4MB (Cross platform) Additional pieces of.NET available in a pay for play model Same core development framework The shared technologies and APIs are the same The tools are the same Highly compatible Minimal changes needed to move from Silverlight to Desktop However, not binary compatible by default

15 The Sandbox All apps run in Sandbox Conceptually similar to the HTML DOM sandbox Apps run just like HTML pages – just click a URL No elevation prompts No way to get out of the sandbox Includes some additional functionality Safe isolated storage Client based file upload controls Cross-domain support in-work Presentation Title | PP | DD Month YYYYMicrosoft Confidential

16 How to build sites that use Silverlight

17 How does Silverlight Work? Silverlight is a browser control within IE and plug-in within FireFox/Safari Silverlight content can be hosted into any container element within an HTML document HTML can be overlaid on top of Silverlight content, enabling easy page blending Silverlight can be programmed using regular browser JavaScript HTML and XAML DOM elements can be manipulated in the same block of code

18 Silverlight Load Script new agHost("wpfeControl1Host", // hostElementID "wpfeControl1", // ID of the WPF/E control "400", // Width "400", // Height "# ", // Background color null, // SourceElement "helloworld.xaml", // Source file "true", // IsWindowless "30", // MaxFrameRate null // OnError handler ); new agHost("wpfeControl1Host", // hostElementID "wpfeControl1", // ID of the WPF/E control "400", // Width "400", // Height "# ", // Background color null, // SourceElement "helloworld.xaml", // Source file "true", // IsWindowless "30", // MaxFrameRate null // OnError handler );

19 What does Silverlight Point to? Silverlight load script today points to a.XAML text file to load the XAML content Future option will allow multiple XAML files, images, and media assets to be packaged into a.zip file to optimize download

20 XAML (rhymes with Camel) XAML = eXtensible Application Markup Language Flexible XML document schema Examples: WPF, Silverlight, Workflow Foundation Enables rich tooling support While still preserving good readability and hand-coding within text editors

21 XAML Sample For example: xmlns:x="..."> xmlns:x="...">

22 Demo

23 Drawing with XAML You can create rich graphics using XAML Device independent vector graphics Scale from low to extremely high DPI devices XAML is made up of Tags Represent a single item or container of the design E.g. Rectangle, Ellipse, Canvas, Storyboard, etc. Not all Tags are design elements – some can also define behavior (e.g. animations) and in the future will define customization (e.g. style and data- binding)

24 Drawing with XAML (2) Basic Vocabulary of Silverlight XAML Elements Canvas Brushes Basic shapes Rectange, Ellipse, Line, Polygon, etc. TextBlock Image

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

26 Canvas (2) Currently the parent of the every Silverlight XAML document: Note xmlns= usage on root element to indicate document schema xmlns:x="..."> xmlns:x="...">

27 Canvas (3) Position relative to first Canvas parent: Width="200" Height="150" Fill="Black" /> Background="Red"> Fill=“White" /> Width="200" Height="150" Fill="Black" /> Background="Red"> Fill=“White" />

28 Shapes

29 Brushes Determines how objects are painted For painting objects (e.g. Fill) For painting of lines (e.g. Stroke) Brush options include: Solid color brushes Gradient brushes Image brushes

30 Brushes (2) Support creation by name 141 named colors supported (e.g. Blue, Red, Green) Supports #FFFFFF or #FFFFFFFF syntax as well

31 Brushes (3) Start and Stop are to set angle as numbers Gradient Stops are the different color points

32 Brushes (4) Gradient Stops are same syntax as Linear Gradient Offset="0" /> Offset="1" /> Offset="0" /> Offset="1" />

33 Brushes (5) Gradient Stops are same syntax as Linear Gradient ImageSource="http://.../XBox360Logo.jpg" /> ImageSource="http://.../XBox360Logo.jpg" />

34 Using Text HelloHello Hello Hello Hello Hello Hello FontFamily="Courier New">Hello Hello there, how are you? Hello there, how are you? Hello there, how are you? Hello there, how are you? Hello there, how are you? Hello there, how are you?

35 Using Images Like ImageBrush But can only place a rectangular image

36 Transformations Used to make changes to an object

37 Transformations (2) Power in Transforming Groups of Objects Width="10" Height="10" Fill="Black" /> Width="10" Height="10" Fill="Black" /> Width="10" Height="10" Fill="Black" /> Width="10" Height="10" Fill="Black" />

38 Transformations (3) Transform Types Rotation Resizes/Stretch Skews Moves Scale, Skew and Translate Combined

39 Transformations (4) Allows Grouping of Multiple Transforms Width="10" Height="10" Fill="Black" /> Width="10" Height="10" Fill="Black" /> Width="10" Height="10" Fill="Black" /> Width="10" Height="10" Fill="Black" />

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

41 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 Height="100" Fill="Yellow" /> Height="100" Fill="Yellow" />

42 Access Silverlight via JavaScript Use browser’s document.getElementById() to access the Silverlight control on a page: Can also use ASP.NET AJAX $get() function: var control = document.getElementById("WpfeControl1"); var control = $get("WpfeControl1");

43 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; xmlns:x="..."> Height="100" Fill="Yellow" /> xmlns:x="..."> Height="100" Fill="Yellow" />

44 Referencing Child Elements Canvas.Children collection: Add() Insert() Remove() RemoveAt() GetItem() Clear() Count

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

46 Silverlight Events Standard Events Loaded MouseMove MouseEnter MouseLeave MouseLeftButtonDown MouseLeftButtonUp 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”;} KeyUp KeyDown GotFocus LostFocus

47 Silverlight Event Example xmlns:x="..."> Height="100" Width="100" Fill="Teal" /> Height="100" Width="100" Fill="Teal" /> xmlns:x="..."> Height="100" Width="100" Fill="Teal" /> Height="100" Width="100" Fill="Teal" /> 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”;}

48 Code handling with JavaScript and XAML

49 Animating with XAML Silverlight provides a rich animation system Animations can be defined in XAML Animations can be triggered via Code

50 Animating XAML Example AutoReverse="True"/> Height="100" Fill="Yellow" /> AutoReverse="True"/> Height="100" Fill="Yellow" />

51 Triggers Used to specify what starts an Animation Properties are used to tie it to other Animation RoutedEvent The event that starts the triggers Actions A optional list of Storyboards to fire

52 Storyboards Contains one or more Animations Properties are used to share with all Animations TargetName and TargetProperty From, By and To Duration AutoReverse RepeatBehavior

53 Animation Types DoubleAnimation Animate numeric properties AutoReverse="True"/> AutoReverse="True"/>

54 Animation Types (2) ColorAnimation Animation colors... AutoRepeat="True" />... Color="Yellow" /> ... AutoRepeat="True" />... Color="Yellow" />

55 AnimationTypes (3) PointAnimation Animates Dual-Value Numbers (e.g. 100,100)... AutoReverse="True" />... StartPoint="0,0" EndPoint="1,1"> ... AutoReverse="True" />... StartPoint="0,0" EndPoint="1,1">

56 Animating with Keyframes Keyframe Animations DoubleAnimationUsingKeyFrames ColorAnimationUsingKeyFrames PointAnimationUsingKeyFrames Allows you to create an Animation using: KeyFrame objects that specify values at specific times Each KeyFrame contains KeyTimes and Values

57 Animation with Keyframes (2) Three types of KeyFrames Discrete Specific value to set immediately Linear Animate from previous value using linear interpolation Spline Change value progressively using splined interpolation

58 Animation with KeyFrames - Example... Storyboard.TargetProperty="Width"> ...... Storyboard.TargetProperty="Width"> ...

59 Programmatic Animation StoryBoard object enables programmatic control of animation sequences Begin() Pause() Resume() Stop() Seek() function onMouseEnter(sender) { var animationSequence = WPFCtrl1.findName(“animationSequence”); var animationSequence = WPFCtrl1.findName(“animationSequence”); animationSequence.Begin(); animationSequence.Begin();} function onMouseEnter(sender) { var animationSequence = WPFCtrl1.findName(“animationSequence”); var animationSequence = WPFCtrl1.findName(“animationSequence”); animationSequence.Begin(); animationSequence.Begin();}

60 Animating XAML

61 Silverlight 1.1 development

62 62 Integrated Design and Development with Silverlight Declarative Programming (XAML) Bringing Designers Into the Application Development Process Tools for Designers: Microsoft Expression Tools for Developers: Visual Studio

63 63 Designer Emotional Connection Look, behavior, data visualization, usability, brand impact Developer Functional Capabilities Deployment, function, data connection and integrity, IT process, security C++ C# VB.NET Paper JPG / TIFF MOV / WMV PSD PPT XAML

64 Bringing it all together: Tools and Silverlight

65 Roadmap Expression Studio Expression Blend 2 Preview MIX 07 Summer 07 Beyond…Beyond… Silverlight 1.0 Beta Silverlight 1.1 Alpha Silverlight Tools Preview for Visual Studio ‘Orcas’ Expression Media Encoder Silverlight 1.0 Expression Studio 2 Silverlight 1.1 SilverLight for mobile Silverlight Tools for Visual Studio ‘Orcas’

66 Summary Silverlight is cross-browser cross-platform internet plug-in Media Rich 2D graphics Animation, transformation and text Scenarios Media Interactive content Rich Internet Applications Programming model XAML (Camel) Javascript Tools – Visual Studio and Expression

67 Where To Learn More Silverlight Dev Center on MSDN Great SDK documentation and Quickstart samples (Coming soon!)http://www.silverlight.net Good blogs to watch: ;-)http://blogs.msdn.com/markjo

68 ? www Thank you!


Download ppt "Developing with Microsoft Silverlight Mark Johnston Developer & Platform Group Microsoft UK April 2007."

Similar presentations


Ads by Google