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.
The demonstration database can be downloaded from the link above or from here
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.
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.
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:
The direction of the flip (rl = right left, lr, ud=up down, du)
The idTag of the element whose innerHTML will be displayed in the flip
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
You might have occasion to have a variable declaration purposefully override a desired value. In this example the start will be zero unless the start variable has been declared with and assigned value:
/*..bunch o' code..*/
start = 0
In the following example we have a very simple variable declaration and function:
var msg = "hello world"
If you run this through firebug you get the expected message in the browser