Cross Platform Mobile Applications

4,364 views

Published on

How to build Cross Platform Mobile Application?

Evaluation of Titanium and PhoneGap.

Published in: Technology
  • Be the first to comment

Cross Platform Mobile Applications

  1. 1. Cross Platform Mobile Applications<br />By Rohit Ghatol<br />Contact me – rohitsghatol@gmail.com<br />
  2. 2. Topics<br />Cross Platform Strategies<br />Pure HTML/JavaScript – PhoneGap<br />Interpreted JavaScript– Titanium<br />Building your own Cross Platform Framework<br />Cross Platform UI Development <br />
  3. 3. Cross Platform Strategies<br />Cross Platform <br />Source Code<br />android<br />blackberry<br />Common Platform<br />e.gWebKit<br />Mapping to Native<br />ios<br />Titanium<br />PhoneGap<br />
  4. 4. WebKit Platform<br />All Mobile Platforms have something common that is a Modern Browser<br />All these browsers are based on WebKit<br />Moreover all these platform support showing embedded browser in Applications (aka WebView)<br />Strange enough all these WebViews provide hooks from javascript to java and vice a versa<br />In short WebView is the new Virtual Machine <br />
  5. 5. Mapping to Native Code<br />Say Application is written in JavaScript<br />The JavaScript code is running in Interpreter<br />The Interpreter internally forwards calls to the native code<br />Limitation being the you can only map to subset of code available on all target platforms. <br />
  6. 6. PhoneGap<br />Only platform to support 6 Platforms<br />
  7. 7. PhoneGap<br />Standards based and extended<br />
  8. 8.
  9. 9. PhoneGap Features<br />
  10. 10. PhoneGapPrerequistes<br />Need to be acquainted with Android, IOS, BlackBerry, WebOS<br />Need to be expert at HTML/Javascript or framework like GWT<br />Need to be acquainted with JavaScript libraries like<br />Jquery<br />script.aculo.us<br />Prototype<br />Etc<br />Or Ajax framework like GWT<br />
  11. 11. Demo Screens - IPhone<br />
  12. 12. Demo Screens - Android<br />
  13. 13. Digging Deeper (Android)<br />Instead of extending a Activity, we extend DroidGap<br />DroidGap internally uses a WebView to show local/remote HTML/JavaScript/CSS<br />This WebView has hooks to<br />Call Java from JavaScript<br />And Vice a Versa<br />More like building Web 2.0 Applications <br />But also calling some java scripts which allow accessing native mobile resources e.g. Geo, Database, File System, etc<br />
  14. 14. Digging Deeper <br />
  15. 15. Bootstrapping phonegap<br /><html><br />     <head><br />          <title>Phone Gap</title><br />          <script type="text/javascript" src="scripts/phonegap.js"></script><br />       <script>…</script><br />     </head><br />     <body onload=”init();"><br />          <img id="map" /><br />     </body><br /></html><br />
  16. 16. Bootstrapping phonegap<br />function init() {<br />document.addEventListener('deviceready’,loadMap,false);<br />}<br />
  17. 17. Bootstrapping phonegap<br />function loadMap() {<br />varsuccessCallback= function(position) { <br /> var coords = position.coords;<br /> var url = "http://maps.google.com/maps/api/staticmap?center=" <br /> + coords.latitude + "," + coords.longitude ;<br />document.getElementById('map').setAttribute('src',url);<br /> };<br />varfailureCallback = function(e) {<br /> alert('Can't retrieve position.nError: ' + e);<br /> };<br /> //Fetch Coordinate Asynchronously<br />navigator.geolocation.getCurrentPosition(successCallback, <br />failureCallback );<br />} <br />
  18. 18. PhoneGap Walkthrough<br />Lets see a Live Demo<br />
  19. 19. Challenges and Advantages<br />HTML based UI is the biggest Challenge as well as Advantage<br />Same UI can be used for Web and Mobile and even Desktop<br />Promising Framework<br />GWT – Used by Spring Roo for Enterprise Application Development<br />jQueryMobile – Based on legendary Jquery and now features Samples<br />Multipage Template<br />Page Slide Transitions<br />Dialogs<br />Toolbars<br />Forms<br />Lists<br />
  20. 20. Titanium Mobile<br />
  21. 21. Titanium Mobile<br />Titanium JavaScript<br />Interpreted By<br />WekitJavascriptCore<br />Mozilla Rhino<br />IPhone<br />Android<br />
  22. 22. Titanium Architecture<br />
  23. 23. Titanium Prerequistes<br />Need to be acquainted with Android, IOS programming<br />Need to know JavaScript<br />
  24. 24. Demo Screens - IPhone<br />
  25. 25. Demo Screens - Android<br />
  26. 26. Directory Structure<br />
  27. 27. App.js (entry point)<br />vartabGroup = Titanium.UI.createTabGroup();<br />var win1 = Titanium.UI.createWindow({<br />title: 'Search',<br />url: 'search.js'<br />});<br />vartab1 = Titanium.UI.createTab({ <br /> window:win1,<br />title:'SearchAlternatives’<br />});<br />tabGroup.addTab(tab1); <br />tabGroup.addTab(tab2); <br />tabGroup.open();<br />
  28. 28. search.js (building UI)<br />var window = Titanium.UI.currentWindow;<br />varsearch = Titanium.UI.createSearchBar({<br />height:43,<br /> top:0<br />});<br />var actInd = Titanium.UI.createActivityIndicator({<br /> height:50,<br />});<br />vartableview = Titanium.UI.createTableView({<br /> top:50<br />});<br />window.add(search);<br />window.add(tableview);<br />
  29. 29. search.js (Ajax Call)<br />varxhr = Titanium.Network.createHTTPClient();<br />xhr.onload = function()<br />{<br />actInd.hide();<br />vardoc = xhr.responseText;<br />var json = eval('('+doc+')');<br /> var data = [];<br />//…. Load data in data <br /> // provide the data to table to populate the table<br />tableview.setData(data);<br />};<br />
  30. 30. search.js (Event handling)<br />//send ajax request to fetch altrnatives for searchText<br />function searchAlternatives(searchText){<br />xhr.open('GET','http://api.alternativeto.net/software/'+searchText+'/?count=15');<br />xhr.send();<br />}<br />//start search when user hits enter on search box<br />search.addEventListener('return', function(e)<br />{<br />actInd.show();<br />searchAlternatives(e.value);<br />});<br />
  31. 31. Titanium Walkthrough<br />Lets see a Live Demo<br />
  32. 32. Building your own Framework<br />Common HTML/JavaScript Code<br />WebKit<br />WebKit<br />WebKit<br />WebKit<br />Obj c<br />Java<br />C#<br />?<br />IPhone,IPad, Mac<br />Android<br />Windows<br />?<br />
  33. 33. JavaScript to Native Channel<br />Assume a single channel from Javascript to native and back from native to Javascript is present<br />This Single Channel can provide infinite control to the native code. One needs to just add more code to the native end and add new messages for it to be exposed.<br />However, understand that Javascript is single threaded and the callbacks will execute only if there is no javascript running.<br />
  34. 34. Building Proof of Concepts<br />Building Proof of Concepts is straight forward on<br />Android<br />IPad, IPhone, IPod Touch and Mac<br />Even for BlackBerry and WebOSthere is some documentatiion<br />For Windows, Linux and other mobile platforms one can refer to the source code of<br />Titanium Desktop<br />Phone Gap<br />
  35. 35. Comparison<br />Titanium<br />API is more proprietary<br />UI has Limitations<br />UI will be fast <br />Much better User Experience<br />Portal Code can not be reused<br />Extensions are possible<br />Limited support for HTML/Javascript<br />PhoneGap<br />API is less proprietary<br />UI possibilities are unlimited<br />UI could be slow<br />User Experience will get better with enhancements<br />Portal Code can be reused<br />Extensions are possible<br />More will come out of discussion, comments are welcome<br />
  36. 36. Conclusion<br />Webkit is the next Virtual Machine. <br />Maybe Going where Java could not go<br />HTML 5, CSS 3 and Javascriptis future,but not ready just yet<br />HTML 5, CSS3 and Javascript to lessen the fragmentation<br />HTML 5 will compete with native components<br />

×