Asp.net移动开发指南(6)
1.4.6 允许用户打电话
某些Pocket PC设备(如Pocket PC智能手机)可以在用户进行选择时打出电话。PhoneCall控件可以为应用程序封装此操作,这样,当从能打电话的设备上访问该应用程序时,将显示一个用于执行此操作的用户界面。当从不能打电话的设备上访问该应用程序时,会显示一个标签文本或一个链接。清单1-8中的示例演示了PhoneCall控件的一种简单用法,它可使能打电话的设备能够通过链接打出电话,并在不能打电话的设备上显示包含电话号码和超级链接的文本。图1-8显示了清单1-8所演示示例运行时的Web页面。
清单1-8 PhoneCall控件
图1-8 PhoneCall控件
1.4.7 用户输入
许多ASP.NET移动Web窗体控件都支持用户输入。当设计允许用户输入的窗体时,可以将一个或多个用户输入控件以及其他移动控件(如标签)放在窗体中。对于大多数允许用户输入窗体来说,还需要在窗体上放置Command控件让用户将输入提交回服务器。设计移动Web界面的输入功能时,同样适用本书第5章介绍的界面设计原则,应尽量避免用户直接输入的次数和输入量。因此,在设计移动Web界面的输入功能时,应尽量多地使用List控件和SelectionList控件来替代使用TextBox控件接收用户输入。List移动控件支持下列3种呈现样式:
(1)None 每个列表项都按原样显示。
(2)Bulleted 带项目符号,每个列表项都带有项目符号。
(3)Numbered 带编号,每个列表项都带有编号。
清单1-9中的示例演示以交互输入方式查看List控件所有支持的呈现样式。清单1-10说明了页面所对应的代码文件List.aspx.vb中的实现代码。
清单1-9 使用List控件输入
清单1-10 List.aspx.vb
图1-9显示了清单1-9所演示示例运行时的Web页面。
图1-9 List移动控件
SelectionList控件的数据功能与List控件很相似。SelectionList控件的不同之处在于它被独占使用以表示窗体中的选定项,并且要求其他控件(如Command控件)提交选定项。除了支持单个选定项之外,SelectionList控件还支持多个选定项。SelectionList移动控件支持下列5种呈现样式:
(1)DropDown 单个选定项,列表显示为下拉列表框。
(2)ListBox 单个选定项,列表显示为列表框。
(3)Radio 单个选定项,列表显示为一组选项按钮。
(4)MultiSelectListBox 多个选定项,列表显示为列表框。
(5)CheckBox 多个选定项,列表显示为一组复选框。
清单1-11中的示例说明以CheckBox多选模式使用SelectionList控件进行输入,以及如何使用选定项信息。清单1-12说明了页面所对应的代码文件SelectionList.aspx.vb中的实现代码。
清单1-11 使用SelectionList控件输入
清单1-12 SelectionList.aspx.vb
图1-10显示了清单1-11所演示示例运行时的Web页面。
图1-10 SelectionList移动控件
1.4.8 输入验证
ASP.NET提供了一种强大的验证机制,使用它可以检查输入是否有错误,并且在必要时向用户显示消息。ASP.NET移动Web窗体提供了5个不同的用于验证输入的移动控件,它们分别是:
(1)RequiredFieldValidator 验证关联的输入控件的值是否不同于其初始值。
(2)CompareValidator 使用可指定的比较运算符来比较某控件中的特定字段与另一控件中的特定字段,并以此来确定有效性。
(3)RangeValidator 验证另一控件值是否在允许的范围内。
(4)RegularExpressionValidator 提供用于验证另一控件的值是否与所提供的正则表达式相匹配的控件功能。
(5)CustomValidator 提供可以对另一个控件执行自定义验证的控件。
移动验证控件使用有限的移动控件子集。表1-6显示了可用于这5个控件进行验证的输入控件及其属性。
在清单1-13中,name属性指定筛选器的名称,可以使用此名称在移动Web窗体页中引用该筛选器。其余属性定义如何测试筛选器。在针对筛选器测试设备时,框架将根据argument属性指定的值检查compare属性中命名的设备功能。可用的功能集可以在System.Web.UI.Mobile.Controls.MobileCapabilities类的参考资料中找到。
1.4.11 DeviceSpecific和Choice
若要在页面上以声明方式定义设备特定的内容,则可以使用DeviceSpecific控件。可以在页面上将此标记声明为任何移动Web窗体控件的子集。清单1-14是一个使用DeviceSpecific控件的示例。
清单1-14 DeviceSpecific和Choice
http://hi.baidu.com/zhiwei%5F117/blog/item/15ec93da8dc53e6cd0164e0f.html
某些Pocket PC设备(如Pocket PC智能手机)可以在用户进行选择时打出电话。PhoneCall控件可以为应用程序封装此操作,这样,当从能打电话的设备上访问该应用程序时,将显示一个用于执行此操作的用户界面。当从不能打电话的设备上访问该应用程序时,会显示一个标签文本或一个链接。清单1-8中的示例演示了PhoneCall控件的一种简单用法,它可使能打电话的设备能够通过链接打出电话,并在不能打电话的设备上显示包含电话号码和超级链接的文本。图1-8显示了清单1-8所演示示例运行时的Web页面。
清单1-8 PhoneCall控件
+展开
-XML
<%@ Page Language="VB" AutoEventWireup="false" CodeFile=" DisplayText.aspx.vb"
Inherits=" DisplayText" %>
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<mobile:Form id="Form1" runat="server"><br /><br /><br /><br /><br />
<mobile:PhoneCall ID="pcDemo" Runat="server"
AlternateUrl="http://support.microsoft.com/" PhoneNumber="(086)021-96081318">
微软客户服务支持热线
</mobile:PhoneCall>
</mobile:Form>
</body>
</html>
Inherits=" DisplayText" %>
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<mobile:Form id="Form1" runat="server"><br /><br /><br /><br /><br />
<mobile:PhoneCall ID="pcDemo" Runat="server"
AlternateUrl="http://support.microsoft.com/" PhoneNumber="(086)021-96081318">
微软客户服务支持热线
</mobile:PhoneCall>
</mobile:Form>
</body>
</html>
图1-8 PhoneCall控件
1.4.7 用户输入
许多ASP.NET移动Web窗体控件都支持用户输入。当设计允许用户输入的窗体时,可以将一个或多个用户输入控件以及其他移动控件(如标签)放在窗体中。对于大多数允许用户输入窗体来说,还需要在窗体上放置Command控件让用户将输入提交回服务器。设计移动Web界面的输入功能时,同样适用本书第5章介绍的界面设计原则,应尽量避免用户直接输入的次数和输入量。因此,在设计移动Web界面的输入功能时,应尽量多地使用List控件和SelectionList控件来替代使用TextBox控件接收用户输入。List移动控件支持下列3种呈现样式:
(1)None 每个列表项都按原样显示。
(2)Bulleted 带项目符号,每个列表项都带有项目符号。
(3)Numbered 带编号,每个列表项都带有编号。
清单1-9中的示例演示以交互输入方式查看List控件所有支持的呈现样式。清单1-10说明了页面所对应的代码文件List.aspx.vb中的实现代码。
清单1-9 使用List控件输入
+展开
-HTML
<%@ Page Language="VB" AutoEventWireup="false" CodeFile=" List.aspx.vb" Inherits=" List"%>
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<mobile:Form id="Form1" runat="server">
<mobile:Label ID="Label1" Runat="server" Font-Bold="True">List移动控件</mobile:Label>
<mobile:List ID="ListDemo" Runat="server">
<Item Text="None(无)" Value="None" />
<Item Text="Bulleted(带项目符号)" Value="Bulleted" />
<Item Text="Numbered(带编号)" Value="Numbered" />
</mobile:List>
</mobile:Form>
</body>
</html>
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls"
Assembly="System.Web.Mobile" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<mobile:Form id="Form1" runat="server">
<mobile:Label ID="Label1" Runat="server" Font-Bold="True">List移动控件</mobile:Label>
<mobile:List ID="ListDemo" Runat="server">
<Item Text="None(无)" Value="None" />
<Item Text="Bulleted(带项目符号)" Value="Bulleted" />
<Item Text="Numbered(带编号)" Value="Numbered" />
</mobile:List>
</mobile:Form>
</body>
</html>
清单1-10 List.aspx.vb
+展开
-VBScript
Partial Class List
Inherits System.Web.UI.MobileControls.MobilePage
Protected Sub ListDemo_ItemCommand(ByVal sender As Object, ByVal e As _
System.Web.UI.MobileControls.ListCommandEventArgs) Handles ListDemo.ItemCommand
Dim text As String = e.ListItem.Value
ListDemo.Decoration = CType(System.Enum.Parse(GetType(MobileControls.ListDecoration), _
text, True), MobileControls.ListDecoration)
End Sub
End Class
Inherits System.Web.UI.MobileControls.MobilePage
Protected Sub ListDemo_ItemCommand(ByVal sender As Object, ByVal e As _
System.Web.UI.MobileControls.ListCommandEventArgs) Handles ListDemo.ItemCommand
Dim text As String = e.ListItem.Value
ListDemo.Decoration = CType(System.Enum.Parse(GetType(MobileControls.ListDecoration), _
text, True), MobileControls.ListDecoration)
End Sub
End Class
图1-9显示了清单1-9所演示示例运行时的Web页面。
图1-9 List移动控件
SelectionList控件的数据功能与List控件很相似。SelectionList控件的不同之处在于它被独占使用以表示窗体中的选定项,并且要求其他控件(如Command控件)提交选定项。除了支持单个选定项之外,SelectionList控件还支持多个选定项。SelectionList移动控件支持下列5种呈现样式:
(1)DropDown 单个选定项,列表显示为下拉列表框。
(2)ListBox 单个选定项,列表显示为列表框。
(3)Radio 单个选定项,列表显示为一组选项按钮。
(4)MultiSelectListBox 多个选定项,列表显示为列表框。
(5)CheckBox 多个选定项,列表显示为一组复选框。
清单1-11中的示例说明以CheckBox多选模式使用SelectionList控件进行输入,以及如何使用选定项信息。清单1-12说明了页面所对应的代码文件SelectionList.aspx.vb中的实现代码。
清单1-11 使用SelectionList控件输入
+展开
-XML
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<mobile:Form id="Form1" runat="server" Paginate="True">
<mobile:Label ID="Label1" runat="server"> SelectionList移动控件</mobile:Label>
<mobile:SelectionList ID="SelectionList1" Runat="server" SelectType="CheckBox">
<Item Text="北京" Value="北京"/>
<Item Text="上海" Value="上海"/>
<Item Text="广州" Value="广州"/>
<Item Text="长沙" Value="长沙"/>
<Item Text="青岛" Value="青岛"/>
</mobile:SelectionList>
<mobile:Command ID="cmdOK" Runat="server" OnClick="cmdOK_Click">确定</mobile:Command>
</mobile:Form>
<mobile:Form ID="Form2" Runat="server">
<mobile:Label ID="Label2" Runat="server">Label</mobile:Label>
</mobile:Form>
</body>
</html>
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<mobile:Form id="Form1" runat="server" Paginate="True">
<mobile:Label ID="Label1" runat="server"> SelectionList移动控件</mobile:Label>
<mobile:SelectionList ID="SelectionList1" Runat="server" SelectType="CheckBox">
<Item Text="北京" Value="北京"/>
<Item Text="上海" Value="上海"/>
<Item Text="广州" Value="广州"/>
<Item Text="长沙" Value="长沙"/>
<Item Text="青岛" Value="青岛"/>
</mobile:SelectionList>
<mobile:Command ID="cmdOK" Runat="server" OnClick="cmdOK_Click">确定</mobile:Command>
</mobile:Form>
<mobile:Form ID="Form2" Runat="server">
<mobile:Label ID="Label2" Runat="server">Label</mobile:Label>
</mobile:Form>
</body>
</html>
清单1-12 SelectionList.aspx.vb
+展开
-C#
public partial class Default4 : System.Web.UI.MobileControls.MobilePage
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void cmdOK_Click(object sender, EventArgs e)
{
string city="";
foreach(System.Web.UI.MobileControls.MobileListItem item in SelectionList1.Items)
{
if (item.Selected)
{
if (city.Length > 0)
{
city = city + ",";
}
city = city + item.Text;
}
if (city.Length == 0)
{
city = "未选择任何城市....";
}
Label2.Text = city;
this.ActiveForm = Form2;
}
}
}
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void cmdOK_Click(object sender, EventArgs e)
{
string city="";
foreach(System.Web.UI.MobileControls.MobileListItem item in SelectionList1.Items)
{
if (item.Selected)
{
if (city.Length > 0)
{
city = city + ",";
}
city = city + item.Text;
}
if (city.Length == 0)
{
city = "未选择任何城市....";
}
Label2.Text = city;
this.ActiveForm = Form2;
}
}
}
图1-10显示了清单1-11所演示示例运行时的Web页面。
图1-10 SelectionList移动控件
1.4.8 输入验证
ASP.NET提供了一种强大的验证机制,使用它可以检查输入是否有错误,并且在必要时向用户显示消息。ASP.NET移动Web窗体提供了5个不同的用于验证输入的移动控件,它们分别是:
(1)RequiredFieldValidator 验证关联的输入控件的值是否不同于其初始值。
(2)CompareValidator 使用可指定的比较运算符来比较某控件中的特定字段与另一控件中的特定字段,并以此来确定有效性。
(3)RangeValidator 验证另一控件值是否在允许的范围内。
(4)RegularExpressionValidator 提供用于验证另一控件的值是否与所提供的正则表达式相匹配的控件功能。
(5)CustomValidator 提供可以对另一个控件执行自定义验证的控件。
移动验证控件使用有限的移动控件子集。表1-6显示了可用于这5个控件进行验证的输入控件及其属性。
表1-6 可用于验证的移动输入控件
控件 |
验证属性 |
TextBox |
Text |
SelectionList |
SelectedIndex |
注意,为了在窗体上进行验证,导致提交窗体的控件的CausesValidation属性必须设置为true。当前惟一适用于这一点的控件是Command控件,默认情况下其CausesValidation属性为true。
1.4.9 自动分页
ASP.NET移动Web窗体的一个主要功能,就是能够根据目标设备的屏幕大小将内容分页。窗体分页的处理是通过结合服务器端分页,和客户端上执行的自动分页共同完成。并非所有窗体都适合自动分页。通常情况下,显示大量文本或许多列表项的窗体可以从分页中获益。前面几节包含了这类启用了分页的窗体的示例。要为窗体启用分页,必须将窗体的Paginate 属性设置为true,然后窗体会自动将其内容分页。
1.4.10 设备筛选器
要创建并使用设备特定的内容,必须首先为应用程序配置一组设备筛选器。ASP.NET页框架使用这些设备筛选器,为目标设备选择设备特定的内容。设备筛选器不一定是排他性的,一个设备可以匹配多个筛选器。
要定义设备筛选器,需要在应用程序的web.config文件中创建<deviceFilters>节,并将<filter>元素添加到其中。清单1-13显示了web.config文件中基本的设备筛选器配置。
清单1-13 web.config文件中基本的设备筛选器配置
+展开
-XML
<deviceFilters>
<filter name="isJPhone" compare="Type" argument="J-Phone"/>
<filter name="isHTML32" compare="PreferredRenderingType" argument="html32"/>
<filter name="isWML11" compare="PreferredRenderingType" argument="wml11"/>
<filter name="isMME" compare="Browser" argument="Microsoft Mobile Explorer"/>
<filter name="isMyPalm" compare="Browser" argument="MyPalm"/>
<filter name="isPocketIE" compare="Browser" argument="Pocket IE"/>
<filter name="isUP3x" compare="Type" argument="Phone.com 3.x Browser"/>
<filter name="isUP4x" compare="Type" argument="Phone.com 4.x Browser"/>
<filter name="isEricssonR380" compare="Type" argument="Ericsson R380"/>
<filter name="isNokia7110" compare="Type" argument="Nokia 7110"/>
<filter name="supportsCookies" compare="Cookies" argument="true"/>
<filter name="supportsJavaScript" compare="Javascript" argument="true"/>
<filter name="supportsVoiceCalls" compare="CanInitiateVoiceCall" argument="true"/>
</deviceFilters>
<filter name="isJPhone" compare="Type" argument="J-Phone"/>
<filter name="isHTML32" compare="PreferredRenderingType" argument="html32"/>
<filter name="isWML11" compare="PreferredRenderingType" argument="wml11"/>
<filter name="isMME" compare="Browser" argument="Microsoft Mobile Explorer"/>
<filter name="isMyPalm" compare="Browser" argument="MyPalm"/>
<filter name="isPocketIE" compare="Browser" argument="Pocket IE"/>
<filter name="isUP3x" compare="Type" argument="Phone.com 3.x Browser"/>
<filter name="isUP4x" compare="Type" argument="Phone.com 4.x Browser"/>
<filter name="isEricssonR380" compare="Type" argument="Ericsson R380"/>
<filter name="isNokia7110" compare="Type" argument="Nokia 7110"/>
<filter name="supportsCookies" compare="Cookies" argument="true"/>
<filter name="supportsJavaScript" compare="Javascript" argument="true"/>
<filter name="supportsVoiceCalls" compare="CanInitiateVoiceCall" argument="true"/>
</deviceFilters>
在清单1-13中,name属性指定筛选器的名称,可以使用此名称在移动Web窗体页中引用该筛选器。其余属性定义如何测试筛选器。在针对筛选器测试设备时,框架将根据argument属性指定的值检查compare属性中命名的设备功能。可用的功能集可以在System.Web.UI.Mobile.Controls.MobileCapabilities类的参考资料中找到。
1.4.11 DeviceSpecific和Choice
若要在页面上以声明方式定义设备特定的内容,则可以使用DeviceSpecific控件。可以在页面上将此标记声明为任何移动Web窗体控件的子集。清单1-14是一个使用DeviceSpecific控件的示例。
清单1-14 DeviceSpecific和Choice
+展开
-HTML
<mobile:DeviceSpecific ID="DeviceSpecific1" Runat="server">
<Choice Filter="isHTML32">
<HeaderTemplate >
<mobile:Label ID="Label1" Runat="server">Header Template - HTML32</mobile:Label>
<mobile:Command ID="Command1" Runat="server">Submit</mobile:Command>
</HeaderTemplate>
<FooterTemplate>
<mobile:Label ID="Label2" Runat="server">Footer Template</mobile:Label>
</FooterTemplate>
</Choice>
<Choice Filter="isPocketIE">
<HeaderTemplate>
<mobile:Label ID="Label1" Runat="server">Header Template - PocketIE</mobile:Label>
<mobile:Command ID="Command1" Runat="server">Submit</mobile:Command>
</HeaderTemplate>
<FooterTemplate>
<mobile:Label ID="Label2" Runat="server">Footer Template</mobile:Label>
</FooterTemplate>
</Choice>
</mobile:DeviceSpecific>
<Choice Filter="isHTML32">
<HeaderTemplate >
<mobile:Label ID="Label1" Runat="server">Header Template - HTML32</mobile:Label>
<mobile:Command ID="Command1" Runat="server">Submit</mobile:Command>
</HeaderTemplate>
<FooterTemplate>
<mobile:Label ID="Label2" Runat="server">Footer Template</mobile:Label>
</FooterTemplate>
</Choice>
<Choice Filter="isPocketIE">
<HeaderTemplate>
<mobile:Label ID="Label1" Runat="server">Header Template - PocketIE</mobile:Label>
<mobile:Command ID="Command1" Runat="server">Submit</mobile:Command>
</HeaderTemplate>
<FooterTemplate>
<mobile:Label ID="Label2" Runat="server">Footer Template</mobile:Label>
</FooterTemplate>
</Choice>
</mobile:DeviceSpecific>
http://hi.baidu.com/zhiwei%5F117/blog/item/15ec93da8dc53e6cd0164e0f.html
加支付宝好友偷能量挖...