It was in the past when internet is used only for sharing information. At that time we were only using simple static pages and web based application are based on HTML. Then thing had been changed and it was time for dynamic pages and technology as JSP, Asp then ASP.net. Till asp.net things has been drastically changed. Now u can not seen even single static page. Then we have acrobat flash player and we have now much interactive and media specific pages. See the every popular web sites and you will find the Font pages with some video or flash presentation. This one field where asp.net lacking. As Microsoft want to dominate the market, it’s only not want but it does. And come up SilverLight . So Silverlight is Microsoft technology for making rich web based application much more media rich and eye catching.
SilverLight 1.0
For making application u need to have install silverligh 1.0 http://silverlight.net
For making silverlight UI interface defice it in .xmal file. And refernce it from ur .htm file. Simple steps are as
Hi.xaml as
<Canvas xmlns="http://schemas.microsoft.com/client/2007">
<Ellipse Width="80" Height="80">
<Ellipse.Fill>
<LinearGradientBrush>
<GradientStop Offset="0" Color="Red"/>
<GradientStop Offset="0.2" Color="Orange"/>
<GradientStop Offset="0.4" Color="Yellow"/>
<GradientStop Offset="0.6" Color="Green"/>
<GradientStop Offset="0.8" Color="Blue"/>
<GradientStop Offset="1" Color="Purple"/>
</LinearGradientBrush>
</Ellipse.Fill>
</Ellipse>
<Ellipse Canvas.Left="25" Canvas.Top="50" Width="100" Height="100" StrokeThickness="10">
<Ellipse.Fill>
<SolidColorBrush Color="Red"/>
</Ellipse.Fill>
<Ellipse.Stroke>
<LinearGradientBrush>
<GradientStop Offset="0" Color="Red"/>
<GradientStop Offset="0.2" Color="Orange"/>
<GradientStop Offset="0.4" Color="Yellow"/>
<GradientStop Offset="0.6" Color="Green"/>
<GradientStop Offset="0.8" Color="Blue"/>
<GradientStop Offset="1" Color="Purple"/>
</LinearGradientBrush>
</Ellipse.Stroke>
</Ellipse>
</Convas>
xmlns="http://schemas.microsoft.com/client/2007
Note : it compulsory and u need to define it in Convas element as attribute.
XAML
its Extensible application markup language . it is xml based and used to define silverlight UI.
Now am hi.htm file as
<html>
<head>
<title>SilverLight</title>
</head>
<body>
<object type="application/x-silverlight" id="silver1" width="500" height="500">
<param name="source" value="hi.xaml"/>
<param name="background" value="Yellow"/>
</object>
</body>
</html>
Now in .htm file u need reference the .xaml file . Here we are using object to refer the .xaml file . if u are using internet explorer then use object otherwise use embed Object as
<embed type="application/x-silverlight" id="silver1" width="500" height="500">
source ="hi.xaml background ="Yellow"/>
</textarea >
there is not much more difference in object and embed .better to use embed for general pupuse.
If You want do all these work by silverlight.js and createSilverlight.js. then it will be more sophisticated and u can handle many more event using this createSilverlight.js,
Silverlight,js
it a javascript file provided by Microsoft u cant not make nay change in it.
createSilverlight.js
This JavaScript file contains one parameterless method, createSilverlight. This method is a template within which you call the createObject or createObjectEx method, both of which are defined by Silverlight.js. Specific parameters to createObject (or packaged parameters to createObjectEx) specify the Silverlight plugin's size on the HTML page and reference the XAML markup file that contains the Silverlight UI definition. Because the method parameters change per application (for instance the name of the source XAML file), each Silverlight-based application typically has a unique CreateSilverlight.js filecreateSilverlight.js looks like this
function createSilverlight()
{
Silverlight.createObjectEx(
{
source: "hi.xaml",
parentElement: document.body,
id: "silverlightControl",
properties: { width: "100%", height: "100%", version: "1.0" },
events: { onLoad: onLoad, onError: onSilverlightError }
}
)
}
Now u need to refer both silverlight.js and createsilver.js from your .htm file like
Hi.htm looks as
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Silverlight 1.0 Unleashed: Animating on MouseEnter and MouseLeave</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="CreateSilverlight.js"></script>
<style type="text/css">body { margin: 0px }</style>
</head>
<body>
<script type="text/javascript">createSilverlight();</script>
</body>
</html>
This all about Silverlight.1.0 but presently we have Silverlight 1.1
SilverLight 1.1
Its more sofiticated and rich than silverlight 1.0. it a sub part of .net 3.0 framework. Now you can use any compiled .ddl file in .xmal file . You can use code behind file for handling some more event and defining some types which is not part of xmal. Then you can use your own definec=d types from xmal file to make application more web rich.
In Visual Studio 2008 default silver light application looks like this
It contain the following file.
.htm: Typically, this will be named default.html or something similar. The Visual Studio template uses the file name TestPage.html. This is the file that provides the basic entry point to a browser. It incorporates the basic Silverlight browser control and includes at least two JavaScript file references through SCRIPT tags with SRC values for CreateSilverlight.js and Silverlight.js (see the following descriptions of these files). The root HTML file can also contain other HTML content that displays around the Silverlight content.
CreateSilverlight.js: In the Visual Studio templates, this file is named TestPage.html.js. This JavaScript file contains one parameterless method, createSilverlight. This method is a template within which you call the createObject or createObjectEx method, both of which are defined by Silverlight.js. Specific parameters to createObject (or packaged parameters to createObjectEx) specify the Silverlight plugin's size on the HTML page and reference the XAML markup file that contains the Silverlight UI definition. Because the method parameters change per application (for instance the name of the source XAML file), each Silverlight-based application typically has a unique CreateSilverlight.js file.
Silverlight.js: This JavaScript file defines the createObject and createObjectEx methods that you call from CreateSilverlight.js to instantiate the Silverlight control in the HTML page. It also provides code to handle the client user experience if the Silverlight control is not present. You host this file on your site, and per the License Agreement you cannot modify its contents (review the License Agreement in the Silverlight SDK for details). If you write your own JavaScript code for your application, you must add this code to a different script file.
Page.xaml: This XAML file is referenced as the "source" parameter by your createSilverlight or createSilverlightEx method call. It defines the UI that will appear as the Silverlight content. The root element tag includes the minimum xmlns definitions that are required for a working Silverlight-based application. Canvas is the typical root element because it provides the widest support for UI composition. If your Silverlight-based application uses managed code for event handling, the root element includes an x:Class attribute, which enables you to reference handlers that are defined in your managed code from XAML.
If your application uses managed code, your Silverlight project also includes the following files:
Page.xaml.cs (or .vb): This file compiles into the assembly that provides the managed code event handlers at run time. The code should define the same class that was specified in the x:Class value in Page.xaml. Also, project build settings must build the assembly using the name that is specified in the URI portion of the x:Class value. You write your event handlers as members of this class. Typically, you also place this class in a namespace, and that namespace is in the managed code definition and included in the x:Class definition in Page.xaml. For Visual Basic, the namespace is the default namespace as specified in project settings. The managed code source file should not be deployed; only the output assembly is necessary for your deployed application.
If you are writing a more sophisticated application, you can use multiple code files to create the assembly, but one of these files must define the class referenced in the XAML
After compling application u will get a appliactionname.dll file in your /ClientBin folder. Which will be used by xmal file.
This is all about SilverLight 1.1
No comments:
Post a Comment