14.4  为小屏幕和移动设备构建页面

在第8章中，我们简单地提到了作为标准ASP.NET安装一部分的ASP.NET 移动控件。这一节将了解这些控件的更多内容，并介绍如何使用这些控件来创建适用于移动设备的页面和网站。

14.4.1  页面设计和设备支持

第8章中已经介绍过，System.Web.UI.MobileControls命名空间的控件会自动改变其创建的标记和输出，来适应访问页面的设备类型。它们可以生成大量不同的标记类型，包括HTML、无线标记语言（Wireless Markup Language，WML）和其他特殊的HTML精简形式（如一些移动设备使用的cHTML）。那么，这是不是意味着你现在可以构建适用于所有设备的页面甚至整个网站或应用呢？答案是肯定的，但是在大多数情况下，你可能并不想这么做。

其原因与页面的设计有关，另外还与查看页面的设备与该页面的匹配程度有关。2.5G和3G蜂窝电话已经出现，尽管与以前的GPRS电话相比，带宽和屏幕大小都有所增加，但根本问题更多地在于实际的显示页面大小与可用的屏幕大小之间的差距，以及客户可用的输入设备。

例如，对于面向传统Web浏览器的页面，常见的一种设计是采用多列，在最上面或左边有单独的导航条，并有大量的小文本链接和可点击的图像。这种页面通常依赖于使用鼠标来导航。在最新的蜂窝电话上，通常没有鼠标，不过可能有某种导航板。但是，大部分精简型移动电话设备只能显示简单的文本，可能每行最多20个字符，而且不超过6行，也许甚至不能显示图像。

所以，尽管移动Label、Command或TextBox控件可以修改其行为来适应所需的设备和标记语言，但是要想为整个页面设计“全能”的布局，使之在所有设备上都能“工作”（从可用性的角度来讲），实际上是不可能的。另外，这也不是移动控件的初衷。移动控件允许你使用同样的技术、工具和编程模型来构建页面，不过通常你必须实现不同版本的Web应用，来适应所要支持的各种不同类型的设备，可能一个版本面向正常的Web浏览器，另一个版本面向移动设备。

14.4.2  为移动设备创建页面

Visual Studio为开发面向移动设备的网站和网页提供了绝好的支持。创建一个新网站时，或者向一个现有网站增加页面时，可以选择移动设备开发所特有的大量特性。Visual Studio Toolbox还包含了完备的移动控件，可以直接拖放到你的页面中，就像构建正常的HTML页面一样。图14-16显示了Visual Studio中正在构建的一个移动页面，在这个切屏图中可以看到Toolbox中有大量移动控件可以使用。

注意，移动页面和正常的HTML页面之间有一个主要区别。只要使用Toolbox的Mobile Web Forms部分中的Form控件，移动页面允许增加多个服务器端<form>。这是因为，移动设备页面的工作方式与正常的HTML页面完全不同。

移动设备通常只有有限的内存容量和处理能力，而且屏幕很小，所以在一次只显示很少几个控件时表现最好。不过，并不是创建多个小页面（每个页面各有一屏信息），而是各个移动表单相当于一个屏幕。在WML术语中，每个表单是一张“牌”，当然构成移动页面的一组屏幕就称为“一副牌”。

图14-16  在Visual Studio中创建一个移动设备应用

然后在页面中使用服务器端代码指定要显示的牌，可以根据需要在牌之间切换，按顺序显示这些牌，相当于实现页面导航。服务器将整副牌（页面）保存在内存中，并在每次回送时向设备发送适当的牌（表单）。

1. 对于移动设备Web Form要考虑的问题

构建移动Web Form页面时有一些需要考虑的重要问题。为了节省设备内存，ASP.NET不在发送给客户的牌中存储viewstate。相反，会使用一个键在用户的会话中存储和获取viewstate数据。这说明，必须确保启用了会话支持，而且由于许多设备不支持cookie，对于移动设备页面通常还必须使用无cookie会话。要启用无cookie会话支持，可以使用web.config文件<system.web>中的<session-State>元素：

<sessionState cookieless="true" />

由于客户在页面的牌间导航时会做多个查看牌的请求，所以有必要将所需的数据存储在页面一张单独的牌中（移动表单）。发生牌间导航时，页面上所有牌中的所有控件都会维护其值，所以可以使用这张“额外”的牌来存储值，但不向用户提供任何途径来查看这张牌。

2. Mobile Web Forms控件集

如果需要构建面向小屏幕和移动设备的页面，Mobile Web Forms控件集中的全部控件可以提供你可能需要的所有特性。MobilePage类是所有移动页面的基类，它相当于“一副牌”。显示文本和数据以及收集用户输入的基本表单控件包括：

q Form，移动页面中控件的容器，创建一张“牌”。

q Label，显示只读的文本输出。

q TextBox，提供一个正常的单行文本框。

q TextView，显示大的文本域，而且自动分页为设备上的多“屏”。

q Panel，为所包含的控件提供一个容器，完成分组、设置样式和控制分页，并作为一个占位符来动态插入控件。

q Image，显示一个图像。

q Command，提供一个链接或按钮（取决于设备）来启动一个回送。

q Link，提供另一张牌（表单）或URL的超链接。

还有一组列表控件，其工作与Web Forms控件集中的控件很相似，也支持数据绑定，并使用声明式<asp:ListItem>方法：

q List，显示一个只读的项列表。

q ObjectList，显示一个数据对象列表。

q SelectionList，显示一个可点击或可选择的项列表。

还有一些特殊的控件用于管理样式、生成富输出，或者完成电话特定的任务：

q StyleSheet，存储和组织其他控件的样式。

q DeviceSpecific，根据一个设备过滤器显示内容的某些部分。

q PhoneCall，在适当的设备上可以启动一个语音电话。

q AdRotator，提供一个广告旋转特性。

q Calendar，为移动设备生成一个日期选择特性。

移动控件集还包括一组验证控件，其做法与相应的标准Web Forms控件完全相同：

q CompareValidator，比较两个控件中的值，或者与一个特定值比较。

q RangeValidator，确定一个控件值是否落在一个指定范围内。

q RegularExpressionValidator，根据一个正则表达式完成验证。

q RequiredFieldValidator，要求为一个控件提供输入。

q CustomValidator，使用一个定制验证函数完成验证。

q ValidationSummary，显示所有验证错误的一个总结。

所有这些控件与相应的ASP.NET Web Forms控件采用完全相同的方式工作，不过属性相对有限，只是一些移动设备特定的属性。编写代码来管理这些控件与编写正常的Web Forms代码一样，同样可以使用事件处理器和回送以及ASP.NET的事件驱动体系结构。

3. 移动设备过滤器

移动设备页面总是很简单，除了控件本身创建的格式化或设备特定的输出外，很少有别的内容。这是因为如果将一个元素（如水平线<hr />）放在移动页面中，它会传送给访问这个页面的每一个设备。许多基于WML的设备或其他专用设备不能识别出这个元素，并会产生一个错误。因此要依赖于控件本身生成适当的输出。

不过，这并不是说不能自己增加一些设备特定的输出，只要能确保这些输出只发送给能识别它的设备，就完全可以。为此，一种办法是利用设备过滤器。可以基于HttpBrowser- Capabilities类（或者更专用的MobileDeviceCapabilties类）提供的属性定义过滤器。例如，代码清单14-15显示了一个web.config文件，其中声明了4个设备过滤器，在此使用了Browser和PreferredRenderingType属性。

可以采用代码清单14-16 所示的办法使用代码清单14-15中声明的设备过滤器。向移动设备传送一个图像时，必须确保它有正确的格式，大多数接受WML的移动电话都需要一个采用特殊WBMP格式的双色图像。代码清单14-16中的Image控件使用一个DeviceSpecific控件在运行时选择正确的图像文件，它根据应用到当前设备的过滤器来选择。AlternateText属性指定了设备不支持图像时显示的文本。

<configuration>

<system.web>

  <deviceFilters>

    <filter name="IsIE" compare="Browser" argument="IE" />

    <filter name="IsHTML32" compare="PreferredRenderingType"

            argument="html32" />

    <filter name="IsWML11" compare="PreferredRenderingType"

            argument="wml11" />

    <filter name="IsWML12" compare="PreferredRenderingType"

            argument="wml12" />

  </deviceFilters>

  <sessionState cookieless="true" />

</system.web>

</configuration>

<mobile:Form runat="server" id="frmMain" styleReference="styMenu">

  <mobile:Image runat="server" id="myImages"

          AlternateText="Image cannot be displayed on this device.">

    <DeviceSpecific>

      <Choice Filter="IsWML11" ImageUrl="TheLogo.wbmp"/>

      <Choice Filter="IsWML12" ImageUrl="TheLogo.wbmp"/>

      <Choice ImageUrl="TheLogo.gif" Alignment="left" />

    </DeviceSpecific>

  </mobile:Image>

</mobile:Form>

4. 移动设备样式表

要向输出增加设备特定的内容，第二个技术是利用一个StyleSheet控件。在StyleSheet控件中声明一个或多个<mobile:Style>元素，每个元素由一个唯一的Name标识。在各个<mobile:Style>元素中，可以根据web.config文件中声明的过滤器使用DeviceSpecific控件来指定输出。

代码清单14-17显示了这个方法的一个例子，它使用模板向每个页面的标题增加一些粗体文本和一系列<font>元素，当客户是一个支持HTML的正常设备时，在各个页面底部结束<font>元素。对于其他设备，则只是在一个标准<p>元素中输出文本"Dave and Al"，所有设备都能识别这个元素。

<mobile:Stylesheet ID="StyleSheet1" runat="server">

  <mobile:Style Name="styMenu">

    <DeviceSpecific>

      <Choice Filter="IsHTML32">

        <HeaderTemplate>

          <font face="Tahoma,Arial,sans-serif" size="4">

          <b>Welcome to the<br /><font color="#993333">

          - Dave and Al -</font><br />Mobile Web Site</b><p />

          </font><font face="Tahoma,Arial,sans-serif" size="2">

        </HeaderTemplate>

        <FooterTemplate>

          </font>

        </FooterTemplate>

      </Choice>

      <Choice>

        <HeaderTemplate>

          <p>Dave and Al</p>

        </HeaderTemplate>

      </Choice>

    </DeviceSpecific>

  </mobile:Style>

</mobile:Stylesheet>

然后可以把样式表的Name指定为实现一张牌的移动表单元素的StyleReference属性，采用这种方法可以将样式表应用到一副牌中的任何一张牌：

<mobile:Form runat="server" id="frmMain" StyleReference="styMenu">

  . . .

</mobile:Form>

5. 一个简单的移动Web Forms示例

为了介绍移动控件，这个简单的示例将使用一些控件来创建有三张牌（或表单）的一个应用。代码清单14-18 显示了一些页面指令，指定这是一个移动页面，并导入所需的程序集。创建一个新的移动Web Forms页面时，Visual Studio会自动增加这些程序集。

<%@ Page Language ="C#" AutoEventWireup="true"

    CodeFile="mobile-controls.aspx.cs" Inherits="mobile_controls" %>

<%@ Register Tagprefix="mobile" Namespace="System.Web.UI.Mobile Controls"

    Assembly="System.Web.Mobile" %>

<html xmlns="http://www.w3.org/1999/xhtml" >

<body>

  <mobile:Form ID="Form1" runat="server" StyleReference="styMenu">

    <mobile:Image ID="Image1" runat="server"

            AlternateText="Picture cannot be displayed">

      <DeviceSpecific>

        <Choice Filter="IsWML11" ImageUrl="TheLogo.wbmp" />

        <Choice Filter="IsWML12" ImageUrl="TheLogo.wbmp" />

        <Choice ImageUrl="TheLogo.gif" Alignment="Left" />

      </DeviceSpecific>

    </mobile:Image>

    <mobile:Label ID="Label1" runat="server">Your name:</mobile:Label>

    <mobile:TextBox ID="txtName" runat="server"></mobile:TextBox>

    <mobile:Command ID="cmdName" runat="server"

            OnClick="cmdName_Click">Next</mobile:Command>

  </mobile:Form>

然后是开始<html>和<body>标记，接下来是第一个表单。默认第一个表单就是第一次加载页面时看到的表单。这个表单中包含一个Image元素，并有一个嵌套DeviceSpecific元素，如本节前面所述，这会为Image控件的ImageUrl属性设置适当的值。在Image后面是一个Label和一个TextBox控件，还有一个标题为Next的Command控件，它会执行名为cmdName_Click的服务器端例程。

页面上的另外两个表单如代码清单14-19所示，其中一个表单包含一个Label和一个Calendar控件，另一个表单包含一个List和两个Link控件。选择Calendar中的一个日期时，会执行名为Calendar1_SelectionChanged的服务器端例程。List控件声明为空，因为代码会在运行时填充。第一个Link控件指向第一个表单（标题为Home），这里使用了我们熟悉的URL语法，先是一个#，然后是目标名（如#Form1）。第二个Link控件指向一个外部网站。这个页面还包含代码清单14-17所示的StyleSheet。

<mobile:Form ID="Form2" runat="server">

    <mobile:Label ID="Label2" runat="server">Birth

            date:</mobile:Label>

    <mobile:Calendar ID="Calendar1" runat="server" Font-Size="Small"

            OnSelectionChanged="Calendar1_SelectionChanged">

    </mobile:Calendar>

  </mobile:Form>

  <mobile:Form ID="Form3" runat="server" OnActivate="Form3_Activate">

    <mobile:List ID="lstLanguages" runat="server">

    </mobile:List>

    <mobile:Link ID="lnkHome" runat="server"

            NavigateUrl="#Form1" SoftkeyLabel="Home">

      Home

    </mobile:Link>

    <mobile:Link ID="lnkDaveAndAl" runat="server"

                 NavigateUrl="http://www.daveandal.net">

      Dave and Al

    </mobile:Link>

  </mobile:Form>

  <mobile:Stylesheet ID="StyleSheet1" runat="server">

    ... as shown in Listing 16 ...

  </mobile:Stylesheet>

</body>

</html>

代码清单14-20显示了这个例子完整的服务器端代码。第一个表单上TextBox的事件处理器和第二个表单上Calendar的事件处理器只是通过设置默认MobilePage类的ActiveForm属性来启动下一个表单。最后一个方法处理第三个表单的 Page_Load事件。可以看到，与前面有关可访问性的一节中（一个可访问页面的例子）一样，它使用同样的类文件来得到一个 DataSet，其中包含一个语言列表，以及一个假想网站的访问人数统计。

protected void cmdName_Click(object sender, EventArgs e)

{

  ActiveForm = Form2;

}

protected void Calendar1_SelectionChanged(object sender, EventArgs e)

{

  ActiveForm = Form3;

}

protected void Form3_Activate(object sender, EventArgs e)

{

  // get table of the results and display them

  DemoLanguages dl = new DemoLanguages();

  DataSet ds = dl.GetDemoDataSet();

  DataTable dt = ds.Tables[0];

  dt.Columns.Add(new DataColumn("DisplayText",

     Type.GetType("System.String"), "Language + ' = ' + Count"));

  lstLanguages.DataSource = dt;

  lstLanguages.DataTextField = "DisplayText";

  lstLanguages.DataBind();

}

不过，在小屏幕设备中，通常不能在表中显示数据。一种解决办法是把各行中的值集中为单个文本串，然后在一个适当的列表控件中显示这些文本串。在这个例子中，代码为DataSet中的表增加了一个新列，并为这一列设置了一个表达式，将语言名和访问人数合并为一个文本串。然后将List控件绑定到这个表，指定它显示这个新列（名为DisplayText）的内容。

图14-17显示了这个示例的结果。将IE浏览器窗口缩小，就能很好地认识到这个页面在一个Pocket PC设备上会是什么样子，而且可以看到这个内容与Web Forms应用的正常网页内容看上去是一样的。

图14-17  在一个HTML设备（如Pocket PC）中看到的应用

不过，如果在一个移动电话模拟器中查看这个页面，其结果则大相径庭（参见图14-18）。此时会出现双色图像，所有导航都通过链接完成。TextBox控件的行为完全不同（取决于设备类型），Calendar控件使用一个多步过程来收集日期（因为它无法将其显示为一个表）。最后，语言和访问人数列表显示为一系列文本串，这是由DataTable的新列中的表达式创建的。

如果客户是一个启用了WML的设备（如移动电话或模拟器），看看移动控件具体创建的代码会很有意思。取决于设备的类型以及它支持的特性，代码会有所不同，不过代码清单14-21显示了一个典型的例子。注意页面原来的源代码中有<html>和<body>元素（在Visual Studio中这是必要的），现在被自动删除了，而代之以<wml>和<card>元素。还可以看到ASP.NET只向设备发送当前的牌，尽可能地减少内存需求。

图14-18  在移动电话模拟器中查看同一个页面

<?xml version="1.0"?>

<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"

         "http://www.wapforum.org/DTD/wml_1.1.xml">

<wml>

  <head>

    <meta http-equiv="Cache-Control" content="max-age=0"/>

  </head>

  <card>

    <do type="prev" label="Back">

      <prev/>

    </do>

    <p>

       Dave and Al

      <br/>

      <img src="TheLogo.wbmp" alt="Picture cannot be displayed"/>

      <br/>

       Your name:

      <br/>

      <input name="mcsvdvmpp0"/>

      <anchor title="Next">

        Next

        <go href="mobile-controls.aspx?__ufps=129306" method="post">

        <postfield name="__EVENTTARGET" value="cmdName"/>

        <postfield name="txtName" value="$(mcsvdvmpp0)"/>

      </go>

      </anchor>

    </p>

  </card>

</wml>

14.4.3  移动浏览器模拟器

Visual Studio包括一些设备模拟器，可以用这些模拟器查看页面。不过，所提供的选择很有限，只是一些Pocket PC设备（设计用于Compact Framework），以及为数不多的一些SmartPhone模拟器。所有这些都能接收HTML，所以使用WML设备时你可能看不到输出。如果无法用一个移动设备测试你的页面，可以使用以下的一些模拟器来仿真移动电话，包括：

q OpenWave推出的Mobile Phone Simulator，可由http://developer.openwave.com/得到。

q Symbian推出的 R380 WAP Emulator，可由http://www.symbian.com/developer/得到。

q Nokia推出的 Nokia Mobile Browser，可由http://forum.nokia.com/得到。

q Yospace推出的 SmartPhone Emulator，可由http://www.yospace.com/得到。

使用以上某个模拟器，就能很容易地测试页面在一个支持WML的设备上如何工作。当然，移动设备也包括基于Windows Pocket PC的PDA和电话。尽管这些设备声称是IE的一个版本，但还是存在屏幕小的问题，所以需要相应地调整并测试你的页面。有关Microsoft移动支持的更多信息见http://www.microsoft.com/windowsmobile/。