XPages Mobile Controls

www.redpilldevelopment.comlearn. do. dream.
redpill Training
Using Mobile Controls

Peter Presnell
CEO – Red Pill Development
peter.presnell@redpilldevelopment.com
twitter.com/PeterPresnell
google.com/111498578987618903765
www.facebook.com/peter.presnell
www.linkedin.com/in/peterpresnell
www.slideshare.net/ktree19

Why Mobile?
• In 2012 the total number of
smartphones & tablet devices shipped
exceeded that of PCs. (Morgan Stanley
Research)
• By the end of 2017 there will be more
mobile devices on Earth than people.
(Cisco)
• Worldwide business mobile devices are
projected to grow from 889 million in
2012 to 1.4 billion by 2016. (Radicati)
• 81% of employees use mobile devices
for business use. (Enterasys)
• CIOs expect over 20% of their
employees to use tablets instead of
latops by 2013. (Gartner)
• By 2015 mobile application
development will account for 80% of all
development activities. (Gartner)

Based on Dojo Mobile
http://dojotoolkit.org/features/mobile

jQuery Mobile
http://jquerymobile.com

Requirements
• Domino Server
– Domino 9.0
– Domino 8.5.3 Update Pack 1
– Domino 8.5.2 + OpenNTF Extension Library Project
• Domino Designer
– Domino 9.0
– Domino 8.5.3 Update Pack 1
– Domino 8.5.2 + OpenNTF Extension Library Project
• Devices
– iOS
– Android

Mobile Control Palette

Mobile Controls

The Mobile Theme

Applying Mobile Theme (9.0)
1. Edit Xsp Properties
2. Select General Tab
3. Set Use mobile theme for…=m_

Applying Mobile Theme (8.5.3)
1. Edit Xsp Properties
2. Select Source Tab
3. Xsp.theme.mobile.pagePrefix=m_

Device Specific Themes
android Theme iphone Theme

Setting Mobile Theme
1. iphone: Append ?platform=iphone
2. android: Append ?platform=android

Redirect For Mobile Devices

Adding a Custom Theme
<theme extends="oneuiv2.1>
<resource>
<content-type>text/css</content-
type>
<href>mobile.css</href>
</resource>
</theme>

Hybrid Applications
function isMobile() {
var uAgent = context.getUserAgent().getUserAgent();
return ((uAgent.match("iPhone") !== null ||
param.platform=="iphone") ||
(uAgent.match("Android") !== null ||
param.platform=="android") ||
uAgent.match("iPad") !== null)
}

Hybrid Applications
loaded=“${javascript:!isMobile()}”
loaded=“${javascript:isMobile()}”

2. Mobile Controls

Single Application Page
<xe:singlePageApp>
Container for mobile application
Property Description
id Unique identifier
selectedPageName The initial mobile page to be displayed (Required)

Mobile Page
<xe:appPage>
Individual page used within mobile application
autocreate true : Children created on server when page is loaded
keepScrollPos true (default): The scroll position is retained when navigating
between pages
pageName The name used to identify the page
resetContent True: Page content is recreated each time the page is
displayed

Mobile Page (Examples)

Mobile Page (Code)

Mobile Page (Dynamic Content)
<xp:include>

Page Heading
<xe:djxmHeading>
Heading displayed at top of a page
label Text to be displayed in header
back Text to be displayed in the back button
moveTo Application page to navigate to when back button is pressed
transition Transition to use when navigating back
Facet Description
actionFacet Used to place additional actions on the right of the header
(typically use <xe:toolBarButton>)

Page Heading
One per application page
Last one defined is used

Tool Bar Button
<xe:toolBarButton>
Action button for heading
arrow Displays a previous or next arrow
back true: Navigate to previous page
callback (client) javascript function called when transition is
completed
href url of a web page to navigate to
hrefTarget Target location for new page (e.g. _blank _self)
icon Icon to be displayed
iconPos Controls positioning of the icon
moveTo Application page to move to

Tool Bar Button
<xe:toolBarButton>
selected (for toggle buttons) true: mark button as initially selected
toggle true: Enables toggle button behaviour
transition Type of animated transition to be used
transitionDir Direction of the transition
url url for HTML or JSON to be loaded into an application page
urlTarget The id of the control to host the url content
Event Description
onClick Executes when button is clicked

Move To Application Page
<xe:moveTo>
Controls navigation to a new application page
direction Direction in which transition is applied
forceFullRefresh true: Content of page is refreshed before being displayed
targetPage Application page to be displayed
transitionType Type of transition to display

Page Heading (Example)
back
label
actionFacet
toolBarButton
toolBarButton (selected)

Page Heading (Code)

Rounded List
<xe:djxmRoundedRectList>
Container with rounded corners
title Provides tooltip for container

Static Line Item
<xe:djxmLineItem>
Provides a list item (mainly for navigation)
icon Icon displayed to the left of the label
label Text to be displayed (left aligned)
moveTo Application page navigated to when the item is selected
rightText Additional text (right aligned)
transition Type of transition effect used when item is selected

Rounded List (Example)
Rounded List 1
List Item 1
Rounded List 2
moveTo
icon
rightText
label
List Item 2

Rounded List (Code)

Transitions

Tab Bar
<xe:tabBar>
Container for action buttons
barType segmentedControl:display as buttons
tabBar (default): – display as tabs
inheading Uses tab bar as heading (only if barType=segmentedControl)

Tab Bar Button
<xe:tabBarButton>
Button for mobile devices
icon1 Icon displayed when button is unselected
icon2 Icon displayed when button is selected
iconPos1 Controls positioning of unselected icon (icon1)
iconPos2 Controls positioning of selected icon (icon2)
label Button text
selected true: button is initially displayed as selected
selectOne true (default): Only one button can be selected at a time
transition Type of transition effect used when moving to another page

Tab Bar Button (Events)
Event Description
onClick Executed when button is clicked (standard event handler)

Tab Bar (Examples)
icon1 label
barType=“segmentedControl”
barType=“tabBar”
Android only

Tab Bar (Code)

Toggle Switch
<xe:djxmSwitch>
Mobile on/off state
leftLabel Text displayed when switch is in “on” state
rightLabel Text displayed when switch is in “off” state
value Initial value
Event Description
onStateChanged Triggered when switch is toggled on/off
onTouchEnd Triggered when user lifts finger off control
onTouchMove Triggered when user drags finger across control
onTouchStart Triggered when user touches the control

Toggle Switch (Examples)

Toggle Switch (Code)

3. Outline

Outline (mobile)
<xe:outline>
Tree structure outline/menu
renderType For mobile set to
com.ibm.xsp.extlib.MobileOutlineNavigator
treeNodes List of (tree) nodes that make up the outline structure
<xe:basicContainerNode>
<xe:basicLeafNode>
treeRenderer Renderer used to visualize the outline
For mobile set to <xe:MobileAccordianMenu>

Outline (Events)
Event Description
onItemClick Triggered after an item in the outline has been clicked

Basic Container Node
<xe:outline>
Parent node
children List of (tree) nodes that make up this branch of the outline
<xe:basicContainerNode>
<xe:basicLeafNode>
expanded true: child nodes are initially shown expanded
image Icon to be displayed to the left of this entry
label Text to be displayed for entry
onClick Code executed when node is clicked
(Only executed when href is empty)
selected true: node is styled as a selected node

Basic Leaf Node
Child node
href url to navigate to (use #pagename)
image Icon to be displayed to the left of this entry
label Text to be displayed for entry
onClick Code executed when node is clicked
(Only executed when href is empty)
selected true: node is styled as a selected node

Outline (Examples)
basicContainerNode
basicLeafNode

Outline (Code)

4. Data View

Anatomy Of Data View Control
Expand Pager
Details Pager
Category Column
Icon Column
Summary Column
Details
Extra Columns Expand Details
Expand Category
Expand Response
Column Titles

Data View (standard v mobile)
Standard Theme Mobile Theme

Anatomy of Data View (mobile)
pagerTop
pagerTopRight
categoryRow
summary
detail
pagerBottomLeft
pagerBottom
pagerBottomRight
icon

Data View (mobile)
<xe:dataView>
View component
categoryColumn Defines one or more columns used to display category value
collapsibleCategory true: Categories can be expanded/collapsed
data Datasource used to provide data for the view
extraColumns Defines one or more additional columns to be displayed
first Specifies the index of the first row to be displayed
iconColumn Defines the icon to be displayed in the icon column
openDocAsReadOnly true: document are opened in read-only mode
pageName Page used to open the document when the summary label is selected
rows Number of rows to be displayed
summaryColumn Defines the column used for the summary label
var Variable used to access the current row

Data View (mobile)
<xe:dataView>
Facet Description
categoryRow Alternate facet used to defined category columns
detail Details to be shown below summary column
icon Alternate facet used to define icon colum
pagerBottom Center aligned area below view data
pagerBottomLeft Left aligned area below view data
pagerBottomRight Right aligned area below view data
pagerTop Center aligned area above view data
pagerTopLeft Left aligned area above view data
pagerTopRight Right aligned area above view data
summary Alternate facet used to define summary column

Summary Column (mobile)
<xe:viewSummaryColumn>
Used to display title for each entry
columnName Column from which the value is retrieved

Category Column (mobile)
<xe:viewCategoryColumn>
Used to display to content of category rows

Icon Column (mobile)
<xe:viewIconColumn>
View component
icons.iconEntry.selected true: icon should be displayed.
Used when selectedValue is absent
icons.iconEntry.selectedValue Column value that results in this icon being displayed
icons.iconEntry.url url of the image

The detail Facet

Adding More Rows
<xe:addRows>
Adds additional rows to a data viewer
disabledFormat The type of action to take on the disableId control when
there are no more rows available
disableId Id of the control to be disabled when no more rows are
available
for id of the the data view being controlled
rowCount The number of rows to be added

Adding More Rows (Example)

Adding More Rows (Code)

5. Form Table

Form Table (mobile)
<xe:formTable>
Form container
disableRequiredMarks true: Doesn’t display * next to required fields
fieldHelp true: Help link is provided for each row
formDescription Additional text describing the form - placed below formTitle
formTitle Title placed at the top of the form
labelPosition Default placement of labels relative to input controls
For mobile this is usually set to above

Form Layout Row (mobile)
<xe:formRow>
Form row
for Id of input control used to edit the data
label Label to be associated with the input control
labelPosition Location of label relative to the input control
default: above (form mobile theme)

Nesting Form Tables
<xe:formTable>
<xe:formRow>
<xe:formTable>
<xe:formRow></xe:formRow>
</xe:formTable>
</xe:formRow>
<xe:formRow>
<xe:formTable>
</xe:formTable>
</xe:formRow>
</xe:formTable>

Form Table (Example)
formDescription
formTable
formTable (Nested)
formTitle
label
Input Control
formRow

Form Table (Code)

Breadcrumbs

+3 WORKSHOP
Using Mobile Controls

Sample Application

1: Define Form/Views
Field Description
Title Text: Application Title (Required)
Description Text: Description of application
Type Keywords: Type of application
Stage Keywords: Stage of development (Dev, QA, Production)
Department Keywords: Department requesting application
View Description
Applications Title (a), Type, Stage, Department, Description
By Department Department (c), Stage(c), Title (a), Type, Description
By Type Type (c), Stage(c), Title (a), Department, Description

2: Menu

3: Applications View

4: More Rows

5: By Type View

6: By Department View

7: Applications Form Table

8: Add Breadcrumbs

9: Tab Bar

10: Administration

stackoverflow.com (tag: xpages)
Questions

xpages.info
Additional Informaton

Chapter 10: Mobile Controls
XPages Extension Library

www.ibm.com/developerworks/lotus
Developer Works

notesin9.com & xpages.tv
Notes In 9

XPages Mobile Controls

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie XPages Mobile Controls

Ähnlich wie XPages Mobile Controls (20)

Mehr von Peter Presnell

Mehr von Peter Presnell (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

XPages Mobile Controls

Hinweis der Redaktion