Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile

Cameron EtezadiDevelopment LeadMicrosoft Corporation

APP208: Building AJAX Applications on IE Mobile

AgendaWindows Mobile 6 Enhancements

AJAX – Definitions and Support

Transports

Demo: XMLHTTP

Demo: JSON

AJAX Specific Improvements in WM6

Demo: Virtual Earth Mobile

Application Developer Usage

Demo: Gadget Hosting

Future Directions

Windows Mobile 6 EnhancementsPerformance – one column now is default, tiny

footprint

Hi-Res mode for VGA devices

CSS Mobile Profile, WAP 2.1.3, HTML 4.01 support

New home page

New user-agent value for easy browser ID

about:version URI added

IFRAME

Numerous “top 100” web site fixes for usability

Lots of DOM, CSS to enable more AJAX functionality

Unification of Basic, Standard, & Premium browsers

AJAX – What it is, what it isn't

Asynchronous JavaScript and XML

No standard, just a grouping of technologies

IE Mobile has supported XMLHttpRequest since ‘02

Support:JScript 5.6, same as Windows XP

DOM – level 0, some of level 1, some of level 2

CSS – Most of 2.1, but notably, no absolute positioning

MSXML, JSON for parsing returned data

IFRAME implementation doesn’t support AJAX “hack”

Cameron EtezadiDevelopment LeadInternet Explorer Mobile

XMLHTTP: CD Artwork

Demo

CD Artwork HTML Sample</head><body>

Artist: <input type="text" id="inputArtist"><br>Title: <input type="text" id="inputTitle" ><br> <input type="button" onclick="find()" value="Find">

<div id=output> </div>

<img id="imgAlbumArt“><span id="imgHolder"> </span>

</body>

CD Artwork JScript Samplefunction find(){ // ... var objAJAXReq = new

AJAXRequest("http://webservices.amazon.com/...", "GET", true, false, onResponse);

objAJAXReq.send(); // ...}function onResponse(response){ var xmlnodesSmallImages =

response.selectNodes("//Items//SmallImage"); if (xmlnodesSmallImages.length > 0) { xmlnodesSmallImages[0].selectNodes("URL")[0].text; g_ImageCacher.load();}

CD Artwork JScript Helpersfunction getReadyStateHandler(req, responseXmlHandler) {//...}

function AJAXRequest(strURL, strMethod, bAsync, fnHandler){ //...

var req = new ActiveXObject("Msxml2.XMLHTTP");this.send = function () {

if ( req.readyState != 0 ) {req.abort();}// Using getReadyStateHandler, set up the

// callback when we’re donereq.open(strMethod, strURL, bAsync);req.send();

}}

function ImageCacher(elemParent, fnCallback){ // Used to work around IEMo’s image download handling. // IEMo only fires onload() once for an image, not each // time src is set. Also, src setting fails in non-browser // contexts, like an XMLHTTP callback}


JSON: Image Search

Demo

Image Search Sample HTML, JScript

<div id="ret"> </div>

<script type="text/javascript">function ws_results(obj) {

var imagenode = document.getElementById("ret");

for( var i in obj.ResultSet.Result ) { url = obj.ResultSet.Result[i].Url; var o = document.createElement("IMG"); o.src = url;

imagenode.appendChild(o);}

}</script>

<script type="text/javascript” src="http://api.search.yahoo.com/ImageSearchService/V1/imageSearch?appid=YahooDemo&query=Microsoft&output=json&callback=ws_results">

</script>

Windows Mobile 6 Enhancements

Support for “expando” properties/methods (method and value prototyping)

Create any element in script using document.createElement

Add/remove elements to/from the document tree

element.insertBefore

element.removeChild

element.replaceChild

element.appendChild.

Feature detection of script object methods (bug fix!)

AJAX Specific Improvements

Windows Mobile 6 Enhancements

Misc properties/methods now supported:document.documentElement [readonly]

document.getElementsByTagName()

document.title is now writeable (was read-only until now)

element.parentNode [readonly]

element.childNodes [readonly]

element.id is now writeable (was read-only until now)

element.className [read/write]

Improved support for AJAX for ASP.NET (‘Atlas’)

Window.external()

AJAX Specific Improvements


Element Creation/Deletion: Virtual Earth Mobile

Demo

Virtual Earth HTML

Proxy service to Virtual EarthUsed to reduce tile size and cut down bandwith

Capable of doing this demo from the full site

Core concept – element creation & replacement

Buttons function via XMLHttpRequest() as demo’d

Map display on page is a in a DIV<DIV id=“d1”> </DIV>

Virtual Earth (Method 1)function showMap() {

var url = '<img width="'+width+'" height="'+height+‘"src="http://.../veproxy/veproxy.aspx?lat='+lat+'&lon='+lon+'&map='+map+'&bw='+width+'&bh='+height+'&gw=1&gh=1&q='+jpegquality+'&z='+zoomLevel+'&gx=0&gy=0" >';

window.d1.innerHTML = url;saveState();

}

Virtual Earth (Method 2)function showMap() {

window.d1.removeChild(window.d1.theMap);

var mapImage = document.createElement(“IMG”);mapImage.src = "http://.../veproxy/veproxy.aspx?lat='

+lat+'&lon='+lon+'&map='+map+'&bw='+width+'&bh='+height+'&gw=1&gh=1&q='+jpegquality+'&z='+zoomLevel+'&gx=0&gy=0"

mapImage.id = “theMap”;mapImage.width = width;mapImage.height = height;window.d1.appendChild(mapImage);saveState();

}


Hosted Control: Gadgets

Demo

You provide a scriptable objectImplements IDispatchEx

The demo wraps the public StatStor interface to provide the object model neededinterface ISystemState : IDispatchEx

{ //...

[propget, id(SSDISP_SYSTEMSTATE_PHONEINCOMINGCALLERNAME)]

HRESULT PhoneIncomingCallerName([out, retval]

ISystemStateProperty ** ppProp);

[propget, id(SSDISP_SYSTEMSTATE_PHONEINCOMINGCALLERNUMBER)]

HRESULT PhoneIncomingCallerNumber([out, retval] ISystemStateProperty ** ppProp);

}

Gadgets – How To Do Your Own

Gadget Scriptvar objSS = new ActiveXObject("Status.SystemState");

var objCallerName = objSS.PhoneIncomingCallerName;var objCallerNum = objSS.PhoneIncomingCallerNumber;function updateCaller() {

var strName = new String(objCallerName);var strNum = new String(objCallerNum);var txt = divInfo.innerText;

txt = strNum + " calling: " + strName; }

updateCaller();objCallerNum.addEventListener("Changed",

updateCaller);

Future Directions for IE Mobile

“Full Web” experience prioritized over walled gardens

De-emphasis of WAP/WML, focus on HTML, DOM, CSS, etc

Trend towards full desktop compatibility akin to IE7

Commitment to innovative UI and usability

More improvements coming in WM6 AKUs

No distinction between browser versions on different product form factors

© 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date

of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.

Appendix: New User Agent ValueOld

Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; Smartphone; 176x220)

NewMozilla/4.0 (compatible; MSIE 6.0; Windows CE; IEMobile m.n)

Additional HeadersUA-pixels: {i.e. 240x320}

UA-color: {mono2 | mono4 | color8 | color16 | color24 | color32}

UA-OS: {Windows CE (POCKET PC) - Version 3.0}

UA-CPU = {i.e. ARM SA1110}

UA-Voice = {TRUE | FALSE}

Appendix: DOM Features

Spreadsheet added later to this deck

Appendix: CSS Features

Spreadsheet added later to this deck

Documents

Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile