即将到来的3G技术,将使得移动设备突破现在的带宽限制,这样我们就可以构建出许多新颖且功能强大的移动应用。现在已经有许多商业应用都开始向移动设备上进行迁移,所以对开发者来说,现在就开始移动开发的学习将是一种非常适合的时机。
在本文中我将介绍如何使用Visual Studio 2005创建一个ASP.NET 2.0移动程序,然后介绍一些常用的移动开发控件并以适合的方式在程序中加于应用,最后将谈谈如何开发针对特定移动设备的WEB程序和管理程序中的ViewState(视图状态)和Session。
创建一个新的ASP.NET 移动WEB程序
Visual Studio 2005提供了一组功能强大且友好的开发工具来创建移动WEB程序,如果你已经有创建传统的ASP.NET应用程序的经验,那么你就会发现创建移动WEB程序和创建传统的ASP.NET应用程序是非常类似的。你只需要创建一个ASP.NET网站项目并添加一些移动WEB窗体即可。当你添加移动WEB窗体后,你就会发现在工具箱中添加了如下图所示的ASP.NET移动控件。
现在你可以按照如下的步骤在Visual Studio 2005创建一个新的ASP.NET 移动WEB程序:
1. 选择"文件"-"新建"-"网站"
2. 在"Visual Studio已安装的模板"列表中选择"ASP.NET 网站"
3. 设置好程序的"位置"、"语言"和"路径"等选项后,单击"确定"按钮。
当你完成上述步骤后,就已经创建好了一个ASP.NET 网站。现在我们就可以在该网站中添加一些针对移动设备的WEB窗体,其具体的实现过程如下:
1. 在Visual Studio 2005的"解决方案资源管理器"窗口中选择刚才创建好的网站项目,右键点击并在弹出的菜单中选择"添加新项"命令。
2. 在弹出的"添加新项"窗体中选择"移动WEB窗体"项。
3. 设置窗体的"名称"和"语言"等项,并且确保"将代码放在单独的文件中"选择框处于选中状态。
4. 单击"添加"按钮。
当单击"添加"按钮后,你会发现Visual Studio 2005自动添加了两个文件,在这里窗体名称被设置为"MobileDefault",因此这两个文件分别为MobileDefault.aspx 和MobileDefault.aspx.cs (如果你选择的语言为VB的话,则这两个文件为MobileDefault.aspx和MobileDefault.aspx.vb)。MobileDefault.aspx文件包含在窗体使用的各个ASP.NET 移动控件的声明方式,而MobileDefault.aspx.cs则包含了一些程序实现代码和事件处理代码,这和传统的ASP.NET应用程序采用的"代码后置"的方式是一致的。
窗体添加完毕后,我们就可以使用工具箱中的"移动WEB窗体"标签下的各个控件。如同其它的ASP.NET控件一样,我们也可以根据需求设置这些控件的属性和事件行为。你可以在"原代码"窗口下直接输入"<mobile: />"的语法方式来添加移动控件:
<mobile:TextBox ID="MyTextBox" runat="server"></mobile:TextBox>
<mobile:Label ID="MyLabel" runat="server">标签控件</mobile:Label>
下图显示了一个放置了Label、TextBox和Command控件的移动WEB窗体。该窗体所实现的功能是根据TextBox控件中输入的CustomerID来查找相应的用户信息,我们并没有编写对应的逻辑代码,只是显示了该窗体的界面:
Visual Studio 2005中对应的HTML代码如下所示,我们可以看到上述的3个控件均以 <mobile: 为前缀在页面代码中进行了声明。同样的,Form也采用了类似的方式加以声明,见代码7所示。在传统的ASP.NET应用程序中处理窗体和处理控件的方式是不一样的,这和移动WEB页面有很大的差别。其最大的不同就是开发人员可以在同一个移动WEB页面中创建多个窗体,并且可以在这些窗体间自由地导航而无需回发到服务器。利用该项特性可以减少因移动设备带宽小而带来的约束,大大减少了和服务器通讯的数据量。换句话说,移动设备中是以窗体为单位进行显示,而不是像传统的ASP.NET程序那样以页面为单位进行显示。我们使用移动设备浏览不同屏的信息时,可能并没有跳转到不同的页面,而是在同一个页面的不同窗体间进行跳转。
01 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="MobileDefault.aspx.cs"
02 Inherits="MobileDefault" %>
03 <%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls"
04 Assembly="System.Web.Mobile" %>
05 <html xmlns="http://www.w3.org/1999/xhtml" >
06 <body>
07 <mobile:Form id="Form1" runat="server">
08 <mobile:Label id="lblID" Runat="server">Customer ID</mobile:Label>
09 <mobile:TextBox id="txtCustID" Runat="server"></mobile:TextBox>
10 <mobile:Command id="cmdGetCustomer" Runat="server">Find Customer
11 </mobile:Command>
12 </mobile:Form>
13 </body>
14 </html>
ASP.NET 移动WEB窗体的开发视图 Visual Studio 2005的开发环境中提供了三种视图进行ASP.NET 移动WEB窗体的设计和开发。这三种视图分别为设计视图、HTML视图和代码视图,我们可以针对不同的开发需求在这些视图间进行切换。现在我们就这三种视图进行一个简短的概要。
设计视图
设计视图状态下将加载移动WEB窗体,并且自动呈现窗体中所包含的移动控件。你可以从工具箱中以拖拽的方式添加新的控件,你也可以通过属性窗口修改已存在的控件的属性。如果想要移除窗体中的某些控件的话,你可以点选该控件并使用"Delete"键进行删除。
注意,ASP.NET 移动WEB窗体的设计视图并不是一个"可见即可得"的编辑器,这是因为不同的移动设备其支持的呈现方式是不同的。例如,在设计视图状态下通常一行只能放置一个控件,但是在某些设备上支持在同一行放置多个控件,因此各个控件将会尽量地停靠在同一行上。正因为如此,我们还需要注意ASP.NET移动WEB窗体并不支持控件的绝对位置。
在设计器中,您可以按照希望控件显示给用户的顺序将它们添加到窗体或面板中,但是不能定义当它们呈现在移动设备的屏幕上时所处的绝对位置。为了适应多种多样的移动设备,ASP.NET 移动设计器使您能够针对特定设备自定义移动 Web 窗体页和控件的外观。这种灵活性使您可以确保:您的应用程序在目标设备上具有适用且吸引人的外观。
HTML视图
HTML视图状态下显示的是HTML源代码,你可以采用直接编码的方式设置移动控件和窗体的布局。当然我们已经很少使用这种方式进行程序的开发,你完全可以在设计视图状态下设置移动控件和窗体的布局,而后Visual Studio 2005会自动生成相应的页面代码。
你可以在Visual Studio 2005开发文档窗体的底部选择合适的标签进行设计视图和HTML视图的切换,如图中箭头所示:
代码视图
在采用代码后置的方式下,我们可以切换到代码视图状态查看页面程序的逻辑代码。你可以在页面的空白出单击右键,然后选择"查看代码"项就可以切换到代码视图状态。
ASP.NET 移动控件的事件处理
和传统的ASP.NET控件一样,移动控件也可以在特定的状态下激发事件,并提供了一些默认事件来处理经常发生的方案。除此之外,移动控件也可以在某些情况下激发一些其它的处理事件(非默认的事件)。传统的ASP.NET程序中,用户通过浏览器执行某些操作时会激发相应的事件,移动设备浏览器也采用了类似的处理方式。我们可以将一个事件通过回发的方式传递到服务器端,继而引发服务器端对该事件的处理,最终的处理结果将以HTML的形式传递到客户端浏览器。处理一个由移动控件激发的默认事件是非常容易的,我们只需在页面中放置一个移动控件并双击该控件即可。下面为一个较常见的事件处理代码,即一旦用户单击命令按钮就激发其Click事件。
protected void cmdGetCustomer_Click(object sender, EventArgs e)
{……}
创建一个非默认的事件处理器也是非常容易的,我们现在无需考虑语言的相关性。如果你曾经使用过Visual Studio 2003的话,你会发现用VB.NET来处理事件要比C#复杂。在当前的Visual Studio版本中已经将这两种语言的操作过程进行了统一,下面的步骤就是创建一个非默认事件处理器的详细步骤:
1. 在状态视图中点选要设置事件的控件。
2. 在属性窗口中选择事件按钮,也就是那个带有闪电标记的按钮。单击后就会在属性窗体中显示控件的所有的可用事件。
3. 双击你想处理事件的右侧空白栏,这时将切换到相应事件的代码视图状态。
使用容器控件
在ASP.NET 移动WEB窗体中提供了两种容器控件:Form控件和Panel控件。几乎所有的移动控件都是放置在这两种控件之中,唯独StyleSheet控件例外。StyleSheet控件可以单独地放置在页面中,该控件将会在以后的小节中进行详细的介绍。我们可以将属于同一组功能的移动控件都放置在一个容器控件中,这样使得程序的页面结构更加的清晰。我们还可以为一个容器控件设置特定的样式表,所有位于该容器的移动控件将会具有一致性的用户体验。注意,在页面中添加的容器控件是没有固定大小的,因为它将随着你在其中放置的控件而自动地进行调整,因此我们不可以显式地为容器控件指定一个特定的大小。 ASP.NET 移动WEB窗体对所有的控件都使用线性布局,即每行只放一个控件。这是因为众多的移动设备之间存在巨大的差异,尤其是一些支持WML的设备并不支持控件的并排显示。但是如果强制使用许多控件都支持的BreakAfter属性的话,则有相应的显示能力的设备上将启用并排显示的布局。另外,它会自动适应不支持并排呈现的设备的呈现规则。将 BreakAfter 属性设置为 false 将指示 ASP.NET 在所有具备相应显示能力的设备上并排放置控件。为了适应多种多样的移动设备,ASP.NET 移动设计器使您能够针对特定设备自定义移动 Web 窗体页和控件的外观。我将在后面的"设备筛选器"小节中详细介绍如何开发针对特定设备的应用程序。
Form控件
所有的内容和控件都包含在Form控件中,而且每个ASP.NET 移动WEB页面至少要包含一个Form控件,并且该页面可以包含多个Form控件。但是,当这些控件显示在移动设备上时,移动 Web 应用程序一次只能显示一个移动Form 控件。当你添加一个移动WEB窗体时会自动在页面上创建一个默认的Form控件。如果你需要在页面中添加多个Form控件时,可以在工具箱中直接拖拽出。
用户浏览到某移动Web窗体页时,默认情况下将显示该页面上的第一个Form控件。你也可以通过编码的方式直接在页面的Page_Load事件中指定一个Form控件为当前的活动窗体。当然你也可以采用编码的方式并且根据用户的输入信息导航到相应的Form控件上。在同一个页面的不同Form控件之间导航并不需要通过服务器的处理,因此可以极大地提高程序的响应速度。将一个页面组织成多个Form控件还有个优点,那就是可以在不同的Form控件间传递一些丰富的状态信息。因为一个页面上的所有 Form 控件都共享相同的代码隐藏文件和页面状态信息,因此各个Form 控件都可以共享相同的方法和成员。
由于ASP.NET移动WEB程序通常是在一些小屏幕的移动设备上运行的,为了适应这种特定的显示环境,你需要将一个普通的ASP.NET WEB页面分解成多个移动WEB页面。如果没有Form控件的话,这种分解过程是非常繁杂的,因为你需要在ASP.NET WEB页面和移动WEB页面间建立一个一对多的映射,这样使得程序难以维护。
最合适的方式就是在一个移动WEB页面放置多个Form 控件,这样使得ASP.NET WEB页面和移动WEB页面是一个一对一的镜像关系。在面对数据量较大的移动WEB页面时,将所有的Form控件在页面初始化时就全部加载到移动设备的响应时候是相当长的。但是一旦加载到移动设备后在各个Form控件进行导航的速度又是非常快的,因为一切信息都存放在本地的内存中。这种页面的加载方法总体上还是利大于弊的,开发人员可以根据实际的需求加以权衡,而且同一页面上的所有Form控件可以共享相同的代码隐藏文件和页面状态信息。
Panel(面板)控件
使用 Panel 控件可将窗体中的控件进行分组。这使您可以对整个组应用 StyleSheet 控件。面板还能帮助应用程序确定分页。ASP.NET 会尽量将一个面板中的所有控件都同时显示在屏幕上。
若要将面板添加到应用程序中,请从"工具箱"中将其拖放到应用程序。面板中的所有控件都继承该面板的样式。可以将面板插入Form控件或其他面板中。应用程序隐藏或显示面板时,它将对该面板包含的控件应用相同的操作。此外,应用程序还可将面板控件用作动态创建的控件的容器。
Panel控件必须放在Form控件中、另一Panel控件中或控件模板中。除StyleSheet控件、DeviceSpecific控件和Form控件外,所有其他控件也都必须放在Form或Panel控件中。