重寫Essential Silverlight這本書中的第一個例子HelloWorld
做不出第一個例子會打擊初學者的信心。經過研究,終於發現了問題所在,作者的這個例子是使用記事本之類的東西進行開發的,並非Visual Studio。一個Silverlight應用程序最簡單需要4個文件:
l 一個html文件:用於給瀏覽器打開
l 一個xaml文件:用於控制Silverlight所顯示的內容
l 一個後綴名爲.js的JavaScript文件:html文件的代碼隱藏文件(code-behind技術)
l 一個模板文件Silverlight.js。這個文件可以從網上或VS2005中獲得,不需要自己寫
作者的HelloWorld程序沒看見HelloWorld的影子,乾脆我自己寫一段來幫助初學者完成HelloWorld吧,其實很簡單。
1. 打開記事本,輸入如下代碼。完成後把文件保存爲HelloWorld.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Silverlight</title>
<script type="text/javascript" src="Silverlight.js"></script>
<script type="text/javascript" src="HelloWorld.html.js"></script>
</head>
<body>
<div id="SilverlightPlugInHost">
<script type="text/javascript">
createSilverlight();
</script>
</div>
</body>
</html>
2. 使用記事本,輸入如下代碼。完成後把文件另存爲HelloWorld.xaml:
<Canvasxmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
<RectangleWidth="350"Height="150"Stroke="Orange"StrokeThickness="15" />
<TextBlockFontFamily="Arial"FontSize="56"Canvas.Left="25"Canvas.Top="40"
Foreground="Black"Text="Hello World!" />
</Canvas>
3. 使用記事本,輸入如下代碼。完成後把文件另存爲HelloWorld.html.js:
function createSilverlight()
{
Silverlight.createObjectEx({
source: 'HelloWorld.xaml',
parentElement: document.getElementById('SilverlightPlugInHost'),
id: 'SilverlightPlugIn',
properties: {
width: '800',
height: '400',
background:'#ffffffff',
isWindowless: 'false',
version: '1.0'
},
events: {
onError: null
}
});
}
4. 注意,以上3個文件放在同一目錄下。打開Visual Studio 2005,新建一個Silverlight項目,然後到這個項目所在的文件夾把Silverlight.js文件拷貝出來也放在這個目錄裏面。如果沒有裝VS2005就上網找一個。
5. 雙擊HelloWorld.html文件,運行效果如圖2-17所示
在運行本書後面的例子時,可以參照這個例子。步驟如下:
l 把HelloWorld.html、HelloWorld.xaml、HelloWorld.html.js複製一份,並按照課本的例題名稱更改它們的名字。確保在文件夾內有Silverlight.js文件存在
l xaml文件使用課本的代碼。
l html文件中
<script type="text/javascript" src="HelloWorld.html.js"></script>
這一行的src屬性值改爲實際的值。
l Html.js文件中
source: 'HelloWorld.xaml',
這一行的source屬性值改爲實際的值
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.