重寫Essential Silverlight這本書中的第一個例子HelloWorld

做不出第一個例子會打擊初學者的信心。經過研究,終於發現了問題所在,作者的這個例子是使用記事本之類的東西進行開發的,並非Visual Studio。一個Silverlight應用程序最簡單需要4個文件:
l         一個html文件:用於給瀏覽器打開
l         一個xaml文件:用於控制Silverlight所顯示的內容
l         一個後綴名爲.jsJavaScript文件: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.htmlHelloWorld.xamlHelloWorld.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屬性值改爲實際的值
 
發佈了18 篇原創文章 · 獲贊 0 · 訪問量 5萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章