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
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.
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:
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
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)
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
Writing a single library for SSJS and CSJS validation – failed attempt #1
Sun, May 19th 2013 6:04p Mark Roden In this article I will demonstrate my first futile attempt to consolidate CSJS and SSJS libraries so that we only have to write validation once. I will also discuss JavaScripts Closures which unless you have already encountered them will make your head hurt thinking about it
Introduction
I was reminded in one of the comments on my blog last week about how it is still a pain in the butt to have to write client side JavaScript validation (to provide a good user interface) and server side JavaScr [read] Keywords: ldd
lotus
dojo
firefox
interface
javascript
password
server
xml
194
XPages ND9 (Dojo 1.8) does not work with other AMD loaders (and the work around)
Tue, May 14th 2013 6:10p Mark Roden Today I took a new jQuery plugin that I was playing with from an R8.5.3 environment where it worked, to an R9 environment and it failed – I figured it had something to do with something I had been reading about over the last month and in fixing my problem this lead to a more serious realization that I KNOW other people are also going to come across.
Background
A brief scan of the last month’s discussions on Xpages and jQuery Mobile 1.3 reveals a number of posts started by Dave Leedy [read] Keywords: domino
ibm
notes
R8
xpages bug
database
dojo
mobile
properties
EXTJS in XPages #9 – Infinite scrolling rebooted and reborn – v4.2 BufferedRenderer
Mon, May 13th 2013 5:29a Mark Roden In this article I will introduce the new EXTJS v4.2 Infinite scroller – the BuffererRenderer. The whole concept of infinite scrolling has been rewritten in the new version of the grid and it had made a huge difference to responsiveness and stability of the infinite grid.
EXTJS in XPages series
Here are links to all of the previous articles in this series
EXTJS in XPages #8 – Selecting data from the grid and opening a document
EXTJS in XPages #7 – Doing an @Unique(@DbColumn) equivalent [read] Keywords: xpages ajax
application
database
javascript
properties
server
xml
213
Shorthand Conditional JavaScript variable checking using ||
Sun, May 5th 2013 6:23p Mark Roden In this article I will highlight a shorthand method of JavaScript conditional variable checking. The || operator is commonly recognized as “OR” but it’s usage is broader than some people would think.
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:
Long Hand
var start
/*..bunch o' code..*/
if (!start){
start = 0
}
[read] Keywords: javascript
JavaScript variable hoisting
Wed, May 1st 2013 8:16p Mark Roden In this article I will give a quick overview of JavaScript hoisting and explain why sometimes your variables are not doing what you expect them to.
In the following example we have a very simple variable declaration and function:
var msg = "hello world"
function sayHi(){
alert(msg)
}
sayHi()
If you run this through firebug you get the expected message in the browser
However if you change the code slightly you do not get the initially expected response. When you run the following code [read] Keywords: javascript
491
Make your XPages more maintainable – JavaScript Callback functions
Sun, Apr 28th 2013 6:39p Mark Roden In this article I will attempt to explain the purpose and benefits of using callback functions in JavaScript.
Introduction
Basic JavaScript functions look like this normally like this
function addMe(a, b){
return a+ b
}
JavaScript variables normally look like this
var a = 2
var b = 3
Finally we would call the function to add the variables
var theTotal = addMe(a, b)
//5
Seems simple enough
Setting a variable to a function
But we can also combine them into something like this
va [read] Keywords: xpages ajax
application
development
dojo
javascript
261
Webcast: jQuery The World’s Most Popular JavaScript Library Comes to XPages – now on YouTube
Fri, Apr 26th 2013 7:39a Mark Roden It was an absolute pleasure to do my jQuery in XPages presentation for the 3rd time (publicly) earlier this week and it was as part of the TLCC and Teamstudio webcast series highlighting some of the people and presentations from the community.
There were 430 people registered for the webcast and at its peak there were over 300 people watching.
As with each presentation, podcast and screencast I have had the privilege of being a part of, I am humbled by knowing that I am able to help other develo [read] Keywords: xpages community
javascript
podcast
