Thursday, May 29, 2008

Silverlight - Basics - XAML

Silverlight 2.0 is on its way to an official release, and with beta 1, we are now seeing a fuller implementation, including a number of standard controls and richer support to accomplish common tasks. If you're new to Silverlight / Windows Presentation Foundation, the place to start is understanding XAML (pronounced zammel) - the Extensible Application Markup Language. XAML is an XML dialect, and thus, follows the traditional tree hierarchy of elements you're used to seeing in XML. The main features of XAML are:

* Element names correspond to objects. A "" in XAML corresponds to the System.Windows.Controls.UserControl class, for example.
* Type converters understand string property values. Type converters are used to convert a property value, such as Background="White" or Background="#FF0000" to the class behind the property. A type converter parses and understands what you're asking for (as long as you specify something it can convert)
* Markup extensions. A markup extension is a special way of saying "interpret this property value, don't take it literally or type convert it." Markup extensions are using for referencing resources, creating control templates and data binding.
* Dependency properties and attached properties. A dependency property is a property that depends on potentially many things - including animation, data binding and the value you explicitly set. An attached property is a special type of dependency property that an object doesn't define. It is "attached" in that the object with the attached property has the property, but it is meaningless to the object itself. The attached property IS meaningful, however, to elements enclosing the object. A great example is a container such as Canvas (it provides absolute positioning) and the attached property Canvas.Left and Canvas.Top - specify these on a child object, such as an Image, and the Canvas knows where to place the Image.
* Direct connection to code-behind. When built, the XAML file causes generation of a piece of the class specified by the x:Class attribute, and it is here that object identifiers are created to connect to the objects specified by elements in the XAML (as long as the element in XAML has an x:Name attribute defined) This connection also includes connecting to event handlers in the code-behind.

This is a rather quick overview of XAML - over time we will delve deeper into these features and all the aspects of Silverlight.

Saturday, May 17, 2008

Silverlight Tips, Tricks, and Best Practices

Unless you've been stuck on a desert island for the past several months, you've undoubtedly heard about Silverlight™, the new cross-browser, cross-platform solution from Microsoft that helps you build rich Internet applications and rich, immersive media experiences in the browser. Version 1.0, which combines a XAML rendering engine with a JavaScript API, shipped in September 2007. Version 2.0, which will enter beta soon, will pair an enhanced XAML engine with a version of the CLR that runs in the browser, a Silverlight version of the Microsoft® .NET Framework Base Class Library (BCL), and a managed API. (That's right: C# in the browser!)
Silverlight 1.0 applications are proliferating on the Web, thanks in part to some of the high-profile companies that adopted it early and helped spread the love. The programming model is simple enough for an experienced developer to begin building Silverlight applications in a matter of hours. What's missing for this still very young platform, however, is that wealth of knowledge and resources that accompanies more mature platforms.
I've been developing Silverlight apps for more than a year now and have put together a list of best practices that I and other developers on my team use to build better applications. This column contains some of the most helpful ones.

Take Performance Tips to Heart
Not long before Silverlight 1.0 shipped, Microsoft published a document titled "Performance Tips for Silverlight-Based Applications" (msdn2.microsoft.com/bb693295). This guide is a compilation of tips for optimizing performance by avoiding some common mistakes. The best practices you'll find include:

* Use the Visibility property rather than Opacity to hide objects.
* Don't use the Width and Height properties of MediaElement and Path objects.
* Detach programmatically registered event handlers after use.
* Use transparent control backgrounds sparingly.

Most of these make sense when you read them. It's not hard to imagine why it's better to encode videos using the width and height at which you intend to display them (rather than encode them at one scale and display them at another). It's because the Silverlight rendering engine can avoid resizing each frame on the fly. Still, it's good to see them written down and to know that Silverlight doesn't do something fancy to resize video without incurring a performance penalty.
One best practice that I would add to that document is to avoid redundant calls to FindName. I often see event handlers structured this way:
Copy Code

function onClick(sender, args)
{
var rect = sender.findName('Rect');
rect.fill = 'red';
}

The problem is that FindName has to walk the tree of XAML objects to find its target. If you're going to be referencing the XAML object named "Rect" many times over the lifetime of the app, you should initialize it once—for instance, in an event handler for the root canvas's Loaded event—and store the reference in a global variable. Then, instead of calling FindName every time onClick is called, you can do this:
Copy Code

function onClick(sender, args)
{
_rect.fill = 'red';
}

The resulting code will be faster than the original. But if a developer does this, he should be sure to release that reference when finished with the plugin. In normal pages this is never an issue, but in an AJAX app where whole pieces may be coming and going, its crucial to release those references to avoid a memory leak. For that reason, the Sys.UI.Silverlight.Control ajax type that is used when using the ASP.NET Silverlight Control (currently available in the Extensions 3.5 Preview Community Technology Preview) provides a pluginDispose method you can override to release references and event handlers.

Offer a Compelling Installation Experience
Too often the Silverlight-based application installation experience is not friendly enough to users who don't have Silverlight installed, as exemplified by the barren landscape displayed in Figure 1. Silverlight.createObjectEx—the function that's typically called to instantiate a Silverlight control—displays a "Get Microsoft Silverlight" button when Silverlight isn't present. Clicking the button transports the user to the Silverlight Web site to download and install it. You can improve the experience somewhat by setting Silverlight.createObjectEx's inplaceInstallPrompt parameter to true, enabling the user to download and install Silverlight without leaving the Web page. But even that leaves something to be desired, especially when Silverlight comprises most or all of the content on the page.
Figure 1 Default Silverlight Installation Experience (Click the image for a larger view)
Microsoft recently published a document that should be required reading for all developers using Silverlight—"Silverlight Installation Experience Guide." It's available for downloading along with sample code at go.microsoft.com/fwlink/?LinkId=106023. The document outlines a general technique for displaying HTML content (including a "Get Microsoft Silverlight" button and browser-specific instructions) in a Silverlight DIV when Silverlight isn't installed, and XAML content when it is. The idea is to paint a picture of what the user would see if Silverlight were installed and hopefully to entice him to click the button.
This column is accompanied by a sample application named RevolvingAuto that demonstrates some of the best practices presented here, including how to build a better installation experience. I'll show you key portions of its source code shortly.
RevolvingAuto is notable for its installation experience. Figure 2 shows what the home page looks like to a visitor who doesn't have Silverlight installed. Behind the "Get Microsoft Silverlight" button is a shaded version of the same user experience the user would see if Silverlight were installed. Because the call to Silverlight.createObjectEx includes an inplaceInstallPrompt="true" parameter, the user can install Silverlight without leaving the Web page. And to top it off, the home page includes logic to create the Silverlight control after installation is complete, eliminating the need for a manual refresh. (This feature works great in Internet Explorer® because it doesn't have to be restarted after Silverlight is installed. It's powerless in browsers that require a restart, unfortunately.)
Figure 2 RevolvingAuto before Silverlight Is Installed (Click the image for a larger view)
The JavaScript that drives the install experience lives within Default.html (see Figure 3). To create a Silverlight control, most Silverlight applications structure the code and markup like this:
Figure 3 RevolvingAuto Application—Default.html
Copy Code



Revolving Auto















Copy Code





RevolvingAuto structures it this way instead:
Copy Code







The code inside the
Time is
My Photo
Name: saba wasim
Location: DeLhI, dElHi, India

ƒυη-ℓσνιηg αη∂ α∂νєηтυяσυѕ ρєяѕση, ωнσ ιѕ ƒαмιℓу-σяιєηтє∂ αη∂ мσтιναтє∂ тσ ℓινє ℓιƒє тσ ιтѕ ƒυℓℓєѕт αη∂ тσ ѕнαяє ιт ωιтн ѕσмєσηє.α νιѕισηαяу ℓєα∂єя—ѕтяσηg, ѕєℓƒ-яєℓιαηт, αη∂ ∂яινєη тσ мαкє αη ιмρα¢т. ρєσρℓє ∂єѕ¢яιвє нιм αѕ α ¢συяαgєσυѕ, "ƒσя¢є тσ вє яє¢кσηє∂ ωιтн," υηαƒяαι∂ σƒ яιѕк σя мαкιηg υηρσρυℓαя ∂є¢ιѕισηѕ. αѕ α ƒяιєη∂, нє'ѕ ƒιєя¢єℓу ℓσуαℓ αη∂ тняινєѕ ση ѕтιмυℓαтιηg ¢σηνєяѕαтιση αη∂ ѕнαяιηg














































FOR SPENDING TIME
MORE TO COME


Blog Design By: Sam hacker Corp.

Top Computers blogs

eXTReMe Tracker