Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your...
Transcript of Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your...
![Page 1: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/1.jpg)
Using XPages to easily mobilize your existing
Domino AppsTim Davis
The Turtle Partnership Ltd
Tuesday, 3 July 12
![Page 2: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/2.jpg)
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
![Page 3: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/3.jpg)
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
![Page 4: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/4.jpg)
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
![Page 5: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/5.jpg)
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
![Page 6: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/6.jpg)
iOS Web Development
• Dashcode
• A very nice set of libraries and wysiwyg tools
• Made the app look great
Tuesday, 3 July 12
![Page 7: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/7.jpg)
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
![Page 8: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/8.jpg)
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
![Page 9: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/9.jpg)
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
![Page 10: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/10.jpg)
What now?
• For new apps, what would we use to mobilize them?
• XPages
• Extension Library
• Specifically the Mobile Controls
Tuesday, 3 July 12
![Page 11: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/11.jpg)
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
![Page 12: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/12.jpg)
Brief Introduction to XPages
• What are XPages?
• How are they different to Domino web pages?
• Why are developers excited?
Tuesday, 3 July 12
![Page 13: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/13.jpg)
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
![Page 14: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/14.jpg)
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
![Page 15: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/15.jpg)
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
![Page 16: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/16.jpg)
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
![Page 17: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/17.jpg)
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
![Page 18: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/18.jpg)
XPage Source Code• This is from the Discussions template
• XML can be quite complex
•
Tuesday, 3 July 12
![Page 19: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/19.jpg)
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
![Page 20: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/20.jpg)
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
![Page 21: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/21.jpg)
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
![Page 22: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/22.jpg)
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
![Page 23: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/23.jpg)
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
![Page 24: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/24.jpg)
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
![Page 25: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/25.jpg)
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
![Page 26: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/26.jpg)
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
![Page 27: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/27.jpg)
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
![Page 28: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/28.jpg)
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
![Page 29: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/29.jpg)
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
![Page 30: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/30.jpg)
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
![Page 31: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/31.jpg)
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
![Page 32: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/32.jpg)
Application Properties
Tuesday, 3 July 12
![Page 33: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/33.jpg)
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
![Page 34: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/34.jpg)
Package Explorer
Tuesday, 3 July 12
![Page 35: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/35.jpg)
xsp.properties
Tuesday, 3 July 12
![Page 36: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/36.jpg)
mobile pagePrefix
Tuesday, 3 July 12
![Page 37: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/37.jpg)
Lets build our mobile app
• Create an XPage
• Use the 'm_' prefix
• E.g. 'm_mobile'
Tuesday, 3 July 12
![Page 38: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/38.jpg)
It looks like this
• Some basic XML, with no content yet
•
Tuesday, 3 July 12
![Page 39: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/39.jpg)
Adding Controls
• Add a Single Page Application control.
• Drag from the Controls palette
• Shows as XML tags
•
Tuesday, 3 July 12
![Page 40: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/40.jpg)
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
![Page 41: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/41.jpg)
Add a Page Heading
• Insert a Page Heading control into the Mobile Page, give it a label.
•
Tuesday, 3 July 12
![Page 42: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/42.jpg)
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
![Page 43: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/43.jpg)
Mobile Home Page
• Demo
Tuesday, 3 July 12
![Page 44: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/44.jpg)
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
![Page 45: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/45.jpg)
Linking to our View
• Demo
Tuesday, 3 July 12
![Page 46: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/46.jpg)
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
![Page 47: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/47.jpg)
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
![Page 48: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/48.jpg)
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
![Page 49: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/49.jpg)
Displaying our view
• Demo
Tuesday, 3 July 12
![Page 50: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/50.jpg)
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
![Page 51: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/51.jpg)
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
![Page 52: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/52.jpg)
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
![Page 53: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/53.jpg)
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
![Page 54: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/54.jpg)
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
![Page 55: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/55.jpg)
Displaying a Document
• Demo
Tuesday, 3 July 12
![Page 56: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/56.jpg)
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
![Page 57: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/57.jpg)
Redirecting to our Mobile Xpage
Tuesday, 3 July 12
![Page 58: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/58.jpg)
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
![Page 59: Using XPages to easily mobilize your existing Domino Apps · Using XPages to easily mobilize your existing Domino Apps Tim Davis The Turtle Partnership Ltd Tuesday, 3 July 12. Agenda](https://reader030.fdocuments.in/reader030/viewer/2022040220/5e1f8d6a4990fb5d3b52b048/html5/thumbnails/59.jpg)
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