jQuery in XPages #5 – jQueryUI (Accordion) – How does it work?

In this article I will show you how to add a jQueryUI accordion to your XPage as a menu.

Demonstration site

This article is published in conjunction with the original post and the demonstration site

Download

The sample database is available from the link above and (here)

Rolling my theme

Using the jQueryUI themeroller I modified the darkness ui theme to match the colors used by the oneui2.1_onyx CSS which the site now uses

Marky's Rolled theme

Once complete I downloaded the theme via the download builder. I included everything in the download because if I use jQueryUI at a later date I don’t want to have to go through this again – it is a demo site after all and page load time is not on my list of priorities (or I am lazy).

Being serious for a moment:

If you are going to use only one of the capabilities included in the builder for production you should remove everything else. The difference can be as much as over 150k and that will make a huge difference in pageload time.

The download

The contents of the jquery-ui-1.8.18.custom.zip are the necessary javascript and css files to create the visual effect and stylize the webpage. The folder content must be maintained with the structure and the css files refer to the images within the folder structure. You can change this at your own risk but I strongly suggest you don’t. The contents of the folder are as follows:

  • js folder
    • jquery-ui-1.8.18.custom.min.js
    • jquery-1.7.1.min.js
  • css
    • custom-theme
      • jquery-ui-1.8.18.custom.css
      • images
        • 14 images supporting the style

Adding the files to your database

The js file and the css file should be dragged and dropping into the WebContent folder of your database. Visible from the package explorer view of your database.

Adding the jQuerUI files to your database WebContent folder
Adding the jQuerUI files to your database WebContent folder

Adding the file references to your XPage

Within my demo database I have a commonContainer Custom Control that controls my look and feel. I am going to add the file references to that custom control in the following manner. In the source panel at the top of the page I add a reference to each of the necessary js and css files (the paths are relative the XPage)


Adding the Accordion to the menu

Currently the menu is created using this XML markup

<ul>
	<li><strong>#1 High Charts</strong></li>
	<li></li>
	<li></li>
	<li>
</li>
</ul>
etc etc.........

which generates the following HTML when viewed through the webpage

<div class="lotusMenu">
<div class="lotusBottomCorner">
<div class="lotusInner">
<ul>
	<li><a id="view:_id1:_id2:link9" class="xspLink" href="SampleDB/jQInX.zip">Download the Sample DB</a></li>
</ul>
<ul>
	<li><strong>#1 High Charts</strong></li>
	<li><a id="view:_id1:_id2:link1" class="xspLink" href="/xomino/jQinX.nsf/xFruit_Data.xsp">Binding to a Data Table</a></li>
	<li><a id="view:_id1:_id2:link2" class="xspLink" href="/xomino/jQinX.nsf/xFruit.xsp">Binding to a View Panel</a></li>
	<li><a id="view:_id1:_id2:link3" class="xspLink" href="http://www.highcharts.com/demo" target="_blank">Highcharts.com Demos</a></li>
</ul>
<ul>
	<li><strong>#2 Labelify</strong></li>
	<li><a id="view:_id1:_id2:link4" class="xspLink" href="/xomino/jQinX.nsf/xLabelify.xsp">Visual Field Enhancement</a></li>
</ul>
 etc.....</div>

looking at the jQueryUI Accordion example page the menu is created from HTML looking like this….

<div id="accordion">
<h3><a href="#">Section 1</a></h3>
<div>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</div>
<h3><a href="#">Section 2</a></h3>
<div>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</div>
</div>

The critical thing to grasp is that the HTML for each part of the must eventually look like this

<h3><a href="#">Section 1</a></h3>
<div>Text of the link - can be HTML here</div>

And my menu currently does not – time for some basic re-coding. Not hard just tedious (and like the good programmer I am – I am so glad I planned out the website before I started coding it) (*coughs politely*) As this menu is going to grow each week (I assume) it would be foolish to hard code it every week – so I am going to create some documents to represent the menu items and using a Repeat Control I am going to display the documents as HTML to build the Accordion.

Creating the Menu documents

I am going to use a “menu” form to create the documents (not worth an XPage as I am doing this through the client on the back end), and a vwMenu view. The form is very basic (like I said – this is back end only for me, not a production-worthy creation).

Simple menu creation form
Simple menu creation form

The view is categorized with the HTML I am going to need already written into the view columns. Because some of the links are to external websites we have to make a check and if so include the whole URL and not a relative one to the XPage

vwMenu Columns

To generate the HTML for the menu I used a repeat control – I use the repeat control to @DbColumn() the first column of vwMenu and then for each value in that list I am @DbLookup() the values in the 2nd column.

I was doing this with a computed text field and that initially caused me a problem. As you can see from the image below there is a lot more HTML generated that I need for the accordion…..there are way too many SPANS and DIVS

<span class="xspTextComputedField">
</span>
<h3><a href="#">#1 HighCharts</a></h3>
<div>
<a href="/xomino/jQinX.nsf/xFruit_Data.xsp">Binding to a Data Table</a>

<a href="/xomino/jQinX.nsf/xFruit.xsp">Binding to a View Panel</a>

<a href="http://www.highcharts.com/demo">Highcharts.com</a></div>
<span class="xspTextComputedField">
</span><span class="xspTextComputedField">
</span>
<h3><a href="#">#2 Labelify</a></h3>
<div>
<a href="/xomino/jQinX.nsf/xLabelify.xsp">Visual Field Enhancement</a></div>
<span class="xspTextComputedField">
</span><span class="xspTextComputedField">
</span>
<h3><a href="#">#3 Masked Input</a></h3>
<div>
<a href="/xomino/jQinX.nsf/xMaskedInput.xsp">Visual Field Enhancement</a></div>
<span class="xspTextComputedField">
</span><span class="xspTextComputedField">
</span>
<h3><a href="#">#4 prettyPhoto</a></h3>
<div>
<a href="/xomino/jQinX.nsf/xPrettyPhoto.xsp">A lighbox</a></div>
<span class="xspTextComputedField">
</span><span class="xspTextComputedField">
</span>
<h3><a href="#">#5 jQueryUI</a></h3>
<div>
<a href="http://jqueryui.com/demos/accordion/#collapsible">jQueryUI.com accordion</a></div>
<span class="xspTextComputedField">
</span>

This would not work for the accordion which needs a very specific format to work – so thanks to Mark Leusink – I have a new XPages *Best Friend Forever* – disableTheme=”true”.

To remove the <span id=”blah” and return to the HTML I really want from the view there are two steps:

  1. Remove the id from the field
  2. In the All Properties tab select disabledTheme=true
remove the id and select disableTheme=true
remove the id and select disableTheme=true

And this gives us the final code to make the menu


								<![CDATA[#{javascript:@DbColumn(@DbName(), "vwMenu", 1)}]]>

									<![CDATA[#{javascript:
										var temp = vwMenuCol1Repeat;
										var temp1 = "
<h3><a href=\"#\">"+temp+"</a></h3>
"
										temp1+"
<div>"+@Implode(@DbLookup(@DbName(), "vwMenu", temp, 2))+"</div>
"
									}]]>

I added a DIV wrapper to the Menu HTML so that the jQuery function would have an object I could select on. The selector uses [id$=menuContainer] rather than my x$ function just for variety. [id$=] selects all elements which finish with menuContainer. Activating the accordion plugin inside of a scriptblock at the bottom of the page completes the menu code.


									<![CDATA[ 									$(function() { 										$( "[id$=menuContainer]" ).accordion({ 											collapsible: true} 										}); 									}); 								]]>

and we have a menu……with two remaining issues……

  1. The links are black – being inherited from the lotusui class in the Oneui stylesheet
  2. The 1st Highcharts panel always opens (not the section we clicked on)

To remove the black links we add a style to the control to override the oneUI black links

 .ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited {
 color: #FFFFFF !important;
 }
 .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {
 color: #FFFFFF !important;
 }
 .lotusMenu h3 {line-height: 0.3}
 

To overcome the panel not opening as a user would expect it, we are going to use a scoped Variable, scoped only to this page. We are going to set the menuOpen viewScope variable in the preloading of the page – in this case

	<![CDATA[#{javascript:viewScope.menuOpen=3}]]>

and activate the panel with the scoped variable in the accordion build code – active: #{viewScope.menuOpen}.


									<![CDATA[ 									$(function() { 										$( "[id$=menuContainer]" ).accordion({ 											collapsible: true, 											active: #{viewScope.menuOpen} 										}); 									}); 								]]>

and we have a new menu 🙂

The accordion menu

Demonstration site

This article is published in conjunction with the original post and  demonstration site

PS

I know I am going to run out of space on this accordion menu within 10 articles or so – an excuse for a new article? 😉

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s