XPages Mobile Controls
Upcoming SlideShare
Loading in...5
×
 

XPages Mobile Controls

on

  • 2,203 views

Introduction to using IBM XPages Mobile Controls. ...

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.

Statistics

Views

Total Views
2,203
Views on SlideShare
2,202
Embed Views
1

Actions

Likes
0
Downloads
39
Comments
0

1 Embed 1

http://redpilldevelopment.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • 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 XPages Mobile Controls Presentation Transcript

  • www.redpilldevelopment.comlearn. do. dream.redpill TrainingUsing Mobile Controls
  • 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
  • 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)
  • 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.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
  • 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 Use mobile theme for…=m_
  • www.redpilldevelopment.comlearn. do. dream.Applying Mobile Theme (8.5.3)1. Edit Xsp Properties2. Select Source Tab3. Xsp.theme.mobile.pagePrefix=m_
  • 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 ?platform=android
  • 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</content-type><href>mobile.css</href></resource></theme>
  • 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)}
  • www.redpilldevelopment.comlearn. do. dream.Hybrid Applicationsloaded=“${javascript:!isMobile()}”loaded=“${javascript:isMobile()}”
  • www.redpilldevelopment.comlearn. do. dream.2. Mobile Controls
  • 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)
  • 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
  • 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 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>)
  • 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 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
  • 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
  • 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
  • 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 Descriptionid Unique identifiertitle Provides tooltip for container
  • 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
  • www.redpilldevelopment.comlearn. do. dream.Rounded List (Example)Rounded List 1List Item 1Rounded List 2moveToiconrightTextlabelList Item 2
  • 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 segmentedControl:display as buttonstabBar (default): – display as tabsid Unique identifierinheading Uses tab bar as heading (only if barType=segmentedControl)
  • 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
  • www.redpilldevelopment.comlearn. do. dream.Tab Bar Button (Events)Event DescriptiononClick Executed when button is clicked (standard event handler)
  • www.redpilldevelopment.comlearn. do. dream.Tab Bar (Examples)icon1 labelbarType=“segmentedControl”barType=“tabBar”Android only
  • www.redpilldevelopment.comlearn. do. dream.Tab Bar (Code)
  • 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
  • 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 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>
  • www.redpilldevelopment.comlearn. do. dream.Outline (Events)Event DescriptiononItemClick Triggered after an item in the outline has been clicked
  • 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
  • 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
  • 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 ColumnSummary ColumnDetailsExtra Columns Expand DetailsExpand CategoryExpand ResponseColumn Titles
  • www.redpilldevelopment.comlearn. do. dream.Data View (standard v mobile)Standard Theme Mobile Theme
  • www.redpilldevelopment.comlearn. do. dream.Anatomy of Data View (mobile)pagerToppagerTopRightcategoryRowsummarydetailpagerBottomLeftpagerBottompagerBottomRighticon
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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 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
  • 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 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
  • 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)
  • 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>
  • www.redpilldevelopment.comlearn. do. dream.Form Table (Example)formDescriptionformTableformTable (Nested)formTitlelabelInput ControlformRow
  • 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)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
  • 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