1. www.redpilldevelopment.comlearn. do. dream.redpill TrainingUsing Mobile Controls

2. www.redpilldevelopment.comlearn. do. dream.Peter PresnellCEO Red Pill Developmentpeter.presnell@redpilldevelopment.comtwitter.com/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

5. www.redpilldevelopment.comlearn. do. dream.jQuery Mobilehttp://jquerymobile.com

6. www.redpilldevelopment.comlearn. do. dream.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

7. www.redpilldevelopment.comlearn. do. dream.Mobile Control Palette

8. www.redpilldevelopment.comlearn. do. dream.Mobile Controls

9. www.redpilldevelopment.comlearn. do. dream.The Mobile Theme

10. www.redpilldevelopment.comlearn. do. dream.Applying Mobile Theme (9.0)1. Edit Xsp Properties2. Select General Tab3. Set Use mobile theme for=m_

11. www.redpilldevelopment.comlearn. do. dream.Applying Mobile Theme (8.5.3)1. Edit Xsp Properties2. Select Source Tab3. Xsp.theme.mobile.pagePrefix=m_

12. www.redpilldevelopment.comlearn. do. dream.Device Specific Themesandroid Theme iphone Theme

13. www.redpilldevelopment.comlearn. do. dream.Setting Mobile Theme1. iphone: Append ?platform=iphone2. android: Append ?platform=android

14. www.redpilldevelopment.comlearn. do. dream.Redirect For Mobile Devices

15. www.redpilldevelopment.comlearn. do. dream.Adding a Custom Theme

17. www.redpilldevelopment.comlearn. do. dream.Hybrid Applicationsloaded=${javascript:!isMobile()}loaded=${javascript:isMobile()}

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

21. www.redpilldevelopment.comlearn. do. dream.Mobile Page (Examples)

22. www.redpilldevelopment.comlearn. do. dream.Mobile Page (Code)

23. www.redpilldevelopment.comlearn. do. dream.Mobile Page (Dynamic Content)

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

29. www.redpilldevelopment.comlearn. do. dream.Page Heading (Example)backlabelactionFacettoolBarButtontoolBarButton (selected)

30. www.redpilldevelopment.comlearn. do. dream.Page Heading (Code)

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)

35. www.redpilldevelopment.comlearn. do. dream.Transitions

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

42. www.redpilldevelopment.comlearn. do. dream.Toggle Switch (Examples)

43. www.redpilldevelopment.comlearn. do. dream.Toggle Switch (Code)

44. www.redpilldevelopment.comlearn. do. dream.3. Outline

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

49. www.redpilldevelopment.comlearn. do. dream.Outline (Examples)basicContainerNodebasicLeafNode

50. www.redpilldevelopment.comlearn. do. dream.Outline (Code)

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

60. www.redpilldevelopment.comlearn. do. dream.The detail Facet

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

68. www.redpilldevelopment.comlearn. do. dream.Form Table (Example)formDescriptionformTableformTable (Nested)formTitlelabelInput ControlformRow

69. www.redpilldevelopment.comlearn. do. dream.Form Table (Code)

70. www.redpilldevelopment.comlearn. do. dream.Breadcrumbs

71. www.redpilldevelopment.comlearn. do. dream.+3 WORKSHOPUsing Mobile Controls

72. www.redpilldevelopment.comlearn. do. dream.Sample Application

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

75. www.redpilldevelopment.comlearn. do. dream.3: Applications View

76. www.redpilldevelopment.comlearn. do. dream.4: More Rows

77. www.redpilldevelopment.comlearn. do. dream.5: By Type View

78. www.redpilldevelopment.comlearn. do. dream.6: By Department View

79. www.redpilldevelopment.comlearn. do. dream.7: Applications Form Table

80. www.redpilldevelopment.comlearn. do. dream.8: Add Breadcrumbs

81. www.redpilldevelopment.comlearn. do. dream.9: Tab Bar

82. www.redpilldevelopment.comlearn. do. dream.10: Administration

83. www.redpilldevelopment.comlearn. do. dream.stackoverflow.com (tag: xpages)Questions

84. www.redpilldevelopment.comlearn. do. dream.xpages.infoAdditional Informaton

85. www.redpilldevelopment.comlearn. do. dream.Chapter 10: Mobile ControlsXPages Extension Library

86. www.redpilldevelopment.comlearn. do. dream.www.ibm.com/developerworks/lotusDeveloper Works

87. www.redpilldevelopment.comlearn. do. dream.notesin9.com & xpages.tvNotes In 9