SilverLight的Helloworld（使用CreateSilverlight.js and Silverlight.js进行SilverLight开发）

     微软发布的SilverLight插件管理定义一块基于SilverLight程序展示。你可以在你的客户端HTML页面中嵌入你所需要展示的SilverLight区域。使用帮助脚本CreateSilverlight.js and Silverlight.js可以让你方便的进行silverLight的体验。CreateSilverlight.js是一个方便的js脚本来提供SilverLight.js构建方法中所需的参数。
    这篇文章包含以下几个主题：
    内容中的silverlight插件
    帮助脚本文件的功用
    调用 CreateSilverLight方法
    修改 CreateSilverLight方法
    使用 Isinstalled 方法
    silverlight 版本
    构建并应用内联 XAML
    自定义silverlight初始参数
    使用安装提示
    使用onload 事件

    内容中的silverlight插件

    通常，一个silverlight应用的网页包含很多组件，如图所示。

Relationship between a Web page and Silverlight content
web页面与silverlight之间的关系图

Web page: 基于silverlight应用的宿主页面。

HTML placeholder element: 一个用来包含silverlight应用的块级元素，silverlight应该即展示在这个位置里。

Silverlight plug-in: 这个组件生成 silverlight 应用. 这个插件将被html解析成一个OBJECT 或者 EMBED标签并设置它的参数值. silverlight.js帮助文件中的函数用于输出object和embed标签的内容 (see Using JavaScript Helper Files to Create a Silverlight Plug-in section). 你可以通过这个plug-in在运行时应用它的属性，方法，事件

XAML Silverlight content: XAML 文件提供基于silverlight应用所需的表示层代码.

NOte：Silverlight 1.0 QuickStart 解释了如何使用这些工具及帮助文件。

    帮助脚本文件的功用

    帮助文件中的CreateSilverlight.js 和 Silverlight.js 便于你来构建一个基于silverlight的应用。下面的表格是一个完整的silverlight工程所包含的基本文件以及他的作用。

File	Description
Default.htm, default.aspx, 或者其他html文件	作为silverlight应用插件的宿主文件并调用CreateSilverlight.js 文件中定义的CreateSilverlight方法来初始化silverlight.
CreateSilverlight.js	定义初始化silverlight的方法CreateSilverlight，你可以使用CreateObject或者CreateObjectEx（只是所需的参数结构不一样）.
Silverlight.js	由微软提供的简单构建silverlight应用的帮助脚本文件，包含createSilverLight.js中需要的CreateObject和CreateObjectEx等

下面这张图显示了3个文件之间的关系

     Relationship between Default.htm, CreateSilverlight.js, and Silverlight.js


    调用 CreateSilverLight方法

    要构建一个silverlight应用，需要以下几个步骤：
    第一，在你的页面里引用CreateSilverlight.js和Silverlight.js。
    第二，   创建一个div块级元素用来放置你的silverlight 应用。当CreateObject或者CreateObjectEx执行的时候，将会在这块区域输入相应的html代码。当然，这个div的id必须的唯一的。
    第三，   在div中写一段脚本，用来引用这个div，告诉CreateObject方法应该在这块区域生成对应的silverlight应用。

下面这段代码是一个已经初始化完成简单的包含silverlight应用的页面。

<head>

<title>My Silverlight Application</title>

</head>

<body>

// Create a variable that references the HTML element that hosts the plug-in.

var parentElement = document.getElementById("slPluginHost");

// Initialize and create the plug-in.

createSilverlight();

</script>

</div>

</body>

修改 CreateSilverLight方法

一个典型的createSilverLight.js文件只包含一个单独的CreateSilverLight方法，这个方法的作用就是调用silverlight.js中的CreateObject或者CreateObjectEx方法来初始化一个silverlight。
CreateObject和CreateObjectEx其实作用是一样的，唯一的不同前面也说过了，只是CreateObjectEx方法利用了一个单独的json集合包含了所有的参数。下面是分别调用createObject和CreateObjectEx方法来实现初始化silverlight。

function createSilverlight()

{

Silverlight.createObject(

"plugin.xaml", // Source property value.

parentElement, // DOM reference to hosting DIV tag.

"myPlugin", // Unique plug-in ID value.

{ // Plug-in properties.

width:'1024', // Width of rectangular region of plug-in in pixels.

height:'530', // Height of rectangular region of plug-in in pixels.

inplaceInstallPrompt:false, // Determines whether to display in-place install prompt if invalid version is detected.

background:'white', // Background color of plug-in.

isWindowless:'false', // Determines whether to display plug-in in windowless mode.

framerate:'24', // MaxFrameRate property value.

version:'1.0' // Silverlight version.

{

onError:null, // OnError property value -- event-handler function name.

onLoad:null // OnLoad property value -- event-handler function name.

null, // initParams -- user-settable string for information passing.

null); // Context value -- passed to Silverlight.js onLoad event handlers.

}

function createSilverlightEx()

{

Silverlight.createObjectEx({

source: 'plugin.xaml', // Source property value.

parentElement:parentElement, // DOM reference to hosting DIV tag.

id:'myPlugin', // Unique plug-in ID value.

properties:{ // Plug-in properties.

width:'1024', // Width of rectangular region of plug-in, in pixels.

height:'530', // Height of rectangular region of plug-in, in pixels.

inplaceInstallPrompt:false, // Determines whether to display in-place install prompt if invalid version is detected.

background:'white', // Background color of plug-in.

isWindowless:'false', // Determines whether to display plug-in in windowless mode.

framerate:'24', // MaxFrameRate property value.

version:'1.0'}, // Silverlight version.

events:{

onError:null, // OnError property value -- event-handler function name.

onLoad:null}, // OnLoad property value -- event-handler function name.

initParams:null, // initParams property value -- user-settable string for information passing.

context:null}); // Context value -- passed to Silverlight.js onLoad event handlers.

}

参数
Source ---- 指定silverlight需要的XAML文件源
parentElement --- 用于放置silverlight的元素id，即前面定义的div块级元素的id
id --- 指定这个silverlight应用的id，如果一个页面有多个silverlight，这个id必须唯一。
Properties – silverlight面版的属性。
Events – 事件绑定
Initparams – 设置用户自定义初始化的参数，具体内容请看自定义silverlight初始参数
Context – 设定onload事件的唯一标识参数并可以用于一个页面的多个silverlight进行交互。无需利用htmldom就可以判定哪个silverlight插件已经加载完成。

使用 Isinstalled 方法

Silverlight.js帮助文件有一个用于运行时检查的函数，IsInstalled，在你使用CreateObject或者CreateObjectEx进行silverlight初始化之前可以用这个方法来检查当前浏览器是否含有响应的silverlight运行时。IsInstalled返回true说明已经安装了正确的运行时，相反，则返回false。

// Determine whether the specified Silverlight runtime version is installed.

var version = "2.0"; //deliberate over-version

var isInstalled = Silverlight.isInstalled(version);

// Create the plug-in if the specified Silverlight runtime version is installed.

if (isInstalled)

{

var parentElement = document.getElementById("pluginHost");

createSilverlight();

}

else

{

alert("Silverlight runtime version " + version + " not installed.");

}

</script>

</div>

Silverlight 版本

versionMajor.versionMinor.buildNumber.revisionNumber
IsVersionSupported versionMajor.versionMinor.

构建并应用内联 XAML

XAML允许以内联的方式表现。可以使用#前缀符加id标识来引用相应的XAML片段。

<html>

<head>

<title>Display Date</title>

function setDate(sender, eventArgs)

{

sender.text = Date();

}

</script>

</head>

<Canvas

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

Background="Wheat">

<TextBlock

Canvas.Left="20"

FontSize="24"

Loaded="setDate" />

</Canvas>

</script>

var parentElement = document.getElementById("pluginHost");

createSilverlightEx();

</script>

</div>

</body>

</html>

function createSilverlightEx()

{

Silverlight.createObjectEx({

source: '#xamlContent', // Source property value, referencing an ID in the HTML DOM.

parentElement:parentElement, // DOM reference to hosting DIV tag.

id:'myPlugin', // Unique plug-in ID value.

properties:{ // Plug-in properties.

width:'360', // Width of rectangular region of plug-in, in pixels.

height:'60', // Height of rectangular region of plug-in, in pixels.

background:'oldlace', // Background color of plug-in.

version:'1.0'}, // Plug-in version.

events:{

onLoad:null}}); // OnLoad property value -- event handler function name.

}

自定义silverlight初始参数

使用silverlight初始参数initparams，可以用来参数传递

function createSilverlight()

{

Silverlight.createObject(

"plugin.xaml", // Source property value.

parentElement, // DOM reference to hosting DIV tag.

"myPlugin", // Unique plug-in id value.

{ // Plug-in properties.

width:'600', // Width of rectangular region of plug-in in pixels.

height:'200', // Height of rectangular region of plug-in in pixels.

version:'1.0' // Plug-in version to use.

{ }, // No events defined -- use empty list.

"param1, param2"); // InitParams property value.

}

function onLoaded(sender, eventArgs)

{

// Retrieve a reference to the plug-in.

var plugin = sender.getHost();

// Retrieve the InitParams value and split comma-delimited string.

var params = plugin.initParams.split(",");

// Display the parameter values.

var msg = "Params: ";

for (var i = 0; i < params.length; i++)

{

msg += params[i] + " ";

}

alert(msg);

}

使用安装提示

inplaceInstallprompt提供一个初始化的参数，用来判断安装提示显示的版本。默认值为false。即当版本判定返回false，则会出现标准的下载提示框。点击即可以进入silverlight的下载页面。

假如将inplaceInstallprompt参数设置为true，那么在版本判定时如果返回false，则出现的是下面这个提示框

Silverlight in-place installation dialog box

Note：下载安装silverlight后必须重启浏览器才能使用，这点在安装提示中并没有体现，必要的时候应该向用户说明。

          使用onload 事件
    Silverlight也支持事件绑定于事件响应，在CreateObject方法的定义中，可以定义onload事件，onerror事件触发时需要执行的处理。

// Create a variable that references the HTML element that hosts the plug-in.

var parentElement = document.getElementById("pluginHost");

// Create variables that contain unique identifiers for the plug-in.

var name = "myslPlugin_1";

var context = "context_1";

// Initialize and create the plug-in.

createSilverlight();

</script>

</div>

// Create a variable that references the HTML element that hosts the plug-in.

var parentElement = document.getElementById("pluginHost2");

// Create variables that contain unique identifiers for the instance.

var name = "myslPlugin_2";

var context = "context_2";

// Initialize and create the plug-in.

createSilverlight();

</script>

</div>

function createSilverlight()

{

Silverlight.createObject(

"plugin.xaml", // Source property value.

parentElement, // DOM reference to hosting DIV tag.

name, // Unique plug-in ID value, a variable set before each page call.

{ // Plug-in properties.

width:'600', // Width of rectangular region of plug-in, in pixels.

height:'200', // Height of rectangular region of plug-in, in pixels.

version:'1.0' // Plug-in version to use.

{

onError:null, // Use default error handler.

onLoad:onLoad // OnLoad event handler that can be used for multiple instances.

null, // InitParams property value set to null.

context); // Unique context ID, a variable set before each page call.

}

function onLoad(plugin, userContext, sender)

{

alert(plugin.id + " : " + userContext + " : " + sender.toString());

}

终于写完了，好累。
原文自msdnhttp://msdn2.microsoft.com/en-us/library/bb412401.aspx#Using_the_IsInstalled_Method

posted @ 2008-01-04 13:21 一瞬间阅读(814) 评论(1) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

瞬间

瞬间永恒

SilverLight的Helloworld（使用CreateSilverlight.js and Silverlight.js进行SilverLight开发）

公告