第13章创建基于移动设备的Web程序.ppt

,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,第,13,章 创建基于移动设备的,Web,程序,ASP.NET平台不仅可以开发Windows、Web应用程序，还可以开发专用于移动设备使用的应用程序。使用ASP.NET来开发移动Web应用程序和开发普通Web应用程序没有太大的区别。在.NET框架集中提供的System.Web.Mobile命名空间是专门用来开发移动Web应用程序的。本章主要讲解使用ASP.NET开发移动Web应用程序的基础知识和常用控件。,章节内容,13.1,移动,Web,窗体语法,13.2,标准控件,13.3,高级控件,13.1,移动,Web,窗体语法,使用ASP.NET创建移动Web窗体与创建普通的Web窗体类似，开发人员可以直接从模板中添加，其添加方法也与添加普通的Web窗体相同,。,13.1.1,在,VS2008,中添加移动窗体模板,VS2008没有直接提供“移动Web窗体”模板，如图13-1所示。,图,13-1,添加新项,13.1.1,在,VS2008,中添加移动窗体模板,对于在VS2008中没有提供“移动Web窗体”模板，这确实很令人疑惑。网上的说法是：据Microsoft Visual Web,Developer的团队项目经理Omar,Khan的说法，这是因为Visual,Studio 2008中的设计视图是基于一个全新的架构设计的，所以暂时这一部分模板还没有跟上，所以ASP.NET mobile,controls并不能显示,。,13.1.2,创建移动,Web,窗体,在完成移动Web窗体创建的准备工作之后，就可以使用VS2008来创建移动Web窗体了。在创建移动Web窗体之前，首先需要来创建一个网站项目。这里的网站项目创建方法与创建普通的Web网站相同。首先打开VS2008，单击“文件”“新建”“网站”命令，如图13-2所示，弹出如图13-3所示的“新建网站”窗口。,13.1.2,创建移动,Web,窗体,图,13-2,新建网站,13.1.2,创建移动,Web,窗体,图,13-3,“,新建网站”窗口,13.1.2,创建移动,Web,窗体,网站项目创建成功之后，就可以向网站中添加“移动Web窗体”了，其添加方法和添加普通的Web窗体一样，在解决方案资源管理器中，右击网站名称，在右键菜单中单击“添加新项”命令，这时会打开图13-4所示的“添加新项”窗口。,13.1.2,创建移动,Web,窗体,图,13-11,“,添加新项”窗口,13.1.2,创建移动,Web,窗体,选择“我的模板”中的“移动Web窗体”选项，然后在下面的“名称”文本框中为新建的窗体命名，这里使用默认的名称Default.aspx，单击“添加”按钮，即可向网站项目中添加一个新的移动Web窗体,。,13.1.3,在仿真程序中呈现,在移动Web窗体创建成功之后，就需要对已经创建的移动Web窗体进行调试，以检验程序设计的效果如何。在VS2008中提供了“设备仿真管理器”，来实现虚拟手机模拟功能，当然，读者也可使用智能手机对已经建立的程序进行测试。往往在实际开发过程中为了节省成本，会使用“设备仿真管理器”来对程序进行检测。读者可以在“工具”菜单中找到“设备仿真管理器”，单击“设备仿真管理器”选项，即可打开“设备仿真管理器”窗口，如图13-5所示。,13.1.3,在仿真程序中呈现,图,13-5,设备仿真管理器,13.1.3,在仿真程序中呈现,读者可以从“设备仿真管理器”列表中任选一款模拟器来模拟手机调试Web程序。在这里选择“Windows,Mobile 5.0 Pocket PC SDK”选项下的“CHS Windows Mobile 5.0 Pocket PC R2 Emulator”作为测试模拟器。右击这一模拟器，在右键菜单中单击“连接”命令，这时会打开图13-6所示的模拟器界面。,13.1.3,在仿真程序中呈现,图,13-6,模拟器界面,13.1.3,在仿真程序中呈现,模拟器运行之后，在“设备仿真管理器”选中已经运行的模拟器，右击，在右键菜单中单击“插入底座”命令，这时就可以使用ActiveSync进行连接,。,打开ActiveSync，然后单击“文件”菜单中的“连接设置”命令，会打开图13-7所示的“连接设置”窗口，然后单击“连接”按钮，会打开图13-8所示的“进行连接”窗口，这时ActiveSync正在与模拟器进行连接。,13.1.3,在仿真程序中呈现,13-7,“,连接设置”窗口,13.1.3,在仿真程序中呈现,13-,8,“,进行连接”窗口,13.1.3,在仿真程序中呈现,当,ActiveSync,与模拟器连接成功之后，会在图,13-9,中出现“移动设备已连接”的提示。,单击“确定”按钮之后，,ActiveSync,界面会提示“已连接”的字样，如图,13-10,所示。,13.1.3,在仿真程序中呈现,图,13-9,“,移动设备已连接”提示,13.1.3,在仿真程序中呈现,图,13-10 “,已连接”提示,13.1.3,在仿真程序中呈现,这时就可以在模拟器的,IE,浏览器中，输入需要测试的移动,Web,窗体地址来进行测试，如图,13-11,所示向模拟器的,IE,浏览器中输入测试地址。单击,IE,地址栏的“转到”图标，测试结果如图,13-12,所示。,13.1.3,在仿真程序中呈现,图,13-11,在模拟器中输入测试地址,13.1.3,在仿真程序中呈现,图,13-12,测试结果,13.2,标准控件,用于开发移动,Web,窗体的控件与开发普通,Web,窗体的服务器控件相对应，都是在服务器端进行解析，同时也必须带有,runat,=server,的标记，这些控件经过处理后会生成客户端呈现代码发送到客户端。,13.2.1 Form,控件,在移动,Web,窗体中，,Form,控件的定义格式如下。,而在普通的,Web,窗体中是没有,mobile,标志的，在移动,Web,窗体中，,Form,控件同样具有,Name,、,Method,、,Action,、,Enctype,和,target,属性，它们所表述的意义与普通,Web,窗体中表述的意义是相同的。,13.2.2 Panel,控件,在移动,Web,窗体中，,Panel,控件用来作为控件的容器使用，可以将其他的服务器控件装载到其内部。,Panel,控件可以对其内部的所有控件做整体的控制，如当,Panel,控件为隐藏状态时，其内部的所有控件都处于隐藏状态，这样就为程序的灵活性提供了可靠的保证。,在移动,Web,窗体中，,Panel,控件的,HTML,代码显示如下。,13.2.3,用户输入控件,在移动,Web,窗体开发过程中，用来作为用户输入的控件是,TextBox,控件。,TextBox,控件既可以作为普通的用户输入控件，也可以作为密码控件使用。下面是,TextBox,控件的两种使用状态，如图,13-13,和图,13-14,所示。,13.2.3,用户输入控件,图,13-13,作为普通控件,图,13-14,作为密码控件,13.2.3,用户输入控件,TextBox,控件的常用属性,属性,描述,MaxLength,用于设置,TextBox,控件最多可接收的列数,BackColor,用于设置,TextBox,控件的背景色,Font,用于设置,TextBox,控件的字体样式,Visible,用于设置,TextBox,控件的可见状态,Password,用于设置,TextBox,控件的显示模式,13.2.4,列表控件,列表控件可以同时显示很多数据项，以方便用户做相应的选择，常用的列表控件包括,SelectionList,、,List,、,ObjectList,。本节主要讲解,SelectionList,控件的使用方法，其他列表的使用方法与它类似，读者可以参照,SelectionList,控件的使用方法来学习其他列表控件的使用方法。,13.3,高级控件,在.NET框架中还为移动Web窗体提供了高级服务器控件，这些控件对ASP.NET开发移动Web应用程序具有重要意义。它们的使用方法并不难，之所以称之为高级服务器控件，是因为这些控件封装了大量的功能，仅仅一个控件就可以实现在传统开发中多个控件才能实现的功能，对于提高程序开发的质量和速度具有重要的意义。,13.3.1,AdRotator,控件,广告是网站收入的重要部分，特别是一些电子商务类网站，在移动Web开发中，ASP.NET也提供了相应的广告开发控件，它就是AdRotator控件。AdRotator控件使用XML文件作为数据源，将XML文档中配置好的广告信息呈现到客户端。,13.3.1,AdRotator,控件,AdRotator控件的常用属性,属性,描述,AdvertisementFile,指定包含广告信息的,XML,文件路径,Alignment,指定空间的对齐方式,BackColor,指定空间的背景色,ForeColor,指定空间的前景色,Font-Bold,指定控件中的文本字体是否以粗体显示,Font-Italic,指定控件中的文本字体是否以斜体显示,Font-Name,指定空间中的文本字体名称,Font-Size,指定空间中的文本字体尺寸,ImageKey,指定获取图像,URL,的广告名称,KeywordFilter,指定限制目录之后广告的过滤器,NavigateUrlKey,指定获取目标,URL,的广告元素名称,OnAdCreated,指定在提交页面之前,、,创建控件之后所要执行的函数名称,StyleReference,指定一个应用于控件的样式参数,13.3.2 Image,控件,.NET框架中为移动Web窗体提供了Image控件，此控件主要用来在客户端显示图片，Image控件在移动Web设计中具有重要的作用，它不仅可以起到美化界面的作用，同时也可以作为动态的广告位来呈现。另外Image控件还有许多重要的属性来辅助它实现更多的功能。,13.3.2 Image,控件,Image控件的常用属性,属性,描述,AlternateText,指定图像所对应的替换文本,Alignment,指定图像的排列方式,BackColor,指定图像的背景色,ImageUrl,指定图像的,URL,NavigateUrl,设置或返回目标,URL,链接,SoftkeyLabel,当,NavigateUR,L,属性被定义时，设置或返回一个软键,softkey,的文本显示,StyleReference,指定一个应用于控件的样式参数,13.3.3 Calendar,控件,在移动Web窗体中，Calendar控件的使用方法非常简单，同时与普通Web应用程序中的Calendar控件极为类似。,13.3.3 Calendar,控件,Calendar控件的常用属性,属性,描述,Alignment,指定控件的排列方式,BackColor,指定控件的背景色,CalendarEntryText,向,Calendar,控件中输入在,CHTML,和,WML,设备中使用的文本,FirstDayOfWeek,指定在第一列中显示星期几。如果该属性设置为“,default,”,，那么它将自动使用服务器本地属性设置来确定在第一列中显示星期几,ForeColor,指定控件的前景色,Font-Bold,指定控件中的文本字体是否以粗体显示,Font-Italic,指定控件中的文本字体是否以斜体显示,Font-Name,指定控件中的文本字体名称,Font-Size,指定控件中的文本字体尺寸,SelectedDate,指定当前可选择的日期,，,默认值为今天的日期,SelectionMode,指定用户选择日期的方式,，,默认值为“日”。如果想屏蔽这个功能，可以将其属性设置为,None,ShowDayHeader,指定是否需要在日历头部显示星期几的名称,，,默认值为,true,StyleReference,指定一个应用于控件的样式参数,VisibleDate,指定显示月份的日期,Wrapping,指定控件中的文本是否允许被嵌套,