Download mobile:Label

Building Mobile Web Applications
With ASP.NET
Mike Pelton
[email protected]
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
Windows Mobile Development Platform
Visual Studio .NET
Embedded VC++
Managed
Native
MFC
ATL
Server side
ASP .NET
Mobile Controls
.NET Compact
Framework
Win32
Software Platform (APIs)
Device Management
Remote API
Configuration
Bluetooth
Communication
Connection Manager
TAPI
SMS
MAPI
POOM
Windows Mobile
Presentation
Data Access
Home Screen
User Interface/Shell
HTML Control
ADO CE
XML
CE DB
OLE DB
CE DB
ActiveSync
Windows CE
Multimedia
GAPI
Pocket Outlook
Pocket Internet Explorer
Windows Media Player
Drivers
Device
Hardware
Processor
Memory
Display
USB or Serial
Radio
GSM/GPRS
CDMA/1xRTT
WiFi
Bluetooth
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
Discover device
capabilities
2. ASP.NET
processing
• Height and width
• Color
• Images
• Phone call ability
Render ASPX page
• Process page
• Each control builds
its own layout
Returned as proper
browser protocol
4. Adaptive
response
• HTML
• cHTML
• WML
• XHTML
3. ASP.NET result
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.
2.
Create/Edit “web.config” file in the vroot
Add following text:
<configuration>
<system.web>
<sessionState cookieless=“true”/>
</system.web>
</configuration>
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 2.1.0.15), 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 2.12181.1 and Omnisky
2.0.04), 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),
The Lifecycle
Create
mobile Web Form
Mobile
Presentation
Layer (controls)
Integrate
Business Logic
Test
Target Devices
Post to
Web Servers
Development
Environment
Device
Update
Device
Capabilities
HTTP
Request
Mobile.aspx
Pages
Mobile Controls
and
Device Adapters
generate display
HTTP
Response
Add
Device Adapters
IIS
.NET Framework
Mobile Internet Toolkit
Production
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
<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>
In code
MobileCapabilities cap =
(MobileCapabilities)Request.Browser;
if (cap.HasCapability(“isPocketIE“, null))
{
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
<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>
Filtering
Customisation - Templates
ObjectList Control
Header
Template
Item Template
AlternateItem
Template
Separator
Template
Footer
Template
Pocket PC Customisation
ItemDetails
Template
Cell Phone Limited
Customisation
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-size: smaller;
color: orangered;
}
Add CSSLocation attribute to <mobile:Form> tag
pointing at stylesheet
<mobile:Form id="Form1" runat="server"
csslocation="stylesheet1.css“ … >
Set allowCustomAttributes=“true” in web.config
<system.web>
<mobileControls allowCustomAttributes="true“ />
</system.web>
Programming CSS Stylesheets
Use CssClass attribute to apply a style class
in the style sheet to a control
<mobile:label id="Label1" runat=“server”
cssclass=“Subhead" >
This label uses the style from the CSS!
</mobile:label>
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
Using CSS
Speech On The Mobile Web?
Why Bother?
Hands-free
Eyes-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 10.1.01: Cisco, Comverse, Intel,
Microsoft, Philips, Speechworks
Speech Tags Overview
<prompt >
configures speech synthesizer and
plays out recorded prompts
<reco >
configures and executes speech
recognizer, handles events
<grammar > specifies recognition resources
<bind >
binds recognition results to page
<dtmf >
specifies telephone keypad input
Call Control object
executes call transfer, conference, etc.
handles events (answer, hangup etc.)
Microsoft Speech Server
Development Workstation
ASP.NET Web Server
Speech Controls
Microsoft® Speech
Application SDK
+
Visual Studio® .NET
Application
Deployment
Grammars
Prompts
Web Pages
HTML + SALT +
Script via Web
Speech Server
Microsoft
Speech Server
Speech Engine
Services (SES)
Server-side speech recognition and
prompting over 802.11
Telephony
Application
Services (TAS)
Intel® Dialogic®
Telephony Card
PSTN
Third-party Telephony
Interface Manager (TIM)
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 802.11
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
http://www.microsoft.com/speech/
Downloads, White Papers…
The slides for this event
will be posted at:
www.microsoft.com/uk/msdn/postevents
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:
http://www.microsoft.com/uk/msdn
Additional Information
Post Events Site
All information on past events, slide decks etc
http://www.microsoft.com/uk/msdn/postevents
The UK MSDN Site & Flash
Local news, events, webcasts
http://www.microsoft.com/uk/msdn
Register to received the bi-weekly MSDN Flash by email
http://www.microsoft.com/uk/msdn/flash.aspx
Try Visual Studio
http://www.microsoft.com/vstudio/tryit
Take a look at the Express products
http://msdn.microsoft.com/express
GotDotNet and ASP.NET – lots of excellent resources
http://www.gotdotnet.com
http://www.asp.net
© 2003 Microsoft Limited. All rights reserved.
This presentation is for informational purposes only. Microsoft makes no warranties, express or implied, in this summary .