Using XPages to easily mobilize your existing

Domino AppsTim Davis

The Turtle Partnership Ltd

Tuesday, 3 July 12

Agenda

• Evolution of mobile interfaces

• How XPages helps

• Brief introduction to XPages

• Implementing the Extension Library

• Building an example mobile app

Tuesday, 3 July 12

How Mobile Interfaces Evolved

• Early mobile solutions for Domino apps targeted the BlackBerry

• Data plans were poor, and mobile browsers were not very good

• Avoided web-based mobile solutions

• Offline native client apps

Tuesday, 3 July 12

BlackBerry Development

• BlackBerry apps developed in Java©.

• Compiled

• Installed on device

• The app downloaded data using http streams and stored locally

• The only Domino development needed was to build the views.

• All the intelligence is in the app on the device.

Tuesday, 3 July 12

iOS Development

• When the iPhone arrived, we had a better browser, and very nice-looking native apps.

• Some initial limitations in the apps, eg no push, and limited integration with the PIM apps on the device.

• Apple provided a very nice web UI toolkit (Dashcode)

Tuesday, 3 July 12

iOS Web Development

• Dashcode

• A very nice set of libraries and wysiwyg tools

• Made the app look great

Tuesday, 3 July 12

iOS Development as a Challenge

• The iOS development was a challenge as Objective-C was new to us.

• Also a whole new set of APIs and ways of thinking about presentation.

• The Apple ‘App Police’ take their job of editing the UI very seriously.

Tuesday, 3 July 12

Better WiFi

• Better WiFi coverage and data plans, together with better devices means browser solutions become feasible

• Still limited by clumsy development solutions

• Third-party js libraries

Tuesday, 3 July 12

Common problem of these approaches

• The main problem with all of these approaches is that the intelligence is largely on the device, or in libraries

• Each platform required its own overhead in terms of learning a new toolset, language, API, etc.

• None of it is Domino

Tuesday, 3 July 12

What now?

• For new apps, what would we use to mobilize them?

• XPages

• Extension Library

• Specifically the Mobile Controls

Tuesday, 3 July 12

Why use XPages for mobilizing apps?

• Its back to Domino. Supported by IBM.

• No more specialized third-party developments.

• Any learning you do is kept within the Domino environment, and is therefore more future-proof.

• Readily developed as an extension to existing Domino apps (web or otherwise).

• Looks great on the devices.

• It is a perfect case for XPages development

• I.E. an existing Domino app requiring a facelift.

Tuesday, 3 July 12

Brief Introduction to XPages

• What are XPages?

• How are they different to Domino web pages?

• Why are developers excited?

Tuesday, 3 July 12

What are XPages?

• A XPage is still essentially a web page

• It is a different kind of design element in a Domino app, sits alongside Forms, Views, Folders, etc.

• It has many more capabilities than a Form

• Allows you to do sophisticated Web UI interfaces and effects very easily

Tuesday, 3 July 12

How are XPages different?

• The main difference is that an XPage is separate from the Domino documents and views, but can link to anything

• Has powerful web UI tools and concepts built in

• Can display and act on data from multiple sources at once

• Very flexible

Tuesday, 3 July 12

Why developers like XPages

• If you are familiar with standard web development, eg HTML, CSS and JavaScript then it is easy to get started

• Everything is about putting things inside panels (boxes), and panels inside panels, so everything is structured nicely

• Cool effects that took loads of JavaScript code or third-party libraries can be setup with a few clicks

Tuesday, 3 July 12

More nice things

• The source code is XML, so it looks like most other modern web development languages

• This XML is text, so can be copied and pasted

• Code elements can be bundled into ‘Controls’ and reused

Tuesday, 3 July 12

Starting with XPages

• If you or your developers are getting started with XPages, then they can get some nice effects by copying XPages from the Discussions template

• A good way to get a feel for what they can do and produce something fairly quickly

Tuesday, 3 July 12

XPage Source Code• This is from the Discussions template

• XML can be quite complex

•

Tuesday, 3 July 12

Mobile Interface with XPages

• Mobile devices have their own needs/constraints/expectations of behavior

• Luckily, there are resources out there to help you

• IBM provides the XPages Extension Library

• Mobile Controls

Tuesday, 3 July 12

What is the Extension Library?

• A fully-supported add-on

• Gives you a huge range of new XPages controls

• Including a set of mobile-specific controls

• These allow you to display mobile-style pages, lists/views, transitions and navigation

Tuesday, 3 July 12

Where do I get them?

• If you are on 8.5.3 they are included in the recent Upgrade Pack 1

• You can download this from Passport Advantage using the part number CI5GIEN

• Also available from openntf.org

• http://www.openntf.org

• http://extlib.openntf.org

• Loads of supporting documentation, blogs, videos, etc

Tuesday, 3 July 12

How do you use the mobile controls?

• (Briefly)

• Install the extension library in your Domino Designer Client and on your Domino server.

• Create your mobile XPages using the mobile controls. Very little coding required.

• Use a naming prefix to have the included mobile theme applied to your mobile XPages.

• Use getUserAgent() to point mobile devices at your mobile XPages.

Tuesday, 3 July 12

Installing the Upgrade Pack (8.5.3)

• Download the Upgrade Pack, CI5GIEN.

• Unzip. There is a folder for each install (Client-only, Designer, Domino)

• For Designer, shut down Notes, run the installer.

• You will see the Extension Library and the Mobile shelves in your Designer’s Controls palette

• For Domino, shut down the server, run the installer.

Tuesday, 3 July 12

8.5.2 or earlier (Designer)

• Download the Extension Library from openntf.org

• In Designer, go to File – Application – Install

• Select 'Search for new features to install'

• Select the zip file: updateSiteOpenNTF-designer.zip

• Select all the features

• Accept the licence

• Select “install” for each unsigned plugin

• Restart Domino Designer and Notes

Tuesday, 3 July 12

Installing the Extension Library (Domino)

• Unpack the updateSiteOpenNTF.zip to domino\workspace\applications\eclipse in the Domino data directory

• Restart the Domino server, or stop and restart the HTTP task

• Test it installed correctly in the console:

• tell http osgi ss com.ibm.xsp.extlib

• Should return 'RESOLVED'

Tuesday, 3 July 12

Building a mobile app in XPages

• We are going to build a simple mobile interface

• With a list view and mobile pages

• Demo

Tuesday, 3 July 12

What are the Mobile Controls?

• Single Page Application

• Mobile Page

• Page Heading

• Rounded List

• Static Line Item

• Tab Bar

• Tab Bar Button

Tuesday, 3 July 12

Overview of structure

• The mobile app sits in a single XPage.

• In this XPage, you have one ‘Single Page Application’ control. This contains your mobile app.

• Within the ‘Single Page Application’ control, you have multiple ‘Mobile Page’ controls.

Tuesday, 3 July 12

Overview, continued

• Only one Mobile Page displays at a time

• All on one XPage so you can get all the smooth transitions.

• Within each Mobile Page, you have a Page Heading, Tab Bar, Rounded List and other controls such as dataViews, panels, labels, etc

Tuesday, 3 July 12

Setting up your application

• A bit of preparation to get your Domino app ready for the new controls

• Enable the Extension Library

• Prefix for the mobile theme

Tuesday, 3 July 12

Enable Extension Library

• Your app needs to have the Extension Library enabled

• This is done automatically when you drag your first extension control into an XPage

• Also in Application Properties – Advanced – XPage Libraries

Tuesday, 3 July 12

Application Properties

Tuesday, 3 July 12

Mobile Theme

• Set the prefix for the mobile theme

• Tells the app to override and use the mobile theme for these pages.

• Open Package Explorer view, go to WebContent - WEB-INF - xsp.properties

• Add xsp.theme.mobile.pagePrefix=m_

• (Can use any prefix, just make sure doesn’t clash)

Tuesday, 3 July 12

Package Explorer

Tuesday, 3 July 12

xsp.properties

Tuesday, 3 July 12

mobile pagePrefix

Tuesday, 3 July 12

Lets build our mobile app

• Create an XPage

• Use the 'm_' prefix

• E.g. 'm_mobile'

Tuesday, 3 July 12

It looks like this

• Some basic XML, with no content yet

•

Tuesday, 3 July 12

Adding Controls

• Add a Single Page Application control.

• Drag from the Controls palette

• Shows as XML tags

•

Tuesday, 3 July 12

Add a Mobile Page

• Insert a Mobile Page control.

• Give it the pageName “homePage”

• pageName is a neat way to get at our mobile pages within an XPage

Tuesday, 3 July 12

Add a Page Heading

• Insert a Page Heading control into the Mobile Page, give it a label.

•

Tuesday, 3 July 12

Point to our homePage

• Give the Single Page Application control the property: selectedPageName=“homePage”

• This will be the default page (i.e. our Mobile Page control)

• Let's see how that looks

Tuesday, 3 July 12

Mobile Home Page

• Demo

Tuesday, 3 July 12

Adding links to our Home Page

• Add a Static Line Item control into our Mobile Page

• Give it a label, “All Sessions”

• Give it a moveTo target, “#viewPage”

• This will be our next mobile page, our view list

• We use the # in our moveTo target because we are moving within the same XPage

Tuesday, 3 July 12

Linking to our View

• Demo

Tuesday, 3 July 12

Building a View Page• Still in the same XPage, and in the same Single

Page Application control

• Add another Mobile Page control

• Give it the pageName “viewPage”

• So our home page link will now point to it

• Also set preload=”true” and resetContent=”true”

• For performance and to get latest data every time

Tuesday, 3 July 12

View Page Heading

• Add a Page Heading control within our new view Mobile Page

• Give it a label “All Sessions”

• Also set back=”Back” and moveTo=”homePage”

• Puts a nice back button in the heading

Tuesday, 3 July 12

Adding the view data• Add a dataView control into our viewPage Mobile Page (new

control)

• A simpler view/list control

• Point it at our Domino view “MobileView”

• Set the pageName to “#docPage”

• This is the page we will use to open our documents

• Set a large number of rows

• Could also add Next and Previous paging buttons if you want

• Add a summaryColumn to display session title in each row

Tuesday, 3 July 12

Displaying our view

• Demo

Tuesday, 3 July 12

Building a Document Page

• Still in the same XPage, and in the same Single Page Application control

• Add another Mobile Page control

• Give it the pageName “docPage”

• So our view page row links will now use it to open docs

• Also set preload=”true” and resetContent=”true”

• So it displays the data for each new doc opened

• Add a Page Heading control within our new Mobile Page

• Give it a label “Session Details”

• Also set back=”Back” and moveTo=”homePage”

• See how it is the same as other page so far

Tuesday, 3 July 12

Document Page Heading

• Add a Page Heading control within our new Mobile Page

• Give it a label “Session Details”

• Also set back=”Back” and moveTo=”viewPage”

• See how it is the same as other page so far

Tuesday, 3 July 12

Adding Document Content

• Here we can use a mix of regular XPages controls and new ones

• Add a panel container

• Link it to the document data via the dominoDocument data element

• Give the var a name “document1” so we can refer to it

Tuesday, 3 July 12

Adding Display Fields• Add a Rounded List control

• This has the nice curved edges

• Inside this we can put several labels and set the value of each to a value from the document1 data element:

• value="#{document1.sessiontitle}"

• If this was an editable form, we could use inputText controls

Tuesday, 3 July 12

Adding Rich Text

• For displaying simple rich text elements, we can let the text renderer handle it.

• Set escape to “false” so it renders the rich text for display

Tuesday, 3 July 12

Displaying a Document

• Demo

Tuesday, 3 July 12

Redirecting to our Mobile Xpage

• Currently, can only specify different XPages to use for Notes Client and Browser

• To ensure that mobile devices should use our new Mobile XPage, use a landing XPage to redirect based on the browser client details

• Add server-side js to the afterPageLoad of this landing page

• Using context.getUserAgent() and context.redirectToPage

Tuesday, 3 July 12

Redirecting to our Mobile Xpage

Tuesday, 3 July 12

Mobile Controls - Summary

• The XPages Extension Library Mobile Controls are supported by IBM

• Install library into your Domino Designer client and onto Domino server

• Mobile apps require very little coding

• Your mobile app sits inside a single XPage

• Multiple Mobile Page controls inside one Single Page Application control

• Add Page Header controls, with navigation buttons

• Link between the Mobile Page controls using moveTo, and #pageName

• Display data using combination of new mobile and familiar controls

• Add a landing XPage to redirect to mobile XPage based on browser

Tuesday, 3 July 12

Mobile Controls - Resources

• OpenNTF.org

• http://www.openntf.org

• http://extlib.openntf.org – videos, examples, etc

• IBM Wiki

• http://www-10.lotus.com/ldd/ddwiki.nsf/xpViewCategories.xsp?lookupName=Domino%20Designer%20XPages%20Extension%20Library

Tuesday, 3 July 12