##dd12 sviluppo mobile XPages


Published on

Xpages, Extension Library and more...

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

##dd12 sviluppo mobile XPages

  1. 1. Sviluppo mobile XPages XPages ExtensionLibrary and more…Giuseppe Grasso
  2. 2. Chi sono• My twitter bio:• Technologist, Italian LUG leader, unable to bio himself... and an IBM Champion!• Follow me as @grassog
  3. 3. Agenda• Xpages mobile controls• Single page design• Mobile controls components• Some more projects• tools
  4. 4. Extension Library• Provide Mobile Controls• Mobile themes for iOS, Android now and Blackberry in the future• Mobile renderType for Outline, DataView, FormTable
  5. 5. Xpages mobile controls• Page Heading• Rounded List• Mobile Switch• Mobile Page• Single Page Application• Static Line Item• Tab Bar• Tab Bar Button
  6. 6. Single page application• The whole application contained into a single XPage• Each app “screen” is a corresponding mobile Page control singlePageApp appPage1 appPage2 appPage2
  7. 7. xe:singlePageApp control• xe:singlePageApp contains the whole application and controls page transitions• xe:appPage contains each app “screen”• SelectedPageName property (on singlePageApp) and pageName property (on appPage) controls witch page is shown to the device• Anchor URLs are used to navigate between pages ie: http://...db.nsf/mobileapp.xsp#page2 pageName
  8. 8. xe:appPage• The container for the a page “screen”• pageName property when used with xe:singlePageApp to identify the page within the single page application• If resetContent property is true the appPage content is reloaded from the server every time (HTTP GET)• Set Preload property to force mobile page to load when the XPage loads
  9. 9. xe:djxmHeading• The header area of the page, provides title, back button and actions facet• back property for the back button label• moveTo for the back button target (use #pageName to target another xe:appPage in the same XPage)
  10. 10. xe:djxmRoundRectList• Display a rectangle with rounded corners• A container for your mobile app pages, think of it as an <xp:panel> for mobile
  11. 11. xe:djxmLineItem• A way to implement mobile application links• moveTo property to set the target• transition to set the transiton effect (same html page)• icon to add an image• label link text• rightText text aligned to the right
  12. 12. xe:djxmSwitch• A mobile “checkbox” (not data-aware)• event onStateChanged triggered when switching state ( current design property editor has a bug on and will generate a wrong tag xe:eventhandler instead of xp:eventhandler )
  13. 13. xe:tabBar• a container tab bar buttons• Set barType property to “segmentedControl” to display buttons “together”
  14. 14. xe:tabBarButton• icon1 and icon2 to select an image for normal and selected state• iconPos1 and iconPos2 to set icon position• Icons do not display on iOS if tabBar is segmentedControl to conform with platform conventions
  15. 15. xe:outline• renderType set to “com.ibm.xsp.extlib.MobileOutlineNavigator”
  16. 16. xe:formTable• Tipically used with formRow to build mobile forms• Mobile style used
  17. 17. xe:dataView• categoryColumn to set one or more categorized columns• summaryColumn to set one or more data column• pageName to set with what page open the document
  18. 18. Mobile ThemeActivated by XPage(s) name prefix• WebContentWEB-INFxsp.properties• xsp.theme.mobile.pagePrefix=m_• Pages with name beginning with m_ will be rendered with mobile theme and renderkitOverride detected platform theme with url parameter:• m_app.xsp?platform=iphone#pagename
  19. 19. What else can you need?• Other interesting projects from OpenNTF…
  20. 20. Mobile Value Picker• http://www.openntf.org/internal/home.nsf/project.xsp?actio n=openDocument&name=Mobile%20Value%20Picker
  21. 21. Auto Logins for IBM Domino/ XWork server• http://www.openntf.org/internal/home.nsf/project. xsp?action=openDocument&name=Auto%20Logins% 20for%20IBM%20Domino/%20XWork%20server
  22. 22. Adobe Shadows• Remote debug to your *actual* mobile device
  23. 23. Adobe Shadow: connecting
  24. 24. Adobe shadows: remote debug
  25. 25. Grazie agli sponsor per aver reso possibile i Dominopoint Days 2012! Main Sponsor Vad sponsor Platinum sponsor Gold sponsor