mbl300 如何使用 asp.net mobile controls 开发 mobile web 应用

MBL300MBL300如何使用如何使用 ASP.NET Mobile ASP.NET Mobile ControlsControls 开发开发 Mobile Mobile WebWeb 应用应用马骐马骐 ( ( [email protected]@hotmai.com ) )微软最有价值专家，微软认证讲师微软最有价值专家，微软认证讲师中国移动聊天微软中国移动聊天微软 m161 WAPm161 WAP 项目组项目组

mailto:[email protected]

MManagementanagementTToolsools

CCommunicationsommunications& & MMessagingessaging

Device Update AgentSoftware Update Services

Live Communications ServerExchange Server

Internet Security and Acceleration Server

Speech Server

Image Update

LLocation ocation SServiceservices

MMultimediaultimedia

MapPoint

DirectXWindows Media

Visual Studio 2005DDevelopment evelopment TToolsools

MFC 8.0, ATL 8.0Win32NNativeative

MManagedanagedSServer erver SSideide

LLightweightightweightRRelationalelational

SQL Server 2005 Express EditionEDB

DDat

aat

aPP r

ogra

mm

ing

rogr

amm

ing

MMod

elod

el

DDevice evice BBuilding uilding TToolsools

HHardware/ardware/DDriversrivers

Windows XP DDKWindows Embedded

StudioPlatform Builder

OEM/IHV Supplied BSP(ARM, SH4, MIPS)

OEM Hardware and Standard Drivers

Standard PC Hardware and Drivers

SQL Server 2005SQL Server 2005 Mobile Edition

ASP.NET Mobile Controls ASP.NET.NET Compact Framework .NET Framework

Microsoft Operations ManagerSystems Management Server

Session PrerequisitesSession Prerequisites

不需要任何技术背景，但不需要任何技术背景，但……假如理解假如理解 ASP.NETASP.NET 会很有帮助会很有帮助

日程安排日程安排空前的无线增值行业发展速度空前的无线增值行业发展速度Windows Mobile WebWindows Mobile Web 当前开发技术当前开发技术存在的挑战及解决办法存在的挑战及解决办法手持设备适配信息和设备适配库手持设备适配信息和设备适配库使用使用 Device FiltersDevice Filters 定制定制使用模板定制使用模板定制 FormsForms 和和 PanelsPanels在在 XHTMLXHTML 浏览器中使用浏览器中使用 CSS CSS Stylesheets Stylesheets

空前的无线增值行业发展速度空前的无线增值行业发展速度无线增值行业的发展速度几乎可以用空前来形容无线增值行业的发展速度几乎可以用空前来形容

中国联通、中国电信、中国网通也开始启动类似于中国联通、中国电信、中国网通也开始启动类似于MISCMISC 平台的管理办法平台的管理办法

中移动分成新政出水中移动分成新政出水 SPSP 淘汰战一触即发淘汰战一触即发20052005 年年 88 月伊始，中国移动一项新的月伊始，中国移动一项新的 SPSP 分成政策分成政策打破中国移动与打破中国移动与 SPSP 之间一成不变的之间一成不变的 1515 ：： 8585 分成模分成模式式最高可达到最高可达到 5050 ：： 5050

中移动的目标中移动的目标构建一个大量构建一个大量 CPCP ＋少数大＋少数大 SPSP ＋移动运营商”的移＋移动运营商”的移动增值服务产业链动增值服务产业链

中小公司的转变中小公司的转变服务提供商服务提供商 ->-> 内容提供商内容提供商 ->-> 技术提供商的转变技术提供商的转变

Windows Mobile WebWindows Mobile Web 当前开发技术当前开发技术

DisplayDisplayUSB or SerialUSB or Serial

ProcessorProcessorMemoryMemory

GSM/GPRSGSM/GPRSCDMA/1xRTTCDMA/1xRTT

Device Device HardwareHardware

WiFiWiFiBluetoothBluetooth

RadioRadioDriversDrivers

Windows MobileWindows Mobile CE DBCE DBActiveSyncActiveSync

Pocket OutlookPocket OutlookPocket Internet ExplorerPocket Internet ExplorerWindows Media PlayerWindows Media Player

Windows CEWindows CE

Software Platform (APIs)Software Platform (APIs)

Home ScreenHome ScreenUser Interface/ShellUser Interface/ShellHTML ControlHTML Control

GAPIGAPIRemote APIRemote APIConfigurationConfigurationBluetoothBluetoothSecuritySecurity

Connection ManagerConnection Manager TAPITAPISMS SMS MAPI MAPI POOM POOM ActiveSyncActiveSync

MultimediaMultimediaCommunicatioCommunicationn

Device ManagementDevice Management PresentationPresentationADO CEADO CEXMLXMLCE DBCE DBOLE DBOLE DB

Data AccessData Access

NativeNative

Win32Win32

MFCMFC ATLATLManagedManaged

.NET Compact.NET CompactFrameworkFramework

Server sideServer sideASP .NETASP .NET

Mobile ControlsMobile Controls

NativeNative

Win32Win32

MFCMFC ATLATLManagedManaged

.NET Compact.NET CompactFrameworkFramework

Server sideServer sideASP .NETASP .NET

Mobile ControlsMobile Controls

Embedded VC++Embedded VC++ Visual Studio .NETVisual Studio .NET

ASP.NETASP.NET 移动移动 WebWeb 应用技术的时间应用技术的时间线线

.NET Framework 1.0.NET Framework 1.0

ASP.NET 1.0ASP.NET 1.0

Visual Studio .NETVisual Studio .NET

03/200203/200204/200204/2002

Mobile Internet Mobile Internet Toolkit 1.0Toolkit 1.0



ASP.NET 1.1 Mobile ASP.NET 1.1 Mobile ControlsControls

Visual Studio .NET 2003Visual Studio .NET 2003

07/200307/2003



ASP.NET 1.1 Mobile ASP.NET 1.1 Mobile ControlsControls

Visual Studio 2005 Beta 2Visual Studio 2005 Beta 2

04/200504/2005

ASP.NET 1.1 ASP.NET 1.1 移动控件移动控件在在 VS2003VS2003 中已经包括了移动控件中已经包括了移动控件 Mobile Mobile ControlsControls

Mobile ControlMobile Control 是是 Mobile Internet Toolkit Mobile Internet Toolkit 1.0 controls1.0 controls 的更新的更新使用使用 ASP.NET Mobile WebASP.NET Mobile Web 应用项目类型应用项目类型发布了四次设备更新发布了四次设备更新支持更多的新设备支持更多的新设备DU2DU2 增加了增加了 XHTMLXHTML 设备适配器设备适配器DU4DU4 是最后一次发布是最后一次发布成熟的技术，只有出现象新的标记语言时才会出现新的成熟的技术，只有出现象新的标记语言时才会出现新的发布发布设备适配信息收集工具设备适配信息收集工具http://www.asp.net/mobile/profile/default.http://www.asp.net/mobile/profile/default.aspxaspx允许开发人员为特定设备允许开发人员为特定设备 <browserCaps><browserCaps> 中的定义中的定义

http://www.asp.net/mobile/profile/default.aspx


使用使用 ASP.NET 2.0ASP.NET 2.0 开发移动开发移动 WebWeb 应应用用使用使用 Asp.net.20Asp.net.20 服务器控件创建的新型服务器控件创建的新型控件适配器框架控件适配器框架

和和 ASP.NET 1.1 Mobile ControlsASP.NET 1.1 Mobile Controls 框架类框架类似似允许允许 ASP.NET 2.0ASP.NET 2.0 服务器控件为各种浏览器服务器控件为各种浏览器(( 不限于移动设备的浏览器不限于移动设备的浏览器 )) 创建丰富的表现形创建丰富的表现形式式Visual Studio 2005 Beta 1Visual Studio 2005 Beta 1 包括了包括了ASP.NET 2.0ASP.NET 2.0 服务器控件移动设备适配器的服务器控件移动设备适配器的例子例子Beta 2 Beta 2 以后的没有包括任何移动设备适配器以后的没有包括任何移动设备适配器

ASP.NET 2.0 ASP.NET 2.0 中包括中包括 ASP.NET 1.x ASP.NET 1.x 移动控件移动控件包括从包括从 1.x1.x 到到 DU4DU4 的设备适配器和浏览器定义的设备适配器和浏览器定义ASP.NET 2.0ASP.NET 2.0 主要针对于主要针对于 xHtmlxHtml 的手持的手持设备设备

存在的挑战及解决办法存在的挑战及解决办法终端的限制终端的限制

不同的设备有不同的性能不同的设备有不同的性能多种标记语言多种标记语言 (WML, XHTML, cHTML, (WML, XHTML, cHTML, HTML)HTML)各式各样的浏览器各式各样的浏览器WAPWAP 标准各种实现标准各种实现客户端处理验证的能力不同客户端处理验证的能力不同是否支持是否支持 CookieCookie 的实现的实现集成不同状态管理方法集成不同状态管理方法不同设备分页的需求不同设备分页的需求开发调试应用程序的环境开发调试应用程序的环境

存在的挑战及解决办法存在的挑战及解决办法新技术配合对终端的限制有所突破新技术配合对终端的限制有所突破

ASP.net 1.1 Mobile ControlASP.net 1.1 Mobile ControlAsp.net 2.0Asp.net 2.0 新框架新框架存在的普遍问题存在的普遍问题对新设备的支持对新设备的支持使用设备适配信息收集工具使用设备适配信息收集工具修改修改 WML, cHtml, XHTML, HTMLWML, cHtml, XHTML, HTML 适配器源代码适配器源代码ButtonButton 的问题的问题修改修改 WML, cHtml, XHTML, HTMLWML, cHtml, XHTML, HTML 适配器源代码适配器源代码使用使用 LinkLink 代替代替 ButtonButton使用使用 Form ActiveForm Active 事件代替事件代替 Button ClickButton Click 事件事件SessionSession 和和 ViewStateViewState 的顾虑的顾虑对排版的局限性对排版的局限性

ASP.NET 1.1 Mobile ControlASP.NET 1.1 Mobile Control 使用使用 BreakAfterBreakAfter 控制控制排版排版ASP.NET 2.0 ASP.NET 2.0 没有此限制没有此限制

手持设备适配信息手持设备适配信息设备适配信息收集工具设备适配信息收集工具

http://http://www.asp.net/mobile/profile/default.aspxwww.asp.net/mobile/profile/default.aspx允许开发人员为特定设备允许开发人员为特定设备 <browserCaps><browserCaps> 中的定中的定义义使用程序自动分析请求头生成适配信息库使用程序自动分析请求头生成适配信息库User-Agent=Dopod565 Mozilla/4.0 User-Agent=Dopod565 Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; (compatible; MSIE 4.01; Windows CE; Smartphone; 176x220)Smartphone; 176x220)使用手机厂商提供的使用手机厂商提供的http://nds.nokia.com/uaprof/N6100r100.xhttp://nds.nokia.com/uaprof/N6100r100.xmlmlhttp://communication-market.siemens.de/http://communication-market.siemens.de/UAProf/SL56_10.xmlUAProf/SL56_10.xmlhttp://wap.samsungmobile.com/uaprof/e3http://wap.samsungmobile.com/uaprof/e317.xml17.xml移动聊天移动聊天 M161 WapM161 Wap 版有版有 33 千多种手设备的适千多种手设备的适配信息库配信息库



http://nds.nokia.com/uaprof/N6100r100.xml

http://nds.nokia.com/uaprof/N6100r100.xml

http://communication-market.siemens.de/UAProf/SL56_10.xml

http://communication-market.siemens.de/UAProf/SL56_10.xml

http://wap.samsungmobile.com/uaprof/e317.xml

http://wap.samsungmobile.com/uaprof/e317.xml

设备适配器源代码设备适配器源代码根据请求设备的性能不同，同一控件输出不同内根据请求设备的性能不同，同一控件输出不同内容容目前分成四组设备适配器集，每组分别对应一种目前分成四组设备适配器集，每组分别对应一种标记语言标记语言

WMLWMLHTMLHTMLcHTMLcHTMLxHTMLxHTML每组都包括三大类不同的控件适配每组都包括三大类不同的控件适配页面适配页面适配表单适配表单适配控件适配控件适配

IISIIS Server ServerMobile.ASPXMobile.ASPX

PagePageInstantiates Instantiates ControlControl

Select Select

Device Device

AdapterAdapter

Get Device Get Device AdapterAdapter

根据适配信息输出合适内容根据适配信息输出合适内容WSPWSP

RequestRequest

HTTPRequest

2aGet Brower &Device Properties

PagePageInstantiatInstantiat

ed ed

3b4a

5a6a

HTTPResponse

Generate HTML Generate HTML with alternative with alternative texttext

2b3a

4b

1b

Generate WML with the WTAI Generate WML with the WTAI tagtag

7a

HTTPResponse

Get Device Get Device AdapterAdapter

8a

6b

7b 8b

5bWAP

Gateway

1a

0 9WSPWSP

Response Response Mobile

Capabilities

Application Application ControlControl

Device Device Adapter Adapter by Mark-by Mark-up up LanguagLanguagee

PhoneCallPhoneCallControlControl

cHTMcHTMLL

WMWMLL

HTMHTMLL

M161 WapM161 Wap 版版 33 千多种手千多种手持设备适配信息库持设备适配信息库M161 WapM161 Wap 版扩展设备适版扩展设备适配库配库

使用设备过滤器定制使用设备过滤器定制在表现形式中定制在表现形式中定制 ::

在代码中定制在代码中定制 ::

<mobile:Label id="Label2" Runat="server" Font-Bold="True"> <DeviceSpecific> <Choice Filter="isPocketIE" Text="...Breaking News - Breaking News..."> </Choice> <Choice Text="News Just In! "></Choice> </DeviceSpecific> </mobile:Label>

MobileCapabilities cap = (MobileCapabilities)Request.Browser;if (cap.HasCapability(“isPocketIE“, null)){ Label2.Text = "...Breaking News - Breaking News...“; }Else Label2.Text = "News Just In! ";

定义定义 Device FiltersDevice Filters根据根据 Device FiltersDevice Filters 来决定如何定制以及来决定如何定制以及如何使用模板如何使用模板Visual Studio .NETVisual Studio .NET 在在 Web.configWeb.config中创建一系列默认的设备过滤器中创建一系列默认的设备过滤器

<deviceFilters> <filter name="isHTML32" compare="PreferredRenderingType" argument="html32" /> <filter name="isWML11" compare="PreferredRenderingType" argument="wml11" /> <filter name="isPocketIE" compare="Browser" argument="Pocket IE" /> <filter name="prefersGIF" compare="PreferredImageMIME" argument="image/gif" /> <filter name="prefersWBMP" compare="PreferredImageMIME" argument="image/vnd.wap.wbmp" /> ... </deviceFilters>

可以用代码编写设备过滤器可以用代码编写设备过滤器

在在 Web.configWeb.config 中的设备过滤器只是简单中的设备过滤器只是简单比较比较CompareCompare属性指的是属性指的是 MobileCapabilitiesMobileCapabilities 对象的名称对象的名称假如指定属性与指定参数相等，设备过滤器为假如指定属性与指定参数相等，设备过滤器为真真

<deviceFilters>

<filter name="isHTML32" compare="PreferredRenderingType" argument="html32" /> </deviceFilters>可以通过代码编写复杂的设备过滤器可以通过代码编写复杂的设备过滤器

使用模板定制使用模板定制模板才是真正的定制模板才是真正的定制在在 <mobile:DeviceSpecific><mobile:DeviceSpecific> 使用模板使用模板

Control

Template Usage

FormForm

HeaderTemplateHeaderTemplate Renders contents at head of Renders contents at head of every output pageevery output page

FooterTemplateFooterTemplate Renders contents at foot of Renders contents at foot of every output pageevery output page

ScriptTemplateScriptTemplateCan be used to define Can be used to define Javascript functions on HTML Javascript functions on HTML browsers, or to inject WML into browsers, or to inject WML into markup sent to WML browsersmarkup sent to WML browsers

PanelPanel ContentTemplateContentTemplateCan contain markup or server Can contain markup or server controls Injects content into controls Injects content into output streamoutput stream

FormForm 定制定制 Header and FooterHeader and Footer 例子例子

<mobile:Form id="Form1" runat="server"> <mobile:DeviceSpecific id="DeviceSpecific1" runat="server"> <Choice Filter="isHTML32"> <HeaderTemplate> <mobile:Label id="Label1" runat="server" StyleReference="title" ForeColor="Firebrick"> Contoso Inc.</mobile:Label> </HeaderTemplate> <FooterTemplate> <mobile:Label id="Label2" runat="server" Font-Size="Small">(c) Contoso, 2004.</mobile:Label> </FooterTemplate> </Choice> </mobile:DeviceSpecific> … </mobile:Form>

在模板在插入标记语言在模板在插入标记语言通过设备过滤器确定是否为通过设备过滤器确定是否为 isHTML32isHTML32 还是还是 isWMLisWML

<mobile:Form id="Form1" runat="server"> <mobile:DeviceSpecific id="DeviceSpecific1" runat="server"> <Choice Filter="isHTML32"> <HeaderTemplate> <table width=“90%” cellspacing=“1”> <tr><td bgcolor=“#003366” valign=“top” height=“100%”> </HeaderTemplate> <FooterTemplate> </td></tr></table> </FooterTemplate> </Choice> </mobile:DeviceSpecific> …

日程安排日程安排空前的无线增值行业发展速度空前的无线增值行业发展速度Windows Mobile WebWindows Mobile Web 当前开发技术当前开发技术存在的挑战及解决办法存在的挑战及解决办法手持设备适配信息和设备适配库手持设备适配信息和设备适配库使用使用 Device FiltersDevice Filters 定制定制使用模板定制使用模板定制 FormsForms 和和 PanelsPanels在在 XHTMLXHTML 浏览器中使用浏览器中使用 CSS CSS StylesheetsStylesheets

XHTMLXHTML 浏览器和浏览器和 CSSCSS

Cascading Style Sheets (CSS):Cascading Style Sheets (CSS):最佳的表现定义方法最佳的表现定义方法把表现和内容分开把表现和内容分开W3CW3C 推荐推荐 (CSS1)(CSS1)支持主要的桌面浏览器支持主要的桌面浏览器

最新的移动设备也支持最新的移动设备也支持 CSSCSSSmartphone 2003Smartphone 2003 上的上的 Pocket IEPocket IE 支持支持 HTML HTML 4.01, XHTML-Basic4.01, XHTML-Basic 以及以及 CSS1CSS1WAP 2.0WAP 2.0 设备支持设备支持 XHTML-MPXHTML-MP 和无线和无线 CSS (Nokia CSS (Nokia Series 60, Sony-Ericsson Smartphones)Series 60, Sony-Ericsson Smartphones)

ASP.NET Mobile Controls RuntimeASP.NET Mobile Controls Runtime在在 DU2DU2 以后支持以后支持 XHTMLXHTML 浏览器浏览器使用标准移动样式属性动态产生使用标准移动样式属性动态产生

使用使用 CSS-1CSS-1 编程编程在项目中创建一个样式在项目中创建一个样式文件文件 .Subhead

{ font-weight: bold; font-size: smaller; color: orangered;}

<mobile:Form id="Form1" runat="server" csslocation="stylesheet1.css“ … >

<system.web> <mobileControls allowCustomAttributes="true“ /> </system.web>

在在 <mobile:Form> <mobile:Form> 增加增加 CSSLocationCSSLocation 属性属性指定样式文件位置指定样式文件位置在在 Web.configWeb.config 中设置中设置allowCustomAttributes=“true”allowCustomAttributes=“true”

CSSCSS 表现的例子表现的例子BODY{

background-image: url(Images/background.png);

background-color: #99ccff;}

.dropcap{

font-weight: bold;font-size: 200%;float: left;width: 12pt;color: orange;

}

在智能手中中使用在智能手中中使用 CSSCSS

智能手机中的智能手机中的 Pocket IEPocket IE 是一个支是一个支持多种标记语方的浏览器持多种标记语方的浏览器HTML 4.01HTML 4.01XHTML-BasicXHTML-BasicCSS1CSS1

ASP.NET Mobile ControlsASP.NET Mobile Controls 默默认对认对 Pocket IEPocket IE 为为 HTML 3.2HTML 3.2 浏浏览器览器 – – 不支持不支持 CSS!CSS!为更新为更新 Pocket IE V4.01Pocket IE V4.01 适配信适配信息库息库 (2003 version)(2003 version)指定为指定为 XHTMLXHTML 浏览器浏览器使用使用 CSSCSS指定表现形式指定表现形式

CSS Style sheet

User Control (external style sheet)

StyleSheet

Mobile-CapabilitiesDeviceSpecific

Template

Property Override

Property Override

Mobile-Capabilities

Property Override

定制总结定制总结

mbl300 如何使用 asp.net mobile controls 开发 mobile web 应用

Documents