© 2013 Teamstudio, Inc.
#BLUG
Mobilising your app: 3 different ways!
Arshad Khalid @arshad101 March 21, 2013
© 2013 Teamstudio, Inc.
#BLUG
Disclaimer
The following products are mentioned/used in this presentation:
– IBM ® Notes ® Domino® Designer®
– jQuery© 2012 The jQuery Foundation
– Unplugged XPages Mobile Controls (OpenNTF)
Beginner’s level
There are always better ways of doing things!
© 2013 Teamstudio, Inc.
#BLUG
Agenda
Planning considerations from the field
What is the Mobile Controls Project?
Mobilising a simple app using the XPage Mobile Controls
Using an alternative framework – JQueryMobile
Using the OpenNTF Unplugged Mobile Controls Project
Summary
© 2013 Teamstudio, Inc.
#BLUG
Planning Considerations From The Field
What to mobilise: Parts of applications
Don’t try and lift and drop
Limit requirements I recommend 5 features max
Get early user testing feedback Iterate frequently
© 2013 Teamstudio, Inc.
#BLUG
Planning Considerations From The Field
What to Avoid:
Poor UI:
– Get a designer! Believe me, what we (developers) think is good, is probably not
Feature overload: “Does one thing and one thing well”
© 2013 Teamstudio, Inc.
#BLUG
Planning Considerations From The Field
Progressive Enhancement: – (Assumes that you will be doing Mobile Web dev not
native app dev)
– One set of Xpages for all media types
– Easier to maintain
Separate XPages for Web and Mobile: – Faster to produce POC’s
– Separation of functionality
… Custom Controls REALLY help here…
© 2013 Teamstudio, Inc.
#BLUG
What Is The Mobile Controls Project?
Created by Niklas Heidloff et al. in Sept 2010
Designed to assist with prototypes of mobile Notes applications
Not very flexible in usage with existing applications
Second generation is part of the Extension Library project
IBM has integrated these controls into the Controls Palette in Designer
© 2013 Teamstudio, Inc.
#BLUG
Set Up the Mobile Controls
2 versions: – OpenNTF – works with 8.5.2. Part of the
Extension Lib – Open Custom Control based
– ‘Official IBM version’ as part of 8.5.3 Upgrade Pack 1 – Integrated into DDE as Java based controls
These versions are NOT compatible.
Server version MUST match the version used in Designer.
We recommend using the official version in Upgrade Pack 1
© 2013 Teamstudio, Inc.
#BLUG
• 1a. Installing the Extension Library (From OpenNTF)
The updateSite.zip file contains the plugin
Turn on the ability to install plugins in Domino Designer:
– File – Preferences – Domino Designer
© 2013 Teamstudio, Inc.
#BLUG
The ‘install’ option now appears under File - Application
1b. Installing the Extension Library (From OpenNTF)
© 2013 IBM Corporation
Select ‘Search for new features to install
1c. Installing the Extension Library (From OpenNTF)
© 2013 Teamstudio, Inc.
#BLUG
Click ‘Add Zip/Jar Location’
1d. Installing the Extension Library (From OpenNTF)
© 2013 Teamstudio, Inc.
#BLUG
Select the file updateSite-designer.zip
Click ‘Finish’
1d. Installing the Extension Library (From OpenNTF)
© 2013 Teamstudio, Inc.
#BLUG
De-Select the Domino Wink features
1e. Installing the Extension Library (From OpenNTF)
© 2013 Teamstudio, Inc.
#BLUG
Install the plugins and then restart Designer
1f. Installing the Extension Library (From OpenNTF)
© 2013 Teamstudio, Inc.
#BLUG
•
1g. Installing the Extension Library (From OpenNTF)
Verify Installation - Go to Help – About IBM Lotus Domino Designer
Click Plug-in Details and check for
– Extended Components Library – com.ibm.extlib.mobile
© 2013 Teamstudio, Inc.
#BLUG
1h. Installing the Extension Library (From OpenNTF)
For local development using Designer’s internal HTTP server these files need to be installed in the runtime dir.
Copy the files from the ‘ExtensionLibraryOpenNTF/updateSiteOpenNTF-design/features’ folder to:
– <Lotus install>\Notes\Data\domino\workspace\applications\eclipse\features
Repeat for the files in ‘ExtensionLibraryOpenNTF/updateSiteOpenNTF-design/plugins’ to:
– <Lotus install>\Notes\Data\domino\workspace\applications\eclipse\plugins
• Restart Notes/Designer
© 2013 Teamstudio, Inc.
#BLUG
1i. Installing the Extension Library (From OpenNTF)
For production use, these files need to be installed on the Domino server
Installation Instructions
–For Domino 8.5.3 and the IBM XWork Server, the preferred way to install and deploy the XPages Extension Library (updateSiteOpenNTF-designer.zip) is to use an UpdateSite template, as described in a dedicated article entitled “XPages Extension Library Deployment in Domino 8.5.3 and IBM XWork Server,” available on the web at this URL: http://www-10.lotus.com/ldd/ddwiki.nsf/dx/XPages_Extension_Library_Deployment
Restart the HTTP Server. From Admin client type:
– Tell http quit
– Load http
© 2013 Teamstudio, Inc.
#BLUG
2. Create XPage and use Single Page App Model
Single Page Application (xe:singlePageApp)
This is the container control for the XPages mobile application, controlling its layout and configuration. The property selectedPageName must be set here to a Mobile Page control that is to be displayed when the XPage is loaded.
(All examples are performed using the official Extension Lib in UP1)
© 2013 Teamstudio, Inc.
#BLUG
3. Add Pages (Mobile Screens)
Mobile Page (xe:appPage) This is the main ‘screen’ used in a mobile application. Only one of these mobile pages is displayed at a time. The pageName property is the mobile page name and is the property used for navigation between the mobile pages as well as being used by the singlePageApp control to decide what page to show initially. The resetContent property is used to indicate if the page contents should be recreated each time the page is displayed. Another property affecting performance is preload, which can be used to force the Mobile Page to be loaded when the whole xpage is loaded.
Drag MobilePage controls onto the singlePageApp control facet
© 2013 Teamstudio, Inc.
#BLUG
3. Add Pages (Mobile Screens)
Drag MobilePage controls onto the singlePageApp control facet
© 2013 Teamstudio, Inc.
#BLUG
4. Add Pages (Mobile Screens)
Note: the Page Name is in the ‘All Properties – pageName’ not ‘Mobile Page – Name’
© 2013 Teamstudio, Inc.
#BLUG
2. Add Pages (Mobile Screens)
Select the Single Page App Control and complete the selectedPageName property with the page to display when the app is first opened
© 2013 Teamstudio, Inc.
#BLUG
3. Add Page Header Bars
Page Heading (xe:djxmHeading) Used as the header for the Mobile Page. It contains properties for the basic navigation - the back property being the label for the Back button and the moveTo property to contain the pageName of the destination of the Mobile Page. The Heading control can also act as a container for other controls like buttons and the mobile applications Tab Bar.
Drag Heading controls onto the Mobile Page facets
© 2013 Teamstudio, Inc.
#BLUG
3. Add Page Header Bars
Drag Heading controls onto the Mobile Page facets
© 2013 Teamstudio, Inc.
#BLUG
4. Add View Data
Data View (xe:dataview) – from Extension Library Used as the container for view data with predefined facets for ‘mobile’ UI controls (pagers, row data, icons etc). Configure similar to a regular View Control. Note: Standard View Controls from Container Controls do not work with the Mobile Page.
Drag a Data View control from the Extension Lib Palette
© 2013 Teamstudio, Inc.
#BLUG
4. Add View Data
Drag a Data View control from the Extension Lib Palette
© 2013 Teamstudio, Inc.
#BLUG
4a. Add View Data
Few things to note: ‘pageName’ in this control means ‘page
to open’ Set the ‘columnName’ of the view to be
displayed under ‘All Properties –format’ (not All Properties - data)
© 2013 Teamstudio, Inc.
#BLUG
5. Test Our Work
Right Click XPage and select – Preview in Web Browser Ugly….. Plus… it does not work
We MUST use a Theme
© 2013 Teamstudio, Inc.
#BLUG
6. Add the Mobile Theme
Open Package Explorer and navigate to xsp.properties (Window – Show Eclipse Views – Package Explorer)
pagePrefix can be anything but must match the ‘mobile’ XPages
© 2013 Teamstudio, Inc.
#BLUG
7. (Re-)Test Our Work
Theme detects device and renders screen appropriately (See next slide)
© 2013 Teamstudio, Inc.
#BLUG
Employees on iPhone and Android
Not yet implemented
7a. (Re-)Test Our Work
© 2013 Teamstudio, Inc.
#BLUG
8. Create Form Data
Drag a Panel control onto the second Mobile Page facet Define a standard Form based Datasource Drag in controls
© 2013 Teamstudio, Inc.
#BLUG
8a. Create Form Data - Add Basic Look and Feel
Wrap the Panel control in a Rounded List control and re-test
Rounded List (xe:djxmRoundRectList) This control is displays a rectangle with rounded corners useful for lists that link to documents.
© 2013 Teamstudio, Inc.
#BLUG
9. Test For Cached Data
Detail results are the same no matter what view row is tapped
© 2013 Teamstudio, Inc.
#BLUG
9a. Enforce a ‘fetch’ for content
Configure ‘resetContent’ on detail Mobile Page
Default for ‘resetContent’ = false
© 2013 Teamstudio, Inc.
#BLUG
10. Add More Functionality – Add Button Controls
To show the remaining controls … Drag a Tab Bar control onto the Data View control of the first Mobile Page (Place inside pagerTop facet)
Tab Bar (xe:tabBar) The Tab Bar on it's own displays like a banner across the Mobile page, and is mainly used as a container control for the Tab Bar Button. When the barType property is set to segmentedControl, the tab bar buttons display together as one though separated into their individual buttons. The Tab Bar can also be places inside the Heading.
© 2013 Teamstudio, Inc.
#BLUG
Drag 2 Tab Bar Button controls into the Tab Bar control Name them ‘Create’ and ‘Delete’
Tab Bar Button (xe:tabBarButton) The Tab Bar Button is very much the same as the conventional XPages button (xp:button) but with different styling for XPages Mobile applications.
10a. Add More Functionality – Add Button Controls
© 2013 Teamstudio, Inc.
#BLUG
10b. Add Button Controls
Switch to the Events Pane for the ‘Create’ Button control Select Simple Action – Mobile Select the ‘targetPage’ (Note: no #) Choose transition type
© 2013 Teamstudio, Inc.
#BLUG
10c. Add Button Controls
ALERT!!!! Compilation Error!!! Bug – manually (Source Pane) change the <xe:…> to <xp:..> for the this.action tag and eventHandlertag
<xe:tabBarButton id="tabBarButton1" label="Create"><xe:eventHandler event="onClick" submit="true" refreshMode="complete"> <xe:this.action> <xe:moveTo targetPage="#EmpDetails" transitionType="flip"></xe:moveTo> </xe:this.action></xe:eventHandler></xe:tabBarButton>
<xe:tabBarButton id="tabBarButton1" label="Create"><xp:eventHandler event="onClick" submit="true" refreshMode="complete"> <xe:this.action> <xe:moveTo targetPage="#EmpDetails" transitionType="flip"></xe:moveTo> </xe:this.action></xe:eventHandler></xe:tabBarButton>
© 2013 Teamstudio, Inc.
#BLUG
11. Exercise For Reader (but we’ll do it here)
Add checkbox controls to the rows of data so a user can select multiple entries then remove the documents using the Delete button
Using the ‘showCheckbox’ properties in the DataView control will not work – not supported. Nor will adding a checkbox to the ‘icon’ facet
© 2013 Teamstudio, Inc.
#BLUG
11a. Add Static Line Item Control
1. Remove the DataView control 2. Add a Panel and bind it to the View datasource 3. Add a Repeat Control
a) Set the Collection name to ‘dataRow’
4. Drag a Static Line Item Control in the Repeat Control a) Set the label to: #{dataRow.Name} b) *Set moveTo to:
“EmpDetails&action=openDocument&documentId= #{javascript:dataRow.getDocument().getUniversalID();}”
5. Drag a CheckBox Control ABOVE the Static Line Item Control (otherwise when you tap it the event handler for the line item will fire)
6. Drag Tab Bar and Buttons into the Header/Mobile Page 7. Execute Script on the Onclick event of the Delete Button (Next Slide) 8. Move the checkboxes using CSS
* Note the mobile page link uses & in url instead of ? for first query param
Static Line Item (xe:djxmLineItem) The Static Line Item control is a dojo control mainly used to link to other mobile pages.
© 2013 Teamstudio, Inc.
#BLUG
11b. Add SSJS to delete docs
1. Cannot use simple action to ‘delete selected docs’ as View controls are not supported
2. So first add a scoped var to store the UNID (or remove it) when user checks/unchecks the box
Note: Javascript splice() is not supported in SSJS
© 2013 Teamstudio, Inc.
#BLUG
11c. Add SSJS to delete docs
3. Access the ‘viewScope’ var in the ‘onClick’ event of the button
© 2013 Teamstudio, Inc.
#BLUG
Mobile Controls Project - Summary
Pros: Very fast Included with Designer Fits with the XPage model – great lead in to the
Extension Library Project Officially Supported by IBM Single Page Application model
Cons:
Naming conventions a little inconsistent High coupling (too many dependencies) Must use the mobile theme for full functionality Cannot change default functionality (easily) Need 8.5.3 UP1 on Client and Server Single Page Application model
© 2013 Teamstudio, Inc.
#BLUG
Why Use An Alternative?
Not everyone is on 8.5.3 (client and server)
A few small bugs
Development methodology
Other frameworks are more established
© 2013 Teamstudio, Inc.
#BLUG
Using jQueryMobile
Based on JQuery but separate library
Client side rendering and functional JS library specifically designed for mobile UI
Architected on a “Single Page Application” model or separate pages
“Hijacks” the HTML elements and applies UI and functionality based on the HTML 5 ‘data-role’ property
Comes with a set of pre-defined ‘themes’ and icons
© 2013 Teamstudio, Inc.
#BLUG
1. Setup JQM and Create XPage
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
Either link to the CDN of JQuery and JQM…
© 2013 Teamstudio, Inc.
#BLUG
1a. Setup JQM and Create XPage
Or … Download and add JQuery and JQM as Resources to your XPage These need to be added as ‘Resources – Files’, not ‘Code – Script Libraries as DDE will throw compiler errors?!?! (*Don’t forget JQM Style sheet and images – rename images\*.png)
<xp:this.resources> <xp:script src="/jquery-1.7.2.min.js" clientSide="true"></xp:script> <xp:script src="/jquery.mobile-1.2.0.min.js“ clientSide="true"> </xp:script> <xp:styleSheet href="/jquery.mobile-1.2.0.min.css"></xp:styleSheet> </xp:this.resources>
© 2013 Teamstudio, Inc.
#BLUG
2. Create Basic HTML Required Framework
JQM uses the HTML 5 ‘data-role’ attribute for structure
*Copy to clipboard for repeated use
© 2013 Teamstudio, Inc.
#BLUG
3. Add Header and Basic Data
Add <h1> tag for header text Add standard HTML markup for content - <ul> with a data-role of
listview gives free UI
© 2013 Teamstudio, Inc.
#BLUG
4. Test
Add data-inset=”true” to <ul> tag for rounded corners and padding Add links for more free UI Re-test
© 2013 Teamstudio, Inc.
#BLUG
5. Add Data Source
Create datasource and use Repeat Control inside <ul> tag to display rows
Use SSJS to dynamically create link to Details XPage
© 2013 Teamstudio, Inc.
#BLUG
6. Test
Erk – What happened?????
Lets Use FireFox Firebug (or Safari Inspector) to review generated HTML
© 2013 Teamstudio, Inc.
#BLUG
6a. Test
Culprit – Repeat control has injected an unwanted <div> tag This destroy the expected structure JQM expects for free UI
Note no <div> tag between <ul> and <li>
© 2013 Teamstudio, Inc.
#BLUG
6b. Fix and Re-test
Use Repeat Control property ‘disableOutputTag=true’
© 2013 Teamstudio, Inc.
#BLUG
7. Create Details Page Can use Single Page Application Model if required Copy Basic framework from earlier and add form based datasource Drag in components Add a link with data-rel=“back” to header for free back button
© 2013 Teamstudio, Inc.
#BLUG
9. More Free JQM UI Stuff Add data-filter=”true” to <UL> for free client side search Add data-theme=“<letter>” to elements for theming *data-themes do not
have to be the same. ‘a-e’ are included, you can roll your own
© 2013 Teamstudio, Inc.
#BLUG
10. Add Footer (or not) Add <div> with data-role=“footer” Add link to form based XPage with data-role=“button” Add data-icon=”plus” for free icon
Erk!!! – What is this???
*Can use manual CSS to ‘fix’ this to bottom of screen Or roll your own….
© 2013 Teamstudio, Inc.
#BLUG
Pros: Fast POCs Uses standard web languages (HTML5 structure) Less code generated Clean UI with a ‘theme – builder’ Lots of on-line resources and examples
Cons:
Performance Issues Clashes in some areas with Xpages
- E.g. turns all links into buttons AJAX knowledge required for more advanced apps
JQueryMobile - Summary
© 2013 Teamstudio, Inc.
#BLUG
What is the Unplugged Mobile Controls Project?
“Unplugged” is a mobile development product from Teamstudio
“Unplugged Mobile XPages Controls” is an OpenNTF Project
allowing developers to use Mobile Custom Controls AT NO CHARGE
The controls are supported on mobile browsers so the same code
can run in BOTH mobile web browsers and the ‘Unplugged product‘
with no changes to your code
Created by Rich Sharpe (Teamstudio) and Matt White in Dec 2012
Open architecture Custom Controls
– Designed to be edited for custom purposes
Less dependencies so can work independently (in most cases)
© 2013 Teamstudio, Inc.
#BLUG
Set of 12 reusable controls for common tasks:
* Designed solely for Unplugged
What is the Unplugged Controls Project?
Header Footer
Dialog Flat View
Form (Read Only) Form (Editable)
Accordion (Categorized View)
Independent Scroll Area
View List (Categories)
Gallery Swipe (Lightbox)
Search Workspace*
© 2013 Teamstudio, Inc.
#BLUG
Each control comes with the Design Definition example and Custom Properties to complete:
What is the Unplugged Controls Project?
© 2013 Teamstudio, Inc.
#BLUG
What is the Unplugged Controls Project?
Resulting in a UI for mobile devices from existing apps:
© 2013 Teamstudio, Inc.
#BLUG
1. Download and Set Up
Required files for full set (full set is not mandatory)
© 2013 Teamstudio, Inc.
#BLUG
2. Reference Documentation
Wiki from https://github.com/unplugged/unplugged-controls/wiki PDF from OpenNtf
© 2013 Teamstudio, Inc.
#BLUG
3. Create XPage and Include Resources
For Unplugged the first XPage MUST be UnpMain.xsp
© 2013 Teamstudio, Inc.
#BLUG
4. Drag in Header
Complete the Custom Properties – help is given in the Design Definition in the Design Pane.
© 2013 Teamstudio, Inc.
#BLUG
4a. Drag in Header – Custom Properties
backButtonText: The label which will appear on the Back button (leave blank to hide button)
backButtonURL: The URL which will be opened when the Back button is pressed
search: Defines the type of search you want to enable, options are "none", the searching will be disabled. "local" will search across view data (for example in the unpFlatView). "database" will open a new page and pass a "query" URL Parameter to allow you to search the full database using the unpSearchResults control
searchPage: Only required if the search property is set to "database"
title: the title to display at the top of the page
viewsButton: boolean to decide whether to display the Views button which will slide in the unpViewsList control if you are using it.
© 2013 Teamstudio, Inc.
#BLUG
5. Drag In Footer
Complete the Custom Properties – help is given in the Design Definition in the Design Pane.
© 2013 Teamstudio, Inc.
#BLUG
5a. Drag in Footer – Custom Properties
newDocTarget: point to the XPage which you want to use for creating new documents
Settingsurl: The Unplugged Settings button will appear in the bottom right.
You cannot have the New and Settings buttons display at the same time.
© 2013 Teamstudio, Inc.
#BLUG
6. Drag In Data (and Structure)
In the Source Pane add a <div id=‘content’> tag (with closing) Drag a UnpScrollableArea control in the div In the Design Pane drag an UnpAccordion Control into the Facet
© 2013 Teamstudio, Inc.
#BLUG
6a. Drag In Data (Accordion Control)
Complete the Custom Properties – help is given in the Design Definition
© 2013 Teamstudio, Inc.
#BLUG
6b. Drag in Accordion – Custom Properties
viewName: the name of the view to get data from
xpage: the name of the XPage to open documents in the view with
insetData: gives a rounded look and feel with padding. Default is true.
postion: whether the view will position itself to work in conjunction with the UnpViewsList control (Landscape mode on tablet). By default it will choose left-aligned as if you are not using the UnpViewsList control and will fill the width of the screen.
The 'Load More' function is defaulted to 12 rows before it is rendered. This is editable within the required UnpAccordionViewList.xsp XPage.
This control requires that the view have the first, and only the first, column categorized and up to 2 additional columns of flat data that will be displayed in the row data presented to the user.
Ensure that UnpAccordionViewList Xpage is in the DB
© 2013 Teamstudio, Inc.
#BLUG
7. Test
Back to workspace Categories Search Categorized view Manual Sync New Doc
© 2013 Teamstudio, Inc.
#BLUG
8. Create Doc Data XPage
As stated in the Accordion Custom Property, name the XPage UnpPerson
Create the <div id=‘content’> and closing tag Drag in a UnpScrollArea control
© 2013 Teamstudio, Inc.
#BLUG
8a. Create Doc Data XPage
Switch to Design Pane and Drag a UnpFormViewer control into the unpScrollableArea facet
Complete the Custom Properties
© 2013 Teamstudio, Inc.
#BLUG
8b. Create Data Doc XPage
Drag in UnpFormViewer and complete Custom Properties:
showbuttons: boolean to decide whether to show the standard buttons (Edit, Close)
closexpagename: the name of the XPage to open when the user clicks the close button
formname: the name of the form that documents being displayed are associated with
title: the title to display above the data
editxpagename: the name of the XPage to open when switching to edit more - Note: if this is blank the button will not be rendered
newresponsexpagename: the name of the XPage to open when creating a new Response Doc - Note: If no response docs are relevant, leave this blank and the button will not be rendered
© 2013 Teamstudio, Inc.
#BLUG
8c. Create Doc Data XPage
Drag a Panel into the unpFormViewer Control Facet Add other standard controls in the form of <li> blocks:
© 2013 Teamstudio, Inc.
#BLUG
10. Create Editable Doc
We found that performance was faster creating 2 XPages, one for reading and one for editing rather than having the same XPage for read and write shift into edit mode
Create XPage UnpPersonEdit Add <div id=‘content’></div> structure Drag in UnpScrollableArea Control
© 2013 Teamstudio, Inc.
#BLUG
10a. Create Editable Doc
Drag UnpFormEditor control into the UnpScrollableArea facet Complete the Custom Properties
© 2013 Teamstudio, Inc.
#BLUG
10b. Create Editable Doc XPage
Drag in UnpFormEditor and complete Custom Properties:
showbuttons: boolean setting to control whether to display standard buttons (Save and Cancel)
closexpagename: the name of the XPage to open when clicking the cancel button
viewxpagename: the name of the XPage to open after clicking the Save button
formname: the name of the Notes form which the document will be saved as (for when creating a new document)
title: the title to display at the top of the page
Once the control is added, drag a panel into the editable area which will contain the fields you want to display.
© 2013 Teamstudio, Inc.
#BLUG
10b. Create Editable Doc XPage Cont….
If you want the field to be mandatory, add a styleClass property of "required“
If you want to store a multi value field (for example using a List Box control), the name of the field will need to be prefixed "multi__” (2 underscores)
© 2013 Teamstudio, Inc.
#BLUG
10c. Create Editable Doc
Drag a Panel control (Container Controls) into the UnpFormEditor facet
Add standard form controls
© 2013 Teamstudio, Inc.
#BLUG
12. Test
Take photo on device Replicate to server See attachment on doc in Notes Client
© 2013 Teamstudio, Inc.
#BLUG
Pre-Built Free Standard Templates
Included in this Project are 3 Mobile versions of Standard Domino Templates:
Journal/Notebook
DocLib
Teamroom
Each has a mobile UI for phones and tablets (iOS and Android) with the basic functionality of the Standard templates.
Simply ‘refresh’ current nsf’s with these templates (assuming no custom work has been done to the structure)
*Read Wiki – restriction on Rich Text Fields
© 2013 Teamstudio, Inc.
#BLUG
Pros: Fast Drag and Drop Integrated into Domino Designer Common controls based on actual experience Easy to learn Extendable in look and feel and functionality
Cons:
Designed for Unplugged so may need a few tweaks for Mobile Web Development
Fixed look and feel (this may change) Notes Designer 8.5.3 and Server required
Unplugged Controls - Summary
© 2013 Teamstudio, Inc.
#BLUG
1. Designing For Tablets AND Phones Simultaneously: Use The @media CSS
2. Date format yyyy–MM–dd : For Native iPhone Date Spinner
3. Form Decomposition (use pen and paper): Simple Design Techniques For Existing Notes Apps
4. Learn JQuery – Tons Of Free Plugins: Don’t Recreate The Wheel
5. For Signature Capture Use Declan Lynch’s Control In OpenNTF: More And More Mobile Apps Require This
5 Quick Tips For Mobile Development
© 2013 Teamstudio, Inc.
#BLUG
1. Designing for Tablets And Phones Simultaneously
Can use the User-Agent to detect device
- Info is sent in header about requesting agent
Client side JavaScript uses userAgent property of the navigator object: – - navigator.userAgent
Xpages relies on SSJS so this cannot be used for pre-processing
- Luckily the XPages global context object does the same thing
Compute the value of a label as: – - “The device/browser accessing this is: “ + context.getUserAgent().getUserAgent().
© 2013 Teamstudio, Inc.
#BLUG
Depending on the browser/device the result will be:
iPhone:
Mozilla/5.0 (iPhone; U: CPU iPhone OS 4_3_3 like Mac OS X; en-us)
iPad:
Mozilla/5.0 (iPad; U: CPU iPhone OS 4_3_3 like Mac OS X; en-us)
Android:
Mozilla/5.0 (Linux; U: Android 2.3.1; en-us) Applewebkit/ 533.1
BlackBerry:
BlackBerry9700/5.0.0.545 Profile/MIDP-2.1 Configuration/ CLDC-1.1
1. Designing for Tablets And Phones Simultaneously
© 2013 Teamstudio, Inc.
#BLUG
Now we can search for a matching string and redirect users in a ‘beforePageLoad’ event:
<xp:this.beforePageLoad>
<xp:executeScript>
<xp:this.script><![CDATA[#{javascript:
var uAgent = context.getUserAgent().getUserAgent();
if((uAgent.match(“iPad") != null) || (uAgent.match(“Android 3") != null)){
context.redirectToPage("/TabletUI.xsp");
}]]>
<xp:this.script>
<xp:executeScript>
<xp:this.beforePageLoad>
1. Designing for Tablets And Phones Simultaneously
© 2013 Teamstudio, Inc.
#BLUG
However there is a problem with this line:
if((uAgent.match(“iPad") != null) || (uAgent.match(“Android 3") != null)){
1. Designing for Tablets And Phones Simultaneously
Android 2.x is for phones and Android 3.x is for tablets but Android 4.x is for both phones and tablets!
Better to use CSS media query
© 2013 Teamstudio, Inc.
#BLUG
CSS Media Query can display content based on screen width or orienatation
Syntax for Xpage (for screen width)
<xp:styleSheet media=“screen and (max-width:900px)” href=“/TabletPortrait.css”>
<xp:styleSheet media=“screen and (min-width:901px)” href=“/TabletLandscape.css”>
Syntax for Xpage (for orientation) <xp:styleSheet media=“(orientation: portrait)” href=“/TabletPortrait.css”>
<xp:styleSheet media=“(orientation: landscape)” href=“/TabletLandscape.css”>
1. Designing for Tablets And Phones Simultaneously
© 2013 Teamstudio, Inc.
#BLUG
Can use the following syntax in one CSS file (for orientation example) @media all and (orientation: portrait){
#idOfElement{
CSS here
}
}
@media all and (orientation: landscape){
#idOfElement{
CSS here
}
}
1. Designing for Tablets And Phones Simultaneously
© 2013 Teamstudio, Inc.
#BLUG
Mainly for phones
Fairly straight forward: Too many form fields = cluttered screen!
Select the summary data relevant to the user and add other, secondary data, to another page
Create XPages with data sources and navigate using the doc’s UNID
3. Form Decomposition
© 2013 Teamstudio, Inc.
#BLUG
With Forms that include LOTS of fields or tabs for pages copy the idea but more minimalistic
Print the form and use a pen link relevant parts that are key and relegate others to ‘sub-screens’
3. Form Decomposition
© 2013 Teamstudio, Inc.
#BLUG
In the first Xpage of the ‘split’ form add the following to the afterPageLoad event of the XPage:
var docThis=docExpenseInfo.getDocument();
sessionScope.put(“TargetUNID", docThis.getUniversalID());
Add a Button Control - onclick event: – - open the next Xpage in edit mode with the target document ID computed
sessionScope.get(“TargetUNID”)
3. Form Decomposition
© 2013 Teamstudio, Inc.
#BLUG
Computed value set to: sessionScope.get(TargetUNID);
In the target Xpage containing more data, set the Default Action to Edit the document and add the Javascript to get the UNID of the doc required to edit
3. Form Decomposition
© 2013 Teamstudio, Inc.
#BLUG
4. Learn JQuery – Tons Of Free Plugins
As Shown in Examples – very effective
Great documentation overall – thousands of reviewers
Similar structure for all Plug-ins
Learn one and learn to use them all
Thousands of plugins
<body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script> $(document).ready(function(){ $(“ELEMENT").EVENT(function(){ FUNCTION OVERRIDE }); }); </script> … </body>
© 2013 Teamstudio, Inc.
#BLUG
4. Learn JQuery – Tons Of Free Plugins One example…
Calendar Plugin - http://arshaw.com/fullcalendar/
© 2013 Teamstudio, Inc.
#BLUG
4. Learn JQuery – Tons Of Free Plugins Import Resources
Create Structure as defined in doc
© 2013 Teamstudio, Inc.
#BLUG
4. Learn JQuery – Tons Of Free Plugins Add Script (as defined in doc)
Hard coded elements in array but this could be computed in the beforePageLoad event
© 2013 Teamstudio, Inc.
#BLUG
5. Signature Capture Getting more common
Version in OpenNTF by Declan Lynch
© 2013 Teamstudio, Inc.
#BLUG
5. Signature Capture Run Home.xsp
Click ‘New Signature’
Create Signature and Save
© 2013 Teamstudio, Inc.
#BLUG
5. Signature Capture Real work is in the Custom Control – simply drag into your app
The List is a view based on oneUI theme
For use in Unplugged change lines 65 and 145 as dojo is not supported – use JSON instead
© 2013 Teamstudio, Inc.
#BLUG
Summary
Basic Planning Principles
Mobilised an app 3 different ways:
Mobile Controls Project
JqueryMobile
Unplugged Mobile Controls
Covered Some Handy Dev Tips From Real Life Experience
© 2013 Teamstudio, Inc.
#BLUG
Thank You! - Resources
unplugged.teamstudio.com
– Also more videos on Mobile Web Dev (not only Unplugged)
jquerymobile.com
openNTF.org
John Wargo – The View – Series of Articles covering MEAPs
http://developer.android.com/design/index.html
demos.dojotoolkit.org/demos/mobileGallery/
Twitter: @arshad101
Email: [email protected]