Step By Step Mobile Web Step By Step Mobile Web ApplicationsApplications

Lester MaddenLester MaddenDeveloper ConsultantDeveloper ConsultantMicrosoft EMEAMicrosoft EMEA

Eastern EuropeMDC

AgendaAgenda

What is the Mobile Internet Toolkit

Demo: Building a Mobile App using Visual Studio® .NET

Eastern EuropeMDC

Mobile Development SituationMobile Development Situation

Web Site

Web Site

Eastern EuropeMDC

Microsoft Mobile Internet ToolkitMicrosoft Mobile Internet Toolkit

Write-once mobile web pages- From a single code base target multiple devices- Separate code from presentation layer

Support for a variety of devices- Web enabled Cell Phones, PDAs and Pagers

Support multiple mark-up languages- WML1.1 (WAP); cHTML 1.0, and HTML 3.2

Customizable and extensible framework- Add new controls and support for new devices

Integrates with Visual Studio.NET - World-class development tool

Eastern EuropeMDC

Web Form vrs Mobile Web FormWeb Form vrs Mobile Web Form

Mobile Web Form

<mobile:Form runat="server"><mobile:Label runat=“server">

Hello, Mobile World</mobile:Label>

</mobile:Form>

<mobile:Form runat="server"><mobile:Label runat=“server">

Hello, Mobile World</mobile:Label>

</mobile:Form>

<Form runat="server"><asp:Label runat=“server">

Hello, World</asp:Label>

</Form>

<Form runat="server"><asp:Label runat=“server">

Hello, World</asp:Label>

</Form>

Web FormWeb Form

Eastern EuropeMDC

IIS.NET Framework

Mobile Internet ToolkitDevelopment Environment Production

Environment

How MMIT works… How MMIT works…

Create mobile Web Form

IntegrateBusiness Logic

Mobile Presentation

Layer (controls)

Test Target Devices

Post toWeb Servers

HTTPRequest

DeviceCapabilities

Mobile Controls &

Device Adaptersgenerate display HTTP

Response

Mobile.aspxPages

Eastern EuropeMDC

Mobile Web Form ControlsMobile Web Form Controls

Adapts display based on device capabilities

Generates multiple markup languages

Support for common desktop controlsAdRotatorCalendarCommandCompareVaildatorDeviceSpecificFormImage

LabelLinkListObjectListSelectionListPanelRangeValidaotor

RequiredFieldValidatorRegularExpressionValidatorStyleSheetTextBoxTextViewValidationSummary

Device specific controlsDevice specific controlsPhoneCall

Eastern EuropeMDC

Mobile Internet DesignerMobile Internet Designer

Mobile Web Form ToolboxMobile Web Form Toolbox

Multiple forms in the same fileMultiple forms in the same file

Mobile Mobile ProjectProject

Properties Properties & Events& Events

Eastern EuropeMDC

Device SupportDevice SupportACCESS Compact: NetFront 2.0, Fujitsu F503i, Mitsubishi D502i, Mitsubishi D503i, NEC N210i, NEC N502i, Sony SO503iEricsson 2.0: Ericsson R380, Ericsson R320, Ericsson R520m, Ericsson T20sGoAmerica Go.Web: Compaq iPAQ H3650, Palm Vx, RIM Blackberry 857, RIM Blackberry 950, RIM Blackberry 957Microsoft 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 H3670Nokia: Nokia 3330, Nokia 6210, Nokia 7110, Nokia 9110iOpenwave 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 3000Openwave 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 SL45Miscellaneous 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), YY

Eastern EuropeMDC

Device Extensibility Device Extensibility

Extend the machine.config schema for tracking device capabilities in ASP.NET

Store information:- Device type- Display information- Browser versions- Rendering details- Device capabilities- Gateway information

<filter><filter>

<!-- Pocket IE for Pocket PC --><!-- Pocket IE for Pocket PC -->

<case match="Mozilla/.* \(compatible; MSIE 3.02; <case match="Mozilla/.* \(compatible; MSIE 3.02;

Windows CE;(?'deviceID' \w*;)* Windows CE;(?'deviceID' \w*;)*

(?'screenWidth'\d*)x(?'screenHeight'\d*)\)">(?'screenWidth'\d*)x(?'screenHeight'\d*)\)">

type = "Pocket IE"type = "Pocket IE"

browser = "Pocket IE"browser = "Pocket IE"

javaapplets = "false"javaapplets = "false"

javascript = "true"javascript = "true"

vbscript = "false"vbscript = "false"

tables = "true"tables = "true"

… …....

Eastern EuropeMDC

Control ExtensibilityControl Extensibility

User Control (typically declarative)- Reuse common controls and functionality

Custom Server Controls- Inheritance control

Extend existing mobile Web Form controls - Composite control (programmatic)- Direct control

Create new mobile control in an assembly Create adapter (sets)

Eastern EuropeMDC

IIS Web ServerIIS Web ServerASP.NET and MMITASP.NET and MMIT

Development StepsDevelopment Steps Production TopologyProduction Topology

Create Mobile Create Mobile Web ApplicationWeb Application

IntegrateIntegrate

Business LogicBusiness Logic

Develop Develop

PresentationPresentation

Layer (controls)Layer (controls)

Design To DeploymentDesign To Deployment XML Web XML Web Service HostService Host

Customize Customize

ApplicationApplication

Apply Defensive Apply Defensive ProgrammingProgramming

DeployDeployApplicationApplication

Design Design ApplicationApplication

TestTestApplicationApplication

Eastern EuropeMDC

What You Need To Get What You Need To Get StartedStarted

.NET Framework

Visual Studio .NET

Mobile Internet Toolkit

Internet Information Server (IIS) 5.0 or higher

Device Emulators

Eastern EuropeMDC

Design ConsiderationsDesign Considerations

Functionality-based design

Consider target devices

Re-use existing code- N-Tier architecture

Security requirements

Existing desktop application - Desktop site is not the spec!

Eastern EuropeMDC

Our Demo Our Demo

Loan Rate Calculator

Testing with- IE, Pocket PC, WAP Browser

Customization- Style Sheets

WalkthroughWalkthroughDeveloping a mobile applicationDeveloping a mobile application

demodemo

Eastern EuropeMDC

Reasons to customize? - Optimize the rendering

- Per device or class of device- Used on a per application basis

- Control the exact display - Override the default behavior

Scenarios- Enrich the automatic rendering for a PPC- Different images- Inject browser-specific markup

CustomizationCustomization

WalkthroughWalkthroughCustomize renderingCustomize rendering

demodemo

Eastern EuropeMDC

Deploying Mobile ApplicationsDeploying Mobile Applications

Option Pros ConsDeployment Project

Installs ALL Required Components

Must be executed on server

Copy Web Project

Creates Virtual Directories, Copies Code

Required access to Web server from VS

XCOPY Quick and Simple Does not set up server

WalkthroughWalkthroughDeploying the applicationDeploying the application

demodemo

Eastern EuropeMDC

IIS Web ServerIIS Web ServerASP.NET and MMITASP.NET and MMIT

Development StepsDevelopment Steps Production Production TopologyTopology

Create Mobile Create Mobile Web ApplicationWeb Application

IntegrateIntegrateBusiness LogicBusiness Logic

Develop Develop PresentationPresentation

Layer (controls)Layer (controls)

RecapRecap XML Web XML Web Service HostService Host

Customize Customize ApplicationApplication

Apply Defensive Apply Defensive ProgrammingProgramming

DeployDeployApplicationApplication

Design Design ApplicationApplication

TestTestApplicationApplication

Eastern EuropeMDC

MMIT ResourcesMMIT Resourceshttp://www.msdn.microsoft.com/vstudio/http://www.msdn.microsoft.com/vstudio/nextgen/technology/mitdefault.aspnextgen/technology/mitdefault.asp

Key Web sites- MMIT Download- MSDN Library - ASP.NET- MMIT VS.NET - IBuySpy Portal www.IBuySpy.com - QuickStart: www.gotdotnet.com - KB Articles: MMIT PSS Web Site

Microsoft Official Course 2514

Newsgroup microsoft.public.dotnet.framework.aspnet.mobile

Eastern EuropeMDC

Summary Summary

The Microsoft Mobile Internet Toolkit…- Makes it easy to build mobile Web applications

for cell phones, PDAs, and pagers

- Integrates with Visual Studio .NET and the .NET Framework (ASP.NET)