Labels

Wednesday, May 7, 2008

Silver Light - Second Document

Silverlight Versions:

There are currently two versions of Silverlight, Silverlight 1.0 and Silverlight 2.

§ Silverlight 1.0 –

· Development with JavaScript.

· This version provides the presentation core features of Silverlight and uses JavaScript for procedural code.

· It provides features for developing with Silverlight 1.0, which supports the XAML markup language and JavaScript for creating applications.

§ Silverlight 2 Beta 1 –

· Development with the .NET Framework

· This version combines the presentation core in version 1.0 with the following - Silverlight libraries, .NET Framework capabilities, and other features to offer the full architecture and feature set viz.

1. Isolated Storage

2. Asynchronous Programming

3. File Management

4. HTML –Managed Code

5. Serialization

6. Packaging

7. XML Libraries

· Provides information for developing with Silverlight 2, which includes .NET Framework features.

Resources for Getting Started with Silverlight:

§ Silverlight Technical Articles: Provides additional MSDN articles about Silverlight. http://go.microsoft.com/fwlink/?LinkId=98682

§ Silverlight .net: Silverlight.net is a general Silverlight developer site that provides resources such as samples, QuickStarts, whitepapers, instructional videos, forums, and blogs. In particular, beginners might want to check out the Silverlight.net QuickStarts.

§ Silverlight.net QuickStarts:

· http://go.microsoft.com/fwlink/?LinkID=88946

· http://go.microsoft.com/fwlink/?LinkID=88932

§ Silverlight Forums: http://go.microsoft.com/fwlink/?LinkId=91169

§ Other Resources

· Silverlight Overview (Silverlight.net)

· Getting Started with Silverlight Development

· QuickStart Documentation for Silverlight 2

· Silverlight Showcase

· Silverlight Gallery

· Silverlight 1.0 QuickStart

· Silverlight QuickStart Using Microsoft Expression Blend

· Silverlight 2 QuickStarts

Silverlight Overview:

§ Microsoft Silverlight is a cross-browser, cross-platform Client Technology that helps you design, develop, and deliver media-enabled experiences and rich interactive applications on the Web.

§ Provides a powerful platform that makes it easy to develop Web applications with professional-quality graphics, audio, and video for an engaging user experience.

§ Silverlight also enables you to use professional-quality tools like Visual Studio for coding and Microsoft Expression Blend for layout and graphic design.

Silverlight Architecture:

Silverlight is not only an appealing canvas for displaying rich and interactive Web and media content to end users. It is also a powerful yet Lightweight Platform For Developing Portable, Cross-Platform, Networked Applications that integrate data and services from many sources. Furthermore, Silverlight enables you to build user interfaces that will significantly enhance the typical end user experience compared with traditional Web applications.

While Silverlight as a client-side runtime environment seems simple and compact in size, the Silverlight development platform integrates a number of features and complex technologies, making them accessible for developers. To create effective Silverlight-based applications, developers need a working knowledge of the platform architecture.

Role of WPF & XAML in Silverlight:

· WPF: WPF lets you create immersive graphics, animation, media, and other rich client features, extending browser-based UI beyond what is available with HTML alone.

· XAML: Extensible Application Markup Language (XAML) provides a declarative markup syntax for creating WPF elements.

· WPF and XAML :

o Silverlight includes Windows Presentation Foundation (WPF) technology, which greatly extends the elements in the browser for creating UI. And such WPF elements are created using XAML.

o Hence its implcit that WPF & XAML together makes Silverlight.

Silverlight Features:

WPF and XAML

As explained above.

Extensions to JavaScript

Silverlight included the ability to work with WPF elements.

Cross-browser, cross-platform support

Silverlight runs the same on all popular browsers (on any platform).

Integration with existing applications

Silverlight integrates seamlessly with your existing JavaScript and ASP.NET AJAX code to complement functionality you have already created.

.NET Framework programming model

Access to the .NET Framework programming model and to associated tools. You can create Silverlight-based applications using dynamic languages such as Managed JScript and IronPython as well as languages such as C# and Visual Basic. You can use development tools such as Visual Studio to create Silverlight-based applications.

LINQ

Silverlight includes language-integrated query (LINQ), which enables you to program data access using intuitive native syntax and strongly typed objects in .NET Framework languages.

Cross Browser: It runs in all popular Web browsers, including Microsoft Internet Explorer, Mozilla Firefox, and Apple Safari, and on Microsoft Windows and Apple Mac OS X.

Cross Platform: It runs Microsoft Windows and Apple Mac OS X.

Running Silverlight-based Applications

Silverlight-based applications run in the browser. To run a Silverlight-based application, users require a Small Plug-In in their browser. The plug-in is free. If users do not already have the plug-in, they are automatically prompted to install it. The download and installation take seconds and require no interaction from the user except permission to install.

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Silverlight Framework:

Note: XAML is the primary point of interaction between the .NET Framework and the presentation layer.

The Silverlight platform as a whole consists of two major parts, plus an installer and update component:

Component

Description

The core presentation framework

Contains components and services oriented towards the UI and user interaction, including user input, lightweight UI controls for use in Web applications, media playback, digital rights management, data binding, and presentation features, including vector graphics, text, animation, and images. Also includes the Extensible Application Markup Language (XAML) for specifying layouts.

The .NET Framework for Silverlight

A subset of the .NET Framework that contains components and libraries, including data integration, extensible Windows controls, networking, base class libraries, and the common language runtime (CLR).

Some parts of the .NET Framework for Silverlight are deployed with your application. These "Silverlight Libraries" are assemblies not included in the Silverlight runtime and are instead shipped in the Silverlight SDK. When Silverlight Libraries are used in your application, they are packaged up with your application and downloaded to the browser. These include new UI controls, XLINQ, Syndication (RSS/Atom), XML serialization and the Dynamic Language Runtime.

The installer and updater

An installation and update control that simplifies the process of installing the application for first-time users, and subsequently provides low-impact, automatic updates.

The core presentation features of the Silverlight platform, shown in the previous section and illustration, are listed in the following table with descriptions:

Feature

Description

Input

Handles inputs from hardware devices such as the keyboard and mouse, drawing, or other input devices.

UI rendering

Renders vector and bitmap graphics, animations, and text.

Media

Features playback and management of various types of audio and video files, such as .WMP and .MP3 files.

Controls

Supports extensible controls that are customizable through styling and templating.

Layout

Enables dynamic positioning of UI elements.

Data Binding

Enables linking of data objects and UI elements.

DRM

Enables digital rights management of media assets.

XAML

Provides a parser for XAML markup.

The following table describes a partial list of the .NET Framework for Silverlight features shown in the previous illustration.

Feature

Description

Data

Supports Language-Integrated Query (LINQ) and LINQ to XML features, which ease the process of integrating and working with data from disparate sources. Also supports the use of XML and serialization classes for handling data.

Base class library

A set of .NET Framework libraries that provide essential programming functions, such as string handling, regular expressions, input and output, reflection, collections, and globalization.

Window Communication Foundation (WCF)

Provides features to simplify access to remote services and data. This includes a browser object, HTTP request and response object, support for cross-domain HTTP requests, support for RSS/Atom syndication feeds, and support for JSON, POX and SOAP services.

CLR (common language runtime)

Provides memory management, garbage collection, type safety checking, and exception handling.

WPF (Windows Presentation Foundation) Controls

Provides a rich set of controls that ship as a Silverlight Library to deploy with your application. This includes Button, Calendar, CheckBox, DataGrid, DatePicker, HyperlinkButton, ListBox, RadioButton, and ScrollViewer.

DLR (dynamic language runtime)

Supports the dynamic compilation and execution of scripting languages such as JavaScript and IronPython to program Silverlight-based applications. Includes a pluggable model for adding support for other languages for use with Silverlight.

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Silverlight 1.0 - Development with JavaScript

This section provides information for developing with Silverlight version 1.0, which uses the XAML markup language and JavaScript to create applications.

Events Overview:

JavaScript provides a set of events that you can use to respond to changes on the Web page. For example, the following HTML example shows JavaScript code that is triggered by the JavaScript onload event.

<body onload='javascript:alert("onload event generated")'>

In this example, JavaScript code is used directly instead of referencing an event-handler function. This is not possible with Silverlight events. By definition, the JavaScript onload event is not fired until the entire Web page is loaded. This means that any Silverlight plug-in contained within the page fires its Loaded event before the JavaScript onload event.

Error Handling:

Microsoft Silverlight-based provides number of ways, depending on the type of the error.

· The OnError event - Can be used to handle parser errors, run-time errors, and other types of errors. Two JavaScript helper files, CreateSilverlight.js and Silverlight.js, provide a default event handler for the OnError event

· A try/catch block can be placed around a synchronous method call, and errors resulting from the call can be handled in the catch block.

· Event handlers - can be attached to asynchronous error events, such as the MediaFailed event.

Performance Tips:

Read from Books

Silverlight Object Models

Microsoft Silverlight-based scripting applications expose their functionality through a

· Browser-Based Document Object Model (DOM), as well as a

· Silverlight-Specific Object Model

o The Silverlight object model defines a set of objects that enable you to populate and adjust the content of a Silverlight-based application.

o The Silverlight object model is exposed through the Silverlight plug-in, which you create as the content container on a Web page

Lets see how the Web page, the Silverlight plug-in, and the Silverlight content interrelate.

This diagram shows the two object models available within the Web application: one for the HTML DOM and one for Silverlight. The Silverlight plug-in (The Blue Border), represented in the HTML source as either an HTML Object or Embed tag, is conceptually the intermediate between the two object models. Certain properties or behavior of a Silverlight plug-in are available to either object model.

After you create the Silverlight plug-in, you can retrieve a reference to the plug-in instance by referencing its ID in the DOM for the Web page. The following JavaScript example shows how to retrieve the ID of the Silverlight plug-in by using the document.getElementById method.

var plugin_1 = document.getElementById("SLPlugin_1");

See Example : Silverlight Hierarchy of XAML Objects

<!-- The top-most object in the XAML hierarchy is referred to as the root object. -->

<Canvas

xmlns="http://schemas.microsoft.com/client/2007"

Loaded="onLoaded">

<!-- Canvas objects can be a child of another Canvas object. -->

<Canvas

Canvas.Left="20" Canvas.Top="20">

<Rectangle

Width="200" Height="35"

Fill="PowderBlue" />

<TextBlock

Canvas.Left="25" Canvas.Top="5"

Foreground="Teal" FontFamily="Verdana" FontSize="18" FontWeight="Bold"

Text="Sample Output" />

</Canvas>

<TextBlock

Canvas.Left="36" Canvas.Top="80"

Foreground="Maroon" FontFamily="Verdana" FontSize="24" FontWeight="Bold"

Text="Hello, world" />

</Canvas>

GetElementById vs GeHost

· To retrieve the plug-in's DOM properties, you must use the GetElementById method to return a reference to a DOM-accessible object.

· The GetHost method does not return an object from which all DOM values can be retrieved.

· However, there are properties that are deliberately captured from the DOM and exposed in the Silverlight object model at least as reference properties, for instance ActualHeight (Silverlight Plug-in).

Plug-in Position and Dimensions

The Silverlight plug-in defines the area that the Silverlight-based application displays in.

You embed the plug-in within its host HTML page, and you can either position the plug-in somewhere inline in the HTML page display or you can have the plug-in take up the entire HTML page.

· Within the plug-in: Position objects relative to the root Canvas within the plug-in. Most of this overview describes this type of positioning.

· Within the HTML: The entire plug-in and all the objects positioned within it are subject to where you place the plug-in in HTML

Thanks & Regards,

Arun Manglick || Tech Lead

No comments:

Post a Comment