Show110 | Using the XPages Extension Library for the Real World

Show110 Using the XPages
Extension Library for the Real
World
Paul Hannan | Software Engineer | IBM
Tony McGuckin | Software Engineer | IBM

Date: Wednesday, January 18th 2012
Time: 04:30 PM - 06:15 PM

© 2012 IBM Corporation

Legal disclaimer
© IBM Corporation 2012. All Rights Reserved.
The information contained in this publication is provided for informational purposes only. While efforts were made to
verify the completeness and accuracy of the information contained in this publication, it is provided AS IS without
warranty of any kind, express or implied. In addition, this information is based on IBM’s current product plans and
strategy, which are subject to change by IBM without notice. IBM shall not be responsible for any damages arising
out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this
publication is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its
suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of
IBM software.
References in this presentation to IBM products, programs, or services do not imply that they will be available in all
countries in which IBM operates. Product release dates and/or capabilities referenced in this presentation may
change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to
be a commitment to future product or feature availability in any way. Nothing contained in these materials is
intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any
specific sales, revenue growth or other results.
IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino, Quickr, Sametime, WebSphere, UC2, PartnerWorld and
Lotusphere are trademarks of International Business Machines Corporation in the United States, other countries, or
both. Unyte is a trademark of WebDialogs, Inc., in the United States, other countries, or both.
All references to Renovations refer to a fictitious company and are used for illustration purposes only.

2 | © 2012 IBM Corporation

IBM’s statements regarding its plans, directions, and intent are subject to change or withdrawal
without notice at IBM’s sole discretion.

Information regarding potential future products is intended to outline our general product direction
and it should not be relied on in making a purchasing decision.

The information mentioned regarding potential future products is not a commitment, promise, or
legal obligation to deliver any material, code or functionality. Information about potential future
products may not be incorporated into any contract. The development, release, and timing of any
future features or functionality described for our products remains at our sole discretion.


Agenda
■ 1. Introduction
■ 2. Installation and Deployment
■ 3. Application Layout Control
■ 4. Data View Control
■ 5. Mobile
■ 6. Q&A


About The Speakers
■ Tony McGuckin – Software Engineer – IBM, Dublin, Ireland
─ With IBM since 2006
– IBM® Lotus® Notes® Domino® XPages server runtime

• Product & Template development
• Customer Enablement & Proof-of-Concept development
– Co-creator of global XPages@... Workshops
─ IBM Lotus® OneUI Adoption Workgroup
─ Co-author of Mastering XPages and XPages Portable Command Guide books
■ Paul Hannan – Software Engineer – IBM, Dublin, Ireland
─ Is a senior software engineer and XPager in the IBM Ireland software lab in Dublin and is
also a member of the IBM® Lotus® Notes® Domino® XPages runtime team. He has
worked on XPages from the beginning and before that too when the same technology was
XFaces in Lotus Component Designer®. Previous to this he worked on JSF tooling for
Rational Application Developer®, and before that on Notes Domino 6 back to Notes 3.3x
and Lotus® ScreenCam®.
─ Twitter: @pdhannan
─ Linkedin: http://www.linkedin.com/pub/paul-hannan/10/3bb/4b8
─ Team Blog: www.xpagesdev.com
─ Lead author of the XPages Extension Library book(April 2012)

Quick Survey
■ How many of you know about XPages?
■ How about the XPages Extension Library (ExtLib)?
■ How many of you have used the ExtLib to build apps?
■ Built apps that are now on production servers?
■ How many are using the TeamRoom XL
■ How built mobile apps?

| © 2012 IBM Corporation

Introduction
■ What is this session about?
─ Show and tell how the XPages Extension Library is used in the production ready TeamRoom XL
and Discussion XL templates (and DocLib XL – the big 3).
─ Reverse engineering an XPages app that uses the XPages Extension Library
─ Learn about the next generation of XPages controls
─ Learn how to build XPages applications more effectively, build them faster and perform better; all
using real life examples.
─ Learn how to bring your applications beyond modernity with XPages Extension Library and will
into the future.


Introduction
■ What is the Extension Library
─ A set of Java plug-ins that greatly extend XPages runtime functionality
─ Works on web, Notes® client and mobile devices
─ Installs on top of Lotus® Notes® Domino® 8.5.3
─ Contains cool new IBM® Lotus® Notes® Domino® Designer® enhancements
─ A fully accessible runtime library and templates
─ Enhanced Lotus Notes TeamRoom and Lotus Notes Discussion templates
─ Online documentation
─ Runtime is localized
─ Built to IBM globalization standards
─ Implemented using the XPages Extensibility API
─ IBM Lotus Notes Domino 8.5.3® Upgrade Pack 1® release is officially supported by IBM
─ Source code included
■ No longer a play thing; this is production ready


Introduction
■ What are “Upgrade Packs” | UP1?
─ Additional new features to existing Notes Domino releases
■ Customers on active maintenance can download from IBM Passport
Advantage®
■ IBM Business Partners can download from Partnerworld Software Access
Catalog™
■ Download 1 zip for UP1 which contains install kits for the following
─ Lotus Notes® client
– XPages Extension Library runtime
─ Lotus Domino® Designer®
– XPages Extension Library runtime (for local preview)
– Designer plugins for working with XPages Extension Library
─ Lotus Domino® & IBM XWork® Server
– XPages Extension Library runtime
– Domino Access Services (REST APIs)


Case Study: Quick Tour of the TeamRoom XL


Case Study: TeamRoom XL
■ New TeamRoom XL from Lotus® Notes® Domino® 8.5.3 UP1


■ Using the OneUI Application Layout
─ Consistent with Lotus UX. Title bar at the top, navigation on the left

■


■ The new “Home” page
─ Showing Recent Activities – Unified Experience ; a “Project Vulcan”- live
feed of recent changes
─ Using a Tag Cloud for easier identification of the most used categories


■ All Documents using a XPages Discussion-like UI
─ The code in the Discussion template was improved and extracted to a drag-
and-drop control in the ExtLib, for ease of reuse
─ Abstracts of the body text available in the view


■ Thread view page based on the OneUI “Comment in a Forum” component
─ In-context editing in the Thread view, including response creation/editing
─ With some refinements to better fit with Lotus Domino® views
─ Again, extracted to a control for ease of re-use


■ Select View and Filter mechanism
─ To simplify the UI design, uses multiple views of the same data on the same
page, and provides a consistent UI for filtering categorized views to a
specific category
─ Implementation uses the ExtLib Dynamic Content control, for switching
between different content at a location in the page


■ Simplification of the New / Edit Main Document UI
─ Makes the required and most commonly used fields more prominent
─ Using ExtLib controls for selecting and displaying Reviewer lists


■ An XPages Calendar View
control
─ Used to display in-
application calendar
giving dates and times
of team meetings,
events, review due-
dates etc
─ Single-click switching to
day-at-a-glance, week,
month, year modes
─ Was not previously
available, a great
addition to the ExtLib
─ Client side support for
Drag 'n Drop, Delete,
Double-Click edit etc

■ Pager state restoration
─ When you click into a doc and then return to the view, the re-displayed view
remembers the page number


■ Members thumbnail photos
─ The ExtLib gives a unified API for user information, including thumbnail
photos
─ The TeamRoom is using photos stored in the NSF


■ Member creation using Name Picker control
─ ExtLib control with directory integration


■ Members view using multi-column view control configuration


Agenda
■ 1. Introduction
■ 5. Mobile
■ 6. Q&A


Installation and Deployment
■ Installation and deployment the XPages Extension Library depends on where it
is downloaded from...
1) Lotus Notes® Domino 8.5.3 Upgrade Pack 1 (UP1) from IBM
2) 8.5.3 updatesite from OpenNTF
■ Step through the Domino Designer® install from UP1 and an overview of the
Server and Notes Client installs
■ Step through the OpenNTF Server and Domino Designer® client deployment
using the UpdateSite.NSF


Installation and Deployment | Upgrade Pack
■ Designer Client Install from 8.5.3 Upgrade Pack 1


■ The 853 Upgrade Pack Download
from Passport Advantage
■ 853UpgradePackInstalls.zip
■ One big zip under the same
part number


■ Unpack the big Zip file contains 3 folders; client, designer and domino.
■ Plus a readme.txt file


■ The 'server' install contains the ■ The 'client' folder contains 3 Notes
addon installs for AIX32, AIX64, client addon installs for Windows®,
iSeries, Linux, Solaris, Win32, Win64 Apple® Mac® and Linux.
and zSeries.

■ The 'designer' folder contains the
one installable for Windows


■ Designer Client Install from UP1
■ Running the '853UpgradePack1_20111208-0717.exe' from the 'extlib-designer-
add-win32' folder in 'designer' launches the install program
■ In Microsoft® Windows7TM, a prompt will appear to accept that the program is
about to make changes to the computer.


■ First install screen
─ You've two choices here; unpack the files; then install and then delete the install package; the
second choice is to preserve the install files


■ The Welcome screen
■ Select Next here


■ This is the key part, accepting the UP1 licence from IBM.


■ Make sure you don't have the Notes Standard All Client running before
attempting this install


■ Click the Install button to begin


■ ...installing...


■ ...and you're done!


■ Complete!
─ New Designtime installed | notesframeworksharedeclipse
─ New Client runtime for the Extlib | notesframeworksharedeclipse
─ Preview server installed with Extlib | notesosgiextlibeclipse
─ The TeamRoom XL and Discussion XL templates | notesdata
■ You are now ready to build the next generation of XPages Applications.


■ Designer with the Extension Library


■ Discussion XL app on XPiNC


■ Discussion XL app on the preview Server


Installation and Deployment | OpenNTF
■ Alternative deployment for OpenNTF release
■ The 853 ExtLib UpdateSite NSF Deployment

■ Domino 8.5.3 contains a feature which makes it easy for the
administrator to deploy and update an Extension Library without
the need to manually copy any files to the Domino Server.
■ Using a standard NSF based on updateSite.ntf the administrator
can dynamically deploy OSGi plugins to the server.
■ This new feature is optional and simple to use.
■ By default the dynamic contribution is turned off.
■ Use notes.ini setting OSGI_HTTP_DYNAMIC_BUNDLES
■ OSGI_HTTP_DYNAMIC_BUNDLES=updateSite2.nsf for example.
■ Not available in 852


■ Select CTRL+N to create a new application
■ Name the application what you wish, but use the template...
■ Eclipse Update Site (8.5.3)
updatesite.ntf


■ This is the app
created and how
it appears when
launched in
Notes.


■ We can now import the updatesite which is extracted from any zip from the
OpenNTF release -
updateSiteOpenNTF-designer.zip
■ Select the Import Local Update Site Button


■ Select the 'site.xml' from the extracted zip file
■ Then select OK on this dialog box

■ This will begin the import process to the Update Site NSF



■ Once that is done, restart the server or...
■ 'restart task http'

■ Run restart task http at the server console

■ Console should return the message “...NSF Based plugins are being installed
in the OSGi runtime...”


■ Now that the server is done,
■ we can point a Designer client at the same NSF, install the same updatesite
and match what is on the server


■ Must have Enable Eclipse plug-in
install checked in Preferences


■ Select the option to search for
new features to install
and then Next.


■ Select the Add Remote
Location button
■ Type in a name and then the
URL to the Update Site NSF
on your server

■ Then select OK on the Add
Remote Site dialog


■ This adds a location to the
dialog
■ Select this and then Finish


■ This will then fetch the list of features to install.
■ We usually select all
here, but individual
pieces can be selected
though not advised as
this can lead to a
mismatch in the code


■ Accept the licence
■ Here is the screenshot for the
Apache licence from
OpenNTF

■ Accept this and click Next to
proceed.


■ This lists what you are about
to install in Designer


■ The releases to OpenNTF include un-signed jars.
■ This dialog prompts you to accept these unsigned jars
■ NOTE: the jars from the Update Pack install are signed by IBM they are not from
OpenNTF


■ And you are done. All that is left to do is to restart your Designer (and the other
Notes clients)!


Once Designer has been restarted, both the server and the Designer client will be
using the same version of the OpenNTF XPages Extension Library


Installation and Deployment
■ Summary | Main points to take away
─ Install and deployment depends on from where the ExtLib is downloaded
─ The ExtLib with the Upgrade Packs are supported by IBM
─ Upgrade Pack install is an executable and straight forward, just like any other installation
─ Updating the Upgrade Packs will be straight forward too
─ The ExtLib from OpenNTF isn't supported by IBM but contains more features
─ The UpdateSite NSF and OSGi bundling in 853 is the preferred way to deploy the OpenNTF
version of the ExtLib on the server (not supported for production UP)
─ TeamRoom XL and Discussion XL are available from both download sources as well (OpenNTF
= not signed | UP1 = signed)


Agenda
■ 1. Introduction
■ 5. Mobile
■ 6. Q&A


Application Layout Control – What is this section
about?
■ Overview of the Application Layout control
■ Explain how this control is typically used
■ Show how this control in a simple example


Application Layout Control
■ Get a running OneUI application in less than 5 minutes!
■ Fully customizable OneUI rendering
■ Abstracts all the OneUI application parts
■ Can even be customized by providing an inherited renderer


■ Exposed in Domino
Designer's control
palette along with
several property
categories and
supported facets


■ Used in the new TeamRoom XL, Discussion XL and DocLib XL templates
■ Most effective when used on a single Custom Control that is shared
across several XPages within an application
─ In-line with the Layout Container Pattern
■ Exposed in Domino Designer's control palette along with several property
categories


Getting to grips with it...


Application Layout Control – TeamRoom XL
Several XPages

allDocuments.xsp

announcements.xsp events.xsp

calendar.xsp search.xsp

home.xsp *.xsp


Several XPages
+
One Custom Control
allDocuments.xsp



home.xsp *.xsp

layout.xsp (Custom Control) 67 | © 2012 IBM Corporation

Several XPages
+
One Custom Control
=
allDocuments.xsp
Layout Container
Pattern



home.xsp *.xsp

layout.xsp (Custom Control) 68 | © 2012 IBM Corporation

layout.xsp (Custom Control)



<xe:applicationLayout/>



allDocuments.xsp (XPage)

<xc:layout/>


Zero to App Layout Hero...


■ In a TeamRoom XL based database...
─ Create two blank XPages
– Name both XPages as follows:

• xpOne and xpTwo
─ Create a new Custom Control
– Name the Custom Control as follows:

• CcLayoutContainer
■ In the WYSIWYG editor for the ccLayoutContainer Custom Control...
─ From the Extension Library category of the Control Palette
– Drag'n'drop an Application Layout control


■ Once you drag'n'drop the
Application Layout control to the
ccLayoutContainer Custom Control
a wizard dialog appears
─ This wizard assists you in configuring
the Application Layout
■ Choose “OneUI Application
Configuration” from the
Configuration options list (1.)
■ Check all the checkboxes available
for the different types of Area (2.)
■ Choose the oneuiv2_1_blue from
the Application Theme options list
(3.)
─ Though this theme on the Discussion
template. Any theme from the app can
be selected here.
■ Click the OK button

■ An instance of the Application Layout control will now reside on the
ccLayoutContainer Custom Control
■ You should Save all your changes at this point


■ Drag'n'drop an instance of the ccLayoutContainer Custom Control unto each of
your previously created XPages (xpOne and xpTwo)
■ Again, Save all your changes


■ Ensure you have saved all
your changes to xpOne,
xpTwo, and
ccLayoutContainer
■ Now open the xpOne and
xpTwo XPages in a web
browser
■ You should see both pages
with a header bar and
footer links
■ A number of resources,
title, and pageIcon have
also been automatically
added
■ You can also view the
source of each page to
study the emitted HTML
markup structure

■ You can now continue to
configure the Application Layout
control to establish a shared
layout for the xpOne and xpTwo
XPages
■ Select the ccLayoutContainer
Application Layout control
instance in Designer
■ Choose the Title Bar category in
the Properties panel
■ Then add text to the Title text
field
■ Save your changes


■ Click on the Add Item button
─ Select Page Link Node from the options
list
─ Repeat this step so that there are
two of these nodes


■ You will now have two Page Link Nodes in the Title Bar Area
■ Set the label and page properties accordingly for each one using the Property
editor


■ Using the ccLayoutContainer Custom Control, type some text into the middle
area facet and the LeftColumn facet
■ Save your changes


■ Refresh the xpOne XPage in the web browser
■ You will now see the configuration of your Application Layout being reflected
within the different areas of the page


─ You have learnt how the TeamRoom XL, Discussion XL, and DocLib XL templates use the same
Layout Container pattern with the Application Layout control
─ You have successfully created an Application Layout layout container that can be shared
throughout the application
─ By using this design pattern you can quickly establish a common layout and configuration for an
application


Agenda
■ 1. Introduction
■ 5. Mobile
■ 6. Q&A


The Data View | What is this section about?
■ Give an overview of this control
■ Highlight and explain the various elements of the control
■ Then build a Data View from scratch in 20 easy steps


The Data View (xe:dataView)


■ The Data View control is used everywhere – web and mobile
■ Extended from the View Panel control and is more flexible
■ One of the most used ExtLib control
■ HasWill become the main control for displaying a document collection
■ You need to know this control


■ Let's build a Data View from scratch
■ Create a blank XPage on a Discussion XL app, expand the Extension Library
drawer on the palette
■ Select the Data View control and drag it to the page (1.)
■ Then in the following dialog select the 'xpAllDocuments' view as the data
source for the Data View. (2.)
■ OK this.


■ A representation of the Data View will now appear on the Design pane
■ This needs further configuration before anything displays
■ So lets start by displaying the topic title from the view data source


■ Go to the All Properties of the Data View and locate the attribute
'summaryColumn' in the Format section
■ Select the complex type xe:viewSummaryColumnfrom the add button that'll
appear
■ And then type in the name of the column you wish to display here – in this case
'Topic' into columnName
■ Save and preview this page.


■ This is enough to give us our first look at the Data View on the web browser
■ Save your changes. Then view the results from Designer by selecting from the
main menu Design – Preview in Web Browser – Default System Web
Browser


■ We can add column titles by adding a columnTitle for summaryColumn and
setting 'columnTitles' to true


■ Let's add some details to the view entry
■ To the 'details' editable area we add a Panel container control.
■ This becomes the facet for 'detail' - <xp:panel xp:key="detail">


■ Then to the Panel we add a Computed Field control.
■ We are going to use this field to compute the Author and date the document was
composed


■ The Computed Field is configured by combining two column values from the
view data source of the Data View

■ The Data View variable hasn't been set yet so lets do that now...


■ Select the Data View and to the 'var' property set the value – 'dview1'

■ Just one more thing and that's to show these details.


■ Set the property 'expandedDetails' to true...

■ So at runtime these
details now display


■ We can add more detail here that'll give us a preview of the document in that row
─ like pulling in the value of the 'Abstract' column from the view
─ Adding actions, like a reply link
─ Display the documents tags
■ So first add a new
Panel, and set a
name to it
(so it could be
used for partial
refresh if
needed)


■ Add a Computed Field to previewPanel and set the value to get the value of the
'Abstract' column.


■ Save your changes.
■ Then preview this update at runtime on a web browser


■ Sometimes you may not want the details to show when the Data View is first
launched, but would like an option to display the details when needs be. Here's
how.
■ Clear the value on the expandedDetail property

■ And set collapsibleDetail to true


■ The Data View with collapsible detail


■ The Data View indents response documents by default. We can add a twisty
here to parent documents to expand and collapse those rows.


■ Pagers can be added to the Data View just like the View Panel, Repeat and
Data Table
■ There's six available facets on the Data View to add the Pager


■ Once the pager has been dropped into any editable area, it's 'for' property
needs to be set to that Data View.


■ Set also the row count, 15 rows, at this stage to see the pager.


■ Use the Extra Column feature to include more columns from the view data
source in the Data View.
■ Go to the extraColumns property and select the plus '+' button to add a column


■ This will add a viewExtraColumn[0] complex type
■ The columnName property here corresponds to the column name on the data
source – in this case it is 'Date'

■ More columns can be added and these will appear to the right of the first column


■ The Data View with extra columns


■ Categorization is also handled by the Data View
■ Take the By Category view from the Discussion template
■ This too can be represented in the
Data View


■ First step is to create a new Data View like before but using the By Category
view as the data source.
■ Set the summaryColumn property to use the Topic column like before.
■ Save and preview
in a web browser


■ Back on the Data View locate the categoryColumn property and select the plus
button

■ And then set the columnName property to 'categories', from the view data
source


■ The categorized Data View.


■ Sub categories can be added in the same way by adding a new
viewCategoryColumn after the first category


─ The main container control used to display a data collection in the TeamRoom and Discussion
XL templates
─ Inherits from the View Panel control


Agenda
■ 1. Introduction
■ 5. Mobile
■ 6. Q&A


XPages Mobile | What is this section about?
■ Give an overview of what the new XPages Mobile controls are
■ Show and explain how these controls are use to build a simple XPages Mobile
application
■ Quick tour of how these controls are used in the Discussion XL template
■ Explain the typical design patterns of the XPages Mobile application, using the
Discussion XL template as an example


XPages Mobile Applications – what are they?
■ These apps build new and extend the reach of existing applications to smart
phones and tablets
─ Provide pervasive access to Notes/Domino data from your mobile device
– Apple IOS® 4 & 5 (iPhone™, iPad™ and iPod Touch™)
– Android™ 2.3 (phones) and 3.x (tablets)
─ Improve business process efficiency by allowing decision makers to approve workflows on the
go
■ Enable templates with mobile access
─ Enable existing applications by refreshing the design
─ TeamRoom & Discussion XL (UP1 and DocLib in UP2) templates
■ Extend the XPages framework to support mobile web browsers
─ Make it easy to develop mobile applications with the technology you know
─ One programming model for mobile, desktop browser and rich client


Domino Templates go Mobile
■ Demo of the TeamRoom XL and Discussion XL Templates...


Hello XPages Mobile Applications World
■ In this exercise we are going to build a XPages Mobile Application from scratch
■ Enhance a existing non Extension Library application
■ Enable it to use the XPages Extension Library
■ Set the mobile app prefix in the xsp.properties
■ Create the XPage
■ Create the Single Page application
■ Add the mobile pages to view documents
■ These are the basic principles for XPages Mobile applications
■ Built rapidly with little fuss...


■ Take any existing Application that inherits it's design from the Discussion
template (StdR85Discussion) - pre-UP1



XPage (xp:view)

Single Page Application (xe:singlePageApp)

Mobile Page
(xe:appPage) Mobile Page
(xe:appPage)


■ Enable the
application to use
the XPages
Extension Library
■ Select the
Application
Properties, then
the Advanced Tab,
and then under
'XPages Libraries'
select the
checkbox for
'com.ibm.xsp.extli
b.library'


■ The next step is to add the Mobile Theme prefix -
xsp.theme.mobile.pagePrefix
■ This will enable the XPages Mobile theme for XPages in the application that
begin with that prefix.
■ Add the Package Explorer view to the Perspective if this hasn't already been
done.
■ Do this by selecting...
─ Window
─ Show Eclipse Views
─ Package Explorer.


■ This should add the
Package Explorer view to
beside main working set.
■ From here locate the
existing application
■ Expand the
WebContentWEB-INF
folder.
■ Then launch the
xsp.properties file


■ Select the Source tab
■ Then add the prefix to the source – xsp.theme.mobile.pagePrefix=m_
■ In this case we have chosen the
prefix 'm_', though you can
select any prefix you like.


■ Create a new XPage with the with the mobile theme prefix


■ On the new XPage, drag and drop from the Mobile palette the Single Page
Application Control.
■ The Single Page Application Control (xe:singlePageApp) is the container for the
XPages Mobile application.


■ Then add a Mobile Page control to the Single Page Application. And save the
changes to the XPage.
■ This will cause an error.
■ The Single Page Application
needs to have the
selectedPageName
property set!


■ So, to resolve this error we must first name the Mobile Page that was added to
the Single Page Application
■ Then use this Page Name to fill out the selectedPageName property.


■ Add a Heading control (xe:djxmHeading) to the Mobil Page. This will be the
header for the mobile page, containing the Back button, header label and the
actionFecet editable area.


■ To the header enter a
value for the label.
■ The XPages Mobile
application is now ready to
have a first look at it on a
mobile device or a web kit
browser...


■ Running the XPages Mobile App on a Web Kit browser - Chrome


■ The next step is to add a view to the Mobile Page. From the Extension Library
palette select the
Data View and Add
that to the Mobile
Page (1.)
■ This will
display a dialog
Box. And from here
(2.) Choose the
xpAllDocuments view


■ After the Data View has been added to the Mobile page, we want to set one
property, the summaryColumn. Select this complex type (1.) and then on
xe:viewSummaryColumn
select columnName
and enter the
value here for the
Topic view (2.).
■ Now let's have a
look at this page
on the web kit
browser


■ The Documents display now in the row.


■ We're going to add a second mobile page to the single page application. This is
going to be the mobile page in which we'll display documents
■ Drag and drop another Mobile Page control to the Single Page Application
■ And give this Mobile
Page a name -
pageName =
”documentPage”


■ Add a Heading control to the “documentPage” (1)
■ And for this header the following properties are set.
─ Firstly the back property is
'Back' – this is the label of the back button (2a).
─ The header label is set to 'Document Page' (2b).
─ Then the moveTo property
is then set to 'viewPage'
- this is the location on
the page - Single Page
Application - to which
this action is to go
'back' to (2c)


■ Next, add (1.) a Panel container control after the Heading control on the Mobile
page
■ Then to this Panel add a document data source
─ Select the Data panel and then the Add dropdown button
─ Choose the Domino Document option (2.)
─ Then select the MainTopic
form from the Form
combobox (3.) as the
document data source for
the Panel


■ Then add a Rounded List control to the Panel. This will add additional styling
to the document page


■ And to the Rounded List container control add labels and bound
input fields from the Data pane.
─ Though avoid using Tables in mobile apps – used here for demo purposes


■ Go back to the Data View.
■ Here set the pageName to 'documentPage' (1.) and another property
'openDocAsReadonly' to true (2.)


■ Then finally 'resetContent' property

■ For the 'viewPage', set this to false

■ And for the 'documentPage' set it to 'true'


■ Now we can see the results of our changes.
■ The document should now open in the documentPage with the 'Back' allowing
the user to navigate back.


Discussion XL Template for Mobile
■ Tour around the Discussion XL app


■ Peel apart the 'mobile.xsp' page


■ The contents of each mobile page is contained within custom control.
■ Why?
■ Easier to work with and maintain
■ Notice here that not all
custom controls were
initially designed for Mobil
■ Reuse, reuse, reuse
e.g. allDocumentsView


■ The allDocumentsView serves as a content for a XPages mobile page
■ Design elements are loaded when the loaded in a device – isMobile() - e.g. on a
controls loaded property "${javascript:isMobile()}"'
─ isMobile() is a function defined in /mobile-server.jss (this is a Server JavaScript file contained within
the Discussion XL and TeamRoom XL templates)


■ The isMobile method can also be used else where to reuse design elements
─ Change the default row count in a Data View
─ Change the page to open
─ And used to not load elements in Mobile - !isMobile

■ Rip and Replace not required


■ The Heading Control's actionFacet - buttons used to create a save documents
■ This is a callback area where buttons take on the typical Mobile look and feel.

■ And in Designtime
■


■ Other action buttons in the template reuse existing design elements
■ Though these elements need specific styling for Mobile


■ Navigation - Transitioning between XPages Mobile Pages - MoveTo and Back
button
■ The MoveTo is used to navigate to another mobile page within the Single Page
Application.
─ The simple action MoveTo action can also save the document
■ The Back button returns the user to the previous Mobile page. It can also be
used as a cancel or close button to a Mobile page
■ What's important is how the pages transition between each other, especially
when the transition type is 'slide' rather then 'fade' or 'flip'


■ Slide transition – going to a page
─ Opening a document
─ Creating a new document
■ ...transition is usually Left-To-Right

■ Slide transition – returning from a document
or view
─ Closing a document to return to a view
─ Saving a new document
─ Saving changes
─ Cancelling change
─ Or using the back button
■ ---transition is usually Right-to-Left


■ How the Default XPage launch works for Mobile applications
─ Currently no setting for setting the default XPage for Mobile devices
─ An alternative technique is used in the Discussion and TeamRoom XP templates – see
main.xsp
■ context.getUserAgent().getUserAgent() is used to get the platform the
application is running upon and then redirects to the appropriate XPage


Mobile
─ XPages Mobile Apps are essentially Web Apps
─ Limited number of controls use the Mobile Theme | All controls in the Mobile palette, Data View
and Outline
─ Support for iOS and Android
─ XPages mobile apps are usually contained within the one XPage – uses Dojo view swapping to
move between mobile pages


Agenda
■ 1. Introduction
■ 5. Mobile
■ 6. Q&A


Q&A


Reference:
■ Wiki documentation on the ExtLib in the Upgrade Pack
─ http://www-10.lotus.com/ldd/ddwiki.nsf/xpViewCategories.xsp?lookupName=Domino Designer
XPages Extension Library
■ The Notes Domino 8.5.3 Upgrade Pack download from IBM Passport Advantage
─ http://www-01.ibm.com/software/howtobuy/passportadvantage/
■ The XPages Extension Library on OpenNTF
─ http://extlib.openntf.org
■ XPages Info
─ http://xpages.info
■ XPages Mobile Controls Tutorial
─ http://www-10.lotus.com/ldd/ddwiki.nsf/dx/XPages_Mobile_Controls_Tutorial_


XPages Extension Library Book
■ Factoids...
─ Comprehensive 600 page volume
─ IBM Press publication
─ Authored by a team of all-star XPages experts,
Featuring contributions from key community members
─ Take full advantage of the XPages Extensibility
Framework, Library & API
─ Step-by-step guide for developers of all experience levels
─ Combines reference material and practical use cases

■ Coming Soon
■ Available Q2 – 2012
─ www.ibmpressbooks.com/bookstore/product.asp?isbn=0132901811
─ www.amazon.com/XPages-Extension-Library/dp/0132901811


XPages Portable Command Guide Book
■ Factoids...
─ Compact 320 page volume
─ Authored by members of XPages & Domino Designer dev teams
─ Perfect complement to the popular Mastering XPages book,
helping experienced XPages developers go even further
─ Thoroughly covers XSP properties, Command Manager
instructions, INI variables, OSGi console commands,
debugging, logging and more.
─ Dozens of practical examples providing immediate solutions

■ Available soon online
─ www.ibmpressbooks.com/bookstore/product.asp?isbn=0132943050
─ www.amazon.com/XPages-Portable-Command-Guide/dp/0132943050


Mastering XPages Book
■ Factoids...
─ Compact 750 page Best Selling volume
─ Authored by members of XPages & Domino Designer dev teams
─ The popular Mastering XPages book, helping experienced
XPages developers go even further
─ Dozens of practical examples providing immediate solutions

■ Available NOW online
─ http://www.ibmpressbooks.com/bookstore/product.asp?isbn=0132486318
─ http://www.amazon.com/Mastering-XPages-Step---Step-Application/dp/0132486318


Other Sessions That May Interest You
Sessions Speakers

JMP101: IBM Lotus Domino XPages Jumpstart Paul Della-Nebbia
Howard Greenberg

JMP102: Introduction To Java for Domino Developers Paul Calhoun

JMP301: Master Class: eXtending IBM Lotus Domino Designer and Domino XPages Graham O'Keeffe
Dan O'Connor

JMP302: Master Class: Using Themes to control the look and feel of your IBM Lotus Scott Good
Domino XPages applications

JMP304: Master Class: Integration in the world of Social Business John Head
Andrew Barickman

INV309: Strategy in Action: Social Business Application Development Brent Peters
Philippe Riand

AD101: IBM Lotus Domino Version 8.5.3 Application Development and Beyond Pete Janzen
Maureen G. Leland

AD102: Source Control For The IBM Lotus Domino Developer Declan Lynch


Sessions Speakers

AD103: Embracing the Eclipse Within Maureen G. Leland

AD104: IBM Lotus Domino XPages Made Social Philippe Riand

AD105: Use IBM Lotus Domino and XPages for your Social Business Herbert Wagger
Niklas Heidloff

AD106: IBM Lotus Domino XPages anywhere - Write them once, See them Everywhere Stephan Wissel
Viktor Krantz

AD107: IBM Lotus Domino XPages Meets Enterprise Data - Relational++ Andrejus Chaliapinas

AD108: The Grand Tour of IBM Lotus Notes and Domino 8.5.3 Upgrade Pack 1's XPages Martin Donnelly
Capabilities

AD109: Ready, Set, Go! How IBM Lotus Domino XPages Became Mobile Eamon Muldoon

AD110: IBM Lotus Domino XPages Go Zoom! Tony McGuckin
Darin Egan


Sessions Speakers

AD111: The X Path: Practical guide to taking your IBM Lotus Notes applications to Domino Stephan Wissel
XPages Hunter R. Medney

AD113: Moving Forward with IBM Lotus Domino REST services Stephen Auriemma

AD114: Don't be afraid of curly brackets reloaded - even more JavaScript for LotusScript Stephan Wissel
Developers

AD306: Integrate your applications into IBM Websphere Portal Thomas Stober

BP103: IBM Lotus Domino XPages Blast! Matt White
Tim Clark

BP107: IBM Lotus Notes/Domino Application Development Competitive Advantage : The David Via
Social Business Edition John Head

BP109: Apps, Apps, and More Apps: Meet the Very Best Open Source Apps from OpenNTF Niklas Heidloff
- The 2012 Edition Bruce Elgort

BP114: To IBM Lotus Domino XPages and Beyond! The Lotusphere Sessions Database Tim Davis
Ben Langhinrichs


Sessions Speakers

BP115: Deploying and Managing Your IBM Lotus Domino XPages Applications Warren Elsmore
Matt White

BP118: Using Java to build applications fit for the enterprise Chris Connor

BP120: One Application To Rule Them All Kathy Brown
Paul Steel

SHOW110: Using the IBM Lotus Domino XPages Extension Library for the Real World Tony McGuckin
Paul Hannan

SHOW111: How YOU deliver mobile applications the easy way with IBM Lotus Domino Chris Connor
XPages Web Apps

SHOW112: Domino OSGi development David Taieb
Paul R. Fiore


Show110 | Using the XPages Extension Library for the Real World

More Related Content

What's hot (20)

Viewers also liked (17)

Similar to Show110 | Using the XPages Extension Library for the Real World (20)

Recently uploaded (20)

Show110 | Using the XPages Extension Library for the Real World