Xpages, Extension Library and more...

1. Sviluppo mobile XPages
XPages Extension
Library and more…
Giuseppe Grasso

2. Chi sono
• My twitter bio:
• Technologist, Italian LUG leader,
unable to bio himself... and an
IBM Champion!
• Follow me as @grassog

3. Agenda
• Xpages mobile controls
• Single page design
• Mobile controls components
• Some more projects
• tools

4. Extension Library
• Provide Mobile Controls
• Mobile themes for iOS, Android now and
Blackberry in the future
• Mobile renderType for
Outline, DataView, FormTable

5. Xpages mobile controls
• Page Heading
• Rounded List
• Mobile Switch
• Mobile Page
• Single Page Application
• Static Line Item
• Tab Bar
• Tab Bar Button

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. 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. 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. 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. 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. 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. 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. xe:tabBar
• a container tab bar buttons
• Set barType property to “segmentedControl”
to display buttons “together”

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. xe:outline
• renderType set to
“com.ibm.xsp.extlib.MobileOutlineNavigator”

16. xe:formTable
• Tipically used with formRow to build mobile
forms
• Mobile style used

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. Mobile Theme
Activated 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 renderkit
Override detected platform theme with url parameter:
• m_app.xsp?platform=iphone#pagename

19. What else can you need?
• Other interesting projects from OpenNTF…

20. Mobile Value Picker
• http://www.openntf.org/internal/home.nsf/project.xsp?actio
n=openDocument&name=Mobile%20Value%20Picker

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. Adobe Shadows
• Remote debug to your *actual* mobile device

23. Adobe Shadow: connecting

24. Adobe shadows: remote debug

25. Grazie agli sponsor per aver reso possibile i
Dominopoint Days 2012!
Main Sponsor
Vad sponsor
Platinum sponsor
Gold sponsor