http://www.geekzilla.co.uk/Innovation Team's dumping grounden-usTue, 10 Jun 2003 04:00:00 GMTTue, 10 Jun 2003 09:41:01 GMTGeekZilla.co.ukeditor@GeekZilla.co.ukwebmaster@GeekZilla.co.uk http://www.geekzilla.co.uk/view30E9FC78-5C92-40B0-8D4B-8844AD865BC9.htm Getting to Know Silverlight One of the most talked-about aspects of Silverlight is its undeniable technical accomplishments. In an age of 50 megabyte downloads, Microsoft managed to squeeze large parts of WPF and a mini-CLR into a tiny browser plug-in, currently under 5MB. Not only that, but it runs in the three major browsers (Firefox, Safari and IE) and more amazingly on the three major operating systems, with Microsoft supporting Windows and Mac OS X and Novell’s Mono project providing a Linux runtime. This article explains a little of the history behind Silverlight and what you can use it for. You’ll see how easy it is to get started, and then you’ll actually practice using a {free InnerWorkings coding challenge}http://www.innerworkings.com/promotions/2b5a0499-9d9b-4bad-96f9-e1e4e1400498/geekzilla-silverlight-promotion featuring a sample app that demonstrates how to use and transform video in Silverlight. Silver-what? Windows Presentation Foundation Everywhere (WPF/E) was announced two years ago at the 2005 PDC (Professional Developer Conference), but kept a low profile for a long time. At Mix ’07 in May however, the first 1.0 beta was released under the Silverlight name, along with (a little confusingly) a preview of the 1.1 release. Version 1.0 has now been officially released and can display vector graphics, animations and high quality video (up to 720p, the low-end of HD). You can program it using a subset of WPF’s XAML syntax, using JavaScript to provide interactivity. Version 1.1 however – still in technical preview stage – is what’s got everyone excited. Much more than a minor revision, this adds a bite-sized CLR to the plug-in, capable of executing compiled C#, VB, Python and Ruby code. Though it is cut-down, the Core CLR still provides a just-in-time compiler and works with the exact same assemblies as the full-blown desktop CLR. If you can restrict yourself to the smaller set of classes included with Silverlight’s CLR, there is complete compatibility between the two, with no re-compilation necessary. How does Silverlight work? From a user’s point of view, the experience is designed to be as smooth as possible. On visiting a Silverlight-enabled site for the first time, a message appears inviting the user to download the plug-in from the Microsoft site. The install is quick and painless, although it can require a browser restart. After that, any Silverlight content is displayed automatically and the plug-in even updates itself as required. The Silverlight SDK makes this experience easy by providing a JavaScript file that detects the plug-in’s presence and either just displays the content or prompts the user to install. The JavaScript also provides a way to display Silverlight content without worrying about the different expectations of the supported browsers. The actual “scene” is defined in XAML, an XML-based format where elements and attributes correspond to .NET objects and their properties. This is the same XAML that powers WPF, just with some of the elements missing. What’s left, at least in Silverlight 1.0, is enough to draw shapes, images, text and video. Some of the flexible layout options from WPF (like the Grid, DockPanel and StackPanel) are missing, along with any kind of prebuilt UI control – there are no buttons, menus, listboxes or anything. Though you can use HTML controls instead, this is a major shortcoming, and the Silverlight team have promised some of these controls for a future release of version 1.1, along with a set of panels to make layout easier. To build an app that does more than just look pretty, you can attach event handlers to Silverlight objects and write code that manipulates the scene, starting animations, controlling video or audio playback and updating the properties of objects. Silverlight really does behave like a mini-WPF, so if you’re familiar with its big brother (or Windows Forms or ASP.NET for that matter), the programming model is easy to follow. Hello, Silverlight When you strip away the helper JavaScript files, very little is required to display Silverlight content in a browser that has the plug-in installed. The snippet below uses inline XAML to reference content defined in the HTML file, but you can just as easily use a file located on your web server (or one generated dynamically by ASP.NET). Other than the XAML script tag, the snippet contains an object tag that actually creates an instance of the Silverlight control, passing it a reference to the XAML it should use (in this case preceded by the # symbol to specify the ID of the HTML element with the content). That’s it. Displaying video with Silverlight One of the strengths of WPF (and so Silverlight) is its composability: objects can be nested within each other easily to create composite objects. A button, for example, doesn’t have to contain just a text label, it could contain an image as well (or a video, or a tiny interactive game, or whatever you want). While many of these uses aren’t, well, useful, the simplicity that composability affords helps with all sorts of more common scenarios. If you want to display an image or video inside a circle or a rounded rectangle, you don’t have to set some obscure property of the image, you just pop it inside a suitably shaped container. In the same way, Silverlight’s animation and transformation features can apply to video as easily as primitive shapes. This makes it easy to render video on objects that can be dragged around, or to zoom into or clip video. The key to this is the VideoBrush, which can be used to paint the interior of a shape with the output of a MediaElement. The MediaElement itself can then be hidden, leaving only the VideoBrush-painted shape visible. Try it out Silverlight is one of those technologies where words alone can’t possibly do it justice. Have a look at the tutorials at {silverlight.net}http://silverlight.net/ to find out more, or skip ahead to {silverlight.net/showcase/}http://silverlight.net/showcase/ to see what can be done. Next, download the {free Silverlight challenges}http://www.innerworkings.com/promotions/2b5a0499-9d9b-4bad-96f9-e1e4e1400498/geekzilla-silverlight-promotion from InnerWorkings and get to grips with some real Silverlight projects. You’ll learn more about setting up Silverlight in your own apps, as well as practice using a VideoBrush to render and control video clipped and magnified according to your own specifications. What’s an InnerWorkings coding challenge? An InnerWorkings coding challenge is a sample of code in Visual Studio that has some key pieces missing. Each challenge includes selected reference links chosen specifically to help you find out how to fill in the blanks, complete the sample app, and learn about a new technology at the same time. Once you’re finished, InnerWorkings Developer automatically checks your code so you can be sure you’ve solved the challenge correctly and that you really understand what you’ve learned. Our coding challenges are designed to take you to the heart of the technology you want to learn more about, focusing on the most important, practical features. Because everything has been set up for you, you can dive straight in and start coding. InnerWorkings has a library of hundreds of challenges on diverse topics from ASP.NET to Windows Communication Foundation. For more information, have a look at our {catalog}http://www.innerworkings.com/Catalog/Catalog.aspx . 17/12/2007 http://www.geekzilla.co.uk/view30E9FC78-5C92-40B0-8D4B-8844AD865BC9.htm http://www.geekzilla.co.uk/viewC2124DB9-91AF-4B9A-AB87-B984713EC300.htm Silverlight Resources You want Silverlight then you'll need the following: The basic Silverlight 1.0 SDK - http://msdn.microsoft.com/vstudio/eula.aspx?id=a40f3ffc-2657-02ec-7d67-7a79b4eac832 And if you want to have access to managed code you'll need Silverlight 1.1 SDK - http://msdn.microsoft.com/vstudio/eula.aspx?id=c8bf88e7-841c-43fd-c63d-379943617f36 Supported Operating Systems: Apple Mac OS X; Windows 2000; Windows Server 2003; Windows Vista; Windows XP There is a wide choice of devlopment environments including the Visual Studio Express editions and the new Expression Blend product. Something else you might want is ZAM 3D from Electric Rain which is currently the best tool for creating 3D XAML resources. Next you need some tutorials and after looking over the quickstarts - http://silverlight.net/quickstarts/ - then check out the new DrDobbs tutorial - http://www.drdobbsportal.com/ Watch out for some specific tutorials and articles on Silverlight coming soon to Geekzilla. 5/7/2007 http://www.geekzilla.co.uk/viewC2124DB9-91AF-4B9A-AB87-B984713EC300.htm http://www.geekzilla.co.uk/view28B61C51-D653-4B24-AC20-3F43FAAA7E74.htm Introducing Microsoft Silverlight Ref : http://blogs.msdn.com/tims/archive/2007/04/15/introducing-microsoft-silverlight.aspx It is with tremendous pleasure that I can reveal Microsoft Silverlight: our next-generation, cross-platform, cross-browser web client runtime. Silverlight (previously codenamed "WPF/E") is a lightweight subset of XAML for building rich media experiences on the web. There's lots of material at the NAB virtual press room site, but I thought I'd share my top ten list of reasons why you might want to use Silverlight: *It supports playback of WMV files on both PC and Macintosh, with many options for interactivity during playback; with just a couple of lines of code, you can provide a platform-neutral way to handle all your movie files. Silverlight supports full-screen 720p video and offers seamless transitions between full-screen and windowed mode without losing your position in the video (something that media sites are crying out for today). *By separating markup (XAML) from code, Silverlight provides a familiar web metaphor for designers and developers. You can embed XAML directly within an HTML file if you want a simple, monolithic solution, or you can keep the two separate to enforce a delineation between different web development roles. *Silverlight and HTML integrate seamlessly together. Every XAML element can be accessed or manipulated from the same client-side JavaScript that would be used to interact with any DHTML element: there are no artificial boundaries or barriers, and you can even overlay HTML elements on top of Silverlight content (simply by creating a windowless frame). We'll also make it very easy for an ASP.NET AJAX developer to add Silverlight content. *You can embed XAML directly into your HTML pages; there's nothing binary or opaque about the format. There are only three steps necessary to add animation or media to your RIA application: (i) include a standard JavaScript file in your HTML header; (ii) call a function to create the Silverlight object anywhere on the screen; (iii) add some XAML content (an animation, some media) for runtime delivery. *You have full runtime interactivity with Silverlight content. The contents of the XAML file can be completely server-generated, to contain information populated from a database. From JavaScript, it's just a matter of calling the createFromXaml method to add or remove elements dynamically at runtime. There's nothing that you can only create or manipulate at design-time. *Silverlight is just a 1MB download on a PC (slightly more on a Macintosh because the universal package contains both Intel and PowerPC versions); it supports Windows XP and above, with Windows 2000 support to come. *Silverlight is blindingly fast - for example, you can play many videos simultaneously without stuttering or dropping frames (subject to network bandwidth, of course). We're introducing a new video brush in Silverlight that allows you to use video as a texture for any 2D object (a rectangle, an ellipse or a path). This is going to allow designers incredible power to use media in new ways that have never been accessible through other existing technologies. *Silverlight is both client- and server-agnostic. There's no difference between the Macintosh and PC runtimes; you don't need any Microsoft software on the server if you don't want to - you can deliver a great Silverlight experience from an Apache / Linux server to a Mac OS 10.4 client. *Silverlight is almost 100% upward compatible with WPF. Animation, 2D vector graphics, media, text - they're all present in Silverlight and the concepts you've learnt in WPF carry forward (although Silverlight is a subset - it doesn't support WPF features such as 3D, data binding or templates). You can use the same tools (e.g. Expression Design) to generate content for Silverlight; you can take XAML from Silverlight and use it in a WPF application when you want to scale up and take full advantage of your local machine. Ah... #10. I can't reveal this yet - there's a big surprise up our collective corporate sleeve that will be announced at MIX. I hate to hold back on you, but anticipation is part of the pleasure, as my mother used to tell me as a child when I was waiting impatiently for Christmas to come! Now that Windows Vista is done, I'll be shifting the focus of my blog slightly - I'll still write just as much about WPF, but I'll also start to write about its web-based little brother, since they both are part of the same continuum and my day-to-day job incorporates both technologies equally. Rich interactive web-based and Windows-based content; it's an exciting time to be a client platform evangelist! 5/7/2007 http://www.geekzilla.co.uk/view28B61C51-D653-4B24-AC20-3F43FAAA7E74.htm