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
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