Mobilising your app: 3 different ways! - Engage: Welcomeengage.ug/engage.nsf/pages/2013_Slides_c/$file/BLUG_Mobilisingyour... · –jQuery© 2012 The jQuery Foundation –Unplugged

© 2013 Teamstudio, Inc.

#BLUG

Mobilising your app: 3 different ways!

Arshad Khalid @arshad101 March 21, 2013


#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!


#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


#BLUG

Planning Considerations From the field


#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


#BLUG


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”


#BLUG


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…


#BLUG

What is the Mobile Controls Project?


#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


#BLUG

Mobilising A Simple App Using The XPages Mobile Controls


#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


#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


#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)


#BLUG

Click ‘Add Zip/Jar Location’

1d. Installing the Extension Library (From OpenNTF)


#BLUG

Select the file updateSite-designer.zip

Click ‘Finish’

1d. Installing the Extension Library (From OpenNTF)


#BLUG

De-Select the Domino Wink features

1e. Installing the Extension Library (From OpenNTF)


#BLUG

Install the plugins and then restart Designer

1f. Installing the Extension Library (From OpenNTF)


#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


#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


#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

http://www-10.lotus.com/ldd/ddwiki.nsf/dx/XPages_Extension_Library_Deployment






#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)


#BLUG

2. Create XPage and use Single Page App Model


#BLUG

2a. Set The extlib library


#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


#BLUG


Drag MobilePage controls onto the singlePageApp control facet


#BLUG


Note: the Page Name is in the ‘All Properties – pageName’ not ‘Mobile Page – Name’


#BLUG


Select the Single Page App Control and complete the selectedPageName property with the page to display when the app is first opened


#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


#BLUG

3. Add Page Header Bars

Drag Heading controls onto the Mobile Page facets


#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


#BLUG

4. Add View Data

Drag a Data View control from the Extension Lib Palette


#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)


#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


#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


#BLUG

7. (Re-)Test Our Work

Theme detects device and renders screen appropriately (See next slide)


#BLUG

Employees on iPhone and Android

Not yet implemented

7a. (Re-)Test Our Work


#BLUG

8. Create Form Data

Drag a Panel control onto the second Mobile Page facet Define a standard Form based Datasource Drag in controls


#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.


#BLUG

9. Test For Cached Data

Detail results are the same no matter what view row is tapped


#BLUG

9a. Enforce a ‘fetch’ for content

Configure ‘resetContent’ on detail Mobile Page

Default for ‘resetContent’ = false


#BLUG

9c. Re-Test For Cached Data

Results are now as expected


#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.


#BLUG

10. Add More Functionality – Add Button Controls


#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


#BLUG

10a. Add More Functionality – Add Button Controls


#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


#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>


#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


#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.


#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


#BLUG

11c. Add SSJS to delete docs

3. Access the ‘viewScope’ var in the ‘onClick’ event of the button


#BLUG

12. Test


#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


#BLUG

Using An Alternative Framework – JQuery Mobile


#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


#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


#BLUG

jQueryMobile.com


#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…


#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>


#BLUG

2. Create Basic HTML Required Framework

JQM uses the HTML 5 ‘data-role’ attribute for structure

*Copy to clipboard for repeated use


#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


#BLUG

4. Test

Add data-inset=”true” to <ul> tag for rounded corners and padding Add links for more free UI Re-test


#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


#BLUG

6. Test

Erk – What happened?????

Lets Use FireFox Firebug (or Safari Inspector) to review generated HTML


#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>


#BLUG

6b. Fix and Re-test

Use Repeat Control property ‘disableOutputTag=true’


#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


#BLUG

8. Test


#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


#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….


#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


#BLUG

Using the Unplugged Xpages Mobile Controls Project


#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)


#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*


#BLUG

Each control comes with the Design Definition example and Custom Properties to complete:



#BLUG


Resulting in a UI for mobile devices from existing apps:


#BLUG

1. Download and Set Up


#BLUG

1. Download and Set Up

Required files for full set (full set is not mandatory)


#BLUG

2. Reference Documentation

Wiki from https://github.com/unplugged/unplugged-controls/wiki PDF from OpenNtf


#BLUG

3. Create XPage and Include Resources

For Unplugged the first XPage MUST be UnpMain.xsp


#BLUG

4. Drag in Header

Complete the Custom Properties – help is given in the Design Definition in the Design Pane.


#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.

https://github.com/unplugged/unplugged-controls/wiki/Unpflatview

https://github.com/unplugged/unplugged-controls/wiki/Unpsearchresults

https://github.com/unplugged/unplugged-controls/wiki/Unpviewslist


#BLUG

5. Drag In Footer

Complete the Custom Properties – help is given in the Design Definition in the Design Pane.


#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.


#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


#BLUG

6a. Drag In Data (Accordion Control)

Complete the Custom Properties – help is given in the Design Definition


#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

https://github.com/unplugged/unplugged-controls/wiki/Unpviewslist


#BLUG

7. Test

Back to workspace Categories Search Categorized view Manual Sync New Doc


#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


#BLUG

8a. Create Doc Data XPage

Switch to Design Pane and Drag a UnpFormViewer control into the unpScrollableArea facet

Complete the Custom Properties


#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


#BLUG

8c. Create Doc Data XPage

Drag a Panel into the unpFormViewer Control Facet Add other standard controls in the form of <li> blocks:


#BLUG

8d. Create Doc Data XPage

Add image with error handling


#BLUG

9. Test (Han Solo will be the only person with a photo in test DB)


#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


#BLUG

10a. Create Editable Doc

Drag UnpFormEditor control into the UnpScrollableArea facet Complete the Custom Properties


#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.


#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)


#BLUG

10c. Create Editable Doc

Drag a Panel control (Container Controls) into the UnpFormEditor facet

Add standard form controls


#BLUG

11. Add Camera Integration

Drag a File Upload Control into the Panel


#BLUG

12. Test

Take photo on device Replicate to server See attachment on doc in Notes Client


#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


#BLUG

Journal/Notebook Screenshots


#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


#BLUG

Quick Tips for Mobile Development


#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


#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().


#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



#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>



#BLUG

However there is a problem with this line:

if((uAgent.match(“iPad") != null) || (uAgent.match(“Android 3") != null)){


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


#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”>



#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

}

}



#BLUG

2. Date format yyyy–MM–dd


#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


#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’



#BLUG

…or too many input fields



#BLUG

Could this be split for workflow?



#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”)



#BLUG



#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



#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>


#BLUG

4. Learn JQuery – Tons Of Free Plugins One example…

Calendar Plugin - http://arshaw.com/fullcalendar/


#BLUG

4. Learn JQuery – Tons Of Free Plugins Download Zip Files and extract


#BLUG

4. Learn JQuery – Tons Of Free Plugins Download Zip Files and extract


#BLUG

4. Learn JQuery – Tons Of Free Plugins Import files into Designer


#BLUG

4. Learn JQuery – Tons Of Free Plugins Import Resources

Create Structure as defined in doc


#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


#BLUG

4. Learn JQuery – Tons Of Free Plugins Test


#BLUG

5. Signature Capture Getting more common

Version in OpenNTF by Declan Lynch


#BLUG

5. Signature Capture Download zip file and extract

Open nsf


#BLUG

5. Signature Capture Run Home.xsp

Click ‘New Signature’

Create Signature and Save


#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


#BLUG

5. Signature Capture Used in a real life example of Health and Safety


#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


#BLUG

Questions?


#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]

Documents

Mobilising your app: 3 different ways! - Engage: Welcomeengage.ug/engage.nsf/pages/2013_Slides_c/$file/BLUG_Mobilisingyour... · –jQuery© 2012 The jQuery Foundation –Unplugged