In this article I will demonstrate how you can easily add a custom “Flip” to show different data on your XPage. This is a stylistic decision you have to make when creating your XPage. If you have a lot of Static data to fit on the screen and your user is ok not seeing all the same data at the same time this is a nice looking transition from one context to another.

Demonstration

The XPages integration of Flip.js is demonstrated here

Download

The demonstration database can be downloaded from the link above or from here

Flip.js

Introduction

Flip.js is a simple plugin which facilitates an aesthetically pleasing transition between data contexts on your XPage. The jQuery Plugin is capable of “flipping” context in 4 directions and also reverting back to the previous context display.

For more information flip.js check out their website – http://lab.smashup.it/flip/

Example

In my example I took the existing code which created my highcharts demo  and instead of showing both the data and the chart at the same time – I am flipping between them. This is a very simple demo and yet created a dynamic effect on the page for very little overhead (12k, 5k minified). As you can see from the video above the transition is “cute” and adds something appealing to the site.

How does it work

The demonstration site uses jQuery, jQueryUI which are already added to my demo site through a theme and the following files.

• js/jquery.flip.js
• css/flip_099.css

These files are added to the database via the WebContents folder as described in previous articles within this series.

jQuery and jQueryUI are referenced through the database theme as follows:

<theme extends="oneuiv2.1_onyx" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="platform:/plugin/com.ibm.designer.domino.stylekits/schema/stylekit.xsd" >
	<resource>
		<content-type>application/x-javascript</content-type>
		<href>jquery-1.7.1.min.js</href>
 	</resource>
	<resource>
		<content-type>application/x-javascript</content-type>
		<href>js/jquery-ui-1.8.18.custom.min.js</href>
 	</resource>
 	<resource>
		<content-type>text/css</content-type>
		<href>css/custom-theme/jquery-ui-1.8.18.custom.css</href>
	</resource>
</theme>

The Flip.js files are added to the XPage via the following script/link files

	<script src="js/jquery.flip.js" clientSide="true"></script>
	<link rel="stylesheet" href="css/flip/flip_099.css" />

The XPage contains two main display elements – the flipbox and the the flipPad which controls the flipbox. As you can see from the code below the flipbox contains my chart data by default. The anchor tags have the following attributes:

• rel
  • The direction of the flip (rl = right left, lr, ud=up down, du)
• thePanel
  • The idTag of the element whose innerHTML will be displayed in the flip

<div id="flipPad">
	<a href="#" class="left" rel="rl" thePanel="panelFlip1" title="Show Chart" style="padding-right: 20px">
		Show Chart
	</a>
	<span>     </span>
	<a href="#" class="right" rel="lr" thePanel="panelFlip4" title="Show Data">Show Data</a>
</div>
<div id="flipbox" style="background: white; color: black">
	<xc:formFlip_Fruit_Data_Table></xc:formFlip_Fruit_Data_Table>
</div>

The Flip.js capabilities are then controlled by binding the jQuery functions to the anchor tags:

$(function(){
	$("#flipPad a").bind("click",function(){
		var $this = $(this);
		var thePanel = '[id$="'+$this.attr("thePanel")+'"]'
		$("#flipbox").flip({
			direction: $this.attr("rel"),
			color: '#FFFFFF',
			content: $(thePanel).html()
		})
		return false;
	});
})

Here’s the English version of what’s happening in the above function:

• For all a in the #flipPad
  • Bind the click event of the anchor tag to do the following:
  • Get the “thePanel” attribute from the anchor tag
    • [id$=”‘+$this.attr(“thePanel”)+'”]’ equates to
      • [id$=”panelFlip1″]
  • When the click event happens
    • Flip the flipbox in the “rel” direction
    • color the background white (returns from the gray flip color)
    • display the html() of the selected panel

And finally the panels on the XPage containing the chart and the data are custom controls (slightly modified from the original demonstration for this purpose)

	<xp:panel id="panelFlip1" style="display:none">
		<xc:formFlip_Fruit_Data></xc:formFlip_Fruit_Data>
	</xp:panel>

	<xp:panel id="panelFlip4" style="display:none">
		<xc:formFlip_Fruit_Data_Table></xc:formFlip_Fruit_Data_Table>
	</xp:panel>

Conclusion and The Next Step

As you can see form the demo this is a quick and simple, effective, way to add some animation to your XPage and kick things up a bit for the user. This demonstration uses static data which in many cases works, but in others you might want to retain the XPage functionality in your flip…..

The limiting factor for this demonstration is that it uses a COPY of the HTML within the panel container – what that means if that if you have a viewPanel with a pager, it will not work in this context because you are copying the HTML the XPage gets very confused if you try and then do something functional with it.

What would be a major step up would be to modify the plugin code to replace the flipbox with the object itself and not a copy of the HTML container. In that way you would be able to move the viewPanel and all its functionality in and out of the flip and it would retain all the paging functionality.

• You’d need to create a container holding div with the panel objects within it.
• You’d them pop the panel objects off the container object and append them to the flipbox
  • be careful that the select the whole panel and not the contents (a viewPanel creates an outer table around itself)
  • Suggest that each “panel” is wrapped with a div you know the id of – that way you don’t have to worry about all the dynamic HTML the XPage creates for the control.
• when the user “flips”, you programmatically pop the panel in the flipbox back to the container and pop in the new object from the container

I am fairly positive that can be done but there are only so many hours in the day 🙂