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 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)

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

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

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.

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}.