View
220
Download
0
Category
Tags:
Preview:
Citation preview
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}
Cameron EtezadiDevelopment LeadInternet Explorer Mobile
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
Cameron EtezadiDevelopment LeadInternet Explorer Mobile
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();
}
Cameron EtezadiDevelopment LeadInternet Explorer Mobile
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
Recommended