Docstoc

Session Title

Document Sample
Session Title Powered By Docstoc
					Building Mobile Web Applications
          With ASP.NET

Mike Pelton
MPelton@microsoft.com
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

    Embedded VC++                                                        Visual Studio .NET
           Native                                   Managed                                   Server side
     MFC                ATL                        .NET Compact                                 ASP .NET
            Win32                                    Framework                                Mobile Controls



   Software Platform (APIs)
   Device Management     Communication                   Presentation                Data Access      Multimedia
   Remote API            Connection Manager              Home Screen                 ADO CE           GAPI
   Configuration         TAPI                            User Interface/Shell        XML
   Bluetooth             SMS                             HTML Control                CE DB
                         MAPI                                                        OLE DB
                         POOM




     Windows Mobile                  Windows CE                    CE DB              Pocket Outlook
                                                                   ActiveSync         Pocket Internet Explorer
                                                                                      Windows Media Player

                                                     Drivers
   Device              Processor         Display                        Radio   GSM/GPRS           WiFi
   Hardware            Memory            USB or Serial                          CDMA/1xRTT         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        Discover device              2. ASP.NET
request        capabilities                 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
              • HTML
              • cHTML
              • WML
4. Adaptive
              • XHTML                      3. ASP.NET result
response
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:

     <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            Device
                        Update Device                   HTTP
                         Capabilities                  Request
    Mobile
  Presentation           Mobile.aspx
 Layer (controls)          Pages
   Integrate
 Business Logic        Mobile Controls
                             and
      Test             Device Adapters
 Target Devices        generate display               HTTP
                                                    Response
    Post to
  Web Servers                Add
                       Device Adapters


                              IIS
                      .NET Framework
                    Mobile Internet Toolkit
 Development
 Environment                                  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

                                      ItemDetails             Cell Phone Limited
Pocket PC Customisation                 Template                   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
                                  .Subhead
                                  {
 Create a style sheet in your       font-weight: bold;
                                    font-size: smaller;
 project                            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

          Microsoft® Speech                                               Speech Controls
           Application SDK             Application
                   +                   Deployment                            Grammars
          Visual Studio® .NET
                                                                              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

                                                                         Third-party Telephony
                                PSTN                                    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 .

				
DOCUMENT INFO
Shared By:
Categories:
Tags:
Stats:
views:3
posted:3/20/2012
language:
pages:38
yaohongm yaohongm http://
About