Part1:使用VS2008和Silverlight2创建HelloWorld程序
这一部分是示例8个文档的第一部分,通过这个示例我们可以学习如何使用Silverlight2建立一个简单的Digg客户端程序。这些章节最好能够顺序阅读,有助于了解Silverlight编程的核心概念。
通过VS2008创建一个新的Silverlight程序
可以使用Visual Studio2008或者免费版的Visual Web Developer2008 Express,选择File-》New Project菜单创建我们的Digg程序。并且选择创建一个“Silverlight Application”。
注意:如果你没有下载安装Silverlight Tools for VS2008,通过VS2008你将无法进行创建Silverlight程序。
图1
我们给这个项目起名“DiggSample”。当单击“OK”按钮时,Visual Studio提示我们是否仅创建一个Silverlight 程序项目,还是再添加一个Asp.Net Web服务器端应用项目(作为Silverlight程序的宿主)。在这个示例中我们选择添加一个Asp.Net Web应用项目,取名“DiggSampe_WebServer”。单击“OK”,Visual Studio将创建一个解决方案,包含一个Siverlight客户端程序和一个Asp.Net Web服务器端程序。
图2
在菜单栏中单机“生成Build”,VisualStudio将自动复制编译后的Silverlight程序到我们的Web项目,VS创建的缺省Web服务器项目包含一个ASP.Net页面和一个静态的Html页面用来运行和测试我们的Silverlight程序。
注意:Silv程序可以被用在任何的Web服务器上(包括Linux上的Apache服务器),可以被嵌入静态的Html文件或者任何服务器端生成的页面(例如:PHP,JavaScript,Pyhon,Ruby等)。这个Digg示例,我们不会写任何服务器端代码,而是使用Silverlight跨域的网络访问能力直接访问Digg 服务器的API。我们选择创建一个ASP.Negt Web项目主要是想使用他的自动化部署和内置的WEBServer服务器进行测试。
Understanding What Is In a Silverlight Application
Silverlight应用程序的构成
默认情况下,新创建的Silverlight程序包含一个Page.xaml和App.xaml文件,以及和他们关联的后台代码(这些后台代码可以用VB,C#,Ruby或者Python进行开发)。
图3
XAML文件是描述特定Silverlight 或者WPF程序UI的XML文件。XAML更广泛的用来描述.Net对象的展现。
App.xaml文件用来声明资源,例如跨程序间共享的画刷和风格对象。它后台代码能够用来控制程序级别的事件,例如:Appication_Startup,Application_Exit和Application_UnhandledException。
当Silverlight程序运行时,Page.xaml文件用来初始化被加载的UI控件。我们可以使用各种控件创建新的界面,并且通过后代码控制事件的响应。
当我们生成我们的DiggSample项目时,VS将编译这些后台代码和.XAML标示到一个标准的.Net的装配文件,将这图像等静态资源和这个装配文件进行打包成一个DiggSample.xap文件。
图4
“.xap”读作” 咋谱Zap” ,xap文件使用标准的.zip压缩算法降低下载文件的大小。“Hello World”的Silverlight程序(使用VB或c#)大约4K。
为了使用Siverlight2程序,你可以在标准的Html页面上增加<object>标签指明.xap文件的位置。Silverlight将自动下载这个.xap文件,并实例化,嵌入到浏览器的Html页面上。这个过程可以跨浏览器(Safari,FireFox,IE等),跨操作系统(Windows,Mac,Linux)实现。
当我们创建项目时,HTML和ASP.Net面上所需的<Object>标签已经被自动创建,我们只需要按F5(调试,编译),就可以测试它。
如何添加控件并进行事件控制
现在我们的Digg程序什么也做不了,当你运行时,他只是显示一个空白页。我们可以打开Page.xaml文件添加些内容:
图5
我们开始改变一下grid的背景并且加一个Button按钮控件。给着个Button“x:Names”属性设置一个值“MyButton”,这样我们就可以通过后台代码对他进行操作了。我们设置一下按钮显示的文字内容Content,宽度Width,高度(Height)。
图6
当我们运行这个程序是,我们的按钮将显示在页面的中间,按钮文字显示“Push Me!”
图7
为了控制我们单击按钮的行为,我们添加一个“Click”事件,我们可以在源代码视图中输入事件名称:
图8
VS将提示我们在后台代码中添加事件的控制代码:
图9
我们可以直接输入事件控制代码的名称,也可以直接按回车键按照缺省的命名规则生成事件控制的方法名称。
图10
VS将自动在后台代码文件中创建一个事件控制方法的实现。我们就可以通个这个事件控制按钮单击时显示新的信息。
图11
完成上面的工作后,我们重新编译程序并且单机按钮,就可以看到单击按钮后,按钮的文字信息显示“Pushed”。
图12
下一部分:
我们下一步将会整理我们程序的界面的整体结构,并且放更多的控件。我们将在先一部分进行讲解:使用层管理。