DDive11 - Mobile Development For Domino


Published on

options for domino web developers on mobile

Published in: Technology
  • Be the first to comment

DDive11 - Mobile Development For Domino

  1. 1. Mobile Development for Domino Giuseppe Grasso
  2. 2. Giuseppe Grasso <ul><li>From my twitter bio: “ Technologist, Italian LUG leader, unable to bio himself... and an IBM Champion ! ” http://twitter.com/#!/grassog </li></ul><ul><li>My developerworks profile: https://www.ibm.com/developerworks/mydeveloperworks/profiles/user/GiuseppeGrasso </li></ul><ul><li>My email: [email_address] </li></ul>
  3. 3. agenda <ul><li>Market status </li></ul><ul><li>Mobile dev strategies </li></ul><ul><li>Openntf mobile controls </li></ul><ul><li>Options for traditional domino web developers </li></ul>
  4. 4. What do we mean with “mobile”? <ul><li>Smartphone </li></ul><ul><li>Tablet </li></ul><ul><li>Cloud PC i.e. chromebook </li></ul>
  5. 5. trends <ul><li>More “dumb” cheap smartphone </li></ul><ul><li>Cheap base android terminals </li></ul><ul><li>“ mobile” means more than “mobile phones” </li></ul><ul><li>More fragmentation </li></ul>Nielsen Market Research http://nexus404.com/Blog/2010/12/17/italy-most-smartphone-savy-country-finds-nielsen-nielsen-market-research-finds-that-more-italian-young-people-have-adapted-to-smartphones-than-elsewhere/
  6. 6. fragmentation <ul><li>source : Kantar WorldPanel    http://www.onlinemarketing-trends.com/2011/04/smartphone-marketshare-2011-italyus-aus.html </li></ul>
  7. 7. Application Develpment <ul><li>Native apps build with native sdk and tools, best for performance and hardware access, hard to multiplatform, steep lerning curve, may have higher cost do develop, deploy and mantain. </li></ul><ul><li>Web apps leverage existing web dev skills, simpler multiplatform, usually lower cost do develop, deploy and mantain. </li></ul><ul><li>Hybrid apps & cross platform toolkits usually easier than native development, limited access to device hardware </li></ul>
  8. 8. Best case for Native App <ul><li>Single device/platform as target </li></ul><ul><li>High requirements on perfomances </li></ul><ul><li>Need tight integration with hardware resources </li></ul><ul><li>Good budget / resources </li></ul>
  9. 9. Best case for Web App <ul><li>Multiple devices and platform targets </li></ul><ul><li>No need of hardware access </li></ul><ul><li>Need to avoid deploy / distribution </li></ul>
  10. 10. Best case for Hybrid apps & cross platform toolkits <ul><li>Multiple devices and platform targets </li></ul><ul><li>Limited need of hardware access </li></ul><ul><li>No resouces for going native on all targets </li></ul>
  11. 11. Hybrid apps & cross platform toolkits <ul><li>PhoneGap native wrapper around web apps </li></ul><ul><li>Titanium web apps “transcompiled” to native apps </li></ul><ul><li>Blackberry webworks native wrapper around web apps </li></ul><ul><li>Teamstudio unplugged xpages domino designer add-on / device runtime </li></ul><ul><li>Flex mobile </li></ul>
  12. 12. Web apps for mobile <ul><li>Xpages OpenNTF XPages Mobile Controls </li></ul><ul><li>Traditional Domino html5 & dojo mobile or jquery mobile </li></ul>
  13. 13. OpenNTF XPages Mobile Controls <ul><li>MobileControlsDojo16.nsf main controls, sample xpages and Dojo 1.6 Mobile </li></ul><ul><li>MobileControlsWinkCubiq.nsf more controls based on open source from cubiq.org ( made in Italy!) and Wink Toolkit </li></ul><ul><li>MobileControlsOffline.nsf shows how to take a Dojo based mobile app offline </li></ul><ul><li>Offline.nsf basic HTML5 samples for how to do offline with XPages. </li></ul><ul><li>XCamera.nsf a sample how to take a picture with a smartphone and upload it to an NSF (based on PhoneGap and require it to recompile) </li></ul><ul><li>Login.nsf some code for a login control based on the iNotes login mechanism. </li></ul>
  14. 14. MobileControlsDojo16.nsf: controls <ul><li>mPage  nice page transitions </li></ul><ul><li>mView  view control </li></ul><ul><li>mDocumentContainer  UNID handler and loading indicator </li></ul><ul><li>mConfiguration  handle loading of needed CSS & js </li></ul><ul><li>Minitialize  dojo.parser </li></ul><ul><li>mRectangle , mRectangleEntry , mRectangleHeader  helper controls </li></ul>
  15. 15. MobileControlsDojo16.nsf: ViewAndDocument sample xpage <ul><li>How to use mPage , mView , mRectangle etc. to implement a list view and content panel within a single xpage with nice transitions between view and content </li></ul>
  16. 16. ViewAndDocument Implementation Details 1 <ul><li>mView components controls and let you define the source view </li></ul>
  17. 17. ViewAndDocument Implementation Details 2 <ul><li>mDocumentContainer contains the myEditDocument custom control that let you define the fields that will show up in the “document details screen” </li></ul>
  18. 18. ViewAndDocumentCustomStyle sample xpage <ul><li>Sample similar to ViewAndDocument sample xpage but with a custom style </li></ul>
  19. 19. <ul><li>How to use mRectangle and mRectangleSimpleEntry </li></ul>RectangleSimpleEntries sample xpage
  20. 20. Transitions sample xpage <ul><li>How to implement transition effects between screens </li></ul>
  21. 21. CreateDocument sample xpage <ul><li>How to create and save documents </li></ul>
  22. 22. ViewAndEditDocument <ul><li>How to view and edit Documents </li></ul>
  23. 23. NavigatorAndViewAndDocument <ul><li>Tablet friendly interface with navigator, view and documents </li></ul>
  24. 24. ViewOneCategoryAndDocument & ViewWithCategoriesAndDocument <ul><li>View showing single category </li></ul><ul><li>View with categories </li></ul>
  25. 25. MobileControlsWinkCubiq.nsf <ul><li>controls from cubiq.org and the Wink toolkit </li></ul><ul><li>Samples for DatePicker ModalWindow and PopUpMenu from wink toolkit </li></ul><ul><li>SlideInMenu and SpinningWheel from qubiq </li></ul><ul><li>Note: You need to get and import your copy of the code from wink & qubiq http://www.winktoolkit.org/download/wink_1.0_optimized.zip </li></ul>Matteo Spinelli, author of cubiq, born in Florence
  26. 26. Importing wink <ul><li>Use package explorer to: </li></ul><ul><li>Create a new folder inside of the database </li></ul><ul><li>Import wink from file system </li></ul>
  27. 27. DatePicker <ul><li>Note: on most platform you can have that with native controls using HTML5 and type=“date ” attribute. See my presentation from DDive 2010, slide #41 </li></ul>
  28. 28. ModalWindow & PopUpMenu
  29. 29. MobileControlsWinkCubiq.nsf: TelephoneAndLocation <ul><li>Show how to trigger native functions via tel: and geo: defined URL </li></ul>
  30. 30. Offline.nsf: resouces sample xpage <ul><li>Show how to go offline with HTML5 cache manifest (see also my ddive 2010 presentation slides #43-#44) </li></ul>
  31. 31. resouces sample xpage: cache manifest link
  32. 32. Offline.nsf: cache manifest <ul><li>Linked from resouces xpage </li></ul>
  33. 33. Offline.nsf: storage xpage – key value storage <ul><li>Show how to use HTML5 localstorage capabilities to store key/values </li></ul>
  34. 34. Offline.nsf: storage xpage - local SQL storage <ul><li>How to use HTML5 local sql capabilities </li></ul>
  35. 35. Offline.nsf: local SQL storage - cont <ul><li>Transaction code </li></ul>
  36. 36. xcamera.nsf <ul><li>Show how to access device hardware inside of the PhoneGap framework. </li></ul><ul><li>Need PhoneGap </li></ul>
  37. 37. Login.nsf <ul><li>Implements a mobile friendly login form. </li></ul><ul><li>You need admin credentials to install it on your server. </li></ul>
  38. 38. Can’t use xpages? <ul><li>dojo mobile </li></ul><ul><li>jQuerymobile </li></ul><ul><li>Leverage on html5 capabilities ie: native controls for specialized fields like date, number etc. </li></ul>
  39. 39. references <ul><li>My previous sessions: </li></ul><ul><li>Lotus on mobile @ DDive 2010 http://www.slideshare.net/dominopoint/ddive-giuseppe-grasso-mobile-su-lotus and video: http://www.dominopoint.it/Dominopoint/dominopoint_blog.nsf/dx/ddive-il-video-di-sviluppo-mobile </li></ul><ul><li>Going mobile @ DominoPoint Day 2009 http://www.slideshare.net/dominopoint/sviluppare-applicazioni-domino-web-per-dispositivi-mobili </li></ul>
  40. 40. Thanks to all the sponsor that made DDive 2011 possible! <ul><li>Main Sponsor </li></ul><ul><li>Premium Sponsor </li></ul><ul><li>Prime Sponsor </li></ul>