Javascript开发Silverlight1.0入门之一

2007-09-28 13:43:42　来源:Silverlight中文社区　作者:East 点击:

与现在很多的“入门系列”直接开始就涉及到Visual Studio 和 Ajax 不同，我将以更加简单的方式来讲解这个系列。

本系列的目的

　　在 Silverlight.Net 的论坛里面，我发现有很多问题被反复的问到，而在今天上午的Web开发者大会后我意识到实际上还有一大部分开发者对Silverlight还没有入门。

　　与现在很多的“入门系列”直接开始就涉及到Visual Studio 和 Ajax 不同，我将以更加简单的方式来讲解这个系列。

第一篇入门

　　该文章的目的只是为了讲述一个含有Silverlight的Web页面有多么的简单。所有要做的事情只是从SDK中包含一些内容到页面上来，而且SDK的链接已经在说明中给出了。因此只需要几分钟，你就能拥有你的一个运行着的Silverlight 网页。

　　平时我比较倾向于介绍细节，但是在今天这篇文章里我要打破这个惯例。因为我希望大家能给快速上手，这次我将绕过一些复杂的语法介绍以利于大家接受。

底线（最基本的条件）

　　创建只包含一个Canvas元素的Silverlight网页的最基本的条件是不需要AJAX，也不需要Visual Studio。你只要有记事本就可以了，当然如果你有带颜色代码的编辑器更好，不过也它不是必需的。

　　一个SilverlightWeb页面最少需要做3件事情：

一个用户显示的HTML页面
SDK中的Silverlight.js （下面将会介绍）
定义有一个Canvas的XAML文件

　　当然，如果你使用了外部的CSS或者一些图片，你应该将他们包含进来，但是我现在忽略掉这些内容。

　　首先是最困难的部分，到Silverlight.net Getting Started Page页面，然后向下滚动到标题"Software Development Kit",然后点击该链接下载"Microsoft Silverlight 1.0 Beta Software Development Kit (SDK)".

　　解开压缩包，里面包含了很多东西，但你只需要找到Silverlight.js就可以了。

　　然后将Silverlight.js放到一个你的代码容易引用到的目录，当有新版本是也能方便的更新。我认为新建一个JS目录来放这个文件和其他的可能会用到的JS文件是比较常见的做法，在以后的讨论中我们都将这么做。

HTML 文件

　　现在你已经做好了通过JavaScript创建Silverlight的准备工作，让我们看看这个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>
Sys.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
				>