MicrosoftMicrosoft®® Internet Explorer Internet Explorer

And Web-Based And Web-Based Applications For Pocket PCApplications For Pocket PC

Marc PhillipsMarc PhillipsTest LeadTest LeadMobile Devices DivisionMobile Devices DivisionMicrosoft CorporationMicrosoft Corporation

8-3108-310

Today’s PresentationToday’s Presentation

Pocket Internet Explorer overviewPocket Internet Explorer overview Accessing data with Pocket Accessing data with Pocket

Internet Explorer Internet Explorer Online and offline dataOnline and offline data Delivery mechanismsDelivery mechanisms

Pocket Internet Explorer capabilitiesPocket Internet Explorer capabilities Dos and don’tsDos and don’ts

What Is Pocket What Is Pocket Internet Explorer?Internet Explorer? A best-of-breed browser for A best-of-breed browser for

the categorythe category Full-featured; Third-generation browserFull-featured; Third-generation browser Optimizations for screen sizeOptimizations for screen size

Two ways to use Pocket Two ways to use Pocket Internet ExplorerInternet Explorer Connected – live TCP/IPConnected – live TCP/IP Disconnected – cached dataDisconnected – cached data

Pocket Internet Explorer Pocket Internet Explorer Connected: Get on the WebConnected: Get on the Web

How can I connect?How can I connect? Compact Flash modemCompact Flash modem Compact Flash EthernetCompact Flash Ethernet

Digital Phone CardDigital Phone Card (CF Adapter to cell phone)(CF Adapter to cell phone)

IR to cell phoneIR to cell phone

Pocket Internet Explorer Pocket Internet Explorer Connected: Get on the WebConnected: Get on the Web

What can I do?What can I do? Full browsing – Type an URL and goFull browsing – Type an URL and go Proxy support!Proxy support! Content is cached for offline accessContent is cached for offline access

Favorites indicates whether availableFavorites indicates whether available Secure access with SSLSecure access with SSL Fit-to-screen mode, or virtualFit-to-screen mode, or virtual

640 x 480 display640 x 480 display

Pocket Internet Explorer Pocket Internet Explorer Disconnected: Grab n’ goDisconnected: Grab n’ go

AvantGoAvantGo Partnership with MicrosoftPartnership with Microsoft Access directly through Pocket Access directly through Pocket

Internet Explorer Internet Explorer Enterprise server solutionsEnterprise server solutions AvantGo.comAvantGo.com

Mobile favoritesMobile favorites User-driven accessUser-driven access Desktop Sync with Internet Explorer 5.0Desktop Sync with Internet Explorer 5.0 Internet Explorer 5.0 Plug-in for Internet Explorer 5.0 Plug-in for

easy accesseasy access Superset of Mobile ChannelsSuperset of Mobile Channels

Pocket Internet Explorer Pocket Internet Explorer Disconnected: Grab n’ goDisconnected: Grab n’ go

Pocket Internet Explorer Pocket Internet Explorer Walk-ThroughWalk-Through DemonstrationDemonstration

Scenario 1Scenario 1Online transactionsOnline transactions

Straightforward demoStraightforward demo Pocket Internet Explorer Pocket Internet Explorer

directly connecteddirectly connected Basic Web applicationBasic Web application Takes advantage of:Takes advantage of:

Full HTML 3.2 BrowserFull HTML 3.2 Browser JScriptJScript™™ support for validation support for validation

Back EndBack End WindowsWindows®® 2000/SQL Server 2000/SQL Server™™

Hardware database via ADOHardware database via ADO ASP pages running under IISASP pages running under IIS

Scenario 1Scenario 1Online transactionsOnline transactions

Example SolutionExample SolutionSales RepSales Rep

DemonstrationDemonstration Power of Web applications using Power of Web applications using

Pocket Internet ExplorerPocket Internet Explorer

Pocket Internet Explorer Pocket Internet Explorer CapabilitiesCapabilitiesOverviewOverview

HTML 3.2 compliantHTML 3.2 compliant JavaScript 1.1 JavaScript 1.1

compliantcompliant XML Object ModelXML Object Model SSLSSL ActiveXActiveX®® support support

HTML CapabilitiesHTML CapabilitiesWhat we doWhat we do

HTML 3.2 supportHTML 3.2 support Lightweight and ubiquitousLightweight and ubiquitous

FramesetsFramesets Per HTML 4.0 specPer HTML 4.0 spec Borders always visibleBorders always visible

Background images and soundsBackground images and sounds

HTML CapabilitiesHTML CapabilitiesWhat we don’tWhat we don’t

DHTMLDHTML Useful on the desktop, but still Useful on the desktop, but still

heavyweight for handheldsheavyweight for handhelds CSSCSS

Can use XSL stylesheets insteadCan use XSL stylesheets instead Animated GIFsAnimated GIFs

JScript CapabilitiesJScript Capabilities

HTML 3.2-based object modelHTML 3.2-based object model Not the Internet Explorer 4.0 OMNot the Internet Explorer 4.0 OM

Core script supportCore script support Scripting against FORM elementsScripting against FORM elements Scripting against the XML OMScripting against the XML OM

JScript CapabilitiesJScript Capabilities

Not supportedNot supported Dynamic frameset creationDynamic frameset creation Dynamic script generationDynamic script generation Window.openWindow.open

Detecting Pocket Detecting Pocket Internet Explorer Internet Explorer Server-side VBScriptServer-side VBScript'Check for Windows CE'Check for Windows CE

if (InStr(Request.ServerVariables("HTTP_USER_AGENT"), "Windows if (InStr(Request.ServerVariables("HTTP_USER_AGENT"), "Windows CE")) thenCE")) then

{ add Windows CE specific code }{ add Windows CE specific code }

elseelse

{ add code for other platforms }{ add code for other platforms }

end ifend if

'Check for Pocket PC'Check for Pocket PC

if (InStr(Request.ServerVariables("HTTP_UA_OS"), "POCKET PC")) thenif (InStr(Request.ServerVariables("HTTP_UA_OS"), "POCKET PC")) then

{ add Pocket PC specific code }{ add Pocket PC specific code }

elseelse

{ add code for other platforms }{ add code for other platforms }

end ifend if

Detecting Pocket Detecting Pocket Internet Explorer Internet Explorer Client-side JScriptClient-side JScriptvar strNav = navigator.userAgent;var strNav = navigator.userAgent;

var isCE = strNav.indexOf("Windows CE");var isCE = strNav.indexOf("Windows CE");

if(isCE > -1) {if(isCE > -1) {

{ add Windows CE specific code }{ add Windows CE specific code }

}}

else {else {

{ add code for other platforms }{ add code for other platforms }

}}

var isPPC = strNav.indexOf("240x320");var isPPC = strNav.indexOf("240x320");

if(isPPC > -1) {if(isPPC > -1) {

{ add Pocket PC specific code }{ add Pocket PC specific code }

}}

else {else {

{ add code for other platforms }{ add code for other platforms }

}}

Scenario 2 Scenario 2 Dynamic data displayDynamic data display

More complex demoMore complex demo Pocket Internet Explorer connectedPocket Internet Explorer connected XML-based Web applicationXML-based Web application Enables dynamic data filtering without Enables dynamic data filtering without

reconnecting to serverreconnecting to server Takes advantage ofTakes advantage of

Frames, JScriptFrames, JScript Microsoft XML EngineMicrosoft XML Engine

XML CapabilitiesXML Capabilities

Same XML component as Same XML component as Internet Explorer 5.0Internet Explorer 5.0 Markup and transfer of data as XMLMarkup and transfer of data as XML

How it worksHow it works Data-as-XML delivered from server Data-as-XML delivered from server

embedded in HTML page - an XML embedded in HTML page - an XML ‘Data Island’‘Data Island’

Data read out of page, parsed, and placed Data read out of page, parsed, and placed into a data treeinto a data tree

JScript accesses the XML OMJScript accesses the XML OMand manipulates the dataand manipulates the data

XML CapabilitiesXML Capabilities

Render the XML data in the browserRender the XML data in the browser Use XSL to transform XML into HTMLUse XSL to transform XML into HTML

Describe appearance of HTML page Describe appearance of HTML page with XMLwith XML Instead of CSS, markup page with XSLInstead of CSS, markup page with XSL Minimize round-trips to the serverMinimize round-trips to the server Easy support for multipleEasy support for multiple

browser typesbrowser types

Example SolutionExample SolutionInventory control/Enterprise Inventory control/Enterprise resource managementresource management

DemonstrationDemonstration Activating Web applications with XMLActivating Web applications with XML

Using The XMLHTTP ObjectUsing The XMLHTTP ObjectThe requestThe request

<SCRIPT LANGUAGE=“JSCRIPT”><SCRIPT LANGUAGE=“JSCRIPT”>

var xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");var xmlhttp = new ActiveXObject ("Microsoft.XMLHTTP");

xmlhttp.Open("POST", "XMLlog.asp", false);xmlhttp.Open("POST", "XMLlog.asp", false);

var strXML = "<changeprice SKU='" + var strXML = "<changeprice SKU='" + document.forms[0].SKU.value + "' document.forms[0].SKU.value + "' Price='" + iNewPrice + "'/>";Price='" + iNewPrice + "'/>";

// Send request to logging page // Send request to logging page

xmlhttp.Send(strXML);xmlhttp.Send(strXML);

// Show response (success or failure)// Show response (success or failure)

alert(xmlhttp.responsetext);alert(xmlhttp.responsetext);

</SCRIPT></SCRIPT>

Using The XMLHTTP ObjectUsing The XMLHTTP ObjectThe responseThe response

<%@ LANGUAGE="VBSCRIPT" %><%@ LANGUAGE="VBSCRIPT" %><% Response.ContentType = "text/xml"<% Response.ContentType = "text/xml"set XMLReq = Server.CreateObject("Microsoft.XMLDOM")set XMLReq = Server.CreateObject("Microsoft.XMLDOM")XMLReq.load(Request)XMLReq.load(Request)

set xmlAction = XMLReq.selectSingleNode("//changeprice")set xmlAction = XMLReq.selectSingleNode("//changeprice")iSKU = xmlAction.GetAttribute("SKU")iSKU = xmlAction.GetAttribute("SKU")iPrice = xmlAction.GetAttribute("Price")iPrice = xmlAction.GetAttribute("Price"){ open recordset containing the requested SKU }{ open recordset containing the requested SKU }if not rsData.eof thenif not rsData.eof then

rsData("Price") = iPricersData("Price") = iPricersData.updatersData.updateresponse.write "Price changed successfully to $" & iPrice & "."response.write "Price changed successfully to $" & iPrice & "."

elseelseresponse.write "No record found for this SKU."response.write "No record found for this SKU."

end if %>end if %>

Example SolutionExample SolutionSales Rep the special dealSales Rep the special deal

DemonstrationDemonstration Dynamic updating with XMLDynamic updating with XML

Security CapabilitiesSecurity Capabilities

For secure transactions, Pocket For secure transactions, Pocket Internet Explorer supports:Internet Explorer supports: NTLMNTLM SSLSSL

64-bit certificates64-bit certificates 128-bit encryption (add-on)128-bit encryption (add-on)

Others (SGC)Others (SGC)

ActiveX CapabilitiesActiveX Capabilities

Straightforward – Just like the desktopStraightforward – Just like the desktop COM component accessed fromCOM component accessed from

<OBJECT> tag<OBJECT> tag Script can call ActiveX components, but Script can call ActiveX components, but

not vice-versanot vice-versa Must be installed on device directlyMust be installed on device directly

No auto-downloadNo auto-download Great hook for rich device-Web Great hook for rich device-Web

interaction scenariosinteraction scenarios

Disconnected DataDisconnected DataInternet Explorer 5.0 synchronizationInternet Explorer 5.0 synchronization

Enables access to any Web page Enables access to any Web page when disconnectedwhen disconnected

Superset of Internet Explorer 4.0 Superset of Internet Explorer 4.0 channels functionalitychannels functionality

Disconnected DataDisconnected DataMobile FavoritesMobile Favorites

Internet Explorer 5.0 introduces Internet Explorer 5.0 introduces ‘Offline Favorites’‘Offline Favorites’

New ‘Favorites’ sync providerNew ‘Favorites’ sync provider Syncs a subset of your desktop’s Web Syncs a subset of your desktop’s Web

cache with your device’s Web cachecache with your device’s Web cache Internet Explorer Plugin makes this Internet Explorer Plugin makes this

as easyas easy Grab ‘n go Web pages…Grab ‘n go Web pages…

DemonstrationDemonstration Take the best of the Web with Take the best of the Web with

Pocket Internet ExplorerPocket Internet Explorer

Disconnected DataDisconnected DataMobile Favorites demoMobile Favorites demo

Disconnected DataDisconnected DataWhat is AvantGo?What is AvantGo?

Expandable solutionsExpandable solutions Workforce automationWorkforce automation Mobile navigationMobile navigation Integrated feedbackIntegrated feedback

AvantGo.comAvantGo.com News (BBC to Financial Times)News (BBC to Financial Times) Service (FedEx, Weather, LastMinute.com)Service (FedEx, Weather, LastMinute.com) Games (Sony)Games (Sony)

Disconnected DataDisconnected DataAvantGo demoAvantGo demo

DemonstrationDemonstration AvantGoAvantGo

Disconnected DataDisconnected DataAvantGo on Pocket PCAvantGo on Pocket PC

Pocket PC is the premiere platformPocket PC is the premiere platformfor AvantGo-based solutionsfor AvantGo-based solutions

Zero installZero installReady to run out-of-the-boxReady to run out-of-the-box

Color displaysColor displaysProvide higher contrast, greater fidelityProvide higher contrast, greater fidelity

Large screensLarge screensMore data displayed, faster scanning, less scrollingMore data displayed, faster scanning, less scrolling

Integrated with the browserIntegrated with the browserSeamless connected-disconnected useSeamless connected-disconnected use

Efficient Use Of Pocket Efficient Use Of Pocket Internet ExplorerInternet ExplorerSuggestionsSuggestions

Keep it simple – Just the essentialsKeep it simple – Just the essentials Avoid >2 frames per pageAvoid >2 frames per page Use tables sparingly; allow for Use tables sparingly; allow for

dynamic resizingdynamic resizing Single-column formatSingle-column format

Pocket IE pages should never require Pocket IE pages should never require horizontal scrollinghorizontal scrolling

Makes single-handed reading easyMakes single-handed reading easy

GuidelinesGuidelinesFor more informationFor more information

Pocket Internet Explorer style guidePocket Internet Explorer style guide http://pocketpc.comhttp://pocketpc.com

AvantGo style guideAvantGo style guide http://avantgo.com/builder/http://avantgo.com/builder/

DiscussionDiscussion