Author Archives: Naveen Maurya

Using HTML5 Notification API in XPages

HTML5 introduces Web Notifications API which “allows alerting the user outside the context of a web page of an occurrence, such as the delivery of email“. This opens up quite a few possibilities for developers like alerting a user when a document needs approval irrespective of the XPage he is currently on.

In this example I will use the Extension Library control Remote Service to poll a view to check if any documents require approval and if yes then show notification to user.

Remote Service control

The Remote Service control allows calling SSJS code from client side JavaScript code without a full page refresh. Instead the output of the SSJS code is returned asynchronously. Tim Tripcony gave a beautiful explanation here on how this control should be used and its usage scenarios.

You can find the Remote Service control under Continue reading

Share:

Using Validation and Vibration API in HTML5

HTML5 provides bevy of features which enable developers to build some really interesting applications. In this example I will build a small HTML5 based validation which will vibrate the mobile device in case of invalid input.

Validation API

Validation in HTML5 is as simple as adding an attribute. Just add the required attribute and you are good to go.

In the above code snippet the text field is required and browser supporting this attribute will not let you submit the form if the field value is empty.

Now we need to check if the user has entered valid value in the field or not. It he hasn’t then we vibrate the mobile device. To check it in JavaScript use the statement input.validity.valid. This returns true in case valid value is entered in the field else returns false. In case its invalid you can then vibrate the mobile device using Vibration API.

Vibration API

This article describes Vibration API and how easy it is to implement.

First you need check if the device supports Vibration API Continue reading

Share:

Meaning of CLFAD####E, CLFAD####W in XPages

Many a times during XPages development I have encountered error message like CLFAD####E and sometimes CLFAD####W. The error messages are very cryptic and give very little information and you might see something like this:

SEVERE: CLFAD####E: Exception processing XPage request.

There are time when the # characters get replaced by Continue reading

Share:

Capturing image from camera using getUserMedia() and saving it in a document using XPages

HTML5 introduces a new API navigator.getUserMedia() which allows web applications to access a user’s camera and microphone. This article on HTML5 Rocks and this question on StackOverflow describe how to use it in your web applications.

In this article I will describe how to use navigator.getUserMedia() in your XPage and save the captured image in your Notes document. As of now this demo is supported only on Google Chrome & Mozilla Firefox on desktop and mobile (I have tested it on Andorid only).

HTML5 introduces <video> tag which allow developers access to user’s camera.

Next we need to add <canvas> tag and an <image> tag. The image captured from user’s camera is drawn on to <canvas>. We then get the Base64 encoded image from <canvas> put it into our <image> (JavaScript code to do that comes later in article).

Notice that the <canvas> is hidden.

I am also going to add a text area to my XPage where I will store the Base64 encoded text of the captured image which later would be converted into image using Java (code for that comes later in article). While developing applications you can hide this text area using CSS.

And finally we need a button to take snapshot from camera. Continue reading

Share: