SilverLight & Java Script指南1—— Hello Silverligh

最新推荐文章于 2021-11-19 13:48:38 发布

shinner

最新推荐文章于 2021-11-19 13:48:38 发布

阅读量667

点赞数

文章标签： silverlight java sliverlight html javascript div

目的

在Silvelight.Net论坛，我看到如何上手Sliverlight的问题不断出现。而在今天早晨的"Web Developer Conference"（网站开发者会议）之后，我意识到由于一些可以预料到的复杂性，依然有很多开发者并没有真正上手去使用Sliverlight。

结合目前已有的“指南”大多都直接结合Visual Studio 平台和AJAX技术，我觉得应该有一个相对简化的指南，抛开这些来深入介绍Silverlight技术

第一章

这一章的内容会告诉你，通过Silverlight来增强你的网页是多么简单。如果已经拥有了SDK，只需要几分钟，你就可以获得第一个可以运行的Silverlight网页了！

一般情况下我会尽量解释所有的地细节，但是这次我不会这么做。因为我希望你能更快的得到想要的页面，我不会去钻研一些语法问题。

底线

开始创造你的第一个Silverlight页面的的“底线”不需要AJAX，也不需要Visual Studio。最差的情况你得有windows的记事本……如果有一个可以彩色标记的文件编辑器就更好了，不过依然不是必须的。

要开发包含Silverlight增强技术的网页只需要以下的三样东西。

可以添加数据的html文件

SDK提供的Silverligth.js文件（在下文会介绍）

符合Silverlight XAML模式的XML文件，用来定义画布（canvas）

我们先来获得最困难的东西，来到Silverlight.net Getting Started Page，向下浏览找到名为"Software Development Kit"，下载"Microsoft Silverlight 1.0 Beta Software Development Kit (SDK)"。（注1）

在一个方便找到的地方解压缩，这里有好多好东西，不过现在我们只关心一样，那就是Silverlight.js。

可以把Silverlight.js文件放在你用于开发的区域。这样程序的代码能够容易找到，也便于当有新的版本发布时升级。我觉得使用一个js文件夹保存这个js文件和其他JavaScript文件是一个很好的办法。下面，我就要用一个例子来呈现下面的内容。

HTML文件

现在已经万事具备，可以使用JavaScript开发Sliverlight了。我们先来看一下html页面的代码。

<! 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 ="js/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: 'xaml/MyFirstSilverlightPage.xml', parentElement:pe1, id:'Ag1', properties:{width:'300', height:'100', background:'#00FFFFFF', isWindowless:'true', framerate:'24', version:'0.90.0'}, events:{onError:null, onLoad:null}, context:null});

</ script >

</ body >

</ html >

在头部分，使用上面的方法连接js/Silverlight.js

唯一需要注意的地方是div标签用来控制Silverlight对象，并且Silverlight对象的实例化就在div标签的下方。我们来分别讨论这两个部分：

Div标签

div标签规定了控制区域

实例化

Silverlight画布创造出来的东西是整个页面最复杂的部分。为了简便，我们先不对讨论那些其他指南已经代码成篇的内容，现在我们只关心以下几点：

source: 'xaml/SilverlightWithJSTutorial01.xml'

这是你的xaml文件的位置。还记得我为了便于查找，把所有的xaml文件放在一个名叫xaml的文件夹中吧。我使用xml的扩展名，这样我就可以使用我的xml编辑器编辑了。同样，也可以使用.xaml的扩展名。

width: '300'