Building Mobile Web Applications With ASP.NET Mike Pelton Developer & Platform Group Microsoft Ltd.

The Ever-Broadening Spectrum of Devices New Business Models Using XML Web services New models for user interaction

Hardware Trends Cheaper, lighter, smaller… More integrated wireless GPRS,WiFi… New Form factors

Display USB or Serial Processor Memory GSM/GPRS CDMA/1xRTT Device Hardware WiFi Bluetooth Radio Drivers Windows Mobile CE DB ActiveSync Pocket Outlook Pocket Internet Explorer Windows Media Player Windows CE Software Platform (APIs) Home Screen User Interface/Shell HTML Control GAPI Remote API Configuration Bluetooth Connection Manager TAPI SMS MAPI POOM Multimedia Communication Device Management Presentation ADO CE XML CE DB OLE DB Data Access Native Win32 MFCATL Managed.NET Compact Framework Server side ASP.NET Mobile Controls Native Win32 MFCATL Managed.NET Compact Framework Server side ASP.NET Mobile Controls Windows Mobile Development Platform Embedded VC++ Visual Studio.NET

Key Concepts Two Sides of the Same Coin Adaptive rendering Mobile controls and device adapters generate an appropriate rendering for each device automatically Customisation Programmatic model to customise the rendering for a particular device. Why?

Building Mobile Web Applications The Adaptive Rendering Process 1. HTTP request 2. ASP.NET processing 3. ASP.NET result 4. Adaptive response Returned as proper browser protocol HTML HTML cHTML cHTML WML WML XHTML XHTML Render ASPX page Process page Process page Each control builds its own layout Each control builds its own layout Discover device capabilities Height and width Height and width Color Color Images Images Phone call ability Phone call ability

A Brief Aside… Cookieless Sessions Session State no longer requires client cookie support for SessionID Can optionally track SessionID in URL Requires no code changes to the application All relative links continue to work

Cookieless Sessions How To… 1. Create/Edit “web.config” file in the vroot 2. Add following text:

Adaptive Rendering

Device Support – 200+ Devices ACCESS Compact: NetFront 2.0, Fujitsu F503i, Mitsubishi D502i, Mitsubishi D503i, NEC N210i, NEC N502i, Sony SO503i Ericsson 2.0: Ericsson R380, Ericsson R320, Ericsson R520m, Ericsson T20s GoAmerica Go.Web: Compaq iPAQ H3650, Palm Vx, RIM Blackberry 857, RIM Blackberry 950, RIM Blackberry 957, Microsoft Mobile Explorer: Sony CMD-Z5, Sony CMD-J5, Benefon Q, Microsoft Pocket Internet Explorer: Casio Cassiopeia E-125, Compaq iPAQ H3630, Compaq iPAQ H3650, HP Jornada 720, Compaq iPAQ H3670 Nokia: Nokia 3330, Nokia 6210, Nokia 7110, Nokia 9110i Openwave UP.Browser 3.x: Audiovox CDM-9000, Ericsson R280LX, Hitachi C407H, Kyocera QCP 2035A, Kyocera QCP 3035, LG V111, Mitsubishi T250, Motorola StarTAC 7868W, Motorola TimePort P8767, Samsung SCH-6100, Samsung SCH-850, Samsung SCH-8500, Samsung UpRoar M100, Sanyo C401SA, Sanyo SCP-4500, Sanyo SCP-5000, Sprint Touchpoint, Sprint Touchpoint 2200, Sprint Touchpoint 3000 Openwave UP.Browser 4.x: Alcatel One Touch 701, Audiovox CDM-135, Audiovox CDM-9100, Motorola i1000plus, Motorola i2000plus, Motorola i50sx, Motorola i85s, Motorola T2288, Motorola TimePort P7382i, Motorola TimePort P7389, Motorola V100, Motorola V120c, Motorola V2288, Motorola V60c, Siemens C35i, Siemens S35i, Siemens SL45 Miscellaneous Browsers: Handspring Visor Platinum (Qualcomm Eudora Internet Suite 2.1; Blazer 1.0 and Omnisky ), IBM WorkPad c505 (ilinx Xiino 1.01J), Kyocera QCP 6035 (Qualcomm Eudora 2.0), Nokia 9210 (Symbian Crystal 6.0), Palm VII (MyPalm 1.0), Palm Vx (AU-Systems and Omnisky ), Palm m505 (MyPalm 1.1), Panasonic P210i, Panasonic P502i, Sharp J-SH04 (Original Equipment Manufacturer's Version 3.0), Sharp Zaurus MI-E1 (Original Equipment Manufacturer's Version 6.1), Sony CLIE PEG-N700C (ilinz Palmscape 4.0SJ), Toshiba J-T05 (Original Equipment Manufacturer's Version 3.0),

IIS.NET Framework Mobile Internet Toolkit Development Environment Production Create mobile Web Form Integrate Business Logic MobilePresentation Layer (controls) Layer (controls) Test Target Devices Post to Web Servers HTTPRequestDeviceCapabilities Mobile Controls and Device Adapters generate display Add Device Adapters Update Device Capabilities HTTPResponse Mobile.aspxPages The Lifecycle

Customising for Particular Devices Why? Optimise the generated rendering Per device or class of device Used on a per application basis Comparison- or Evaluator-based filters Control the exact display Ability to override default behavior

Device-Specific Customisation Property Overrides Change the property value of a control only on certain devices Example: Set the Text property of a Label control to a long string on large screen devices, and to a short string on small screen devices

Device-Specific Customisation Using Property Overrides In persistence format In code <Choice Filter="isPocketIE" <Choice Filter="isPocketIE" Text="...Breaking News - Breaking News..."> Text="...Breaking News - Breaking News..."> </mobile:Label> MobileCapabilities cap = (MobileCapabilities)Request.Browser; (MobileCapabilities)Request.Browser; if (cap.HasCapability(“isPocketIE“, null)) { Label2.Text = "...Breaking News - Breaking News...“; Label2.Text = "...Breaking News - Breaking News...“;} Else Label2.Text = "News Just In! ";

Defining Device Filters All customisation with Property Overrides and Templates relies on device filters Visual Studio.NET creates a default set of device filters in Web.config <filter name="isHTML32" compare="PreferredRenderingType" <filter name="isHTML32" compare="PreferredRenderingType" argument="html32" /> argument="html32" /> <filter name="isWML11" compare="PreferredRenderingType" <filter name="isWML11" compare="PreferredRenderingType" argument="wml11" /> argument="wml11" /> <filter name="isPocketIE" compare="Browser" <filter name="isPocketIE" compare="Browser" argument="Pocket IE" /> argument="Pocket IE" /> <filter name="prefersGIF" compare="PreferredImageMIME" <filter name="prefersGIF" compare="PreferredImageMIME" argument="image/gif" /> argument="image/gif" /> <filter name="prefersWBMP" compare="PreferredImageMIME" <filter name="prefersWBMP" compare="PreferredImageMIME" argument="image/vnd.wap.wbmp" /> argument="image/vnd.wap.wbmp" />......

Filtering

Customisation - Templates ObjectList Control HeaderTemplate Item Template AlternateItemTemplate FooterTemplate SeparatorTemplate Pocket PC Customisation Cell Phone Limited Customisation ItemDetailsTemplate DataBinder.Eval(((ObjectListItem)Container).DataItem, “FirstName”)

Using XML Web Services and the Object List

XHTML Browsers And CSS Cascading Style Sheets (CSS) The best way to define presentation Separates presentation from content W3C recommendation (CSS1) Supported by major desktop browsers CSS is also supported by the latest mobile devices Pocket Internet Explorer on SmartPhone 2003 supports HTML 4.01, XHTML-Basic, and CSS1 WAP 2.0 devices support XHTML-MP and Wireless CSS (Nokia Series 60, Sony-Ericsson Smartphones) ASP.NET Mobile Controls Runtime Supports XHTML browsers in Device Update 2 and later Generates CSS style sheet dynamically from standard mobile style properties

Programming CSS Stylesheets Create a style sheet in your project.Subhead{ font-weight: bold; font-weight: bold; font-size: smaller; font-size: smaller; color: orangered; color: orangered;} Add CSSLocation attribute to tag pointing at stylesheet Set allowCustomAttributes=“true” in web.config

Programming CSS Stylesheets Use CssClass attribute to apply a style class in the style sheet to a control Other attributes CssCommandClass: Use with ObjectList to style the command link CssLabelClass: Use with ObjectList to style the label fields CssPagerClass: Use with Form to style pagination prompts <mobile:label id="Label1" runat=“server” cssclass=“Subhead" > cssclass=“Subhead" > This label uses the style from the CSS! This label uses the style from the CSS!

CSS Presentation Example BODY{background-image: url(Images/background.png); url(Images/background.png); background-color: #99ccff; }.dropcap{ font-weight: bold; font-size: 200%; float: left; width: 12pt; color: orange; }

Using CSS

Speech On The Mobile Web? Why Bother? Hands-freeEyes-free When speech is faster or easier For what? Data Entry Query the user verbally Get input verbally Command and control Say what you want rather than clicking through menus Searching through data Ever tried sifting through 3,000 rows with a stylus? Notifications

SALT And ‘Speech Tags’ Speech Application Language Tags Extends HTML, XHTML etc. Enables multimodal (speech + GUI) and telephony applications Object and event model, script for dialog management Standard being driven by SALT Forum Founded : Cisco, Comverse, Intel, Microsoft, Philips, Speechworks

Speech Tags Overview configures speech synthesizer and plays out recorded prompts configures speech synthesizer and plays out recorded prompts configures and executes speech recognizer, handles events configures and executes speech recognizer, handles events specifies recognition resources specifies recognition resources binds recognition results to page binds recognition results to page specifies telephone keypad input specifies telephone keypad input Call Control object executes call transfer, conference, etc. handles events (answer, hangup etc.)

Speech Server Application Deployment ASP.NET Web Server Speech Controls PSTNPSTN Microsoft ® Speech Application SDK + Visual Studio ®.NET Microsoft ® Speech Application SDK + Visual Studio ®.NET Development Workstation Server-side speech recognition and prompting over Intel ® Dialogic ® Telephony Card Third-party Telephony Interface Manager (TIM) Speech Engine Services (SES) Telephony Application Services (TAS) Microsoft Speech Server Grammars Prompts Web Pages HTML + SALT + Script via Web osoft Speech Server Microsoft Speech Server

Speech Engine Services Powerful, server-based speech processing Speech Recognition ~100 to ~1000 times the grammar processing potential of a device Speech Synthesis Much more realistic than can be synthesized on a device Prompt databases Connect over

Speech Add-In For Pocket IE Adds speech markup capability to Pocket IE SALT (Speech Application Language Tags) Deploy your speech apps as Web sites Use your existing ASP.NET, HTML, and PIE skills to build speech apps

Speech Recognition Grammar Defines what to listen for Usually associated with a particular task A set of syntactic rules for assembling groups of words Expressed with SRGS (W3C Speech Recognition Grammar Specification) Can be statically authored or dynamically generated

Speech Recognition Results Raw text “Arriving at Heathrow” Semantic Uses your grammar to attach semantic meaning They specified their destination It is an airport It is “LHR” Expressed with SML (Semantic Markup Language) Includes confidence scores

Text To Speech Raw text SSML (Speech Synthesis Markup Language) for emphasis and “say as” hints Prompt database Combine synthesized and pre-recorded speech Recorded: “Turn left at” Synthesized: “Smith Street” App just provides: “Turn left at Smith Street”

Speech Application SDK Built for the.NET platform Integrated with Visual Studio.NET Speech Controls for dialog authoring Controls built on the ASP.NET control architecture Abstracts low-level Speech Application Language Tags Grammar authoring Build and edit grammars with graphical representation Associate recognised terms with semantic interpretation Prompt management Prompt Editor for scripting, recording, and tagging prompts Testing and debugging Speech debugging console for tracing through a dialog Telephony Application Simulator for simulating phone-based dialogs

Speech Input to a Web Page

Further Reading ASP.NET Applications for Mobile Devices - Andy Wigley (Content Master) Microsoft Speech Site: Microsoft.com/Speech Downloads, White Papers…

The slides for this event will be posted at:

MSDN Connection Get personalised info and a customised RSS feed The programming language(s) you’re interested in The technology area(s) you’re interested in The information you want View news, technical resources, events, webcasts and community information Sign up for MSDN Connection at:

Additional Information Post Events Site All information on past events, slide decks etc The UK MSDN Site & Flash Local news, events, webcasts Register to received the bi-weekly MSDN Flash by Try Visual Studio Take a look at the Express products GotDotNet and ASP.NET – lots of excellent resources

© 2003 Microsoft Limited. All rights reserved. This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary.