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:

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:

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:

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!

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.

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:

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:

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!

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.

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:

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:

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!

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:

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:

And here the result when I open a document:

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!

I work in a hosted environment and having a change applied (continue to work with extension libraries from OpenNTF via Update site instead of Upgrade Packs) is a complicated issue. Therefor I have wrote down some use cases where new functionality in the Extension Library which are not available in the Upgrade Pack can bring value to the organisation.

To save time I only did the comparison on paper, which means I have only looked in the “readme” files distributed which each new release and compared them the “What’s new in Domino Designer 8.5.3 Upgrade Pack 1” online document. I admit this is probably not the best research but it helps you to get started.

Below you will find the comparison. Please respond in case I have missed something or understood incorrect. The use cases are too sensitive so I will leave them out of this document. Thank you in advance for your assistance!

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.

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

Unfortunately this TextSetFontColor command only allows these colors:

1. Black
2. Gray
3. Red
4. DarkRed
5. Green
6. DarkGreen
7. Blue
8. DarkBlue
9. Magenta
10. DarkMagenta
11. Yellow
12. Brown
13. Cyan
14. DarkCyan
15. White

In the Help file it says:

Language cross-reference
NotesColor property of LotusScript NotesRichTextStyle class

Is there anyone who has written the LotuScript equivalent to change the color of selected text in a rich text field (with RGB value)?

jQCloud is a JQuery based plugin that does a bit of the trick for you. Unfortunately it seems the link option can not handle question mark parameters so an .xsp?filter= link does not work. This makes the plugin little of interest. Nevertheless here is my progress so far:

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”http://www.ibm.com/xsp/core”&gt;
<xp:this.beforePageLoad><![CDATA[#{javascript:var v:NotesView = database.getView("country");
v.setAutoUpdate(false);
var nav:NotesViewNavigator = v.createViewNav();
var entry:NotesViewEntry = nav.getFirst();
var data:String = "";
while (entry != null && !entry.isTotal()) {
if (entry.isCategory()){
var cat = entry.getColumnValues().firstElement().toString();
var num = entry.getChildCount().toFixed();
//var link = ", link: './jQueryCloud.nsf/country.xsp?cat=" + cat + "'";
var link = ", link: './CountryFiltered.xsp'"
var data = data + "{text: '" + cat + "', weight: " + num + link +"},";
}
var tmpentry:NotesViewEntry = nav.getNext();
entry.recycle();
entry = tmpentry;
}
viewScope.put("categories",@LeftBack(data,","));

}]]></xp:this.beforePageLoad>
<head>
<title>jQCloud Example</title>
<link rel=”stylesheet” type=”text/css” href=”jqcloud.css” />
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js”></script&gt;
<script type=”text/javascript” src=”jqcloud-1.0.3.js”></script>
<script type=”text/javascript”>
/*!
* Create an array of word objects, each representing a word in the cloud
*/
var word_array = [
{text: "Lorem", weight: 150},
{text: "Ipsum", weight: 90, link: "http://jquery.com/"},
{text: "Dolor", weight: 60, html: {title: "I can haz any html attribute"}},
{text: "Sit", weight: 7},
{text: "Amet", weight: 5}
// ...as many words as you want
]

</script>
</head>
<div id=”example” style=”width: 550px; height: 350px;”></div>
<xp:eventHandler event=”onClientLoad” submit=”false”>
<xp:this.script><![CDATA[var viewData = "";
var viewData = viewData + "#{javascript:@Text(viewScope.get("categories").toString())}";

var myStr = "var word_array = [" + viewData + "];”;

var p = eval(myStr);

$(function() {
// When DOM is ready, select the container element and call the jQCloud method, passing the array of words as the first argument.
$(“#example”).jQCloud(word_array);
});]]></xp:this.script>
</xp:eventHandler></xp:view>

Job Wanted

Looking for a creative brain? Choose me!

Here follows a brief description how you can utilize the plugin in your IBM Notes – XPages application.

Resources

Copy the resources to the WebContent folder via the Package Explorer:

Calendar display

Next I created an XPage to display the calendar:

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”http://www.ibm.com/xsp/core&#8221;
pageTitle=”Responsive Calendar with calendario.js”
createForm=”false”>
<!–[if IE 9]><html class=”no-js ie9″><![endif]–>
<!–[if gt IE 9]><!–>
<xp:this.resources>
<xp:metaData name=”charset” content=”utf-8″></xp:metaData>
<xp:metaData name=”http-equiv” content=”IE=edge,chrome=1″></xp:metaData>
<xp:metaData name=”viewport” content=”width=device-width, initial-scale=1.0″></xp:metaData>
<xp:script src=”scripts/modernizr.custom.63321.js” clientSide=”true”></xp:script>
<xp:script src=”http://code.jquery.com/jquery-1.9.1.min.js&#8221; clientSide=”true”></xp:script>
<xp:script src=”http://code.jquery.com/jquery-migrate-1.1.1.min.js&#8221; clientSide=”true”></xp:script>
<xp:script src=”scripts/jquery.calendario.js” clientSide=”true”></xp:script>
<xp:script src=”data.xsp” clientSide=”true”></xp:script>
<xp:linkResource href=”styles/screen.css” rel=”stylesheet” media=”all” target=”_self” charset=”UTF-8″></xp:linkResource>
</xp:this.resources>
<html class=”no-js”><!–<![endif]–>
<script type=”text/javascript”>
$(document).ready(function(){ var cal = $( ‘#calendar’).calendario( { onDayClick : function( $el, $contentEl,
dateProperties ) {
for( var key in dateProperties ) { console.log( key + ‘ = ‘ + dateProperties[ key ] ); }}, caldata : webdesigner } ), $month = $( ‘#custom-month’).html( cal.getMonthName() ), $year = $( ‘#custom-year’).html( cal.getYear() );
$( ‘#custom-next’ ).on( ‘click’, function() {
cal.gotoNextMonth( updateMonthYear ); } ); $( ‘#custom-prev’).on( ‘click’, function() { cal.gotoPreviousMonth(updateMonthYear ); } ); $( ‘#custom-current’ ).on( ‘click’,function() { cal.gotoNow( updateMonthYear ); } );
function updateMonthYear() { $month.html( cal.getMonthName()); $year.html( cal.getYear() ); }
});
</script>
<body>
<div class=”container”>
<div class=”custom-calendar-wrap custom-calendar-full”>
<div class=”custom-header clearfix”>
<h2>Responsive Calendar</h2>
<h3 class=”custom-month-year”>
<span id=”custom-month” class=”custom-month”></span>
<span id=”custom-year” class=”custom-year”></span>
<nav>
<span id=”custom-prev” class=”custom-prev”></span>
<span id=”custom-next” class=”custom-next”></span>
<span id=”custom-current” class=”custom-current” title=”Got to current date”></span>
</nav>
</h3>
</div>
<div id=”calendar” class=”fc-calendar-container”></div>
</div>
</div><!– /container –>
</body>
</html>
</xp:view>

Data

To create content for the data I created a Notes form with 2 fields: date and title. Also create a Notes view that is sorted by the date field.

To collect the data for the calendar.xsp create another XPage that will behave like an “XAgent”:

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”http://www.ibm.com/xsp/core&#8221; rendered=”false” viewState=”false”>
<xp:this.afterRenderResponse><![CDATA[#{javascript:
var externalContext = facesContext.getExternalContext();
var response = externalContext.getResponse();
var writer = response.getWriter();

response.setContentType("application/javascript");
response.setHeader("Cache-Control", "no-cache");
var v:NotesView = database.getView("entries");
v.AutoUpdate = false;
var viewData = "var webdesigner = {";
if (v.getEntryCount() != 0){
var vDoc:NotesDocument = v.getFirstDocument();
while (vDoc != null){
var nextvDoc:NotesDocument = v.getNextDocument(vDoc);

//viewDataDT:NotesDateTime = session.createDateTime(vDoc.getItemValueDateTimeArray("date"));
//viewDataDT = vDoc.getItemValueDateTimeArray("date");
//viewData = viewData + viewDataDT.getDateOnly();
var dt:NotesDateTime = vDoc.getItemValueDateTimeArray("date").elementAt(0);
var day = @Day(dt.getDateOnly());
var str = "" + day;
var pad = "00"
var day = pad.substring(0, pad.length - str.length) + str;

var month = @Month(dt.getDateOnly());
var str = "" + month;
var pad = "00"
var month = pad.substring(0, pad.length - str.length) + str;
var year = @Year(dt.getDateOnly());
var cDate = month + "-" + day + "-" + year;

viewData = viewData + "'" + cDate + "' : ";
var title = vDoc.getItemValueString("title");

viewData = viewData + "'<a href=\"" + "entry.xsp?documentId="+ vDoc.getUniversalID() + "\">" + title + "</a>',";
vDoc.recycle();
var vDoc:NotesDocument = nextvDoc;
}
viewData = @LeftBack(viewData,1);
}
viewData = viewData + "};";
writer.write( viewData);
writer.endDocument();
facesContext.responseComplete();
}]]></xp:this.afterRenderResponse>

</xp:view>

Result

Open the calendar.xsp. In small screen it should look like:

For larger screens (tablets/desktop) the calendar should look like:

Not bad ain’t it? I am not sure how responsive iNotes 9 is, my 8.5.3 version could use some.

Demo download

I have uploaded a sample database which can be found here.

Also look at the following site to read the options for this interesting jQuery plugin:

http://tympanus.net/codrops/2012/11/27/calendario-a-flexible-calendar-plugin/

Job Wanted

Looking for a creative brain? Try me!

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:

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

A rolling stone does not gather moss

But I have come to a point where my current job hinders my creativity and my ambitions too much. Therefor I have decided it is time to make my desire for a new more challenging work environment more clear.

I have added a noticeable image in a widget on the right of this blog that will remain there until the time necessary.

My strengths are:

• Understanding of web development and standards.
• The IBM Notes platform most application development but also system administration to some extent.
• Project management.
• Affinity with working in large organizations.

I am have good skills in the following languages: English, Dutch, German and Swedish so I am looking primarily for opportunities in countries with these languages or a working environment where one of these languages are the main communication language.

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?

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>

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.

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…

I found online an old description how to enable image galleries for your/the IBM Domino Blog Template (Not sure if we may label it IBM any longer since they have open sourced it so the ‘community’ may solve issues (I am told).

The description you can find <here>.

Unfortunately the description does not work for me. Are there others who set up successfully image galleries in the Blog template and are willing to share their solutions/approach?

Related information:

http://www.slideshare.net/projectdxguy/lotus-notes-blog-template

http://www.slideshare.net/Phigment/blog-it-up-baby-extending-the-new-ibm-lotus-domino-blog-template

http://www.slideshare.net/projectdxguy/ibm-lotus-notes-domino-blog-template-update-801

Similar question:

http://www-10.lotus.com/ldd/nd8forum.nsf/4b9931b774db788c85256bf0006b5e6d/3d269df8cd39e83f852575f50048d1f6?OpenDocument

Here it is in an instance on an IBM address:

I was surprised I got contacted shortly after that by IBM (mostly they don’t seem to respond on reported defects on IBM projects on OpenNTF)

Here the conversation:

Michael Stewart	8:07 PM (15 hours ago)
to me, Jennifer

Hi,

Your server level may be the cause of some or all of the problems you’re
seeing. The 2.8.2 template requires IBM Domino 9.0 Social Edition. My
apologies for not making that clear on OpenNTF or in the 2.8.2 template
documentation. Jennifer Heins has added text to that effect in both places.

If you are able to upgrade, you can get the beta here:

http://www-10.lotus.com/ldd/ndsebetaforum.nsf/topicThread.xsp?action=openDocument&documentId=2F8AD78A70015CC485257AD3004AF0EE

and I would appreciate it if you could let us know at that point whether
you still see the problems you have reported.

Again, sorry for the inconvenience–but I’m also glad that you made the
initial attempt, since it exposed the need for this clarification.

Mike

From:   Patrick Kwinten
To:     Michael Stewart
Cc:     Jennifer Heins
Date:   01/24/2013 01:17 PM
Subject:        Re: Re view alignment defect

Hi Mike,

no I did not make any modifications to the views or styling.

As theme have I set idctheme, since our server is on 8.5.2. it extends
oneui2.1

KR Patrick

On Thu, Jan 24, 2013 at 6:52 PM, Michael Stewart wrote:
Hi,

Regarding this defect:

http://www.openntf.org/internal/home.nsf/defect.xsp?action=openDocument&documentId=226AFB4BE255565486257AFD003A0914

I don’t recognize the styling in the top image. It isn’t just the view
entry alignment that is off, but also the highlighting of the navigation
entries in the lefthand column. Have you made any modifications to the
styles in this wiki?

Thanks,

Mike

Even though the On Web Access Content-type form properties were set correct.

After some digging & trying I ran into the following post that solved the case:

I normally use a simple document for stylesheets and JavaScript libraries in Notes. The form has a field for the “filename” (e.g. my_lib.js) and a field for the data. Until now I had been using a richtext field called HTML for the contents and changed the Content-Type on the form properties as appropriate (text/javascript, text/css etc.). This was working nicely until I created a page using the Strict XHTML DOC-TYPE.

It became an issue because Firefox requires that the Content-Type is text/css for stylesheets when rendering in Strict mode. Otherwise the stylesheet wont be used. Using the Live HTTP Headers extension for Firefox I saw that Domino kept setting the Content-Type to text/html even though the form properties was set to text/css.

Changing the richtext field name from HTML to Body solved the problem. Apparently Domino will not honor the specified Content-Type when the form has a field called HTML.

Indeed: One of those things in Domino…

I thought I write this one down. A developer asked me how to make a form more user-friendly. Basically a user reports via the form a problem somewhere in the building to the central desk and they send a mechanic. To have a more precise allocation of the problem, a room number is required to fill in.

I suggested to use an image map. There are sites around that help you define the correct coordinates.

XPages

In DDE add an image as a resource. Drag that same image into your XPage. In the Properties panel find under All Properties \ Basics the usemap property. Include here the name of your image map. This is the one you have set on your map object.

In the map object you can include in the HREF attribute an URL or JavaScript. With Dojo you can establish some nice interaction with input fields on your XPage.

<?xml version=”1.0″ encoding=”UTF-8″?>
<xp:view xmlns:xp=”http://www.ibm.com/xsp/core&#8221; dojoParseOnLoad=”true”
>
<xp:image url=”/bambi.jpg” id=”image1″ usemap=”imap_bambi”></xp:image>

<map id=”imap_bambi” name=”imap_bambi”>
<area shape=”rect” coords=”11,1,160,132″ alt=”daddy”
title=”daddy” href=”http://www.father.com&#8221; />
<area shape=”rect” coords=”171,20,279,108″ alt=”mommy”
title=”mommy” href=”http://www.mommy.com&#8221; />
<area shape=”rect” coords=”131,145,239,233″ alt=”bambi”
title=”bambi” href=”javascript:alert(‘hi there’)” />
<area shape=”rect” coords=”279,12,387,100″ alt=”butterfly”
title=”butterfly”
href=”javascript:dojo.byId(‘#{id:inputText1}’).value = ‘found it’” />
</map>
<xp:inputText id=”inputText1″></xp:inputText>
</xp:view>

ismap property

What I do not understand is what the ismap property is capable of. Documentation is hard to find. Maybe you know an example?

(now I also have a backup…)