From Windows 10 to Linux Mint 18

This week I decided to move over my Development host environment from Windows to Linux Mint after a post of a friend in which he stated that he had abandoned his long love with Linux Mint 17… for version 18. If you are unfamiliar with Linux Mint here is a good review on Linux Mint 18.

For the last decade I have been the regular corporate developer, so I did not mind too much about OS and when my pc became slow I just looked for a solution in newer hardware. 2 years ago I bought a new laptop (Lenova), Intel i7 processor, SSD disk, lots of GB for storage and 16GB of RAM. Oh and Windows 8. For Development I use Virtualbox with a Windows 7 guest OS where my Domino server runs on and the client programs (DDE mostly).

Things were running fast in the beginning and the update to Windows 10 was not a problem. But after a while, performance became less due to unknown reasons so I could re-install the whole thing over again (and get in trouble with my fellow users on the machine) or look for an alternative. That alternative became a dual boot option between Windows and Linux Mint.

The installation and re-installation (too small partition at first) went smoothly and within minutes I was running my Development environment hosted on Linux Mint (thanks to the Software Manager). The whole adaption of Linux Mint is a piece of cake. To me Mint desktop reminds me of Windows XP.

The long-term support of Linux Mint 18 (2021) and the possibility of Windows 10 turning from a purchase model into a subscription model is a consideration for the future. Also having features installed from scratch such as an image editor (Gimp) and Office software (Libre Office) is nice. Now I just have to consider switching over from our beloved multi-purpose client (Notes) to something more basic (Thunderbird)…

Rather would I move away my guest environment away from Windows too, but Domino Designer / Administrator is bound to Windows. #WWYT?

In the pipeline I have a Macbook, which delivery takes a bit longer than expected. I am curious how your development environments look like. Perhaps I could take a little tips from them.

Happy development =)

 

I’ve got the bower

As I am trying to get my XPages development workflow more in line with other development teams, my next step was to implement bower so I can skip dragging, copying, removing, updating (too many verbs already) in order to manage my projects.

First stop was Frank van der Linden’s post on bower4xpages. Most of the commands are described in his post so I skip to repeat them here..

Step 1 – Install Node.js

You can install bower with the Node package manager.  So step 1 was to install Node.

Step 2 – Install Bower

With the node package manager I installed bower.

Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you.

Step 3 – Setup the bower files

When Bower runs it needs 2 files: bower.json and .bowerrc file. In the json file you list the dependencies and the rc file points to the location where the files will be copied to. Here is a tip how to create a nameless file in notepad.

Having placed these files in the root of my repository location I was ready for the next step.

Step 4 – Install Git

Since I have been using SourceTree as Git client for Windows I needed to install Git client because Bower makes use of it.

Post Step 4 – Set Windows Environment Variables

When trying to run bower I got message that Git was not installed. Here is a description how to set your Windows environment variables.

Step 5 – Run bower run

Now with everything installed and set the last thing to do was to open the Command Prompt and cd to the root directory of my repository and run the ‘bower install’ command.

As a result I got all the dependencies in my project downloaded and installed.

bower_result

Once again achieved “a new(er) way of working”.

A new way of working: SCM

A new company, a new pc (mac), a new way of working. Change brings opportunity so I decided to move some of my OpenNTF projects, lab projects and code to GitHub.

So far it works just fine and I feel kinda stupid to stick myself for a long time in the old way of working (application templates, shared drives, post code to this blog). Switching between machines/virtual environments has become much nicer.

As tools I choose for DDE, Swiper, SourceTree and Github. I have not come so far with the command line, although the Try Git tutorial on Code School demonstrates it should not be that difficult.

Next step is probably setup a package manager in combination with a task runner.  A bit inspired by Keith Strickland’s presentation at Engage.

Probably I am missing something in my setup but I am happy to read about that in the comments🙂

Modernizing a Notes application

Introduction

The quickest way of modernizing your application build on Notes is probably by keeping it on that sublime application platform and provide a new user-interface and updated business logic to it.

As a demonstratable example I would like to bring up my own Bildr project on OpenNTF.

A brief history

The application started initially as a web browser display only and create content via the Notes client application in the early 2000’s. From that the application was updated in a create content via the web browser too features.

Later the oneUI was implemented in a later step also utilizing the Application Layout control. With the Bootstrap4XPages plugin a responsive UI could be delivered a couple of years ago.

Nowadays the Application Layout control is no longer used but the Bootstrap responsive features and components are used further through the application.

The application still relies on XPages and Notes data (allthough used mainly in JSON format). The business logic resides mainly in Java Classes. With the separation of design and data the application could be hosted on Bluemix (not tested, please do).

Modernization

Looking back at this application story I believe the application will change also in the future (or die) perhaps a challenge could be to have the data optional in a different source (e.g. MongoDB) or exchange XPages for Angular and run it on Node.js.

So if you have experience moving data from Notes to MongoDb, applying a similar ACL and Roles security model on your application I would be happy to hear your experiences.

Or if you are still on the Notes client only level and want to bring your application to a (mobile) browser I am happy to exchange ideas with you and learn from your situation.

New release

Why am I saying this? Today I uploaded a new version on OpenNTF and for many Notes developers who a) not have taken the XPages path yet b) unfamiliar with Java and JSON the application could be a great starter example.

Lately there are not that many (new, updated) projects (applications) available at OpenNTF so the chance to find a working demo to see and understand the code and data running are a bit scarce (I am sorry).

I remember in the days of Superhuman Software a quote about Notes and collaboration was “dare to share” so I would challenge more developers to do so. We can learn a lot from examples from others and I thank those people who (still) do and from which I can learn from!

I wish you a wonderful learning experience at IBMConnect 2016!

Capture04

 

Beware when removing ID’s of controls

In an exercise to maximize performance of an Xpages application we decided to remove as much as redundant ID’s of controls as possible, as described in this best practice.

In summary the ID of an control gets rendered in a much longer ID when the HTML page is rendered. A simple label with ID ‘label1’ could become ‘view:_id1:_id2:_id11:label1’ and if you put that label in a repeat control the generated ID could become even much longer.

A downsize of removing the ID I found out that some properties like tagName for example does not get applied anymore. Of course you can replace the tag around the control, but I found that out afterwards.

Nevertheless a good best practice removing ID’s but do it with caution. Read the comments in the post to update yourself on the subject.

Managed properties

For an application we aggregate the data from several servers and databases. In SSJS applications I tend to save such properties in Notes configuration documents and store them in scoped Variables during initialization. Something like was provided in the XPages Framework a while ago.

In episode 182 of Notes in 9 David Leedy gives a great demonstration how to work with Notes documents via Managed Beans. However for properties that should not be altered likely by an application administrator (could be the application owner, a regular Notes user) I tend to work with managed properties. With managed properties you more or less configure your managed bean.

So how could this look like?

In the faces-config.xml I set the properties for a managed bean e.g.

<?xml version=”1.0″ encoding=”UTF-8″?>
<faces-config>
<managed-bean>
<managed-bean-name>dataBean</managed-bean-name>
<managed-bean-class>com.wordpress.quintessens.ConfigBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>

<managed-property>
<property-name>dataSource</property-name>
<value>dev1.quintessens.com</value>
<property-class>java.lang.String</property-class>
</managed-property>

</managed-bean>
</faces-config>

which I can use then in my java code:

package com.wordpress.quintessens;
import java.io.Serializable;
public class ConfigBean implements Serializable {
private String dataSource;
//… more variable declarations

public JsonJavaObject loadBackEndConfig(String Key) throws NotesException {
JsonJavaObject json = null;
NotesContext nct = NotesContext.getCurrent();
Session session = nct.getCurrentSession();
String DatabaseName = session.getCurrentDatabase().getFilePath();
String ViewName = “(LookUpBackEndConfig)”;
try {
json = loadJSONObject(this.dataSource, DatabaseName, ViewName, Key, 1);
} catch (NotesException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return json;
}

public void setDataSource(String dataSource{
this.dataSource = dataSource
}
public String getDataSource() {
return dataSource
}

}

You can check if the value is passed correctly e.g. via Expression Language:

<xp:text escape=”true” id=”computedField1″
value=”#{ConfigBean.dataSource}”>
</xp:text>

I am curious how you prefer to configure your applications? In some cases I find it perhaps an overkill to store the configuration in Notes documents and publish the values via a managed bean.

Happy development =)

 

prettytime for your XPages

Introduction

I guess most of us believe that not all users are robots, and especially in social applications where you try to approach humans as human friendly as possible the display of date and time in such format can be off added value.

Timeago

There are many scripts to display date and time in a human friendly format. For a project we are using timeago, a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. “4 minutes ago” or “about 1 day ago”).

However, in combination with an infinite scroll feature to navigate through document collections we notice that the script not always return instantly the transformed date/time.

That is why I looked at a server-side transformation.

PrettyTime

PrettyTime is an OpenSource time formatting library. Completely customizable, it creates human readable, relative timestamps like those seen on Digg, Twitter, and Facebook.

It turned out the implementation of PrettyTime was quiet simple. I will describe the steps for you.

Install the jar & call the Java class

Download the project jar file and place it in the WebContent \ WEB-INF \ lib folder.  For a computed field on a custom control in a repeat control I have as SSJS code to call the Java class:

<xp:text>
<xp:this.value><![CDATA[#{javascript:var theDate = compositeData.Date;
p = new org.ocpsoft.pretty.time.PrettyTime();
p.format(new Date(theDate))}]]></xp:this.value>
</xp:text>

As a result I get to date displayed as:

prettytime

Pro’s & Con’s

In comparison with client-side solutions I have detect some con’s and pro’s for a server side solution:

  • Static; the client side solutions are capably of updating the date/time value on the fly.
  • Speed; the server side generated human friendly date is there when a document row is presented.
  • Extensibility; the number of display languages is more numerous for most client-side solutions. Also you can often “configure” the text format when desired.
  • Consistency; having a human friendly date in a local language may be in conflict with internationalization of your XPages app since that might require more work.

Anyway: I happy to hear how you have solved the human friendly date issue.

Happy development!

new release XPages OpenLog Logger and custom runtime error page

Introduction

Good news for me! In an XPage application I wanted to provide an error logging function and preferably to OpenLog. I had problems with implementing the previous version of OpenLog logger but yesterday a new version is released on OpenNTF which took away that pain.

OpenLog logger

The OpenLog logger has some powerful features:

  • It can be used in your managed beans and other Java classes.
  • It can be used directly from SSJS with as little as openLogBean.addError(e,this);.
  • From SSJS all caught errors on the page are logged out together, at the end of the request.
  • Only two method names are used from SSJS, one to add an error, one to add an event, making it easy to pick up
  • From SSJS you only need to pass the information you wish. There is no need to pass nulls or empty strings.
  • From SSJS only one unique error per component is logged, regardless of how many times the error is encountered during the refresh lifecycle.
  • In SSJS, if you use a custom error page, uncaught errors will also be logged.
  • Uncaught errors will be logged for the page the error occurs on, not your custom error page.
  • You can define the OpenLog path and a variety of other variables without needing to change the code.
  • The functionality and code are available as an OSGi plugin (the best practice approach) but can also be included in individual NSFs.

Custom Runtime Error Page

In case you want to implement such functionality then I recommend you also take a look at how to define a custom run time error page. In my project I am using Bootstrap for UI look & feel, so I followed the steps Erick McCormick provides in this blog post.

code-prettify

In Erick’s post you will find that he uses Google’s code-prettify project. A nice feature is to ability to set a skin for the error message box. There are plenty of color themes available for the prettify project but if you use Bootstrap like I do you could try this theme.

A big thank you to the OpenLog logger project members and Erick!

custom_error_page

 

Infinite scroll and prevent multiple event fire

Probably a lot of you use the “Simple custom control to add infinite scrolling to repeat or views” available as codesnippet on OpenNTF.

This snippet allows you to load a next set of documents for a repeat or view control when you reach the bottom of the page. A feature that will be appreciated highly by mobile users of your Notes app.

If you look at the code, it fires the click event of a pagerAddRows control when you have reached the bottom of the window. This will happen as long as you are on the bottom of the window. What can this cause for disturbance:

  • It fires multiple events, while it is at the bottom of the window. You only asked for 1.
  • The events are not chained so when the second event is returned quicker that the first it will be inserted before it, which messes up the sorting of your collection.

I have not found a way to create a JS function to load a set of data from a repeat control in the ajax way. That would allow you to use the success property and set a state (ajaxready, true/false) for your window. This state could be used to check if the fire event is entitled to run or not.

Drop a line in cause you know the answer to such a function.

As a temporarily solution I suggest to keep the click event for the pagerAddRows control but set a timeout.

Here is what the code could look like:

<xp:scriptBlock id=”scriptBlock1″>
<xp:this.value>
<![CDATA[$(window).data(‘ajaxready’, true).scroll(function(e) {
if ($(window).data(‘ajaxready’) == false) return;
if ($(window).scrollTop() >= ($(document).height() – $(window).height())) {
$(window).data(‘ajaxready’, false);
setTimeout(function() {
$(“.infiniteScroll ul li a”).click();
dojo.query(“.timeago”).forEach( function(el) {
var timeagoWidget= dijit.getEnclosingWidget(el);
if(!timeagoWidget){
timeagoWidget = new timeago.Timeago({}, el);
}

//refresh timeago
timeagoWidget.refresh();
});
$(window).data(‘ajaxready’, true);
}, 200);

}
});]]>
</xp:this.value>
</xp:scriptBlock>

Here is set a timeout for 200 milliseconds which turns out to be quiet generous in my application, but at least I have prevented the disturbances mentioned earlier.

Happy coding!

Make the search bar in the Application Layout control ‘sticky’

Introduction

I guess many of you have or are using the Application Layout control (depending on your willingness of coping with limitations) and use Bootstrap to ‘escape’ IBM’s oneUI theming. In the control you can set the fixedNavBar property to fixed (top, bottom, unfixed?) but basically this will just claim precious space on top of the screen, especially for mobile users.

In case you are using the Search option in the Application Layout control you will find that usefull and want to have it available always and in particular for smaller devices where scrolling back to the top takes a bit more effort. Since you are already using Bootstrap the rescue is in near reach…

Affix

The Affix plugin in Bootstrap allows an element to become affixed (locked) to an area on the page. This is often used with navigation menus or social icon buttons, to make them “stick” at a specific area while scrolling up and down the page.

The plugin toggles this behavior on and off (changes the value of CSS position from static to fixed), depending on scroll position.

Implementation in XPages

Since we are using the Application Layout control we need to take a different swing than the normal implementation.

JavaScript onClientLoad

First we will add an ID to the titlebar section and then we register the affix plugin for it:

<xp:eventHandler event=”onClientLoad” submit=”false”>
<xp:this.script><![CDATA[$(‘.applayout-titlebar’).attr(‘id’, ‘titleBar’);
$(‘#titleBar’).affix({
//in order to make it ‘sticky’ to the top…
offset: {top: 40}
});]]></xp:this.script>
</xp:eventHandler>

CSS Styling

With CSS we define the style properties for the applied affix class:

<head>
<style>
#titleBar.affix {
position: fixed;
top: 0;
width: 100%;
z-index:999;
background-color:white;
}
</style>
</head>

Done!

That was rather easy, right?!

Below is a sample when an XPage is loaded:

applaystate01

And here is a sample when you scroll down the page:

applaystate02

Happy development!