www.redpilldevelopment.comlearn. do. dream.redpill TrainingUsing Mobile Controls
www.redpilldevelopment.comlearn. do. dream.Peter PresnellCEO – Red Pill Developmentpeter.presnell@redpilldevelopment.comtw...
www.redpilldevelopment.comlearn. do. dream.Why Mobile?• In 2012 the total number ofsmartphones & tablet devices shippedexc...
www.redpilldevelopment.comlearn. do. dream.Based on Dojo Mobilehttp://dojotoolkit.org/features/mobile
www.redpilldevelopment.comlearn. do. dream.jQuery Mobilehttp://jquerymobile.com
www.redpilldevelopment.comlearn. do. dream.Requirements• Domino Server– Domino 9.0– Domino 8.5.3 Update Pack 1– Domino 8.5...
www.redpilldevelopment.comlearn. do. dream.Mobile Control Palette
www.redpilldevelopment.comlearn. do. dream.Mobile Controls
www.redpilldevelopment.comlearn. do. dream.The Mobile Theme
www.redpilldevelopment.comlearn. do. dream.Applying Mobile Theme (9.0)1. Edit Xsp Properties2. Select General Tab3. Set Us...
www.redpilldevelopment.comlearn. do. dream.Applying Mobile Theme (8.5.3)1. Edit Xsp Properties2. Select Source Tab3. Xsp.t...
www.redpilldevelopment.comlearn. do. dream.Device Specific Themesandroid Theme iphone Theme
www.redpilldevelopment.comlearn. do. dream.Setting Mobile Theme1. iphone: Append ?platform=iphone2. android: Append ?platf...
www.redpilldevelopment.comlearn. do. dream.Redirect For Mobile Devices
www.redpilldevelopment.comlearn. do. dream.Adding a Custom Theme<theme extends="oneuiv2.1><resource><content-type>text/css...
www.redpilldevelopment.comlearn. do. dream.Hybrid Applicationsfunction isMobile() {var uAgent = context.getUserAgent().get...
www.redpilldevelopment.comlearn. do. dream.Hybrid Applicationsloaded=“${javascript:!isMobile()}”loaded=“${javascript:isMob...
www.redpilldevelopment.comlearn. do. dream.2. Mobile Controls
www.redpilldevelopment.comlearn. do. dream.Single Application Page<xe:singlePageApp>Container for mobile applicationProper...
www.redpilldevelopment.comlearn. do. dream.Mobile Page<xe:appPage>Individual page used within mobile applicationProperty D...
www.redpilldevelopment.comlearn. do. dream.Mobile Page (Examples)
www.redpilldevelopment.comlearn. do. dream.Mobile Page (Code)
www.redpilldevelopment.comlearn. do. dream.Mobile Page (Dynamic Content)<xp:include>
www.redpilldevelopment.comlearn. do. dream.Page Heading<xe:djxmHeading>Heading displayed at top of a pageProperty Descript...
www.redpilldevelopment.comlearn. do. dream.Page HeadingOne per application pageLast one defined is used
www.redpilldevelopment.comlearn. do. dream.Tool Bar Button<xe:toolBarButton>Action button for headingProperty Descriptiona...
www.redpilldevelopment.comlearn. do. dream.Tool Bar Button<xe:toolBarButton>Property Descriptionselected (for toggle butto...
www.redpilldevelopment.comlearn. do. dream.Move To Application Page<xe:moveTo>Controls navigation to a new application pag...
www.redpilldevelopment.comlearn. do. dream.Page Heading (Example)backlabelactionFacettoolBarButtontoolBarButton (selected)
www.redpilldevelopment.comlearn. do. dream.Page Heading (Code)
www.redpilldevelopment.comlearn. do. dream.Rounded List<xe:djxmRoundedRectList>Container with rounded cornersProperty Desc...
www.redpilldevelopment.comlearn. do. dream.Static Line Item<xe:djxmLineItem>Provides a list item (mainly for navigation)Pr...
www.redpilldevelopment.comlearn. do. dream.Rounded List (Example)Rounded List 1List Item 1Rounded List 2moveToiconrightTex...
www.redpilldevelopment.comlearn. do. dream.Rounded List (Code)
www.redpilldevelopment.comlearn. do. dream.Transitions
www.redpilldevelopment.comlearn. do. dream.Tab Bar<xe:tabBar>Container for action buttonsProperty DescriptionbarType segme...
www.redpilldevelopment.comlearn. do. dream.Tab Bar Button<xe:tabBarButton>Button for mobile devicesProperty Descriptionico...
www.redpilldevelopment.comlearn. do. dream.Tab Bar Button (Events)Event DescriptiononClick Executed when button is clicked...
www.redpilldevelopment.comlearn. do. dream.Tab Bar (Examples)icon1 labelbarType=“segmentedControl”barType=“tabBar”Android ...
www.redpilldevelopment.comlearn. do. dream.Tab Bar (Code)
www.redpilldevelopment.comlearn. do. dream.Toggle Switch<xe:djxmSwitch>Mobile on/off stateProperty Descriptionid Unique id...
www.redpilldevelopment.comlearn. do. dream.Toggle Switch (Examples)
www.redpilldevelopment.comlearn. do. dream.Toggle Switch (Code)
www.redpilldevelopment.comlearn. do. dream.3. Outline
www.redpilldevelopment.comlearn. do. dream.Outline (mobile)<xe:outline>Tree structure outline/menuProperty Descriptionid U...
www.redpilldevelopment.comlearn. do. dream.Outline (Events)Event DescriptiononItemClick Triggered after an item in the out...
www.redpilldevelopment.comlearn. do. dream.Basic Container Node<xe:outline>Parent nodeProperty Descriptionchildren List of...
www.redpilldevelopment.comlearn. do. dream.Basic Leaf NodeChild nodeProperty Descriptionhref url to navigate to (use #page...
www.redpilldevelopment.comlearn. do. dream.Outline (Examples)basicContainerNodebasicLeafNode
www.redpilldevelopment.comlearn. do. dream.Outline (Code)
www.redpilldevelopment.comlearn. do. dream.4. Data View
www.redpilldevelopment.comlearn. do. dream.Anatomy Of Data View ControlExpand PagerDetails PagerCategory ColumnIcon Column...
www.redpilldevelopment.comlearn. do. dream.Data View (standard v mobile)Standard Theme Mobile Theme
www.redpilldevelopment.comlearn. do. dream.Anatomy of Data View (mobile)pagerToppagerTopRightcategoryRowsummarydetailpager...
www.redpilldevelopment.comlearn. do. dream.Data View (mobile)<xe:dataView>View componentProperty DescriptioncategoryColumn...
www.redpilldevelopment.comlearn. do. dream.Data View (mobile)<xe:dataView>Facet DescriptioncategoryRow Alternate facet use...
www.redpilldevelopment.comlearn. do. dream.Summary Column (mobile)<xe:viewSummaryColumn>Used to display title for each ent...
www.redpilldevelopment.comlearn. do. dream.Category Column (mobile)<xe:viewCategoryColumn>Used to display to content of ca...
www.redpilldevelopment.comlearn. do. dream.Icon Column (mobile)<xe:viewIconColumn>View componentProperty Descriptioncolumn...
www.redpilldevelopment.comlearn. do. dream.The detail Facet
www.redpilldevelopment.comlearn. do. dream.Adding More Rows<xe:addRows>Adds additional rows to a data viewerProperty Descr...
www.redpilldevelopment.comlearn. do. dream.Adding More Rows (Example)
www.redpilldevelopment.comlearn. do. dream.Adding More Rows (Code)
www.redpilldevelopment.comlearn. do. dream.5. Form Table
www.redpilldevelopment.comlearn. do. dream.Form Table (mobile)<xe:formTable>Form containerProperty DescriptiondisableRequi...
www.redpilldevelopment.comlearn. do. dream.Form Layout Row (mobile)<xe:formRow>Form rowProperty Descriptionfor Id of input...
www.redpilldevelopment.comlearn. do. dream.Nesting Form Tables<xe:formTable><xe:formRow><xe:formTable><xe:formRow></xe:for...
www.redpilldevelopment.comlearn. do. dream.Form Table (Example)formDescriptionformTableformTable (Nested)formTitlelabelInp...
www.redpilldevelopment.comlearn. do. dream.Form Table (Code)
www.redpilldevelopment.comlearn. do. dream.Breadcrumbs
www.redpilldevelopment.comlearn. do. dream.+3 WORKSHOPUsing Mobile Controls
www.redpilldevelopment.comlearn. do. dream.Sample Application
www.redpilldevelopment.comlearn. do. dream.1: Define Form/ViewsField DescriptionTitle Text: Application Title (Required)De...
www.redpilldevelopment.comlearn. do. dream.2: Menu
www.redpilldevelopment.comlearn. do. dream.3: Applications View
www.redpilldevelopment.comlearn. do. dream.4: More Rows
www.redpilldevelopment.comlearn. do. dream.5: By Type View
www.redpilldevelopment.comlearn. do. dream.6: By Department View
www.redpilldevelopment.comlearn. do. dream.7: Applications Form Table
www.redpilldevelopment.comlearn. do. dream.8: Add Breadcrumbs
www.redpilldevelopment.comlearn. do. dream.9: Tab Bar
www.redpilldevelopment.comlearn. do. dream.10: Administration
www.redpilldevelopment.comlearn. do. dream.stackoverflow.com (tag: xpages)Questions
www.redpilldevelopment.comlearn. do. dream.xpages.infoAdditional Informaton
www.redpilldevelopment.comlearn. do. dream.Chapter 10: Mobile ControlsXPages Extension Library
www.redpilldevelopment.comlearn. do. dream.www.ibm.com/developerworks/lotusDeveloper Works
www.redpilldevelopment.comlearn. do. dream.notesin9.com & xpages.tvNotes In 9
XPages Mobile Controls
XPages Mobile Controls
Upcoming SlideShare
Loading in …5
×

XPages Mobile Controls

3,966 views

Published on

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.

Published in: Technology, Spiritual
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,966
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
59
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • My Name is Peter Presnell and I work for Red Pill Development, an IBM Business partner that specializes in modernizing Notes Applications.
  • Note the use of custom controls
  • Only one heading per AppPage (Last used)
  • Only one heading per AppPage (Last used)
  • Only one heading per AppPage (Last used)
  • Icons do not display in segmentedControl for iOs devicesMaximum of two tabBar per application page
  • Many other properties are available, but most of these do not apply to the mobile renderer
  • Many other properties are available, but most of these do not apply to the mobile renderer
  • XPages Mobile Controls

    1. 1. www.redpilldevelopment.comlearn. do. dream.redpill TrainingUsing Mobile Controls
    2. 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. 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. 4. www.redpilldevelopment.comlearn. do. dream.Based on Dojo Mobilehttp://dojotoolkit.org/features/mobile
    5. 5. www.redpilldevelopment.comlearn. do. dream.jQuery Mobilehttp://jquerymobile.com
    6. 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. 7. www.redpilldevelopment.comlearn. do. dream.Mobile Control Palette
    8. 8. www.redpilldevelopment.comlearn. do. dream.Mobile Controls
    9. 9. www.redpilldevelopment.comlearn. do. dream.The Mobile Theme
    10. 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. 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. 12. www.redpilldevelopment.comlearn. do. dream.Device Specific Themesandroid Theme iphone Theme
    13. 13. www.redpilldevelopment.comlearn. do. dream.Setting Mobile Theme1. iphone: Append ?platform=iphone2. android: Append ?platform=android
    14. 14. www.redpilldevelopment.comlearn. do. dream.Redirect For Mobile Devices
    15. 15. www.redpilldevelopment.comlearn. do. dream.Adding a Custom Theme<theme extends="oneuiv2.1><resource><content-type>text/css</content-type><href>mobile.css</href></resource></theme>
    16. 16. www.redpilldevelopment.comlearn. do. dream.Hybrid Applicationsfunction 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)}
    17. 17. www.redpilldevelopment.comlearn. do. dream.Hybrid Applicationsloaded=“${javascript:!isMobile()}”loaded=“${javascript:isMobile()}”
    18. 18. www.redpilldevelopment.comlearn. do. dream.2. Mobile Controls
    19. 19. www.redpilldevelopment.comlearn. do. dream.Single Application Page<xe:singlePageApp>Container for mobile applicationProperty Descriptionid Unique identifierselectedPageName The initial mobile page to be displayed (Required)
    20. 20. www.redpilldevelopment.comlearn. do. dream.Mobile Page<xe:appPage>Individual 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. 21. www.redpilldevelopment.comlearn. do. dream.Mobile Page (Examples)
    22. 22. www.redpilldevelopment.comlearn. do. dream.Mobile Page (Code)
    23. 23. www.redpilldevelopment.comlearn. do. dream.Mobile Page (Dynamic Content)<xp:include>
    24. 24. www.redpilldevelopment.comlearn. do. dream.Page Heading<xe:djxmHeading>Heading 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 <xe:toolBarButton>)
    25. 25. www.redpilldevelopment.comlearn. do. dream.Page HeadingOne per application pageLast one defined is used
    26. 26. www.redpilldevelopment.comlearn. do. dream.Tool Bar Button<xe:toolBarButton>Action 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. 27. www.redpilldevelopment.comlearn. do. dream.Tool Bar Button<xe:toolBarButton>Property 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. 28. www.redpilldevelopment.comlearn. do. dream.Move To Application Page<xe:moveTo>Controls 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. 29. www.redpilldevelopment.comlearn. do. dream.Page Heading (Example)backlabelactionFacettoolBarButtontoolBarButton (selected)
    30. 30. www.redpilldevelopment.comlearn. do. dream.Page Heading (Code)
    31. 31. www.redpilldevelopment.comlearn. do. dream.Rounded List<xe:djxmRoundedRectList>Container with rounded cornersProperty Descriptionid Unique identifiertitle Provides tooltip for container
    32. 32. www.redpilldevelopment.comlearn. do. dream.Static Line Item<xe:djxmLineItem>Provides 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. 33. www.redpilldevelopment.comlearn. do. dream.Rounded List (Example)Rounded List 1List Item 1Rounded List 2moveToiconrightTextlabelList Item 2
    34. 34. www.redpilldevelopment.comlearn. do. dream.Rounded List (Code)
    35. 35. www.redpilldevelopment.comlearn. do. dream.Transitions
    36. 36. www.redpilldevelopment.comlearn. do. dream.Tab Bar<xe:tabBar>Container for action buttonsProperty DescriptionbarType segmentedControl:display as buttonstabBar (default): – display as tabsid Unique identifierinheading Uses tab bar as heading (only if barType=segmentedControl)
    37. 37. www.redpilldevelopment.comlearn. do. dream.Tab Bar Button<xe:tabBarButton>Button 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. 38. www.redpilldevelopment.comlearn. do. dream.Tab Bar Button (Events)Event DescriptiononClick Executed when button is clicked (standard event handler)
    39. 39. www.redpilldevelopment.comlearn. do. dream.Tab Bar (Examples)icon1 labelbarType=“segmentedControl”barType=“tabBar”Android only
    40. 40. www.redpilldevelopment.comlearn. do. dream.Tab Bar (Code)
    41. 41. www.redpilldevelopment.comlearn. do. dream.Toggle Switch<xe:djxmSwitch>Mobile 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. 42. www.redpilldevelopment.comlearn. do. dream.Toggle Switch (Examples)
    43. 43. www.redpilldevelopment.comlearn. do. dream.Toggle Switch (Code)
    44. 44. www.redpilldevelopment.comlearn. do. dream.3. Outline
    45. 45. www.redpilldevelopment.comlearn. do. dream.Outline (mobile)<xe:outline>Tree structure outline/menuProperty Descriptionid Unique identifierrenderType For mobile set tocom.ibm.xsp.extlib.MobileOutlineNavigatortreeNodes List of (tree) nodes that make up the outline structure<xe:basicContainerNode><xe:basicLeafNode>treeRenderer Renderer used to visualize the outlineFor mobile set to <xe:MobileAccordianMenu>
    46. 46. www.redpilldevelopment.comlearn. do. dream.Outline (Events)Event DescriptiononItemClick Triggered after an item in the outline has been clicked
    47. 47. www.redpilldevelopment.comlearn. do. dream.Basic Container Node<xe:outline>Parent nodeProperty Descriptionchildren List of (tree) nodes that make up this branch of the outline<xe:basicContainerNode><xe:basicLeafNode>expanded 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. 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. 49. www.redpilldevelopment.comlearn. do. dream.Outline (Examples)basicContainerNodebasicLeafNode
    50. 50. www.redpilldevelopment.comlearn. do. dream.Outline (Code)
    51. 51. www.redpilldevelopment.comlearn. do. dream.4. Data View
    52. 52. www.redpilldevelopment.comlearn. do. dream.Anatomy Of Data View ControlExpand PagerDetails PagerCategory ColumnIcon ColumnSummary ColumnDetailsExtra Columns Expand DetailsExpand CategoryExpand ResponseColumn Titles
    53. 53. www.redpilldevelopment.comlearn. do. dream.Data View (standard v mobile)Standard Theme Mobile Theme
    54. 54. www.redpilldevelopment.comlearn. do. dream.Anatomy of Data View (mobile)pagerToppagerTopRightcategoryRowsummarydetailpagerBottomLeftpagerBottompagerBottomRighticon
    55. 55. www.redpilldevelopment.comlearn. do. dream.Data View (mobile)<xe:dataView>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. 56. www.redpilldevelopment.comlearn. do. dream.Data View (mobile)<xe:dataView>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. 57. www.redpilldevelopment.comlearn. do. dream.Summary Column (mobile)<xe:viewSummaryColumn>Used to display title for each entryProperty DescriptioncolumnName Column from which the value is retrieved
    58. 58. www.redpilldevelopment.comlearn. do. dream.Category Column (mobile)<xe:viewCategoryColumn>Used to display to content of category rowsProperty DescriptioncolumnName Column from which the value is retrieved
    59. 59. www.redpilldevelopment.comlearn. do. dream.Icon Column (mobile)<xe:viewIconColumn>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. 60. www.redpilldevelopment.comlearn. do. dream.The detail Facet
    61. 61. www.redpilldevelopment.comlearn. do. dream.Adding More Rows<xe:addRows>Adds 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. 62. www.redpilldevelopment.comlearn. do. dream.Adding More Rows (Example)
    63. 63. www.redpilldevelopment.comlearn. do. dream.Adding More Rows (Code)
    64. 64. www.redpilldevelopment.comlearn. do. dream.5. Form Table
    65. 65. www.redpilldevelopment.comlearn. do. dream.Form Table (mobile)<xe:formTable>Form containerProperty DescriptiondisableRequiredMarks true: Doesn’t 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. 66. www.redpilldevelopment.comlearn. do. dream.Form Layout Row (mobile)<xe:formRow>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. 67. www.redpilldevelopment.comlearn. do. dream.Nesting Form Tables<xe:formTable><xe:formRow><xe:formTable><xe:formRow></xe:formRow><xe:formRow></xe:formRow></xe:formTable></xe:formRow><xe:formRow><xe:formTable><xe:formRow></xe:formRow><xe:formRow></xe:formRow></xe:formTable></xe:formRow></xe:formTable>
    68. 68. www.redpilldevelopment.comlearn. do. dream.Form Table (Example)formDescriptionformTableformTable (Nested)formTitlelabelInput ControlformRow
    69. 69. www.redpilldevelopment.comlearn. do. dream.Form Table (Code)
    70. 70. www.redpilldevelopment.comlearn. do. dream.Breadcrumbs
    71. 71. www.redpilldevelopment.comlearn. do. dream.+3 WORKSHOPUsing Mobile Controls
    72. 72. www.redpilldevelopment.comlearn. do. dream.Sample Application
    73. 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. 74. www.redpilldevelopment.comlearn. do. dream.2: Menu
    75. 75. www.redpilldevelopment.comlearn. do. dream.3: Applications View
    76. 76. www.redpilldevelopment.comlearn. do. dream.4: More Rows
    77. 77. www.redpilldevelopment.comlearn. do. dream.5: By Type View
    78. 78. www.redpilldevelopment.comlearn. do. dream.6: By Department View
    79. 79. www.redpilldevelopment.comlearn. do. dream.7: Applications Form Table
    80. 80. www.redpilldevelopment.comlearn. do. dream.8: Add Breadcrumbs
    81. 81. www.redpilldevelopment.comlearn. do. dream.9: Tab Bar
    82. 82. www.redpilldevelopment.comlearn. do. dream.10: Administration
    83. 83. www.redpilldevelopment.comlearn. do. dream.stackoverflow.com (tag: xpages)Questions
    84. 84. www.redpilldevelopment.comlearn. do. dream.xpages.infoAdditional Informaton
    85. 85. www.redpilldevelopment.comlearn. do. dream.Chapter 10: Mobile ControlsXPages Extension Library
    86. 86. www.redpilldevelopment.comlearn. do. dream.www.ibm.com/developerworks/lotusDeveloper Works
    87. 87. www.redpilldevelopment.comlearn. do. dream.notesin9.com & xpages.tvNotes In 9

    ×