cameron etezadi development lead microsoft corporation app208: building ajax applications on ie...
TRANSCRIPT
![Page 1: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/1.jpg)
![Page 2: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/2.jpg)
Cameron EtezadiDevelopment LeadMicrosoft Corporation
APP208: Building AJAX Applications on IE Mobile
![Page 3: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/3.jpg)
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
![Page 4: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/4.jpg)
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
![Page 5: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/5.jpg)
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”
![Page 6: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/6.jpg)
Cameron EtezadiDevelopment LeadInternet Explorer Mobile
XMLHTTP: CD Artwork
Demo
![Page 7: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/7.jpg)
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>
![Page 8: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/8.jpg)
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();}
![Page 9: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/9.jpg)
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}
![Page 10: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/10.jpg)
Cameron EtezadiDevelopment LeadInternet Explorer Mobile
JSON: Image Search
Demo
![Page 11: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/11.jpg)
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>
![Page 12: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/12.jpg)
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
![Page 13: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/13.jpg)
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
![Page 14: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/14.jpg)
Cameron EtezadiDevelopment LeadInternet Explorer Mobile
Element Creation/Deletion: Virtual Earth Mobile
Demo
![Page 15: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/15.jpg)
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>
![Page 16: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/16.jpg)
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();
}
![Page 17: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/17.jpg)
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();
}
![Page 18: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/18.jpg)
Cameron EtezadiDevelopment LeadInternet Explorer Mobile
Hosted Control: Gadgets
Demo
![Page 19: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/19.jpg)
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
![Page 20: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/20.jpg)
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);
![Page 21: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/21.jpg)
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
![Page 22: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/22.jpg)
© 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.
![Page 23: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/23.jpg)
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}
![Page 24: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/24.jpg)
Appendix: DOM Features
Spreadsheet added later to this deck
![Page 25: Cameron Etezadi Development Lead Microsoft Corporation APP208: Building AJAX Applications on IE Mobile](https://reader033.vdocuments.us/reader033/viewer/2022051517/56649ea25503460f94ba5839/html5/thumbnails/25.jpg)
Appendix: CSS Features
Spreadsheet added later to this deck