65.9K
CodeProject 正在变化。 阅读更多。
Home

Windows Mobile 应用开发第七部分：移动 Web 开发

mstruys
starIconstarIconstarIconstarIconstarIcon

5.00/5 (12投票s)

2009 年 10 月 30 日

Ms-PL

11分钟阅读

viewsIcon

65421

学习如何使用浏览器控件为移动设备创建支持 AJAX 的基于 Web 的应用程序。

引言

当您即将开始开发针对 Windows Mobile 设备的新应用程序时，首先要回答一个基本问题：该应用程序是否必须在设备上本地运行？这个问题的答案决定了纯粹基于 Web 的应用程序是否适合您。如果设备没有可靠的网络连接，开发基于 Web 的应用程序意义不大。为了使应用程序运行，设备必须连接。另一方面，如果存在可靠的网络连接，创建基于 Web 的应用程序确实有意义。基于 Web 的应用程序的优势在于它们不仅限于在 Windows Mobile 设备上运行，还可以针对更广泛的移动设备。话虽如此，最新的 Windows Mobile 设备对基于 Web 的应用程序提供了极大的支持，这得益于它们配备了基于最新 Internet Explorer 功能的全新浏览器 IEMobile。借助最新的 Windows Mobile 设备，最终用户的浏览体验将与使用桌面浏览器相同。唯一的区别是屏幕尺寸更小。最新的 Windows Mobile 设备可以利用 ASP.NET 3.5 网站并支持 AJAX，以允许有限的往返，减少服务器和设备之间的数据传输。这是一个好消息，特别是当您的网络连接相对较慢时，例如 GPRS 连接。

本文提供了有关为 Windows Mobile 设备创建基于 Web 的应用程序、以启用 AJAX 支持的方式设置 Web 应用程序的信息，以及如何在智能设备应用程序中利用浏览器控件以获得两全其美效果的信息。

基于 Web 的应用程序和 Windows Mobile 支持

即使是早期的 Windows Mobile 设备也配备了网络浏览器。然而，直到 Windows Mobile 6 设备上市之前，这个浏览器功能有限，并且基于较旧的 Internet Explorer 版本。Windows Mobile 设备上最新版本的浏览器 Internet Explorer Mobile 6 是一款功能齐全的浏览器，可为用户带来与桌面浏览器相同的高质量浏览体验。Internet Explorer Mobile 6 支持桌面质量的渲染，并且在所有版本的 Windows Mobile 设备上的 Internet Explorer 中，其合规性支持是迄今为止最好的。多项新功能和改进的支持使用户能够快速轻松地完成任务。

  • Internet Explorer Mobile 6 对 Internet Explorer 8 的 JScript 5.7 版本的支持也使开发人员能够在 Windows Mobile 设备上提供与桌面一致的 AJAX Web 体验。
  • Internet Explorer Mobile 6 可以显示移动定制和非定制的网站。
  • Internet Explorer Mobile 6 可以根据用户设置将自己标识为桌面浏览器或移动浏览器。
  • 用户可以使用触摸进行平移，并且有多个缩放级别可用。

查看网站的不同选项

当用户访问网站或运行基于 Web 的应用程序时，客户端上的浏览器通过 UserAgent 字符串进行标识。根据此 UserAgent 字符串的内容，基于 Web 的应用程序可能会向客户端提供更多或更少的功能（例如 AJAX 支持）。最新一代的 Windows Mobile 设备具有一个版本的 Internet Explorer Mobile，它可以将自己标识为桌面浏览器或移动浏览器。用户可以轻松地在设备上的 Internet Explorer 菜单中选择这两个选项。

MOB4DEVS07/mob07fig1.jpg

图 1 - 在桌面模式和移动模式下使用的 Internet Explorer Mobile 6

在图 1 中，您可以看到用户如何在桌面模式和移动模式之间选择使用浏览器。在图 1 的中心，您可以看到 Internet Explorer Mobile 在移动模式下运行，使 Windows Mobile 设备的观看体验达到最佳。但是，为了获得最佳观看体验，网站必须针对移动设备上的观看进行优化。在图 1 的右侧，您可以看到相同的网站，这次以桌面模式显示。尽管屏幕较小，但最终用户获得的体验与从桌面浏览器访问相同网站的体验相同。在带有触摸屏的设备上，用户可以通过在屏幕上平移来非常快速地浏览网页。

检测浏览器功能

要确定客户端具有哪些浏览器功能，您可以检查 UserAgent 字符串。最新的 Windows Mobile 设备返回以下 UserAgent 字符串，与设备类型（专业版或标准版）无关：

  • Mozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile 8.12; MSIEMobile 6.0)。当浏览器在移动模式下运行时，返回此 UserAgent 字符串。
  • Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)。当浏览器在桌面模式下运行时，返回此 UserAgent 字符串。

如果浏览器在桌面模式下运行，它会自动启用 AJAX 功能。但是，如果浏览器在移动模式下运行，客户端必须告知服务器它可以运行 **ie5** 兼容功能。任何具有 IEMobile 6.12 或更高版本的 Windows Mobile 设备上的浏览器都具有这些功能。因此，为了告知服务器浏览器具有哪些功能，您可以使用以下代码片段来检查 UserAgent 字符串。

public static bool IsIEMobileWithAjaxSupport(string input)
{
   const string mobileBrowser = "IEMobile ";
   bool ajaxSupported = false;
   if (input.Contains(mobileBrowser))
   {
      string version = input.Substring(input.IndexOf(mobileBrowser) + 
         mobileBrowser.Length);
      version = version.Remove(version.IndexOf(';'));
      string[] versionNr = version.Split(new char[] { '.' });
      int IEMobileMajor = Convert.ToInt32(versionNr[0]);
      int IEMobileMinor = Convert.ToInt32(versionNr[1]);
      ajaxSupported = IEMobileMajor > 6 || (IEMobileMajor == 6 && IEMobileMinor >= 12);
   }
   return ajaxSupported;
}
列表 1 - 确定 Internet Explorer Mobile 浏览器功能

如果 Internet Explorer Mobile 浏览器的版本号为 6.12 或更高，则可以使用以下代码片段（作为 Web 应用程序中 `FrameworkInitialize` 方法的一部分）通知服务器客户端浏览器功能。请注意，这仅在初始时完成。每次收到回发消息（例如，部分刷新页面）时，都没有必要设置 `ClientTarget`，因为服务器已经知道其功能。

protected override void FrameworkInitialize()
{
    base.FrameworkInitialize();
    if (!IsPostBack)
    {
        if (IsIEMobileWithAjaxSupport(Request.UserAgent))
        {
            ClientTarget = "ie5";
        }
    }
}
列表 2 - 通知服务器客户端功能

区分 Windows Mobile Professional 和 Windows Mobile Standard

由于 Windows Mobile Standard 和 Windows Mobile Professional 设备都将返回相同的 UserAgent 字符串，因此您需要另一种机制来了解正在请求页面的设备类型。作为浏览器请求的一部分，还会将附加的标头信息传递给服务器。其中一个标头包含设备的屏幕尺寸（以像素为单位）。这才是真正重要的区别。与智能客户端应用程序不同，基于浏览器的应用程序支持相似的用户界面控件，适用于 Windows Mobile Standard 和 Windows Mobile Professional 设备，因为它们运行相同的浏览器。因此，在 Windows Mobile Standard 设备上运行的基于 Web 的应用程序可以包含按钮。您可以简单地使用导航键将焦点放在按钮上，并使用操作按钮单击它。标头字段（“UA-Pixels”）返回真实的像素数量，这意味着它将返回高分辨率和正常分辨率设备的正确值。

为了设置浏览器页面以获得最佳观看体验，您可以使用 `MobileOptimized` 元标签，指示网站是为哪种屏幕尺寸开发的。Web 应用程序中的以下代码根据设备的屏幕宽度设置 `MobileOptimized` 标签：

protected void Page_Load(object sender, EventArgs e)
{
   if (!IsPostBack)
   {
       if (IsIEMobileWithAjaxSupport(Request.UserAgent))
       {
           if (this.Header != null)
           {
               HtmlMeta mobileOptimized = new HtmlMeta();
               mobileOptimized.Name = "MobileOptimized";
               mobileOptimized.Content = 
                  Request.Headers["UA-pixels"].Split(new char[] { 'X', 'x' })[0];
               Header.Controls.Add(mobileOptimized);
           }
       }
   }
}
列表 3 - 设置页面的“正确”宽度以提升最终用户的浏览体验

通过使用 `Request.Header` 信息，您可以区分不同的设备并优化所有类型设备用户的观看体验。在图 2 中，您将看到相同的网页，为 Windows Mobile 6 Standard 设备和 Windows Mobile 6 Professional 设备进行了最佳渲染。

MOB4DEVS07/mob07fig2.jpg

图 2 - 在不同设备上以不同字体大小渲染

以下代码片段展示了如何根据设备，特别是应用程序运行设备的屏幕宽度来修改 Web 控件的字体大小。得益于 ASP.NET 3.5 丰富的功能，以及您可以轻松修改代码隐藏文件中的控件属性，您几乎不需要处理标记语言。

protected void Page_Load(object sender, EventArgs e)
{
    string currentTime = DateTime.Now.ToLongTimeString();
    if (!IsPostBack)
    {
        if (IsIEMobileWithAjaxSupport(Request.UserAgent))
        {
            if (this.Header != null)
            {
                HtmlMeta mobileOptimized = new HtmlMeta();
                mobileOptimized.Name = "MobileOptimized";
                mobileOptimized.Content = Request.Headers["UA-pixels"].Split(
                    new char[] { 'X', 'x' })[0];
                Header.Controls.Add(mobileOptimized);
                pageWidth = Convert.ToInt32(mobileOptimized.Content);
            }
        }
    }
    if (pageWidth < 240)
    {
        Label1.Font.Size = System.Web.UI.WebControls.FontUnit.Small;
        Label2.Font.Size = System.Web.UI.WebControls.FontUnit.Small;
        Label3.Font.Size = System.Web.UI.WebControls.FontUnit.Small;
        Label4.Font.Size = System.Web.UI.WebControls.FontUnit.Small;
        Label5.Font.Size = System.Web.UI.WebControls.FontUnit.Small;
        DropDownList1.Font.Size = System.Web.UI.WebControls.FontUnit.Small;
        Button1.Font.Size = System.Web.UI.WebControls.FontUnit.Small;
        Menu1.Font.Size = System.Web.UI.WebControls.FontUnit.Small;
    }
}
列表 4 - 根据客户端设备调整控件字体大小

得益于新的 Internet Explorer Mobile 支持与桌面版 Internet Explorer 中可用的最新技术，因此可以在基于 Web 的应用程序中使用大多数 ASP.NET 3.5 功能。

结合智能客户端和 Web 功能

如果您正在开发智能客户端应用程序，则可以使用浏览器控件。最新一代 Windows Mobile 设备中的浏览器控件利用了可用的网络浏览器。这意味着您可以在智能客户端应用程序中利用 ASP.NET 3.5 功能，包括 AJAX 支持。将 Web 功能与智能客户端功能相结合，使您的用户即使没有网络连接也能继续工作。如果网络连接可用，用户可以使用浏览器控件，例如，访问服务器数据库上的数据。采用这种方法，例如，可以相对容易地解决多个用户更新数据库中相同数据之间的冲突，因为这可以完全由服务器处理。这种方法的另一个巨大用途是通过浏览器控件运行进程密集型任务，例如，检索 Virtual Earth 映射信息。您不必使用 Web 服务，而可以在浏览器控件中完成所有服务器驱动的渲染。

您可以添加到智能设备应用程序的浏览器控件会向服务器返回与 Internet Explorer Mobile 独立版本相同的 UserAgent 字符串。但是，无法将浏览器控件设置为移动模式。由于您的 Windows Mobile 设备屏幕尺寸有限，您可能希望创建特定页面，以便与智能客户端应用程序中的浏览器控件结合使用。在以下代码示例中，您将看到一个完整的应用程序，它检测网络连接。如果设备已连接，则可以浏览到网页，信息会显示在 Web 浏览器控件中。如果设备已断开连接，用户仍然可以输入新的 URL，但无法浏览它们。当然，这只是一个非常简单的示例，真实的应用程序应该为用户提供更多功能。

public partial class Form1 : Form
{
   private SystemState nrNetWorkConnections;
   private SystemState deviceCradled;
   public Form1()
   {
       InitializeComponent();
       nrNetWorkConnections = new SystemState(SystemProperty.ConnectionsCount);
       nrNetWorkConnections.Changed += 
          new ChangeEventHandler(nrNetWorkConnections_Changed);
       deviceCradled = new SystemState(SystemProperty.CradlePresent);
       deviceCradled.Changed += new ChangeEventHandler(deviceCradled_Changed);
   }
   private void Form1_Load(object sender, EventArgs e)
   {
       bool isCradled = (int)deviceCradled.CurrentValue != 0;
       int nrNetworks = (int)nrNetWorkConnections.CurrentValue;
       tbURL.Select(tbURL.Text.Length, 0);
       btnGo.Enabled = isCradled || nrNetworks > 0;
   }
   void deviceCradled_Changed(object sender, ChangeEventArgs args)
   {
       bool isCradled = (int)args.NewValue != 0;
       int nrNetworks = (int)nrNetWorkConnections.CurrentValue;
       btnGo.Enabled = isCradled || nrNetworks > 0;
   }
   void nrNetWorkConnections_Changed(object sender, ChangeEventArgs args)
   {
       bool isCradled = (int)deviceCradled.CurrentValue != 0;
       int nrNetworks = (int)args.NewValue;
       btnGo.Enabled = isCradled || nrNetworks > 0;
   }
   private void btnGo_Click(object sender, EventArgs e)
   {
       webBrowser1.Navigate(new Uri(tbURL.Text));
   }
}
列表 5 - 一个完整的 Windows Mobile 应用程序，可检测网络连接

将智能客户端功能与网络功能相结合，将两者的优点融合在一起。您可以将用户效率与服务器上的处理能力结合起来。此外，如果数据集中存储，则可以轻松下载该数据的本地副本，甚至可以通过 Web 服务。然后，您可以将设备上的数据用作本地缓存，并在用户完成工作后再次将其上传到服务器。这简化了冲突解决，并且设备上可用数据的数量可以限制为用户所需的数据。这不仅节省了设备上昂贵的资源，而且还保证设备上任何时候都可用的公司敏感数据更少。

MOB4DEVS07/mob07fig3.jpg

图 3 - 浏览器中的 Web 应用程序和作为智能客户端应用程序一部分的 Web 应用程序

本系列相关文章

其他资源和参考

请访问 www.myrampup.com 获取更多信息。

© . All rights reserved.