Archive for XPages

breadcrumbs in XPages (non extension library style)

2013-June-19 at 3:08 pm · Filed under XPages ·Tagged ,

I have still got a question open on the XPages development forum regarding how to use the breadcrumb control from the Extension Library. In case you happen to have an answer on the question, please post  it there (or here…).

Previously I have written more on providing breadcrumbs in Domino and XPages. I overlooked the unshift JavaScript method which allows you to add items in the beginning of an array.

In combination with the getParentID function for a NotesDocument you can simply create an reversed array of all parents and use the array as data a repeat control. Within the repeat control you place a link control and populate the label and document reference.

Here is the code sample:

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”http://www.ibm.com/xsp/core”&gt;
<xp:this.data>
<xp:dominoDocument var=”doc” formName=”Document”></xp:dominoDocument>
</xp:this.data>
<xp:div styleClass=”lotusBreadcrumbs” role=”navigation”>
<xp:link value=”/” text=”${database.title}” />
 &gt;&gt; 
<xp:repeat var=”breadcrumbs”>
<xp:this.value><![CDATA[#{javascript:var result = [];
var ref = doc.getParentId();
while(ref){
var parent = database.getDocumentByUNID(ref);
result.unshift({
unid: ref,
label: parent.getItemValueString(“Tx_Document_Title”)
})
ref = parent.getParentDocumentUNID();
}
return result;
}]]></xp:this.value>
<xp:link value=”/0/#{breadcrumbs.unid}” text=”#{breadcrumbs.label}” />
 &gt;&gt; 
</xp:repeat>
<xp:text value=”#{doc.Tx_Document_Title}” />
</xp:div>
</xp:view>

Here is how a result could look like:

breadcrumbs

 

Not really exciting but hopefully helpful for you.

Job Wanted

Looking for a creative brain? Choose me!

job-wanted

Comments (1)

Navbar with dropdown menu from Notes view in Twitter Bootstrap (with XPages)

2013-May-31 at 2:14 pm · Filed under XPages ·Tagged , , ,

Introduction

Hey hey, sorry to bother you again with a post about using a Notes view in combination with Twitter Bootstrap.

In my previous post I was not sure about using nav-pills. I fear not all users will understand them. I assume that most users are common with a site header with navigational options. This navigation can be like tab bars (hihi watch some real old work) some with nested tabs in fancy drop down menus. Twitter Bootstrap have probably taken notice of this expected behavior and provided therefor the navbar component.

Implementation

I used the same conditions as in my previous post (Mark Leusink’s Bootstrap4XPages demo site and my Notes view:

notesview clean

 

Here is how the code on my XPage looks like:

<div class=”navbar navbar-inverse navbar-fixed-top”>
<div class=”navbar-inner”>
<div class=”container-fluid”>
<a data-target=”.nav-collapse” data-toggle=”collapse”
class=”btn btn-navbar”>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</a>
<a href=”#” class=”brand”>
<xp:text escape=”true” id=”computedField1″ value=”#{javascript:@DbTitle()}”></xp:text></a>
<div class=”nav-collapse”>
<ul class=”nav”>
<li class=”dropdown”>
<a data-toggle=”dropdown” class=”dropdown-toggle” href=”#”>Site Index<b class=”caret”></b></a>
<xp:text escape=”false” disableTheme=”true” value=”#{javascript:getList()}” rendered=”true”></xp:text>
</li>
<li class=”active”>
<xp:link escape=”true” text=”Home” id=”link1″ value=”/index.xsp”></xp:link>
</li>
<li>
<a href=”#”>Static Link 1</a>
</li>
<li class=”divider-vertical”></li>
<li>
<a href=”#”>Static Link 2</a>
</li>
</ul>
<form action=”" class=”navbar-search pull-left”><input type=”text” placeholder=”Search” class=”search-query span2″ /></form>
<ul class=”nav pull-right”>
<li>
<a href=”#”>Static Link 3</a>
</li>
<li class=”divider-vertical”></li>
<li>
<a href=”#”>Static Link 4</a>
</li>
</ul>
</div><!– /.nav-collapse –>
</div>
</div>
</div>

Note: I had to set attributes for escape and disableTheme for the computed field otherwise the navbar would get messed up.

In the computed field I call a SSJS function that is similar to the one in the previous post:

function getList(){
var nav:NotesViewNavigator = database.getView(“$v-treeview-clean”).createViewNav();
var entry:NotesViewEntry = nav.getFirst();
if (entry !=null){
var countLevel:Integer = 0;
var curLevel:Integer;
var list = “<ul class=\”dropdown-menu\”>”;
while (entry !=null){
var edoc:NotesDocument = entry.getDocument();
entryValue = entry.getColumnValues().elementAt(1).toString();
var col:NotesDocumentCollection = edoc.getResponses();
curLevel = entry.getColumnIndentLevel();
if (col.getCount()>0){
//prep for new entry with response(s)
var difLevel = countLevel – curLevel ;
var closure = “”
for (var i=0; i<(difLevel); i++){
closure = closure + “</ul></li>”
}
list = list + closure;
list = list + “<li class=\”dropdown-submenu\”>”;
list = list + “<a href=\”#\”>” + entryValue + “</a>”;
list = list + “<ul class=\”dropdown-menu\”>”;
//increase counter
countLevel = curLevel + 1;
}
else{
if(curLevel==countLevel){
list = list + “<li><a href=\”#\”>” + entryValue + “</a></li>”;
}
else if(curLevel<countLevel){
var difLevel = countLevel – curLevel ;
var closure = “”
for (var i=0; i<(difLevel); i++){
closure = closure + “</ul></li>”
}
list = list + closure
countLevel = curLevel;
}
else {
//
}
}
var tmpentry:NotesViewEntry = nav.getNext(entry);
entry.recycle();
entry = tmpentry;
}
//final closure, last entry could be response doc
var closure = “”
for (var i=0; i<(countLevel); i++){
closure = closure + “</ul></li>”
}
list = list + closure
//closure nav nav-list
list = list + “</ul>”;
return list;
}
else{
return “no documents found”;
}
}

C’est tout!

Result

Here is how the result looks like for desktop:

navbar

 

Reflections

Not bad for something “out of the box”!

I placed the “Site Index” at the beginning because it appears that the expanding of the nested lists continues to the right, even when it has reached the end of your screen :-? There is the option to set the class for nested list to dropdown-submenu pull-left but I think it will be odd if you collapse one level open to the right and the next to the left.

Mobile users

Mobile users will find it difficult accessing the nested lists as the following image demonstrates:

mobilenavbar

 

Only the first 7 entries seem to become displayed, so when you open nested lists the items below just get pushed away. Luckily they return when you close the nested lists.

Alternative

The options for providing deep-level navigation seem to be a bit limited in Twitter Bootstrap. an alternative might be a collapsible tree menu for TB which you can find an example described here.

Job Wanted

Looking for a creative brain? Choose me!

job-wanted

Leave a Comment

Dropdown menu from Notes view in Twitter Bootstrap (with XPages)

2013-May-31 at 8:40 am · Filed under XPages ·Tagged , , ,

Introduction

OK, so I was a bit unsatisfied with the navigation list in my previous post. The nav-list component seems not to be destined to contain too many category sub levels.

Dropdowns

Toggleable, contextual menu for displaying lists of links.

Pills

I am not sure how you would describe pills in Twitter Bootstrap but to me they look more like buttons you build a navigation with.

tb pills

Implementation

Again I used Mark Leusink’s Bootstrap4XPages demo site. As source for my documents I am re-using the same view from my previous post:

notesview clean

I found an example code for nesting lists on Fiddle and modified it a bit to my needs.

I display the results via a computed field that looks as followed:

<xp:text escape=”false” id=”computedField1″ value=”#{javascript:getList()}” ></xp:text>

The function getList() is very similar to the one in my previosu post and looks as followed:

function getList() {
var nav: NotesViewNavigator = database.getView(“$v-treeview-clean”).createViewNav();
var entry: NotesViewEntry = nav.getFirst();
if (entry != null) {
var countLevel: Integer = 0;
var curLevel: Integer;
var list = “<div class=\”dropdown\”>”;
list = list + “<ul class=\”nav nav-pills\”>”;
list = list + “<li class=\”dropdown active\” id=\”accountmenu\”>”;
list = list + “<a class=\”dropdown-toggle\” data-toggle=\”dropdown\” href=\”#\”>Home</a>”;
list = list + “<ul class=\”dropdown-menu\”>”
while (entry != null) {
var edoc: NotesDocument = entry.getDocument();
entryValue = entry.getColumnValues().elementAt(1).toString();
var col: NotesDocumentCollection = edoc.getResponses();
curLevel = entry.getColumnIndentLevel();
if (col.getCount() > 0) {
//prep for new entry with response(s)
var difLevel = countLevel – curLevel;
var closure = “”
for (var i = 0; i < (difLevel); i++) {
closure = closure + “</ul></li>”
}
list = list + closure;
list = list + “<li class=\”dropdown-submenu\”>”;
list = list + “<a href=\”#\” tabindex=\”-1\”>” + entryValue + “</a>”;
list = list + “<ul id=\”" + entryValue + “\” class=\”dropdown-menu\”>”;
//increase counter
countLevel = curLevel + 1;
} else {
if (curLevel == countLevel) {
list = list + “<li><a href=\”#\”>” + entryValue + “</a></li>”;
} else if (curLevel < countLevel) {
var difLevel = countLevel – curLevel;
var closure = “”
for (var i = 0; i < (difLevel); i++) {
closure = closure + “</ul></li>”
}
list = list + closure
countLevel = curLevel;
} else {
//
}
}
var tmpentry: NotesViewEntry = nav.getNext(entry);
entry.recycle();
entry = tmpentry;
}
//final closure, last entry could be response doc
var closure = “”
for (var i = 1; i < (countLevel); i++) {
closure = closure + “</ul></li>”
}
list = list + closure
//closure nav nav-list
list = list + “</ul></li></ul></div>”;
//closure well sidebar-nav

return list;
} else {
return “no documents found”;
}
}

Here is what the result looks like:

dropdowndemo

Alternative

The example above looks nice but I am not sure what the purpose of nav-pills are? (don’t ask a Dutch the pills Q)  I guess users would expect site navigation to be in a navigational bar, so expect another post on the nav-bar component.

Job Wanted

Looking for a creative brain? Choose me!

job-wanted

Comments (1)

Navigation list from Notes view in Twitter Bootstrap (with XPages)

2013-May-30 at 9:46 am · Filed under XPages ·Tagged , , ,

Introduction

In my previous post I demonstrated how you create breadcrumbs from Notes view in Twitter Bootstrap. A typical Notes application contains an outline (I assume you don’t the Navigator design element anymore). In this post I demonstrate how to create something similar in Twitter Bootstrap, a Nav List.

navlist example

Nav Lists

A Nav list is a simple and easy way to build groups of nav links with optional headers. They’re best used in sidebars like the Finder in OS X. You can nest nav-lists and then they come quit close to categorized or hierarchical structured documents (e.g. parent & response).

Implementation

As  a start database I used Mark Leusink’s Bootstrap4Xpages demo site which you can download here.

As source I am also using a similar view as I used in my previous post. Here is how it looks like:

notesview clean

I found an example code for nesting lists on Fiddle. Note that you can extend nav-list with mouse over behavior but I fear for mobile phones and tablets this will be a crime.

I display the results via a computed field that looks as followed:

<xp:text escape=”false” id=”computedField2″ value=”#{javascript:getNavList()}”></xp:text>

The function getNavList() looks as followed:

function getNavList(){
var nav:NotesViewNavigator = database.getView(“$v-treeview-clean”).createViewNav();
var entry:NotesViewEntry = nav.getFirst();
if (entry !=null){
var countLevel:Integer = 0;
var curLevel:Integer;
var list = “<div class=\”well sidebar-nav\”><ul class=\”nav nav-list\”>”;
while (entry !=null){
var edoc:NotesDocument = entry.getDocument();
entryValue = entry.getColumnValues().elementAt(1).toString();
var col:NotesDocumentCollection = edoc.getResponses();
curLevel = entry.getColumnIndentLevel();
if (col.getCount()>0){
//prep for new entry with response(s)
var difLevel = countLevel – curLevel ;
var closure = “”
for (var i=0; i<(difLevel); i++){
closure = closure + “</ul></li>”
}
list = list + closure;
list = list + “<li>”;
list = list + “<a href=\”#\” data-toggle=\”collapse\” data-target=\”#” + entryValue + “\”>” + entryValue + “</a>”;
list = list + “<ul id=\”" + entryValue + “\” class=\”collapse in\”>”;
//increase counter
countLevel = curLevel + 1;
}
else{
if(curLevel==countLevel){
list = list + “<li><a href=\”#\”>” + entryValue + “</a></li>”;
}
else if(curLevel<countLevel){
var difLevel = countLevel – curLevel ;
var closure = “”
for (var i=0; i<(difLevel); i++){
closure = closure + “</ul></li>”
}
list = list + closure
countLevel = curLevel;
}
else {
//
}
}
var tmpentry:NotesViewEntry = nav.getNext(entry);
entry.recycle();
entry = tmpentry;
}
//final closure, last entry could be response doc
var closure = “”
for (var i=1; i<(countLevel); i++){
closure = closure + “</ul></li>”
}
list = list + closure
//closure nav nav-list
list = list + “</ul>”;
//closure well sidebar-nav
list = list + “</div>”;
return list;
}
else{
return “no documents found”;
}
}

In order to make it look nice embed the computed field in div element and give it a span class.

Below you see the final result:

result nav list

 

 

You notice directly an obvious problem: the long title references which are typical for Notes documents.

Alternative

Twitter Bootstrap offer other alternatives which might be more suitable for transforming Notes views. And example is the dropdown. This you can extend with the dropdown JavaScript plugin.

Point for improvement

A class I did not use for the LI element is nav-header. This gives a nice outstanding header, which are great for categorized views.

A class I did not use for the LI element is active which highlights a list item. When using the nav-list on documents opened via an XPage I guess it is best practice to add the class name when the document is ready on the client.

The HREF attribute is not computed but this can be extracted from the viewentry.

Performance. The view above contains very little documents. I still have to test it with larger databases. Some examples where I want to use the nav-list contain more than 15000 documents in the view. I wonder how much I can use sessionScope or place the HTML in a profile document. Any suggestions here are welcome.

Tools used

Beside DDE is used heavily NotePad++ to check the generated HTML.

Job Wanted

Looking for a creative brain? Choose me!

job-wanted

Comments (5)

Breadcrumbs from Notes view in Twitter Bootstrap (with XPages)

2013-May-28 at 11:18 am · Filed under XPages ·Tagged , , ,

Long long long time ago I wrote how to create breadcrumbs in Notes and on the Web with help of JQuery. In case you are interested using Twitter Bootstrap with XPages chances are you want to provide similar navigational options for your beloved users.

The code below demonstrates how to achieve this.

<xp:this.data>
<xp:dominoDocument var=”currentDocument” formName=”Document”></xp:dominoDocument>
</xp:this.data>

<xp:text escape=”false” id=”computedField1″
value=”#{javascript:getBreadCrumb()}”>
</xp:text>

and the SSJS function looks like:

function getBreadCrumb(){
var nav:NotesViewNavigator = database.getView(“$v-treeview”).createViewNav();
var doc:NotesDocument = currentDocument.getDocument();
if (nav.gotoEntry(doc)) {
var entry:NotesViewEntry = nav.getCurrent();
var list = “”;
list = “<li>” + entry.getColumnValues().elementAt(1).toString() + “</li>” + list;
while (nav.gotoParent(entry)){
entry = nav.getCurrent();
list = “<li>” + entry.getColumnValues().elementAt(1).toString() + “<span class=\”divider\”>/</span></li>” + list;
}
return “<ul class=\”breadcrumb\”>” + list + “</ul>”;
}
return “no docs found”
}

The Notes view $v-treeview has already href references in the column where I collect the information from:

notes view

Don’t forget to set the Display options for Web for the form. I select the form that contains the computed text that calls the getBreadCrumb() function.

Here is how the view looks like in the browser:

Notes view for web

And here the result when I open a document:

breadcrumb tb

Please leave a note when you have suggestions for improvement OR if you have code to put view info into a nav list to create a collapsible menu.

Job Wanted

Looking for a creative brain? Choose me!

job-wanted

Comments (2)

Distribution of the extension library

2013-April-29 at 11:35 am · Filed under XPages ·Tagged , , , , , ,

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

Leave a Comment

jQuery Mobile 1.3 Panel Widget XPages demo (for download)

2013-March-28 at 1:29 pm · Filed under Lotus Notes, Mobile, Prototype, Sandbox, XPages ·Tagged , , , , ,

The last couple of days I have been ‘playing’ with jQuery Mobile and mostly with the panel widget.

I have made some kind of starter-kit (NSF) to build a great XPages app for tablets/smartphones. I have setup a subset of custom controls which accept properties. A simple form in Notes you can use to setup navigation for header, footer and a vertical menu.

You can download the (zipped) NSF on Dropbox.

Below you can see a sample result:

panelinxpages

Please let me know if you experience any problems or if you have suggestions for improvement. Happy coding!

Comments (2)

Adding resources that include parameters (xpages tip)

2013-March-26 at 1:01 pm · Filed under XPages ·Tagged

You have several options how to include resources (e.g. css files) that include query parameters. What does not seem to work is to add such a style sheet reference via the Resources \ Style sheet option.

However if you add the reference as a linked resource things seem to work e.g.

<xp:linkResource
href=”http://fonts.googleapis.com/css?family=Open+Sans:300,400,700&#8243;
rel=”stylesheet” media=”all” target=”_self” charset=”UTF-8″>
</xp:linkResource>

I am not sure if this is the proper or preferred way to add such resource?

Comments (3)

jQuery Mobile in XPages- Panel Widget

2013-March-25 at 8:37 pm · Filed under jQuery, Mobile, XPages ·Tagged , , ,

jQuery Mobile 1.3 is recently released. This release is focused on elevating responsive web design (RWD) and brings lots of cool new widgets including panels, dual handle range sliders, and two different responsive table modes.

Panel widget

One of the most common mobile UI patterns you see today are Facebook-style panels that open to reveal a menu, form or other content.

The flexible panel widget  allows panels to be positioned on the left or right of the screen. To take this widget responsive, it’s easy to add media queries to make the panel stay open at wider widths instead of auto-closing when you click on the page content. A great demo can be found here.

Currently I am working on a sort of development template that will allow to quickly build an XPages app using the panel widget.

I noticed however some steps you need to take to prepare your XPage application:

  • xsp.html.doctype=html in the xsp properties file sets your doctype.
  • xsp.theme=<empty> in the xsp properties files disables server default theming.
  • createForm=”false” in the XPage will not create the form element. This is important otherwise your relative links will not work.

Below is a sample code you can copy & paste in your XPage to get started:

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”http://www.ibm.com/xsp/core&#8221; createForm=”false”>
<head>
<meta charset=”utf-8″ />
<meta name=”viewport”
content=”width=device-width, initial-scale=1″ />
<title>Panel fixed positioning – jQuery Mobile Demos</title>
<link rel=”stylesheet”
href=”http://view.jquerymobile.com/1.3.0/css/themes/default/jquery.mobile.css&#8221; />
<link rel=”stylesheet”
href=”http://view.jquerymobile.com/1.3.0/docs/_assets/css/jqm-demos.css&#8221; />
<link rel=”shortcut icon”
href=”http://view.jquerymobile.com/1.3.0/docs/favicon.ico&#8221; />
<link rel=”stylesheet”
href=”http://fonts.googleapis.com/css?family=Open+Sans:300,400,700&#8243; />
<script src=”http://view.jquerymobile.com/1.3.0/js/jquery.js&#8221; />
<script
src=”http://view.jquerymobile.com/1.3.0/docs/_assets/js/&#8221; />
<script src=”http://view.jquerymobile.com/1.3.0/js/&#8221; />
<style>
.nav-search .ui-btn-up-a { background-image:none;
background-color:#333333; } .nav-search .ui-btn-inner {
border-top: 1px solid #888; border-color: rgba(255, 255,
255, .1); } .nav-search .ui-btn.ui-first-child {
border-top-width: 0; background: #111; } .userform {
padding: .8em 1.2em; } .userform h2 { color: #555; margin:
0.3em 0 .8em 0; padding-bottom: .5em; border-bottom: 1px
solid rgba(0,0,0,.1); } .userform label { display: block;
margin-top: 1.2em; } .switch .ui-slider-switch { width:
6.5em !important; } .ui-grid-a { margin-top: 1em;
padding-top: .8em; margin-top: 1.4em; border-top: 1px solid
rgba(0,0,0,.1); }
</style>
</head>
<body>
<div data-role=”page” class=”jqm-demos ui-responsive-panel”
id=”panel-fixed-page1″>
<div data-role=”header” data-theme=”f”
data-position=”fixed”>
<h1>Fixed header</h1>
<a href=”#nav-panel” data-icon=”bars”
data-iconpos=”notext”>
Menu
</a>
<a href=”#add-form” data-icon=”plus”
data-iconpos=”notext”>
Add
</a>
</div><!– /header –>

<div data-role=”content” class=”jqm-content”>
<h1>Panel</h1>
<h2>Fixed positioning</h2>
<p>
This is a typical page that has two buttons in the
header bar that open panels. The left button opens a
left menu with the reveal display mode. The right
button opens a form in a right overlay panel. We
also set position fixed for the header and footer on
this page.
</p>
<p>
The left panel contains a long menu to demonstrate
that the framework will check the panel contents
height and unfixes the panel so its content can be
scrolled.
</p>
<h2>Responsive</h2>
<p>
To make this responsive, the panel stays open and
causes the page to re-flow at wider widths. This
allows both the menu and page to be used together
when more space is available. This behavior is
controlled by CSS media queries. You can create a
custom one for a specific breakpoint or use the
breakpoint preset by adding the
<code>class=”ui-responsive-panel”</code>
to the page container. We have added this class on
this demo page.
</p>

<a href=”./” class=”jqm-button” data-ajax=”false”
data-role=”button” data-mini=”true” data-inline=”true”
data-icon=”arrow-l” data-iconpos=”left”>
Back to Panels
</a>

<div data-demo-html=”#panel-fixed-page1″
data-demo-css=”true” />
<!–/demo-html –>

</div><!– /content –>

<div data-role=”footer” data-position=”fixed”
data-theme=”f”>
<h4>Fixed footer</h4>
</div><!– /footer –>

<div data-role=”panel” data-position-fixed=”true”
data-theme=”a” id=”nav-panel”>
<ul data-role=”listview” data-theme=”a”
class=”nav-search”>
<li data-icon=”delete”>
<a href=”#” data-rel=”close”>Close menu</a>
</li>
<li>
<a href=”#panel-fixed-page2″>Accessibility</a>
</li>
<li>
<a href=”#panel-fixed-page2″>Accordions</a>
</li>
</ul>
</div><!– /panel –>

<div data-role=”panel” data-position=”right”
data-position-fixed=”true” data-display=”overlay” data-theme=”b”
id=”add-form”>
<form class=”userform”>
<h2>Create new user</h2>
<label for=”name”>Name</label>
<input type=”text” name=”name” id=”name” value=”"
data-clear-btn=”true” data-mini=”true” />
<label for=”email”>Email</label>
<input type=”email” name=”email” id=”status”
value=”" data-clear-btn=”true” data-mini=”true” />
<label for=”password”>Password:</label>
<input type=”password” name=”password” id=”password”
value=”" data-clear-btn=”true” autocomplete=”off”
data-mini=”true” />
<div class=”switch”>
<label for=”status”>Status</label>
<select name=”status” id=”slider”
data-role=”slider” data-mini=”true”>
<option value=”off”>Inactive</option>
<option value=”on”>Active</option>
</select>
</div>
<div class=”ui-grid-a”>
<div class=”ui-block-a”>
<a href=”#” data-rel=”close”
data-role=”button” data-theme=”c” data-mini=”true”>
Cancel
</a>
</div>
<div class=”ui-block-b”>
<a href=”#” data-rel=”close”
data-role=”button” data-theme=”b” data-mini=”true”>
Save
</a>
</div>
</div>
</form>

</div><!– /panel –>

</div><!– /page –>

<div data-role=”page” id=”panel-fixed-page2″>

<div data-role=”header” data-theme=”f”>
<h1>Landing page</h1>
</div><!– /header –>
<div data-role=”content” class=”jqm-content”>
<p>This is just a landing page.</p>
<a href=”#panel-fixed-page1″ data-role=”button”
data-inline=”true” data-mini=”true” data-icon=”back”
data-iconpos=”left”>
Back
</a>
</div><!– /content –>
</div><!– /page –>
</body>
</xp:view>

Comments (3)

An Anatomy of an Adaptive Web Experience – Brad Frost

2013-March-7 at 3:18 pm · Filed under XPages ·Tagged , ,

Responsive web design is becoming more clearly an important specification from our customers. Allthough the customer is mostly already satisfied when we port the same UI to different devices, responsive web design is just the top of the iceberg when we talk about optimizing web enabled Notes applications for different devices.

iceberg

Today I followed a presentation from Brad Frost held at the Smashing conference 2012. You can find the slides also on Slideshare.

After the presentation I checked a couple of our corporate sites that are responsive with Akamai’s Mobitest and yes, they are responsive but the builders seem to have just looked at what’s sticking out of the water.

Reflecting this back to our development templates for Notes client, Web browser and Mobile device I can conclude we made some basic mistakes. Yes, the application layout control from the extension library may help you provide quickly a UI for desktop clients but this is not the web.

this-is-the-web

Why did IBM did not come up with a responsive application layout control and added responsive utility classes in OneUI? Or should we dissect the OneUI again like Declan Lynch did and solve it with SSJS?

Back to the drawing board that is for sure…

Comments (4)

Older Posts »
Follow

Get every new post delivered to your Inbox.

Join 143 other followers