~~鱼跃~~

I Want to fly!

导航

用ASP.NET创建移动Web窗体[转]

Posted on 2009-06-26 18:21  flyfish  阅读(757)  评论(0)  编辑  收藏  举报

1. 概述

在 Microsoft .NET 中我们不仅可以用 ASP.NET 来创建一个基于 .NET 支持语言的台式机支持的动态页面 , 还可以用利用其中的 Microsoft .NET Mobile Internet Toolkit(MIT) 创建服务器端的 Web 应用程序 .MIT 是一种功能强大的工具 . 在运行时 ,MIT 能将开发者使用的语言 ( 如 C#,VB.NET) 转换成 WML, 并综合运用 ASP.NET,XML 和 C# 来创建无线应用程序 . 本文中使用的

软件环境 :Windows XP Proffesional with SP2;

Microsoft .NET 2003 中文版 ;

Openwave SDK 6.2.2;

硬件环境 :Mobile Pentium 4 2.2Ghz;

512MB Memory;

40GB HD;

2. 运行需求

在编写移动 Web 窗体应用程序之前 , 首先需要以下的软件环境 :

.Windows 2000,Windows XP,Windows Server 2003,Windows NT4.0 or higher;

.IIS: 需要正确配置你的 IIS这样才能在你的本地上运行编译好的 .aspx文件 ;

.Microsoft .NET Framework: 如果你安装了 Visual Studio .NET 2002 or higher(2003),那么你已经安装了 .NET Framework以 MIT.否则请到微软网站下载 :(msdn.microsoft.com/downloads);

.Microsoft Mobile Internet Toolkit 1.0: 下载地址 : http://msdn.microsoft.com/mobility/prodtechinfo/devtools/asp.netmc/default.aspx

.Openwave Mobile 浏览器 ,在 Openwave主页可以下载其 SDK;

3.Mobile Web Form 简介

以 Microsoft .NET Framework 为基础 ,我们创建的无线 Web内容可在同一个页中包含多个窗体 ,而且可在多种移动设备上获得支持 .利用这种技术 ,可根据所用的设备来显示不同的内容 .Mobile Internet Toolkit能检测到访问一个网页的设备类型 (我们称这种设备为 ”传入设备 ”),然后根据这个传入设备来生成正确的代码 ,不管他是 WML,HTML,还是 cHTML.

用 ASP.NET编写无线 Web内容要比编写冗长和复杂的 WML简单 ,因为网站的标记 (包含 WML,HTML或者 cHTML)是跟据用另一种语言编写的 ,容易理解的代码生成的 .这些标记在服务器端生成 ,我们认为网站是 ”动态的 ”.动态网站生成的实际内容会基于代码而改变 ,而不是有人亲自修改标记内容 .

创建移动 Web应用程序时 ,会创建带有 .aspx文件扩展名的一个 Web窗体 ,其中有用于显示网页的 .aspx文件代码 .其他需要在幕后执行的代码放在了一个 ”代码隐藏 (codebehind)”文件中 .代码隐藏文件定义了程序要是用的类和函数 ,准许程序员将 Web内容的呈现和功能 (程序逻辑 )分开 .如果你只是用到少量的代码 ,那么通常选择嵌入脚本的方法 .在本文中将采用代码隐藏文件来运行逻辑内容 .

4.Mobile Web Form 控件介绍

在 VS.NET 2003中的界面中创建一个 ASP.NET Web移动应用程序 :

点选确定后会出现以下的见面 .NET自动生成了一个移动 Web图形设计界面 :

移动 Web应用程序比普通的 Web应用程序要小许多 .那是因为浏览网页的设备的屏幕普遍都比较小 .因此为了适应接受设备的视觉效果 .我们在设计一个移动网站的时候要首先考虑到用户移动设备的显示分辨率问题 ,已达到最好的浏览效果 .

我们从左边的移动 Web窗体中拖放一个 Label控件和一个 Command控件和一个 Label控件放到右边的移动 Form中 .并且将 Label1的 Text属性改为 ”welcome to the Wap world”,将 Command1的 Text属性改为 ” Go to Form 2”. 将 Label1的 NavigateUrl属性改为 :http://wap.sina.com,并且将其 Text属性改为 :”Link to sina”.然后双击 Command1.进入到名为 MobileWebForm1.aspx.cs 的代码隐藏文件中 . 在其中加入黑体字 .

private void Command1_Click(object sender, System.EventArgs e)

{

ActiveForm = Form2;

}

再从左边拖进一个 Form控件 .并且在其中添加一个 Label控件 .双击 Form2窗体 .进入后台代码 .在其中添加黑体字 :

private void Form2_Activate(object sender, System.EventArgs e)

{

Label2.Text="Hello World!";

}

最后我们要注意将 Form1的 Method属性改为 :get,否则在 wap浏览器观看时会返回 HTTP 405 error (method not allowed) 这样的错误 .

完成以上操作之后我们来运行一下这个编好的网页 .按 F5键 .在 IE中得到了如下的输出结果 :

这个是 .aspx文件在 ie中的显示效果 . 在点选了按钮之后会跳到另一个界面 :

在此让我们来看看在移动设备中他的实际显示效果是什么吧 .打开 Openwave SDK.在其中的地址栏中输入你的 Mobile Web 应用程序的地址 .

然后点击左上角的确认键 .(一般为手机左上角的那个按键 ).

会跳到 Form2的界面中 .

如果之前选择的是第二个选项的话 .模拟器会链接到新浪的首页上 :

 

5. 代码分析

上面我给大家介绍了一个简单的移动 Web应用程序是如何创建的 .在这里我要给大家讲一下 ASP.NET是如何根据不同设备返回不同代码的 .

在之前我们通过 IE 和 Openwave 的 wap浏览器观看了在相同的 .aspx代码下服务器端根据客户端的设备给客户端返回了不同的界面 .那你可能会问这是怎么做到的呢 ?

让我们来看看服务器端返回的两种代码吧 :

这个是给 IE返回的 HTML代码 :

<html>

<body>

<form id="Form1" name="Form1" action="MobileWebForm1.aspx?__ufps=479067" method="get">

<input type="hidden" name="__EVENTTARGET">

<input type="hidden" name="__EVENTARGUMENT">

<script language="javascript"> <!--

function __doPostBack(target, argument){

var theform = document.Form1

theform.__EVENTTARGET.value = target

theform.__EVENTARGUMENT.value = argument

theform.submit()

}

// --></script>

welcome to the Wap world<br>

<input name="Command1" type="submit" value="Go to Form2">

<br>

<a href="http://wap.sina.com">Link to sina</a>

</form>

</body>

</html>

大家可能会说这些都是什么啊 ?我们不用详细了解代码的具体意思 .我们只需要来看看他的形式 .很明显这个是标准的 HTML代码 .其中加入了 JavaScript脚本语言 .

接下来再来看看服务器端返回给 Wap浏览器的代码 :

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

<p:card>

<p>welcome to the Wap world<p:do type="accept" label="">

<p:go href="/MobileWebApplication2/(drn3lszsvbo5oh45mvflvw55)/MobileWebForm1.aspx">

<p:postfield name="__EVENTTARGET" value="Command1" />

<p:postfield name="__EVENTARGUMENT" value="$$(Command1:noesc)"></p:postfield>

</p:go>

</p:do>

<select name="Command1">

<option value="" selected>Go to Form2</option>

<option>Link to sina</option>

</select>

</p>

</p:card>

完全不一样的代码 .这个是基于 WML语言的代码 .在此我们已经初步了解了 ASP.NET在移动 Web应用程序中的应用了 .

6.Openwave 使用经验

在初次使用 Openwave的时候他的默认语言并不是中文 .因此如果你想要访问中文网站的话需要设置一下 Openwave的设置属性 :

选择 Tool->Option进入如下界面 :

选择 Language..选项

在其中选择 Chinese Simplified(zh-cn)并且在 Font和 Fixed width font 选项中选择一个中文字体 .这样就可以浏览中文网站了 .

如果你想看看服务器返回的 WML文档的话可以点选 View->Source或者按下 F5键 .就会弹出一个文本显示框 .在理面有 WML的代码 .

7. 总结

在现今的社会中越来越多的人依赖于移动设备 .我们可以用微软为我们准备好的基于 ASP.NET的大量控件创建美观快捷的移动网站 .并且我们在编写代码时并不需要太多的考虑接受设备的状态 .因为这些 ASP.NET都为我们考虑好了 .我们只需要编写标准的 ASP.NET代码并且加入正确的逻辑代码就可以了 .

如果你对 WML感兴趣的话还可以直接用 WML创建一些静态的网页 .可以参考 www.frontfree.net 上的 << 初识 WAP>> 一文进行 WML 的网站建设 .

8 ．参考文献

清华大学出版社 << 无线因特网和移动商务编程经典 >>