第一个Silverlight的helloword教程

Silverlight 是一个跨浏览器、跨平台的插件,用于针对 Web 提供下一代媒体体验和 Rich Interactive Applications (RIA, 丰富交互式应用程序)。也许ms用它来对抗flash的,对于我们程序员来说那个好就用那个,silverlight已经出来1.2了据说,从1.1开始支持.net程序的嵌入,对.net程序员来说是个福音哦!silverlight很强悍,它支持和js互调,它的表现形式就是嵌入在html页面中。
具体的区ms的网站上看看, 这里是你需要下载安装的地方。
这里我主要讲用js写一个简单的siverlight的helloworld
首先我们得了解一些知识
XAML:这个是从WPF开始就提出来的和xml一样,只不过里面你需要用siverlight定义好的一个control的tag
我们helloworld需要拿些文件:
一个html文件:helloworld.htm
一个XAML文件:helloworld.XAML
一个ms提供的js文件:Silverlight.js
这里看看这个Silverlight.js文件
// /
//
//
  Silverlight.js               version 1.0
//
//
  This file is provided by Microsoft as a helper file for websites that
//
  incorporate Silverlight Objects. This file is provided under the Silverlight 
//
  SDK 1.0 license available at http://go.microsoft.com/fwlink/?linkid=94240.  
//
  You may not use or distribute this file or the code in this file except as 
//
  expressly permitted under that license.
//
 
//
  Copyright (c) 2007 Microsoft Corporation. All rights reserved.
//
//
/

if ( ! window.Silverlight)window.Silverlight = {} ;Silverlight._silverlightCount = 0 ;Silverlight.ua = null ;Silverlight.available = false ;Silverlight.fwlinkRoot = " http://go.microsoft.com/fwlink/?LinkID= " ;Silverlight.StatusText = " Get Microsoft Silverlight " ;Silverlight.EmptyText = "" ;Silverlight.detectUserAgent = function () {var a=window.navigator.userAgent;Silverlight.ua={OS:"Unsupported",Browser:"Unsupported"};if(a.indexOf("Windows NT")>=0)Silverlight.ua.OS="Windows";else if(a.indexOf("PPC Mac OS X")>=0)Silverlight.ua.OS="MacPPC";else if(a.indexOf("Intel Mac OS X")>=0)Silverlight.ua.OS="MacIntel";if(Silverlight.ua.OS!="Unsupported")if(a.indexOf("MSIE")>=0){if(navigator.userAgent.indexOf("Win64")==-1)if(parseInt(a.split("MSIE")[1])>=6)Silverlight.ua.Browser="MSIE"}else if(a.indexOf("Firefox")>=0){var b=a.split("Firefox/")[1].split("."),c=parseInt(b[0]);if(c>=2)Silverlight.ua.Browser="Firefox";else{var d=parseInt(b[1]);if(c==1&&d>=5)Silverlight.ua.Browser="Firefox"}}else if(a.indexOf("Safari")>=0)Silverlight.ua.Browser="Safari"} ;Silverlight.detectUserAgent();Silverlight.isInstalled = function (d) {var c=false,a=null;try{var b=null;if(Silverlight.ua.Browser=="MSIE")b=new ActiveXObject("AgControl.AgControl");else if(navigator.plugins["Silverlight Plug-In"]){a=document.createElement("div");document.body.appendChild(a);a.innerHTML='<embed type="application/x-silverlight" />';b=a.childNodes[0]}if(b.IsVersionSupported(d))c=true;b=null;Silverlight.available=true}catch(e){c=false}if(a)document.body.removeChild(a);return c} ;Silverlight.createObject = function (l,g,m,j,k,i,h) {var b={},a=j,c=k;a.source=l;b.parentElement=g;b.id=Silverlight.HtmlAttributeEncode(m);b.width=Silverlight.HtmlAttributeEncode(a.width);b.height=Silverlight.HtmlAttributeEncode(a.height);b.ignoreBrowserVer=Boolean(a.ignoreBrowserVer);b.inplaceInstallPrompt=Boolean(a.inplaceInstallPrompt);var e=a.version.split(".");b.shortVer=e[0]+"."+e[1];b.version=a.version;a.initParams=i;a.windowless=a.isWindowless;a.maxFramerate=a.framerate;for(var d in c)if(c[d]&&d!="onLoad"&&d!="onError"){a[d]=c[d];c[d]=null}delete a.width;delete a.height;delete a.id;delete a.onLoad;delete a.onError;delete a.ignoreBrowserVer;delete a.inplaceInstallPrompt;delete a.version;delete a.isWindowless;delete a.framerate;if(Silverlight.isInstalled(b.version)){if(Silverlight._silverlightCount==0)if(window.addEventListener)window.addEventListener("onunload",Silverlight.__cleanup,false);else window.attachEvent("onunload",Silverlight.__cleanup);var f=Silverlight._silverlightCount++;a.onLoad="__slLoad"+f;a.onError="__slError"+f;window[a.onLoad]=function(a){if(c.onLoad)c.onLoad(document.getElementById(b.id),h,a)};window[a.onError]=function(a,b){if(c.onError)c.onError(a,b);else Silverlight.default_error_handler(a,b)};slPluginHTML=Silverlight.buildHTML(b,a)}else slPluginHTML=Silverlight.buildPromptHTML(b);if(b.parentElement)b.parentElement.innerHTML=slPluginHTML;else return slPluginHTML} ;Silverlight.supportedUserAgent = function () {var a=Silverlight.ua,b=a.OS=="Unsupported"||a.Browser=="Unsupported"||a.OS=="Windows"&&a.Browser=="Safari"||a.OS.indexOf("Mac")>=0&&a.Browser=="IE";return !b} ;Silverlight.buildHTML = function (c,d) {var a=[],e,i,g,f,h;if(Silverlight.ua.Browser=="Safari"){a.push("<embed ");e="";i=" ";g='="';f='"';h=' type="application/x-silverlight"/>'+"<iframe style='visibility:hidden;height:0;width:0'/>"}else{a.push('<object type="application/x-silverlight"');e=">";i=' <param name="';g='" value="';f='" />';h="</object>"}a.push(' id="'+c.id+'" width="'+c.width+'" height="'+c.height+''+e);for(var b in d)if(d[b])a.push(i+Silverlight.HtmlAttributeEncode(b)+g+Silverlight.HtmlAttributeEncode(d[b])+f);a.push(h);return a.join("")} ;Silverlight.default_error_handler = function (e,b) {var d,c=b.ErrorType;d=b.ErrorCode;var a=" Silverlight error message      ";a+="ErrorCode: "+d+" ";a+="ErrorType: "+c+"        ";a+="Message: "+b.ErrorMessage+"      ";if(c=="ParserError"){a+="XamlFile: "+b.xamlFile+"      ";a+="Line: "+b.lineNumber+"      ";a+="Position: "+b.charPosition+"      "}else if(c=="RuntimeError"){if(b.lineNumber!=0){a+="Line: "+b.lineNumber+"      ";a+="Position: "+b.charPosition+"      "}a+="MethodName: "+b.methodName+"      "}alert(a)} ;Silverlight.createObjectEx = function (b) {var a=b,c=Silverlight.createObject(a.source,a.parentElement,a.id,a.properties,a.events,a.initParams,a.context);if(a.parentElement==null)return c} ;Silverlight.buildPromptHTML = function (i) {var a=null,f=Silverlight.fwlinkRoot,c=Silverlight.ua.OS,b="92822",d;if(i.inplaceInstallPrompt){var h;if(Silverlight.available){d="94376";h="94382"}else{d="92802";h="94381"}var g="93481",e="93483";if(c=="Windows"){b="92799";g="92803";e="92805"}else if(c=="MacIntel"){b="92808";g="92804";e="92806"}else if(c=="MacPPC"){b="92807";g="92815";e="92816"}a='<table border="0" cellpadding="0" cellspacing="0" width="205px"><tr><td><img title="Get Microsoft Silverlight" οnclick="javascript:Silverlight.followFWLink({0});" style="border:0; cursor:pointer" src="{1}"/></td></tr><tr><td style="background:#C7C7BD; text-align: center; color: black; font-family: Verdana; font-size: 9px; padding-bottom: 0.05cm; ;padding-top: 0.05cm" >By clicking <b>Get Microsoft Silverlight</b> you accept the <a title="Silverlight License Agreement" href="{2}" target="_top" style="text-decoration: underline; color: #36A6C6"><b>Silverlight license agreement</b></a>.</td></tr><tr><td style="border-left-style: solid; border-right-style: solid; border-width: 2px; border-color:#c7c7bd; background: #817d77; color: #FFFFFF; text-align: center; font-family: Verdana; font-size: 9px">Silverlight updates automatically, <a title="Silverlight Privacy Statement" href="{3}" target="_top" style="text-decoration: underline; color: #36A6C6"><b>learn more</b></a>.</td></tr><tr><td><img src="{4}"/></td></tr></table>';a=a.replace("{2}",f+g);a=a.replace("{3}",f+e);a=a.replace("{4}",f+h)}else{if(Silverlight.available)d="94377";else d="92801";if(c=="Windows")b="92800";else if(c=="MacIntel")b="92812";else if(c=="MacPPC")b="92811";a='<div style="width: 205px; height: 67px; background-color: #FFFFFF"><img οnclick="javascript:Silverlight.followFWLink({0});" style="border:0; cursor:pointer" src="{1}" alt="Get Microsoft Silverlight"/></div>'}a=a.replace("{0}",b);a=a.replace("{1}",f+d);return a} ;Silverlight.__cleanup = function () {for(var a=Silverlight._silverlightCount-1;a>=0;a--){window["__slLoad"+a]=null;window["__slError"+a]=null}if(window.removeEventListener)window.removeEventListener("unload",Silverlight.__cleanup,false);else window.detachEvent("onunload",Silverlight.__cleanup)} ;Silverlight.followFWLink = function (a) {top.location=Silverlight.fwlinkRoot+String(a)} ;Silverlight.HtmlAttributeEncode = function (c) {var a,b="";if(c==null)return null;for(var d=0;d<c.length;d++){a=c.charCodeAt(d);if(a>96&&a<123||a>64&&a<91||a>43&&a<58&&a!=47||a==95)b=b+String.fromCharCode(a);else b=b+"&#"+a+";"}return b}
这个文件主要是判断你当前是否安装silverlight,如果没有安装提示客户去安装它。
如果你没有没有这个文件你可以直接把上面代码copy到一个文件里rename为Silverlight.js即可。
接下来是我们要的两个文件
第一,我们先写一个helloworld.htm文件
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html >
< head >
    
< title > My First Silverlight Page </ title >
    
< script  src ="Silverlight.js"  type ="text/javascript" ></ script >   
</ head >
< body >

< br  />
  
< center >
     
< div  id ="Ag1Host"  style ="background:#FFFFFF" >
        
< script  type ="text/javascript" >
           
var pe1 = document.getElementById("Ag1Host");
        
</ script >
     
</ div >
  
</ center >

< script >
Silverlight.createObjectEx(
{source: 'helloworld.xaml', parentElement:pe1, id:'Ag1', properties:{width:'600', height:'800', background:'#00FFFFFF', isWindowless:'true', framerate:'24', version:'0.90.0'}, events:{onError:null, onLoad:null}, context:null});
</ script >

</ html >
这个文件首先把ms提供给我们js加进来  < script  src ="Silverlight.js"  type ="text/javascript" ></ script >  
然后创建了一个div为
Silverlight.createObjectEx使用,你可以看到 Silverlight.createObjectEx的第一个参数就是
我们要写得xaml文件,你可以在这里根据需要添加你的相对路径,其他的参数一看就明白,详细地得去ms提供
的sdk中看看了,
Silverlight.createObjectEx就是创建一个 Silverlight对象。

接下来我们写一个简单的xaml文件,文件名为helloworld.xmal

< Canvas 
   
xmlns ="http://schemas.microsoft.com/client/2007"
   xmlns:x
="http://schemas.microsoft.com/winfx/2006/xaml"
   Width
="600"
   Height
="800" >

    
< TextBlock  FontSize ="36"  Canvas.Left ="17"  Canvas.Top ="10"  Foreground ="Blue" > Hello World </ TextBlock >

</ Canvas >

xmlns="http://schemas.microsoft.com/client/2007"
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
这两行是ms固定的格式,我们照写就行,然后定义了canvas的宽高,接着就是我们要显示的内容了,输出一个文本
Hello World文本,把这几个文件保存,然后打开helloworld.htm你将会看到最简单的silverlight输出的helloworld,:)

该例子没有什么太大用处,不过对理解silverlight来说还是很有用的,哈哈!



评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值