Introduction to using IBM XPages Mobile Controls. Video versions of the presentation can (soon) be viewed on David Leedy's Notes in 9 (notesin9.com). Red Pill development (www.redpilldevelopment.com) also offers the presentation as an on-site (4hr) workshop.
Citation preview
1. www.redpilldevelopment.comlearn. do. dream.redpill
TrainingUsing Mobile Controls
2. www.redpilldevelopment.comlearn. do. dream.Peter PresnellCEO
Red Pill
[email protected]/PeterPresnellgoogle.com/111498578987618903765www.facebook.com/peter.presnellwww.linkedin.com/in/peterpresnellwww.slideshare.net/ktree19
3. www.redpilldevelopment.comlearn. do. dream.Why Mobile? In
2012 the total number ofsmartphones & tablet devices
shippedexceeded that of PCs. (Morgan StanleyResearch) By the end of
2017 there will be moremobile devices on Earth than people.(Cisco)
Worldwide business mobile devices areprojected to grow from 889
million in2012 to 1.4 billion by 2016. (Radicati) 81% of employees
use mobile devicesfor business use. (Enterasys) CIOs expect over
20% of theiremployees to use tablets instead oflatops by 2013.
(Gartner) By 2015 mobile applicationdevelopment will account for
80% of alldevelopment activities. (Gartner)
4. www.redpilldevelopment.comlearn. do. dream.Based on Dojo
Mobilehttp://dojotoolkit.org/features/mobile
18. www.redpilldevelopment.comlearn. do. dream.2. Mobile
Controls
19. www.redpilldevelopment.comlearn. do. dream.Single
Application PageContainer for mobile applicationProperty
Descriptionid Unique identifierselectedPageName The initial mobile
page to be displayed (Required)
20. www.redpilldevelopment.comlearn. do. dream.Mobile
PageIndividual page used within mobile applicationProperty
Descriptionautocreate true : Children created on server when page
is loadedid Unique identifierkeepScrollPos true (default): The
scroll position is retained when navigatingbetween pagespageName
The name used to identify the pageresetContent True: Page content
is recreated each time the page isdisplayed
24. www.redpilldevelopment.comlearn. do. dream.Page
HeadingHeading displayed at top of a pageProperty Descriptionlabel
Text to be displayed in headerback Text to be displayed in the back
buttonmoveTo Application page to navigate to when back button is
pressedtransition Transition to use when navigating backFacet
DescriptionactionFacet Used to place additional actions on the
right of the header(typically use )
25. www.redpilldevelopment.comlearn. do. dream.Page HeadingOne
per application pageLast one defined is used
26. www.redpilldevelopment.comlearn. do. dream.Tool Bar
ButtonAction button for headingProperty Descriptionarrow Displays a
previous or next arrowback true: Navigate to previous pagecallback
(client) javascript function called when transition iscompletedhref
url of a web page to navigate tohrefTarget Target location for new
page (e.g. _blank _self)icon Icon to be displayediconPos Controls
positioning of the iconmoveTo Application page to move to
27. www.redpilldevelopment.comlearn. do. dream.Tool Bar
ButtonProperty Descriptionselected (for toggle buttons) true: mark
button as initially selectedtoggle true: Enables toggle button
behaviourtransition Type of animated transition to be
usedtransitionDir Direction of the transitionurl url for HTML or
JSON to be loaded into an application pageurlTarget The id of the
control to host the url contentEvent DescriptiononClick Executes
when button is clicked
28. www.redpilldevelopment.comlearn. do. dream.Move To
Application PageControls navigation to a new application
pageProperty Descriptiondirection Direction in which transition is
appliedforceFullRefresh true: Content of page is refreshed before
being displayedtargetPage Application page to be
displayedtransitionType Type of transition to display
31. www.redpilldevelopment.comlearn. do. dream.Rounded
ListContainer with rounded cornersProperty Descriptionid Unique
identifiertitle Provides tooltip for container
32. www.redpilldevelopment.comlearn. do. dream.Static Line
ItemProvides a list item (mainly for navigation)Property
Descriptionicon Icon displayed to the left of the labelid Unique
identifierlabel Text to be displayed (left aligned)moveTo
Application page navigated to when the item is selectedrightText
Additional text (right aligned)transition Type of transition effect
used when item is selected
33. www.redpilldevelopment.comlearn. do. dream.Rounded List
(Example)Rounded List 1List Item 1Rounded List
2moveToiconrightTextlabelList Item 2
34. www.redpilldevelopment.comlearn. do. dream.Rounded List
(Code)
36. www.redpilldevelopment.comlearn. do. dream.Tab BarContainer
for action buttonsProperty DescriptionbarType
segmentedControl:display as buttonstabBar (default): display as
tabsid Unique identifierinheading Uses tab bar as heading (only if
barType=segmentedControl)
37. www.redpilldevelopment.comlearn. do. dream.Tab Bar
ButtonButton for mobile devicesProperty Descriptionicon1 Icon
displayed when button is unselectedicon2 Icon displayed when button
is selectediconPos1 Controls positioning of unselected icon
(icon1)iconPos2 Controls positioning of selected icon (icon2)id
Unique identifierlabel Button textselected true: button is
initially displayed as selectedselectOne true (default): Only one
button can be selected at a timetransition Type of transition
effect used when moving to another page
38. www.redpilldevelopment.comlearn. do. dream.Tab Bar Button
(Events)Event DescriptiononClick Executed when button is clicked
(standard event handler)
39. www.redpilldevelopment.comlearn. do. dream.Tab Bar
(Examples)icon1 labelbarType=segmentedControlbarType=tabBarAndroid
only
40. www.redpilldevelopment.comlearn. do. dream.Tab Bar
(Code)
41. www.redpilldevelopment.comlearn. do. dream.Toggle
SwitchMobile on/off stateProperty Descriptionid Unique
identifierleftLabel Text displayed when switch is in on
staterightLabel Text displayed when switch is in off statevalue
Initial valueEvent DescriptiononStateChanged Triggered when switch
is toggled on/offonTouchEnd Triggered when user lifts finger off
controlonTouchMove Triggered when user drags finger across
controlonTouchStart Triggered when user touches the control
45. www.redpilldevelopment.comlearn. do. dream.Outline
(mobile)Tree structure outline/menuProperty Descriptionid Unique
identifierrenderType For mobile set
tocom.ibm.xsp.extlib.MobileOutlineNavigatortreeNodes List of (tree)
nodes that make up the outline structuretreeRenderer Renderer used
to visualize the outlineFor mobile set to
46. www.redpilldevelopment.comlearn. do. dream.Outline
(Events)Event DescriptiononItemClick Triggered after an item in the
outline has been clicked
47. www.redpilldevelopment.comlearn. do. dream.Basic Container
NodeParent nodeProperty Descriptionchildren List of (tree) nodes
that make up this branch of the outlineexpanded true: child nodes
are initially shown expandedimage Icon to be displayed to the left
of this entrylabel Text to be displayed for entryonClick Code
executed when node is clicked(Only executed when href is
empty)selected true: node is styled as a selected node
48. www.redpilldevelopment.comlearn. do. dream.Basic Leaf
NodeChild nodeProperty Descriptionhref url to navigate to (use
#pagename)image Icon to be displayed to the left of this entrylabel
Text to be displayed for entryonClick Code executed when node is
clicked(Only executed when href is empty)selected true: node is
styled as a selected node
51. www.redpilldevelopment.comlearn. do. dream.4. Data
View
52. www.redpilldevelopment.comlearn. do. dream.Anatomy Of Data
View ControlExpand PagerDetails PagerCategory ColumnIcon
ColumnSummary ColumnDetailsExtra Columns Expand DetailsExpand
CategoryExpand ResponseColumn Titles
53. www.redpilldevelopment.comlearn. do. dream.Data View
(standard v mobile)Standard Theme Mobile Theme
54. www.redpilldevelopment.comlearn. do. dream.Anatomy of Data
View
(mobile)pagerToppagerTopRightcategoryRowsummarydetailpagerBottomLeftpagerBottompagerBottomRighticon
55. www.redpilldevelopment.comlearn. do. dream.Data View
(mobile)View componentProperty DescriptioncategoryColumn Defines
one or more columns used to display category
valuecollapsibleCategory true: Categories can be
expanded/collapseddata Datasource used to provide data for the
viewextraColumns Defines one or more additional columns to be
displayedfirst Specifies the index of the first row to be
displayediconColumn Defines the icon to be displayed in the icon
columnopenDocAsReadOnly true: document are opened in read-only
modepageName Page used to open the document when the summary label
is selectedrows Number of rows to be displayedsummaryColumn Defines
the column used for the summary labelvar Variable used to access
the current row
56. www.redpilldevelopment.comlearn. do. dream.Data View
(mobile)Facet DescriptioncategoryRow Alternate facet used to
defined category columnsdetail Details to be shown below summary
columnicon Alternate facet used to define icon columpagerBottom
Center aligned area below view datapagerBottomLeft Left aligned
area below view datapagerBottomRight Right aligned area below view
datapagerTop Center aligned area above view datapagerTopLeft Left
aligned area above view datapagerTopRight Right aligned area above
view datasummary Alternate facet used to define summary column
57. www.redpilldevelopment.comlearn. do. dream.Summary Column
(mobile)Used to display title for each entryProperty
DescriptioncolumnName Column from which the value is retrieved
58. www.redpilldevelopment.comlearn. do. dream.Category Column
(mobile)Used to display to content of category rowsProperty
DescriptioncolumnName Column from which the value is retrieved
59. www.redpilldevelopment.comlearn. do. dream.Icon Column
(mobile)View componentProperty DescriptioncolumnName Column from
which the value is retrievedicons.iconEntry.selected true: icon
should be displayed.Used when selectedValue is
absenticons.iconEntry.selectedValue Column value that results in
this icon being displayedicons.iconEntry.url url of the image
61. www.redpilldevelopment.comlearn. do. dream.Adding More
RowsAdds additional rows to a data viewerProperty
DescriptiondisabledFormat The type of action to take on the
disableId control whenthere are no more rows availabledisableId Id
of the control to be disabled when no more rows areavailablefor id
of the the data view being controlledrowCount The number of rows to
be added
62. www.redpilldevelopment.comlearn. do. dream.Adding More Rows
(Example)
63. www.redpilldevelopment.comlearn. do. dream.Adding More Rows
(Code)
64. www.redpilldevelopment.comlearn. do. dream.5. Form
Table
65. www.redpilldevelopment.comlearn. do. dream.Form Table
(mobile)Form containerProperty DescriptiondisableRequiredMarks
true: Doesnt display * next to required fieldsfieldHelp true: Help
link is provided for each rowformDescription Additional text
describing the form - placed below formTitleformTitle Title placed
at the top of the formlabelPosition Default placement of labels
relative to input controlsFor mobile this is usually set to
above
66. www.redpilldevelopment.comlearn. do. dream.Form Layout Row
(mobile)Form rowProperty Descriptionfor Id of input control used to
edit the datalabel Label to be associated with the input
controllabelPosition Location of label relative to the input
controldefault: above (form mobile theme)
67. www.redpilldevelopment.comlearn. do. dream.Nesting Form
Tables
73. www.redpilldevelopment.comlearn. do. dream.1: Define
Form/ViewsField DescriptionTitle Text: Application Title
(Required)Description Text: Description of applicationType
Keywords: Type of applicationStage Keywords: Stage of development
(Dev, QA, Production)Department Keywords: Department requesting
applicationView DescriptionApplications Title (a), Type, Stage,
Department, DescriptionBy Department Department (c), Stage(c),
Title (a), Type, DescriptionBy Type Type (c), Stage(c), Title (a),
Department, Description
74. www.redpilldevelopment.comlearn. do. dream.2: Menu