Delivering responsive web design in IBM Notes applications

The following is a re-post I originally posted on Infoware’s blog: link.

Introduction

Responsive web design (RWD) has been the talk of town the last years. In 2012 it was listed as #2 in ‘Top Web Design Trends’ by .net magazine and Mashable called 2013 the ‘Year of Responsive Web Design’. Many other sources have recommended responsive design as a cost-effective alternative to mobile applications.

responsive

While I assume that a large portion of the internet (and in some cases intranet) sites are nowadays optimized for the device that accesses them, but what about your company’s (internal) business applications? 

Business value

IT departments need to prioritize their activities and internal applications are most often accessed by a smaller audience than external applications. Historically the internal app was accessed with a desktop computer. With the trend of smartphones and tablets taking over the workspace this may no longer be the case in your company?

With a VPN connection users want to continue to execute their work on this new breed of devices, instead starting up a desktop computer for a single task. Here is where the business value of RWD comes in.

Continue to work on same device = More productive employees = Saving time and perhaps even hardware

Mobile first

A trend is to apply the progressive application strategy of ‘Mobile first’. Instead of designing a complex application for desktop computers first and thereafter gracefully degrade it for mobile devices, the user interface is initially designed for mobile devices and enhanced for desktops with more processing power.

mobile-first-icons

 

Many RWD frameworks embrace this ‘Mobile first’ concept nowadays.

Options in Notes

So what are your options in delivering RWD in your beloved Notes applications? Depending on your roadmap for the platform and personal preferences you have the following options.

  1. Build the application with XPages technologies.
  2. Build the application with common web technologies.

The XPages way

An approach for your Notes platform that is highly promoted by IBM is to deliver web interfaces for Notes applications with XPages. Not only bring you in Rapid Application Development (RAD) principles in your project also the range of capabilities is much more diverse.

Another benefit is that you can stay on the core technologies: JSF, JavaScript and Java. This you can combine with common web technologies like AJAX, HTML5, CSS and REST services. For the RWD you can use your favorite framework such as Bootstrap or Foundation.

Bootstrap framework

twitter-bootstrap

Bootstrap is a popular framework for developing responsive, mobile first projects on the web. It makes front-end web development faster and easier. Bootstrap is based upon HTML, CSS and JavaScript, technologies already well-known in Notes web apps.

Distribution

You have several options how you distribute the Bootstrap framework to your audience:

  1. Install the files on your Domino server.
  2. Embed the files in a Notes application.
  3. Install an additional XSP library on your Domino server.
  4. Install the latest extension library on your Domino server.

In case you do not utilize the OSGi runtime on your Domino server you can either install the files on centrally on the Domino server or embed the files in each Notes application. The installation on the Domino server makes the distribution of updates easier but the administrator is responsible for the distribution across servers. Embedding the files in a Notes application is less efficient (e.g. caching) but makes distribution of updates a task for the developer.

Probably the best approach would be to utilize the OSGi runtime on your Domino server and distribute the files as a library via an Update site Notes application across your servers. This makes the task even simple and small for an administrator.

If you choose to do so you have the option to either install bootstrap4xpages library as a separate library or you can install the latest extension library (from 10 november 2014). The latter give you several benefits:

  • Custom renderer for the Application Layout control, which makes it easy to define the layout structure of your application.
    • This renderer gives the control a Bootstrap look & feel, as well making the control responsive.
  • A newer version of jQuery.
  • Latest Bootstrap themes (3.2.0 normal or flat).
  • Additional configuration options in the Application Layout control wizard for the Bootstrap navigation components.

Separate Mobile devices UI alternative

The extension library (a library with additional XPages controls and functions) provides also so-called ‘Mobile controls’ which allow you to deliver a separate interface for mobile devices for your Notes apps. Via a wizard you can build a ‘single page application’ in a matter of minutes with full CRUD (create, read, update and delete) operations and infinite scrolling through document lists (aka views).

This approach does not deliver RWD but a separate user interface for mobile devices. At least it gives you the option to deliver a UI adapted for mobile devices in a very short time with little investment.

You can choose to make the UI of the app look like a native app for iPhone or Android. Alternatively you can choose to make the UI look in line with other IBM products (iNotes, Connections). A video that demonstrates the controls briefly you can find here: http://vimeo.com/99537780.

The WEB way

In case you do not walk the XPages path but instead you prefer the approach to deliver the application with more common web technologies like HTML, CSS, AJAX and REST services you can still install the files of your responsive web design framework of choice on the Domino server or embed them in a Notes application.

From there you can start to (re)write your ‘traditional’ Domino application as a Web project. In the latter case you use Notes only as a container for your data documents and design elements and use forms and views only as data schemes.

This approach dodges the RAD capabilities in Notes and will demand more development time. But you can apply this approach also to other platforms that you may have. You can later even debate why the data should be stored in Notes and not in a document-oriented database alternative? The layered security and replication capabilities are often good arguments.

Implementing RWD via the Extension Library option

In the following scenario we will describe the implementation of RWD with the Extension Library more in details.

  • Database enablement.
  • Application Layout.

Database enablement

Assuming you have installed the extensions for the Domino server and Domino Designer (DDE) client according the instructions in the readme.pdf file you can now enable a Notes application.

XSP properties

The XSP properties file allows you to configure parameters for the XPages framework. Open the file in DDE.

Screenshot_1

In the General tab you have now two more themes to select:

  • Bootstrap 3.2.0
  • Bootstrap 3.2.0 flat

The ‘flat’ theme delivers:

  • The resources and styling that comes with Bootstrap v3.2.0.
  • jQuery v2.1.1 resources.
  • Cleanup of specific XPages controls when using Bootstrap.
  • Glyphicon halflings.
  • dbootstrap resources, which provide Bootstrap styling for Dojo controls.

The ‘ordinary’ theme provides all of the same resources as the flat theme, and includes 3D effects to buttons and some other additional styling.

Select one of the two themes:

Screenshot_2

Application layout

The RWD plugin adds a new renderer for the Application Layout control which you normally use to structure the layout of your application. This renderer gives your application layout the Bootstrap look and feel, as well as responsive behavior. When the application is rendered on a smaller screen, such as on a mobile device, it will automatically re-organize the application contents for an optimal user experience.

The control also has new configuration options. Add the Application control on a custom control and open the All Properties tab. In the basics section you can choose now the xe:bootstrapResponsiveConfiguration option:

Screenshot_3

Note: in case you have already a configured Application Layout control you can change the configuration option directly in the Source panel to keep the rest of your configuration (e.g. xe:applicationConfiguration -> xe:bootstrapResponsiveConfiguration).

This configuration options give you several more properties:

  • collapseLeftColumn
  • collapseLeftMenuLabel
  • collapaseLeftTarget
  • fixedNavbar
  • invertedNavbar
  • pageWidth

With the first 3 properties you define how the left column should behave on smaller devices (collapsed for smaller devices, display text when collapsed, item the left menu should be attached to).

You can determine the behavior of the navbar (inverted, fixed (top or bottom)) and the width of the page e.g. fluid = use Bootstrap ‘fluid’ container (almost full width).

Wizard

When you initially drag on the Application Layout control on the custom control a two-step wizard is presented. In the first step you select one of available configurations. You can filter on responsive and non-responsive.

Screenshot_4

In the second you set the properties for the chosen configuration. In case you choose the Responsive Bootstrap option you will see the following screen:

Screenshot_5

Under configuration you can set the properties for the layout including the 6 additional properties mentioned earlier. Set also the other properties like you would normally do.

Voila! Your application is now ready for development.

Hiding elements for specific devices

The plugin provides only the resources and structure for responsive web design. In case you want to optimize the layout for devices by explicitly show or hide them you can use CSS classes.

Bootstrap provides some handful helper classes, for faster mobile-friendly development. These can be used for showing and hiding content by device via media query combined with large, small, and medium devices.

Classes Devices
.visible-xs Extra small (less than 768px) visible
.visible-sm Small (up to 768 px) visible
.visible-md Medium (768 px to 991 px) visible
.visible-lg Larger (992 px and above) visible
.hidden-xs Extra small (less than 768px) hidden
.hidden-sm Small (up to 768 px) hidden
.hidden-md Medium (768 px to 991 px) hidden
.hidden-lg Larger (992 px and above) hidden

Note that the elements that you hide are still being loaded, but simply not being displayed.

Data View control

Probably a typical use case is the display of table columns or lists. On a desktop you may want to show more columns than on a smaller devices.

Typical you use the Data View control from the extension library to display lists of documents. The information you want to display as a link is defined in the summaryColumn property.

Screenshot_6

Additional columns that are displayed on the right of the summaryColumn will be displayed via the extraColumns property. Each additional column is defined in a viewExtraColumn item which contains properties for styleClass and headerStyleClass. For example you could set these as followed:

<xe:this.extraColumns>

<xe:viewExtraColumn columnName=”Date” columnTitle=”Date” style=”width: 100px”  styleClass=” hidden-xs hidden-sm ” headerStyleClass=” hidden-xs hidden-sm“></xe:viewExtraColumn>

</xe:this.extraColumns>

This will show the extra column only for medium and larger devices since they will be hidden for (extra) small devices.

Screenshot_7

Wrap up

Delivering responsive web design on your Notes applications has never been as easy as it is nowadays with the RWD plugin in the extension library. It also respects the rapid application (web) development mantra of XPages.

In case you do decide to follow this path remember you need to check what information you want to show or hide for specific devices.

So what is keeping you from getting a bigger bang for the buck by delivering optimized user experiences for mobile, tablet and desktops for your Notes applications?

 

Certified Application Developer Notes 9

Today I passed the second exam for my certification for IBM Application Developer Notes and Domino 9. My last certification dated from the Notes 7 era so I was forced to take the two core exams as explained in the image below:

vlcsnap-2014-10-01-20h45m37s40

 

This second exam was much more focused on development with XPages, using the Extension Library and the Mobile controls. I guess according what you would expect in modern Domino development. There were the ooccasional LotusScript and @Formula questions, but the majority of the questions were XPages related. Personally I find the setup a bit odd. I Hardly use @Formula or LotusScript in new projects. I wonder why IBM is not defining exams within each technical area seperately e.g. XPages, @Formula & Functions, LotusScript, Java and Extension Library if you wish.

Overall I liked the second exam better, no odd questions about Notes client installation, parameters in the client, more practical development questions. But also expect questions on JSF, XSP configuration etcetera.

A tip I could give is to take a look at the API documentation:

XPages configuration file format

I have not considered to upgrade my certification to the ‘Advanced’ level since I have not worked with administration so intensively lately. I expect though that the XPages mobile advanced topics would be a “piece of cake”. What are your experiences? After all it is also a financial question because the exams are not free. Maybe there will be the option to take an exam on IBM ConnectED 2015?

 

Developing social applications with the Social Business Toolkit SDK

Intro

The Social Business Toolkit SDK (SBT SDK) is a set of libraries and code samples that you use for connecting to the IBM Social Platform. As a developer you can choose which web development skills fits you best: Java, (client side) JavaScript or XPages. Your social platform may reside in the cloud or on premise.

In this post I will give you guidelines and practical examples to get you started. I choose XPages as development environment.

Terminology

In the document terms are thoroughly used:

Term Description
SBT Social Business Toolkit
SDK Software Development Kit
DDE Domino Designer on Eclipse
XPages XPages is a rapid web and mobile application development technology
OpenNTF Open Source Community for (IBM) Collaboration Solutions
OAuth Open standard for authorization
Managed Bean Java Beans representing system objects and resources
Endpoint Encapsulates the access to a service provider, like Connections or Sametime

Installation of the SDK

Prerequisites

Before you can start with development in Domino Designer on Eclipse you need to install the SBT SDK. It can be downloaded from the following address: http://ibmsbt.openntf.org/. The files you need to work with the SBT SDK and Domino are located in folder ‘redist\domino’ in the downloaded ZIP file.

Extension Library

Another condition to be able to run the Social SDK within your XPages you need to have installed the Extension Library, available on OpenNTF: http://extlib.openntf.org/. You need to have the library installed on both Domino server and DDE.

Installation for Domino Server

You can find a set of instructions how to install the SBT SDK on an IBM Domino server on the address:
http://www-10.lotus.com/ldd/appdevwiki.nsf/xpDocViewer.xsp?lookupName=IBM+Social+Business+Toolkit+SDK+documentation#action=openDocument&res_title=Installing_on_Domino_Server_SDK1.0&content=pdcontent. I recommend the installation via an Eclipse Update site. As a result your Update site should display the following plugins:

Screenshot_4

 

Installation for DDE

The Domino Designer deployment of the IBM Social SDK can use the same imported update site from the Update Site NSF. On Domino Designer verify that the checkbox for “Enable Eclipse plugin install” is checked in the Domino Designer preferences. You can find a set of instructions how to install the SBT SDK on DDE on the same address:
http://www-10.lotus.com/ldd/appdevwiki.nsf/xpDocViewer.xsp?lookupName=IBM+Social+Business+Toolkit+SDK+documentation#action=openDocument&res_title=Installing_on_Domino_Server_SDK1.0&content=pdcontent.

Setting up a Notes application

Create a new Notes application from scratch. I called mine ‘bornsocial.nsf’. Open the Xsp Properties file in DDE. Include the following libraries:

  • com.ibm.xsp.extlib.library
  • com.ibm.xsp.sbtsdk.library

Screenshot_5

 

Authentication

The Social Business Toolkit leverages a credential store for single sign on. For OAuth for example the user tokens are stored in this repository so that users don’t have to authenticate and grant access to services like IBM Connections for every session. The OAuth application tokens are also stored in this repository so that all tokens can be managed in one central place. You can read more on the credential store here: http://www-10.lotus.com/ldd/appdevwiki.nsf/xpDocViewer.xsp?lookupName=IBM+Social+Business+Toolkit+SDK+documentation#action=openDocument&res_title=Configuring_token_stores_SDK1.0&content=pdcontent&sa=true. And it is also explained in the following video: http://www.youtube.com/watch?v=2CWD70XarX8#t=100.

In basic: the implementation of the credential store is performed by the use of a managed bean. The usage of this credential store is then defined in an endpoint. An endpoint encapsulates the access to a service provider, like Connections or SameTime.

In the Package Explorer open the faces-config.xml file:

Screenshot_6

 

Add the following lines:

<!– Token Store memory implementation –>
<managed-bean>
<managed-bean-name>CredStore</managed-bean-name>
<managed-bean-class>com.ibm.sbt.security.credential.store.MemoryStore</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>

<!– Password Store memory implementation –>
<managed-bean>
<managed-bean-name>PasswordStore</managed-bean-name>
<managed-bean-class>com.ibm.sbt.security.credential.store.MemoryStore</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>

Endpoint

In the first example(s) we are only going to demonstrate to connect to IBM Connections. Add the following lines:

<managed-bean>
<managed-bean-name>connections</managed-bean-name>
<managed-bean-class>com.ibm.sbt.services.endpoints.ConnectionsBasicEndpoint</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
<managed-property>
<property-name>url</property-name>
<value>https://your-connections-url.com</value&gt;
</managed-property>
<managed-property>
<property-name>authenticationService</property-name>
<value>communities/service/atom/communities/all</value>
</managed-property>
<managed-property>
<property-name>authenticationPage</property-name>
<value>/bornsocial.nsf/_BasicLogin.xsp?endpoint=connections</value>
</managed-property>
</managed-bean>

For value of managed property ‘url’ you must enter the address of your connections installation or in case you are using IBM Greenhouse for demonstration purposes you can choose ‘https://greenhouse.lotus.com’.

Login page

A custom login page will presented when a user initially tries to connect to IBM Connections:

Screenshot_7

 

The elements for the login page are in the XPagesSBT.nsf application which comes with the SBT SDK. The nsf is located in folder redist\domino. The login page consists of the following design elements:

Name Type
_BasicLogin.xsp XPage
sbtLoginPage Custom Control
sbtLoginPanel Custom Control

You can simply copy the design elements from the sample application in your application and modify them e.g. for branding.

Connecting to Connections

Your application is now ready to connect to Connections. Where you place the code to connect to Connections is up to you. A recommended approach could be to establish connections via Managed Beans.A managed bean is nothing more fancy than a registered a JAVA object.

Managed Bean

In our first example we are going to read the content under My Files in Connections. These are the files that you have uploaded and shared.

  1. Create a new Java design element (Java Class).
  2. Enter the following code:

package com.quintessens.bornsocial.sbt;
import java.io.Serializable;
import com.ibm.sbt.services.client.connections.files.FileService;
import com.ibm.sbt.services.client.connections.files.FileServiceException;
import com.ibm.sbt.services.client.connections.files.FileList;

public class ServiceBean implements Serializable{
private static final long serialVersionUID = 1L;

public FileList getMyFiles() {
FileService service = new FileService();
try {
return service.getMyFiles();
} catch (FileServiceException e){
return null;
}
}
}

Code explanation

The function getMyFiles gets handle to the FileService object. Then the getMyFiles function is called to get all the files (both private and shared) the user has uploaded in Connections. Then a FileList object is returned to the caller.

The FileList object can then be used in a suitable XPage control e.g. the DataTable or the DataView control.

Registration

In order to access the Managed Bean you have to register it. This is done in the faces-config.xml file. Open the file and add the following lines:

 <managed-bean>
<managed-bean-name>ServiceBean</managed-bean-name>
<managed-bean-class>com.quintessens.bornsocial.sbt.ServiceBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>

You will access the bean via its name ServiceBean.

XPages

Finally we have come to a point where we can display the files that the managed bean returns from IBM Connections. I have choosen the XPages environment to do so.

Custom Controls

A best practice in XPages development is to divide functionality in individual blocks known as Custom Controls. This make it easier to re-use the functionality across your application.

Custom Control for a ‘My Files’ overview

  • Create a new Custom Control design element.
  • Add the following code to the control:

<xe:widgetContainer id=”widgetContainer1″ itleBarText=”#{javascript:return compositeData.widgetTitle;}”>
<xp:panel>
<xe:dataView id=”dataView1″ var=”file” rows=”5″ columnTitles=”true” styleClass=”filesDataView”>
<xe:this.extraColumns>
<xe:viewExtraColumn columnTitle=”Filetype”></xe:viewExtraColumn>
<xe:viewExtraColumn columnTitle=”Created”></xe:viewExtraColumn>
<xe:viewExtraColumn columnTitle=”Size”></xe:viewExtraColumn>
</xe:this.extraColumns>

<xe:this.summaryColumn>
<xe:viewSummaryColumn columnTitle=”Filename”></xe:viewSummaryColumn>
</xe:this.summaryColumn>
<xp:this.value>
<![CDATA[#{javascript:ServiceBean.getMyFiles();}]]>
</xp:this.value>
<xp:this.facets>
<xp:panel xp:key=”noRows” id=”topicsPanel2″>
<xp:div styleClass=”lotusWidgetBody”>
<xp:text>
<xp:this.value>
<![CDATA[#{javascript:return (viewScope.myFilesAvailable ? “No files found.” : “My Files unavailable.”);}]]>
</xp:this.value>
</xp:text>
</xp:div>
</xp:panel>
<xp:panel id=”summaryPanel” xp:key=”summary” style=”width:50%;white-space:nowrap;”>
<h4><xp:link styleClass=”dataViewLink” escape=”true” id=”link7″ target=”_blank” text=”#{javascript:return file.getTitle();}”>
<xp:this.value><![CDATA[#{javascript:return file.getContentUrl();}]]></xp:this.value>
</xp:link></h4>
</xp:panel>
<xp:panel id=”typePanel” xp:key=”extra0″ style=”width: 20%;white-space:nowrap;”>
<xp:text>
<xp:this.value>
<![CDATA[#{javascript:return file.getType();}]]>
</xp:this.value>
</xp:text>
</xp:panel>
<xp:panel id=”sizePanel” xp:key=”extra2″ style=”width: 15%;white-space:nowrap;”>
<xp:text>
<xp:this.value>
<![CDATA[#{javascript:var size = file.getSize();
var kilobyte = 1024;
var megabyte = kilobyte *1024;
if(size < kilobyte) {
return (size + ” B”);
}else if(size < megabyte) {
return (Math.round(size/kilobyte) + ” KB”);
}else {
return (Math.round(size/megabyte) + ” MB”);
}}]]>
</xp:this.value>
</xp:text>
</xp:panel>
<xp:panel id=”panel1″ xp:key=”extra1″ style=”width: 15%;white-space:nowrap;”>
<xp:text escape=”true” id=”computedField3″ value=”#{javascript:file.getCreated()}”></xp:text>
</xp:panel>
</xp:this.facets>
</xe:dataView>
</xp:panel>
</xe:widgetContainer>

As a result the files in IBM Connections for the authenticated user will be listed e.g.:

Screenshot_8

 

Code explanation

The DataView control is using the getMyFiles function from Managed Bean ServiceBean for data binding:

Screenshot_9

<xe:dataView id=”dataView1″ var=”file” rows=”5″ columnTitles=”true” styleClass=”filesDataView”>
<xp:this.value><![CDATA[#{javascript:ServiceBean.getMyFiles();
}]]></xp:this.value>

</xe:dataView>

It iterates through the returned FileList object and for each column values from each entry in the ‘file’ collection the value is computed e.g.:

<xp:panel id=”summaryPanel” xp:key=”summary” style=”width:50%;white-space:nowrap;”>
<h4><xp:link styleClass=”dataViewLink” escape=”true” id=”link7″ target=”_blank” text=”#{javascript:return file.getTitle();}”>
<xp:this.value><![CDATA[#{javascript:return file.getContentUrl();}]]></xp:this.value>
</xp:link></h4>
</xp:panel>

API Explorer

Use the SBT API Explorer which method each object provides:

Screenshot_10

Link: http://greenhouse.lotus.com/llapiexplorer/.

Summary

As you have seen getting started with the Social Business Toolkit is not that difficult for XPages developers. As alternative you could also choose JavaScript or JAVA if those skills fit you better. The SDK will help you understanding Connections piece by piece from a developer perspective.

In the example information is read from Connections but you can also post data. The SDK allows you to create great ‘social enabled’ applications. This can be applications that solely work with Connections or integrate with other platforms e.g. IBM Notes.

I hope to write more on the Social Business Toolkit in another post. Thank you for reading.

Patrick Kwinten

 

Internationalization of the Pager controls

While translating an app for internationalization I noticed that Pager controls (e.g Pager Expand/Collapse, Pager Show/Hide Details)) were still default in English. So I wondered how you could translate them since they did not adapt to the selected language in my browser?

It turns out that a workable way is to set the text explicit in the controls first to your default application language:

Screenshot_1

 

Now they have become available for translation:

Screenshot_2

If you open the properties file for the XPage/Custom Control you can allocate the strings to translate:

Screenshot_3

 

The downsize to this approach is that you have to translate them for every design element you have the controls on. I assume this should not be the intention, so if you know the proper way, please let me know.

Update

pagerSizes

Paul Withers replied to my post how to set the pages in the pagerSizes control.

Screenshot_4

Here is a demo code:

<xe:pagerSizes id=”pagerSizes1″ for=”dataView1″ text=”Page {0}” />

In the properties file translate it accordingly e.g.

pagerSizes1/@text=Sida {0}

I am not sure how to set the ‘All’ text.

pager

The pager control you can also translate. A description you can find in the XPages Wiki maintained by Julian Buss.

 

Here is an example code:

<xp:pager partialRefresh=”true” id=”pager1″ for=”dataView1″ style=”padding-right:20px;”>
<xp:pagerControl type=”Previous” id=”pagerControl1″ value=”Previous”></xp:pagerControl>
<xp:pagerControl type=”Group” id=”pagerControl3″></xp:pagerControl>

<xp:pagerControl type=”Next” id=”pagerControl2″ value=”Next”></xp:pagerControl>
</xp:pager>

Again, translate the labels in the properties file accordingly.

Below is the result of the translation:

Screenshot_5

 

Single Page Application tutorial

After watching the video on YouTube on the Single Page Application wizard I became curious and decided to take a test and mobilize an application myself. I choose the infamous “fake names” application for this.

I have written a blog article/tutorial about it. Here you can read it: ‘Single Page Application Wizard‘.

Summary

With the Single Page Application control you can rapidly mobilize a Notes application. The wizard is intuitive although you need to understand some basics of mobile development.

Unfortunately the wizard is not complete and forces you to apply some coding.

Infinite Scroll

The infiniteScroll property for a Data View control is enabled by default in the Singe Page Application. This great new feature allows users to fetch new rows of data by scrolling down the list.

You are almost stupid if you disable this feature.

Recommendations

  • Ability to apply basic CRUD Tab Bar Buttons to a Document Viewer Application Page.
  • On a Document Viewer page it would be easier to add fields instead of removing most of all the fields that would otherwise be applied by default. In mobile apps the number of fields you want to display is probably less than in a Notes client application.
  • Ability to re-open the wizard after you have pressed ‘Finish’.
  • It would be great to have message popups when a user performs an action that he/she is not allowed to do. At the current stage there is default no mechanism for this. Examples: “You are not authorized to perform this action”, “You have insufficient access rights”.

m_mobile

m_people

m_person

Using Bootstrap in XPages – The ultimate incomplete guide

This document describes how to integrate the popular front-end framework Twitter Bootstrap with XPages. The purpose is to provide developers an introduction to use Twitter Bootstrap in XPages development projects by building an actual application.

Below you can find a document/manual I started to write a while ago but I never finished (I guess there is no finish since new boundaries are explored every day). At least the document should give you a head start with using ‘raw’ (Twitter) Bootstrap in XPages. I also recommend you to take a look at the Bootstrap4XPages project on OpenNTF since this project offers lots of ‘out of the box’ conversions of components from the Extension Library (e.g. data view control).

Bootstrap in XPages

Enjoy reading!

Distribution of the extension library

I have written a document on the distribution of the extension library. I have compared Upgrade Pack installation option with using an Update Site. You may guess who has become the winner. If there is anything incorrect stated in the document please let me know.

PDF: Distribution Extension Library

Contents

  • Introduction. 2
    • Description. 2
    • Upgrade Pack. 2
    • Update Site database. 2
  • Discussion. 3
    • Physical installation versus runtime installation. 3
    • Administration overhead. 3
    • IBM support. 3
    • Speed in delivery of new functionality. 4
    • Proven technology versus Experimental phase. 4
  • Comparison. 4
    • Winner. 4
  • References. 5
    • XPages Extensibility API Developers Guide. 5
    • Installing and administering the XPages Extension Library. 5
    • XPages Extension Library Deployment in Domino 8.5.3. 5

Introduction

This document discusses the (recommended) way the extension library is distributed within Organization X.

Description

Based on the XPages Extensibility API, the Extension Library provides a set of new artifacts, including controls, which introduces extended capabilities to supplement XPages.

At the moment we see the library distributed in 2 ways:

  • Upgrade Pack.
  • Update Site database.

Upgrade Pack

The Upgrade Pack is an installation package that contains new features and improvements in Domino Designer.

The main functionality highlights of this upgrade pack include the following:

  • XPages Extension Library.
  • Domino Designer tooling plug-in.
  • Domino Data Services.
  • Updated TeamRoom and Discussion templates.

The XPages Extension Library provides additional controls that are ready to use.

The Upgrade Pack is restricted to a specific release of Domino. Currently there is 1 version released which is dedicated to Domino 8.5.3.

The Upgrade Pack 1 is supported by IBM.

Update Site database

An Eclipse update site is a repository for features and plug-ins and it follows a standard format. In IBM Notes the update site is an NSF application where OSGi bundles are dynamically contributed to the OSGi runtime of the Domino server.

The Extension Library will be uploaded to the Update Site application from where it is made available.

A great advantage of this approach is that plugins are not physically installed on the server but started up on HTTP startup of the Domino server.

The Domino OSGi launcher will automatically detect which version of a plugin it should use. Multiple versions of the Extension Library can be hosted by an update site. This increases the delivery of new functionality.

The Extension Library for an Update Site is distributed via OpenNTF at http://extlib.openntf.org/.

Discussion

There should be a discussion what the preferred way to distribute the extension library is. Each method has its advantages and disadvantages:

  • Physical installation versus runtime installation.
  • Administration overhead.
  • IBM support.
  • Speed in delivery of new functionality.
  • Proven technology vs. Experimental phase.

Physical installation versus runtime installation

The installation (and de-installation) via an Upgrade Pack is a physical installation and demands that a server must be shut down. The installation via an Update Site is not a physical installation and the server does not have to be shut down, only the HTTP task has to be restarted on the server.

The Update Site can be installed on multiple servers via replication and hereby the installation of the Extension Library on multiple servers can be accelerated.

There is a downside to the runtime installation. A Notes server has to have defined in the Notes.INI settings that dynamic bundles can be installed in OSGI via HTTP reset:

http://www-10.lotus.com/ldd/ddwiki.nsf/dx/XPages_Extension_Library_Deployment#Set+the+Notes.INI+variable+-+OSGI_HTTP_DYNAMIC_BUNDLES

In order to have this Notes.INI setting in place the server has to be restarted once.

Administration overhead

The Extension Library provided via OpenNTF has continuous new releases. Most of these releases are bug fixes and the others provide new functionality.

It is likely that developers demand after the installation of latest release via an Update Site, in order to have access to the new functionality. This will create extra requests and administration overhead.

On the other side the physical downtime of a server has a very high impact also on the administration side (announcements, change requests, fall back servers, incident reports sent by ignorant users).

IBM support

Upgrade Pack is “supported” by IBM. You can discuss what that means. For certain you can make a PMR (problem management record) but it is not known if IBM is providing hotfixes for bug fixes for the Upgrade Pack.

Experiences in other PMR’s on Notes software (NTF templates for Notes) have not been positive always.

On the other hand one cannot really say that distribution of the Extension Library from OpenNTF via an Update Site is “not supported” by IBM. Since the release of the Extension Library there have been multiple releases (over 30) of the Extension Library. Most of these releases are bug fixes assumed.

There is a lively discussion on the Extension Library on OpenNTF http://www.openntf.org/internal/home.nsf/discussions.xsp?action=openDocument&name=XPages%20Extension%20Library&documentId=523C4281B0889F12862577910060E232 which makes the necessity of support from IBM less.

Speed in delivery of new functionality

In Today’s world software suppliers provide more often software updates silently on the background to boost security or to provide new functionality. In the browser world this seems almost to have become a standard.

Being able to deliver new functionality more quickly can bring extra value to the business.

An Upgrade Pack has only been released once until now. The announced Upgrade Pack 2 seems only to be focused on Notes Traveller. In the meantime more than 30 releases are available for the Extension Library on OpenNTF.

Proven technology versus Experimental phase

Upgrade Pack 1 contains only a stable version of the Extension Library.  The Extension Library on OpenNTF contains also experimental features (e.g. Social, RDBMS support). These features will someday reside in the ‘ordinary’ Extension Library.

The features are collected in an Extended Components library. This Extended Components library must be installed via an Update Site. From discussions on the internet it seems to be possible to install this library on top of an Upgrade Pack via and Update Site. But why use 2 methods to distribute functionality when you can combine them via one (via Update Site)?

Comparison

Based upon the previous discussion we will compare the two methods.

Upgrade Pack Update Site
Installation Physical Runtime
Administration 1 version Multiple versions
Support IBM (PMR) OpenNTF (defect, discussion)
New functionality New Upgrade (once 2 years?) New Release (each 2 months)
Proven vs Experimental Proven Proven + Experimental

Winner

The overall ‘winner’ in this comparison is the distribution via an Update Site. A runtime installation offers a lot of benefits above a physical installation:

  • Quick installation.
  • Availability server.
  • Replication option installation software.
  • New functionality.

There are some drawbacks:

  • A server needs to have the OSGI_HTTP_DYNAMIC_BUNDLES Notes.INI property which requires a restart of the server.
  • Installed versions of the Upgrade Pack should be removed first.

References

XPages Extensibility API Developers Guide

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

Installing and administering the XPages Extension Library

http://www-10.lotus.com/ldd/ddwiki.nsf/xpDocViewer.xsp?lookupName=Domino+Designer+XPages+Extension+Library#action=openDocument&res_title=Installing_and_administering_the_XPages_Extension_Library_ddxl853&content=pdcontent

XPages Extension Library Deployment in Domino 8.5.3

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