VS.NET 2003开发移动Web应用

背景

　　手机(移动电话)已经成为我们生活的一部分,一些新的设备添加到其中比如:PalmPilot,Pocket PC以及马上产生的AutoPC。

　　幸运的是这些新的移动设备都可以连接网络或者执行应用程序.

　　现在的移动应用程序被开发成可以传递数据的任何类型给世界上任何地方的任何人.

　　不同的移动设备支持不同的编程语言.有些支持WAP和WML,有些则支持HTML或者受限制的HTML,还有些同时支持以上两种或者其他不同的语言.

　　为了支持所有类型的移动设备,开发人员不得不为每一种语言创建不同的应用程序.

　　移动的.NET,微软已经为移动应用程序的开发生产了新的平台.

　　该向导是一个关于如何运用扩展的.NET框架开发移动应用程序,叫做MMIT(Microsoft Mobile Internet Toolkit)或者简单的叫做移动.NET(.NET Mobile).

　　移动.NET(.NET Mobile)

　　移动.NET是微软ASP.NET和微软.NET框架的扩展.

　　移动.NET是一组用来来创建应用程序的服务器端的Web Forms控件,比如:Web电话和PDA.

　　那些控件通过产生WML1.1,HTNL3.2或者简单的(compact)HTML给不同的设备呈现不同的输出.(译者注:就是对应不同设备的不同呈现.)

　　如何工作

　　下面的表格显示了移动.NET是如何工作的:

移动设备

Internet网络

IIS服务

.NET框架

ASP.NET

移动.NET

　　1. web客户端请求web页面.

　　2. internet上传送该请求.

　　3. 通过IIS接收该请求.

　　4. 通过.NET框架处理该请求.

　　5. 通过ASP.NET编译请求的页面.

　　6. 移动.NET处理任何移动设备的要求.( .NET Mobile handles any mobile device requirements)(译者注:这里处理详细的设备信息,以及该如何呈现页面)

　　7. 页面被返回给客户端.

　　软件要求

　　要使用移动.NET开发移动的应用程序,你必须拥有下面的环境或者组件:

　　1. 带IIS5的Windows 2000 Professional 或者Server

　　2. 所有的Windows 2000的补丁.

　　3. ASP.NET框架(译者注:.NET 框架).

　　4. 微软移动网络工具包(Microsoft Mobile Internet Toolkit MMIT).

　　5. IE 6.0或者5.5

　　6. 你喜欢的模拟器.

　　你许要使用Windows 2000开发.NET应用程序.同时你还必须安装Windows 2000的所有补丁程序.

IIS 5(Internet Information Service)是Windows 2000的一部分.

　　如果你想要了解更多的关于如何安装.NET的资料请去我们的ASP.NET tutorial.

　　你还要安装MMIT(.NET Mobile)和最新版本的IE浏览器.

　　IE和MMIT可以去这里Microsoft MSDN下载.

　　如何开始

　　用ASP.NET开发移动Web应用程序非常简单:

　　1. 创建ASP.NET页面.

　　2. 加入命名控件System.Mobile.UI.(译者注:在VS2003不用这么麻烦,建立移动项目这些都已经做好了).

　　3. 添加移动控件到页面上.
移动.NET事件

　　移动控件有一个可对属性，方法和事件编程的对象模型。

　　要得到完整的信息请参考MSDN。

　　提交文本

　　这个页面有两个表单：

＜%@ Page Inherits= "System.Web.UI.MobileControls.MobilePage"%＞ ＜%@ Register TagPrefix="Mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %＞ ＜script runat="server"＞ Dim age Sub AgeClick(sender As Object, e As EventArgs) age=text1.Text ActiveForm=Form2 End Sub Sub Form2_Activate(sender As Object,e As EventArgs) message.Text="You are " & age & " years old" End Sub ＜/script＞ ＜Mobile:Form id="form1" runat="server"＞ ＜Mobile:Label runat="server"＞Age?＜/Mobile:Label＞ ＜Mobile:TextBox runat="server" id="text1" /＞ ＜Mobile:Command runat="server" OnClick="AgeClick" Text="Submit" /＞ ＜/Mobile:Form＞ ＜Mobile:Form id="form2" runat="server" OnActivate="Form2_Activate"＞ ＜Mobile:Label runat="server" id="message" /＞ ＜/Mobile:Form＞

　　当一个页面有两个表单的时候，第一个表单总是作为打开的默认表单。

　　第一个表单有一内容是Age的label控件，一个输入控件用来输入年龄(Age)以及一个提交（Submit）按钮。

　　第二个页面通过第一个页面的提交按钮激活（译者注：偶觉的是第二个Form通过第一个Form的提交按钮激活，而不是原文种的Page。），同时显示相应信息。

　　当应用程序运行在移动设备上的时候，这两个页面看起来就像下面：


移动.NET输入

　　输入控件

　　有很多的移动控件支持用户输入。

　　在前面的demo中，最长用的输入控件可能就是TextBox控件了。TextBox是完成一些简单的输入，比如像姓名，数量，以及标识符和关键字。

　　如果输入大量的文本那么TextView控件可能是更好的选择。TextView控件允许长的多行的输入就像你用MSN给其他人发消息一样。

　　数字输入

　　我们可以通过设置TextBox的属性Numeric让TextBox只接收来接收数字的输入信息。

　　注意：这个特性通常工作在通过改变从文字到数字的输入模式的手机上。然而在HTML的浏览器上，通常不支持这种行为。

　　密码输入

　　我们可以将TextBox控件的Password属性设置成true或者false来指定TextBox处理密码字段。

　　密码字段将会通过*（星号）替换原始的文本来隐藏输入信息。

　　列表控件

　　TextBox和TextView控件是非常适合输入信息的，但是有时你想让用户从已有的列表中选择事先定义好的值。

　　SelectionList控件支持下拉列表，复选选框和单选按钮。这部分的内容将在其他的章节介绍。

　　List控件支持菜单和列表的选项，List控件将会在其他的章节介绍。

　　用户界面控件

　　用户控件是显示用户界面的控件集。

Name	Function
Command	Performs an action
Form	Defines a container for mobile controls
Image	Defines an image
Label	Defines a text
Link	Defines a hyperlink
List	Defines a list
MobilePage	Defines a container for mobile controls
ObjectList	Defines a list of data objects
Panel	Defines a container for other controls
SelectionList	Defines a list to select from
StyleSheet	Defines styles to be applied to other controls
TextBox	Defines a single line input box
TextView	Defines a multi-line input box

移动.NET输入验证

　　验证控件用来验证用户输入的数据。

　　验证控件

　　验证控件用来验证用户输入的数据。

　　验证控件允许你去验证输入控件（比如：TextBox）并且当验证失败的时候显示消息。

　　每个验证控件完成特定类型的验证（比如：不是指定的值或者不是指定的范围）。

　　默认情况下，当命令控件被点击得失后页面验证才处理。设置控件的CausesValidation属性为false后当控件被点击时你可以阻止页面的验证（和ASP.NET的模式一样设置命令控件（可能激发服务器事件的）的CausesValidation可以不用激发验证逻辑）。

　　验证输入

　　这个页面包含两个表单：

＜%@ Page Inherits= "System.Web.UI.MobileControls.MobilePage"%＞ ＜%@ Register TagPrefix="Mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %＞ ＜script runat="server"＞ Sub Page2(Sender as Object,E as EventArgs) If Page.IsValid Then ActiveForm=f2 text2.Text="You are " & age.text & " years old" end if End Sub ＜/script＞ ＜Mobile:Form id="f1" runat="server"＞ ＜Mobile:CompareValidator runat="server" ControlToValidate="age" Type="Integer" ValueToCompare="18" Operator="GreaterThanEqual"＞ You must be at least 18 ＜/Mobile:CompareValidator＞ ＜Mobile:Label runat="server"＞Age?＜/Mobile:Label＞ ＜Mobile:TextBox id="age" runat="server" /＞ ＜Mobile:Command OnClick="Page2" runat="server"＞ Submit＜/Mobile:Command＞ ＜/Mobile:Form＞ ＜Mobile:Form id="f2" runat="server"＞ ＜Mobile:Label id="text2" runat="server" /＞ ＜/Mobile:Form＞

　　第一个表单有一个Text属性是Age的Label控件，一个输入年龄的输入框以及一个提交按钮。

　　通过点击第一个页面的提交按钮后第二个页面被激活，显示相应。

　　如果验证输入错误，错误消息被显示出来。

　　当应用程序运行在移动设备上，这两个页面看起来象下面的样子：



　　ValidationSummary 控件

　　前面的例子使用CompareValidator控件验证输入的信息。输入信息的验证通过验证控件的属性ContolToValidate定义。

　　你也可以实用ValidationSummary控件的属性FormToValidate，去验证表单里的所有的输入信息。（功能和ASP.NET一样）

　　这种方式你可以用错误的摘要信息替换原来的单个错误显示。

　　验证控件参考

Name	Function
CompareValidator	Compares two values
CustomValidator	Provides custom validation
RangeValidator	Validates a range
RegularExpressionValidator	Validates an expression
RequiredFieldValidator	Validates required data
ValidationSummary	Displays a validation summary

　　要得到包括属性方法、事件以及更多实例的控件完整参考，请参考”Mobile Reference”页面。（译者注：参考原始页面或者MSDN。）
移动.NET列表

　　移动列表控件支持不同的输入和显示特性。

　　从List中选择

　　这个页面有两个表单：

＜%@ Page Inherits= "System.Web.UI.MobileControls.MobilePage"%＞ ＜%@ Register TagPrefix="Mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %＞ ＜script runat="server"＞ Sub Show_Price(sender As Object,e As ListCommandEventArgs) text1.Text=e.ListItem.Text & "=" & e.ListItem.Value ActiveForm=f2 End Sub ＜/script＞ ＜Mobile:Form id="f1" runat="server"＞ ＜Mobile:List runat="server" OnItemCommand="Show_Price"＞ ＜Item text="Volvo" value="$30,000" /＞ ＜Item text="BMW" value="$32,000" /＞ ＜Item text="Audi" value="$34,000" /＞ ＜/Mobile:List＞ ＜/Mobile:Form＞ ＜Mobile:Form id="f2" runat="server"＞ ＜Mobile:Label runat="server" id="text1" /＞ ＜/Mobile:Form＞

　　第一个表单有一个车的列表。

　　第二个页面显示价钱。当在第一个页上选择一个车这个页面就被激活。

　　当这个应用程序运行在移动的设备上这两个页面看起来就像下面的：


　　移动.NET选择列表

　　SelectionList控件支持下拉框，复选框以及单选按钮。

　　SelectionList

　　这个移动页面使用SelectionList让用户选择车：

＜%@ Page Inherits= "System.Web.UI.MobileControls.MobilePage"%＞ ＜%@ Register TagPrefix="Mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %＞ ＜script runat="server"＞ Sub Car_Click(sender as Object, e as EventArgs) ActiveForm=f2 t1.text=cars.Selection.Value End Sub ＜/script＞ ＜Mobile:Form id="f1" runat="server"＞ ＜Mobile:SelectionList runat="server" id="cars" ＞ ＜Item Text="Volvo" Value="$30,000" /＞ ＜Item Text="BMW" Value="$32,000" /＞ ＜Item Text="Audi" Value="$34,000" /＞ ＜/Mobile:SelectionList＞ ＜Mobile:Command runat="server" OnClick="Car_Click" Text="Submit" /＞ ＜/Mobile:Form＞ ＜Mobile:Form id="f2" runat="server"＞ ＜Mobile:Label id="t1" runat="server" /＞ ＜/Mobile:Form＞

　　当这个页面显示在移动设备上的时候，页面的导航和显示功能将为不同的设备编译不同的显示特性。（译者注：设备不同看到的页面也不同但是功能是一样的）

　　有些设备，比如掌上电脑，它可能显示成下拉列表选择表单。在手机上它可能显示为一个选项列表的选择表单。
移动.NET图像

　　移动.NET在不同设备类型上显示不同图像的类型。

　　Image控件

　　不同的移动设备显示的兼容性不同。

　　Image控件允许开发者为不同的设备类型指定图像的不同类型。

　　Image类型

　　有些移动设备显示GIF图像，有些显示BMP或者WBM图像，Image控件允许你为每个适合的图像类型指定不同的图像。

　　这个移动页面显示一个图像：

＜%@ Page Inherits= "System.Web.UI.MobileControls.MobilePage"%＞ ＜%@ Register TagPrefix="Mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %＞ ＜Mobile:Form runat="server"＞ ＜Mobile:Image runat="server"＞ ＜DeviceSpecific＞ ＜Choice ImageURL="image.gif" /＞ ＜Choice ImageURL="image.bmp" /＞ ＜Choice ImageURL="image.wbmp" /＞ ＜/DeviceSpecific＞ ＜/Mobile:Image＞ ＜/Mobile:Form＞

　　当这个页面显示在Pocket PC上的时候，将显示成GIF图像。在手机上将根据收集的特性显示成WBMP或者BMP图像。

　　移动.NET Utility

　　Utility控件通过很少的代码支持复杂的用户界面。

　　Adrotator 控件

　　这个移动页面显示不同的广告：

＜%@ Page Inherits= "System.Web.UI.MobileControls.MobilePage"%＞ ＜%@ Register TagPrefix="Mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %＞ ＜Mobile:Form runat="server"＞ ＜Mobile:AdRotator runat="server" AdvertisementFile="advertisements.xml"＞ ＜/Mobile:AdRotator＞ ＜/Mobile:Form＞

　　这个是广告(ad)文件叫做“advertisements.xml”：

＜?xml version="1.0" ?＞ ＜Advertisements＞ ＜Ad＞ ＜ImageUrl＞image1.gif＜/ImageUrl＞ ＜BmpImageUrl＞image1.bmp＜/BmpImageUrl＞ ＜WBmpImageUrl＞image1.wbmp＜/WBmpImageUrl＞ ＜NavigateUrl＞http://www.1.com＜/NavigateUrl＞ ＜AlternateText＞Visit 1＜/AlternateText＞ ＜/Ad＞ ＜Ad＞ ＜ImageUrl＞image2.gif＜/ImageUrl＞ ＜BmpImageUrl＞image2.bmp＜/BmpImageUrl＞ ＜WBmpImageUrl＞image2.wbmp＜/WBmpImageUrl＞ ＜NavigateUrl＞http://www.2.com＜/NavigateUrl＞ ＜AlternateText＞Visit 2＜/AlternateText＞ ＜/Ad＞ ＜Ad＞ ＜ImageUrl＞image3.gif＜/ImageUrl＞ ＜BmpImageUrl＞image3.bmp＜/BmpImageUrl＞ ＜WBmpImageUrl＞image3.wbmp＜/WBmpImageUrl＞ ＜NavigateUrl＞http://www.3.com＜/NavigateUrl＞ ＜AlternateText＞Visit 3＜/AlternateText＞ ＜/Ad＞ ＜/Advertisements＞

　　日历控件

　　这个也动页面显示一个日历：

＜%@ Page Inherits= "System.Web.UI.MobileControls.MobilePage"%＞ ＜%@ Register TagPrefix="Mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %＞ ＜script runat="server"＞ Sub CalChanged(sender as Object,e as EventArgs) lab1.Text="You selected " & c1.SelectedDate ActiveForm=f2 End Sub ＜/script＞ ＜Mobile:Form id="f1" runat="server"＞ ＜Mobile:Calendar id="c1" OnSelectionChanged="CalChanged" runat="server" /＞ ＜/Mobile:Form＞ ＜Mobile:Form id="f2" runat="server"＞ ＜Mobile:Label id="lab1" runat="server" /＞ ＜/Mobile:Form＞

　　这个例子里日历显示在第一个表单里，当用户从日历里面选择数据时，选择的日期显示在新的页面里。

　　PhoneCall控件

　　当用户选择文本这个移动页面显示文本“Tove’s number”和电话号码(555)555-5555。

　　The PhoneCall Control

＜%@ Page Inherits= "System.Web.UI.MobileControls.MobilePage"%＞ ＜%@ Register TagPrefix="Mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %＞ ＜Mobile:Form runat="server"＞ ＜Mobile:PhoneCall runat="server" PhoneNumber="(555) 555-5555" Text="Tove's number" AlternateFormat="{0}" /＞ ＜/Mobile:Form＞

　　这里的属性”AllternateFormat”是{0}。设置成这种显示将会显示为文本状。

　　如果你是用值{1}它将显示成”PhoneNumber”。

　　你也可以实用如下的构作AlternateFormat =”{0}is{1}”.这时候将会显示“Tove's number is (555) 555-5555”。

　　Utility 控件

Name	Function
AdRotator	Displays advertisements
Calendar	Displays a calendar
PhoneCall	Calls a telephone number

　　要了解更多的信息参考MSDN。