jQuery in XPages #7 – Pines Notify

In this article I will demonstrate how to implement a cool notification technique using Pines Notify.  This small (7k min) js library provides a wealth of flexibility and a feature set second to none. It can use multiple different CSS libraries (bootstrap, jQueryUI and others) so integration into your site is quick and simple.

Introduction

Pines Notify is a notification popup capability which is easily integrated into a website. Like most jQuery plugins there is a methods to instantiate the capability and the ability to pass in multiple parameters.  There are certainly other popup style plugins but this is easy to grasp and the examples are very good.

We are going to look at how to make some complex function popups like these…

Examples of Pines Notify popups
Examples of Pines Notify popups

Demonstration

There are two demonstration pages this week

The first demonstration is a basic port of the Pines Notify buttons from the original example into an XPage.

The second demonstration shows how the Pines Notify could be used in a real application

Download 

Click on the link to download the complete jQuery in XPages demonstration database (including Pines Notify).

Pines Notify

Pines Notify provides a basic shell for popup creation and the capability for multiple custom configurations. A “popup” by default is created on the top right of the screen and disappears after a fixed period of time. The the position, CSS, length of time shown, transparency, contents, callbacks and other features can be controlled through the use of parameters. There are too many to mention in one article but they can all be seen at the example website.

Sample Notification
Sample Notification

Adding Pines Notify to an XPage

The Pines Notify download contains the .js files (readable and minified) and a basic css file. These are easily added to our database as files in the WebContent folder.

Adding Pines Notify js and css fields to our database
Adding Pines Notify js and css fields to our database

Once we have added the js and css files to the database they can be added to our XPage as a resource(s)

	<xp:this.resources>
		<xp:script src="js/jquery.pnotify.min.js" clientSide="true"></xp:script>
		<xp:styleSheet href="css/jquery.pnotify.default.css"></xp:styleSheet>
	</xp:this.resources>

jQuery UI and jQuery

Pines Notify uses the jQuery library and jQuery UI CSS for display. These are added to the XPage as additional resources

	<xp:this.resources>
		<xp:script src="js/jquery-1.7.1.min.js" clientSide="true"></xp:script>
		<xp:styleSheet href="css/jquery.custom-theme/images/jquery-ui-1.8.18.custom.css"></xp:styleSheet>
	</xp:this.resources>

Using Pines Notify

Pines Notify has a basic format for activating. Here is a sample button from the website:

<button class="btn source" onclick="$.pnotify({
 	pnotify_title: 'Regular Notice',
 	pnotify_text: 'Check me out! I\'m a notice.'
});">Regular Notice</button>

In this format the button does not work correctly when added to an XPage as it causes a page refresh when clicked. To turn this into an functioning button we must use an <xp:button> like this one

<xp:button value="xPages Lower Timer" id="button1" styleClass="btn source">
<xp:eventHandler event="onclick" submit="false">
	<xp:this.script>
		<![CDATA[$.pnotify({
			pnotify_title: 'Regular Notice',
		 	pnotify_text: 'Check me out! I\'m a notice.'
		});]]>
	</xp:this.script>
</xp:eventHandler>
</xp:button>

The Pines Notify examples website gives us the code we need to create each button

Taking the sample code from the Pines Notify examples page
Taking the sample code from the Pines Notify examples page

And to convert this to our XPages button we just need to copy and paste this code and insert it into the <![CDATA[ code section above. Using this we can quickly and easily convert the examples into functioning XPages buttons.

Pinning Notifications

By default all Notifications have the ability to “pin” them to the screen. Should they contain information the user wishes to retain, they can do so

Pinning your notification
Pinning your notification

Closing Notifications

By default all notifications can be closed before they fade out using the X in the notification

Stacking notifications

Pines Notify notifications always stack on top of each other, so you never have to worry about position or overlaying issues, they will organize themselves nicely.

Showing all notifications

By default there is a bar added to the screen which allows user to see the last and/or all previous notifications.

Showing all previous notificaitons
Showing all previous notificaitons

Working this into XPages functionality

Javascript alert boxes have been used since the start of the web but they require a user click and an unnecessary interaction from the user if the point of the notification is just that – to notify the user of something.

In our XPages applications we could potentially notify the user after:

  • Successful REST update from the server
  • partialRefresh completion
  • form submission
  • Pager completion
  • General application workflow progress
  • Validation failure

really the possibilities are endless and really up to you the developer.

Examples

My demonstration site examples page has illustrated a number of buttons taken directly from the website and I have also added some notifications to the other jQuery in XPages examples (linked in through the menu).

On my second Demonstration page There are 4 simple examples of real application uses for Pines Notify

Dojo Toaster Widget

On the XPages server without the need for jQuery you can use the dojo toaster widget to provide a notification capability. You should take a look at Chris Toohey’s well written article on Mastering the Dojo Toaster for XPages to get a comparison.

Thanks

To Alan Hurt for pointing me in the direction of this plugin 🙂

Re-styling dynamic content with jQuery Mobile

We are going to quickly look at how using trigger(“create”) can solve the problem of adding dynamic content to a jQuery Mobile application within an XPage.

I will get to writing an article on jQuery Mobile in the future but in the mean time here is something which I came across – how do you re-style the page when new content is created?

Problem

How to re-style newly added content in a jQuery Mobile application.

Situation

I have an acceptance form which I am creating in my XPage application. I have a mobile only view which is determined using a re-direct based on the browser’s user.agent when the device access the application.

jQuery Mobile acceptance form
jQuery Mobile acceptance form

Users are able to add an unknown number of guests. To achieve this functionality I am inserting a new row into the Guest Name table using normal jQuery

$('[id$=add]').click(function() { // when you click the add link
        $('[id$=theTable] tr:last').before('<tr><td><input name="person"'+i+' id=person'+i+' type="text" value="" /></td><td><label id="label'+i+'" for="check'+i+'">Yes</label><input type=checkbox name=check1 id=check'+i+'></td><td><center><img border=0 id=img'+i+' onclick="removeInput(this.id)" src="images/badge-circle-cross-24-ns.png"></center></td></tr>');
        i++;
    });

Unfortunately when I do this out of the box the sweet looking jQuery mobile look and feel is not applied to the new content.

(This problem also occurs if you perform a partialRefresh on the content) and you get something not so nice looking

Adding dynamic content does not style well
Adding dynamic content does not style well

Solution

Fortunately the guys at jQuery Mobile, smart fellows that they are, overcome this issue very easily with a simple one line command which re-applies the mobile style to any element within the supplied container.

Selecting the parent table and applying .trigger(“create”) solves the problem nicely, and it does it so fast it is imperceptible to the naked eye.

$('[id$=theTable]').trigger("create")

And here’s the result – this “looks” so good I would almost rather replace the desktop browser version of this application and have everyone use this look and feel!

jQuery mobile page with the correct styling applied
jQuery mobile page with the correct styling applied

I am amazed I got a response from google……

And now I look silly 😀

happy with the result though

 

The Blogger Team removals@google.com
7:58 AM (6 hours ago)

to me
Hello,

Thanks for reaching out to us!

We have received your complaint. Upon recent review of the website(s)
mentioned in your complaint, we were unable to locate the allegedly
infringing content on the page(s) in question. If this matter is still a
concern, please reply to this email with detailed information to enable us
to locate the allegedly infringing content.

Regards,
The Google Team

LotusLearns steps over the line

LotusLearns reposted my entire article on watermark.js without my consent and even though there is a link back to the blog I take great exception to this unethical behaviour. The fact that there is adverts on this site and someone else may make money out of my content is gawling.

I copy other people’s ideas and code all the time and then re-purpose them with my own, new ideas. That is how we evolve culturally.

Look at my article and you will how to appropriately credit other people for their work. Ethically it is the right thing to do and I would expect anyone to do the same with my content.

I always link to the original with a comment and a name
I never copy and paste content without stating as such
I do not claim the idea as my own.

Lotus Learns has crossed the line with my blog content and many other people’s content and needs to be stopped.

I have reported it and so should you if you are affected

http://support.google.com/blogger/bin/request.py?hl=en&blog_URL=http:%2F%2Fwww.lotuslearns.com%2F&contact_type=main_tos&rd=1&blog_ID=5508407431819307136

In contrast http://planetlotus.com has my full consent to link to and re-publish my work. I signed up for it and gave my permission.

This is the ONLY site which I allow to do that.

Read my copyright statement on the about page if you are in any doubt. I specifically state you can reuse my CODE, I do not say you can reuse all my words without my consent.

I have asked for content to be removed. If it is I will re-word this article to say thank you for doing the right thing.

LotusLearns does not have my consent to republish my content and never will.

Pushing data to an XPage from the server – HTML5 eventSource

Introduction

We are going to look at the new HTML5 eventSource capability. Adapting the articles (posted here) and (posted here) I am goign to show you how to send data from the server to your XPage without using ajax to initiate the communication. I have the feeling there is a lot to learn in this area and we are just scratching the surface.

Browser Support

Yep – it is HTML5 which means no IE right now – Chrome should support this but my copy does not – so right now this demonstration is only tested and working in the latest version of FireFox.

Demonstration

The results of this article are demonstrated here, and I strongly suggest you use some kind of plugin to watch the traffic as the values chance – quite fascinating. Right click – View Source and see for yourself – no ajax! no jQuery, nothing fancy, just HTML5 in action!

http://demo.xomino.com/xomino/xPlay.nsf/xHTML5ServerSent.xsp

Server output

I have modified Stephan Wissel’s xAgent XSnippet to create a simple data stream using server-side output. Calling this xAgent through the web generated the following simple data output as seen here through Firefox HTTPFox plugin.

The thing to highlight is the Content-Type text/event-stream

xAgent output
xAgent output
<?xml version="1.0" encoding="UTF-8"?>
<!-- XPage which is not rendered but returns data like XML, JSON, etc.     -->
<!-- More: http://www.wissel.net/blog/d6plinks/shwl-7mgfbn                 -->

<xp:view xmlns:xp="http://www.ibm.com/xsp/core" rendered="false">
  <xp:this.afterRenderResponse>
	<![CDATA[#{javascript:
		var externalContext = facesContext.getExternalContext();
		var writer = facesContext.getResponseWriter();
		var response = externalContext.getResponse();

		// set content type, e.g. ...
		response.setContentType("text/event-stream");

		response.setHeader("Cache-Control", "no-cache");

		// read parameters, e.g. ...
		var param = context.getUrlParameter("myParam");

		// write HTML output e.g. ...
		writer.write("data: the number is "+@Random());

		writer.endDocument();
	}]]>
  </xp:this.afterRenderResponse>
</xp:view>

HTML5 JavaScript

In our xPage we create some JavaScript to instantiate and then listen to the eventSource
First of all we test to see if the EventSource is supported in this browser

		if(typeof(EventSource)!=="undefined") {

		else {
			dojo.byId("#{id:serverData}").innerHTML="Whoops! Your browser doesn't receive server-sent events.";
		}]]>

Using the following code we subscribe to the EventSource (xSendHTML5Data_1.xsp is the xPage described above)

			var eSource = new EventSource("xSendHTML5Data_1.xsp");

And then when we receive a message from the server we act on it

			eSource.onmessage = function(event) {
				//write the received data to the page
				dojo.byId("#{id:serverData}").innerHTML = event.data;
			};

This all comes together as the following ScriptBlock in the page

	<xp:scriptBlock id="scriptBlock1">
		<xp:this.value><![CDATA[//check for browser support
		if(typeof(EventSource)!=="undefined") {
			//create an object, passing it the name and location of the server side script
			var eSource = new EventSource("xSendHTML5Data_1.xsp");
			//detect message receipt
			eSource.onmessage = function(event) {
				//write the received data to the page
				dojo.byId("#{id:serverData}").innerHTML = event.data;
			};
		}
		else {
			dojo.byId("#{id:serverData}").innerHTML="Whoops! Your browser doesn't receive server-sent events.";
		}]]>
		</xp:this.value>
	</xp:scriptBlock>

Stopping the source

We are able to stop the source using eSource.close() that will stop the data being sent. I added mine in a button

	<xp:button id="button1" value="Stop the Source">
		<xp:eventHandler event="onclick" submit="false">
			<xp:this.script><![CDATA[eSource.close()]]></xp:this.script>
		</xp:eventHandler></xp:button>

Changing the refresh time

We are able to change the refresh time by returning the retry value in millisecond along with our data

writer.write("retry: 2000\ndata: the number is "+@Random());
setting the refresh time 2000ms
setting the refresh time 2000ms

Specifying an event name

This mercilessly ripped directly from the article – I have not done anything with the event listeners yet, but here the next thing I want to look at….using the data returned from the server to trigger events in the browser without having to parse the return string and take action on it – that’s a huge performance gain and distributes the tasks….more to come on that in the near future….

For example, the following server output sends three types of events, a generic ‘message’ event, ‘userlogon’, and ‘update’ event:

data: {"msg": "First message"}\n\n
event: userlogon\n
data: {"username": "John123"}\n\n
event: update\n
data: {"username": "John123", "emotion": "happy"}\n\n
With event listeners setup on the client:

source.addEventListener('message', function(e) {
  var data = JSON.parse(e.data);
  console.log(data.msg);
}, false);

source.addEventListener('userlogon', function(e) {
  var data = JSON.parse(e.data);
  console.log('User login:' + data.username);
}, false);

source.addEventListener('update', function(e) {
  var data = JSON.parse(e.data);
  console.log(data.username + ' is now ' + data.emotion);
}, false);

Enjoy 🙂

Demonstration

http://demo.xomino.com/xomino/xPlay.nsf/xHTML5ServerSent.xsp

QR code with your picture in it !

While researching the next jQuery in XPages article I came across a QR code designer page which allows you to add your own image into the code itself.

http://www.patrick-wied.at/projects/qr-designer/

You need to use the latest Chrome or FF browsers to get the full effect as he uses Drag and Drop to pull in the image but you can make something like this – how cool is that !!

QR code with your truly in the picture
QR code with Marky in the picture

jQuery in XPages #5 – jQueryUI (Accordion)

This week we are going to look at one of the capabilities offered by the jQueryUI website, that accordion. I am going to walk through how I added it to my demo website (because the menu was getting too large). jQueryUI is a jQuery plugin – it extends jQuery using the $selector.doSomething() notation.

We are going to turn a long inflexible menu

Old demo.xomino.com menu
Old demo.xomino.com menu

into this

jQueryUI Accordion Menu
jQueryUI Accordion Menu

Demonstration

To see the new menu in action go to demo.xomino.com

Download

You can download the sample database for all the jQuery in XPages article from here or the demo website.

jQueryUI

jQueryUI is a website which “provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.

What that means for you and I is “a set of really cool visual effects to add to your website really easily” 🙂

The jQueryUI website is very easy to use and a lot of fun to look over. There are multiple demonstrations of everything from accordions, to popup boxes, to date pickers, to sliders, to tabs and many other of the capabilities similarly found within the dojo toolkit.

Individual Packages

In an analogous way to dojo, each of the different capabilities jQueryUI provides can be individually added to the webpage or you can select the ones you need and combine them into one single js file. Adding the capability is just a different process from dojo.

Building your jQueryUI download bundle
Building your jQueryUI download bundle

Themeroller

jQueryUI comes with many pre-built styles

jQueryUI styles
jQueryUI styles

Using the Themeroller you can modify these styles to match your own websites style (in my case oneui2.1_onyx). I happen to like the darkness ui (I am sure it is nothing psychological) and they go nicely together but we are going to adapt the theme to match onyx.

The Accordion

The accordion is created by adding a number of jQuery effects together. If you break it down, what is happening when you click on the header is that the open panel is being reduced in size to zero at the same time as the panel the user clicked on is being opened. There are many jQuery accordion knockoffs from the original – some are really sweet like RhinoSlider and may appear in later articles..

How does it work?

Check out the how does it work article to see how I put all this together