Another draw (unite gallery) in the waste-basket

Gallery galore

For an application I want to provide an image slider, in stead of the default Bootstrap carousel. I remembered a blog post of Johnny Oldenburger about Unite Gallery a while ago so I gave that a try.

Repeat and xp:image

Where Johnny demonstrated some static images I want to populate the image collection so I set up a repeat control with an xp:image control inside and calculate it’s properties.

Here is what the code looks like:

Code

The code of the XPage you can download here.

 

Code walk-through

After loading the JS resources I have a script block that build the gallery when the document is ready. The div gallery functions as container for the gallery.

Then I have a repeat control. An album object is just a Notes document that contains references to other Notes documents containing the picture files. So my Album.getPictures method returns a vector of references for which I have to make a lookup (via a Picture object) and collect some values (which size picture to use (thumbnail or original).

I separate the design from the data, so I also have to collect the location of the data db.

In the example I have two ways to define the image, one is via a xp:text control and the other is via the xp:image control. I rather prefer this last option.

Result

 

Below you can see a snippet of how the result. At first it looks nice, does’t it?

Complications with XPages

So after I got the gallery on my XPage with dynamic content I started to notice undesired behaviour. My Bootstrap navbar links (xp:link) didn’t work anymore. Buttons on the same page stopped behaving and more.

A quick search after “Unite Gallery and XPages” lead me to some stackoverflow questions where people described similar problems.

Untill now I have not found a solution to get it working.

Lesson learned

Before implementing a plugin in XPages, do some research on possible complications.

 

 

Carousel with dynamic content

Introduction

For an application I needed a carousel to display images on the frontpage. Since we go “all-in” Bootstrap the “natural choice” would be the Carousel component from the Extension Library. Unfortunately that control currently only accepts “static” slideNodes so I had to come up with something similar.

In the beginning…

First I just took the sample code from W3schools how to setup a basic Bootstrap Carousel component.

Second I set up a Notes view that contains the data I need for my carousel. This view will be the source for an XPages Rest Service control (PDF alert) which I call after page load with an Ajax call using jQuery’s getJSON.

As you can see I update the Bootstrap sample code with the received result(s).

As a result I get the Carousel component from Bootstrap but now with ‘dynamic content’.

(for those who have never seen a Carousel)

The only complication I experienced was due to the fact that I separate the design from the data and accessing the data is easier in SSJS/Java then CSJS.

Here is the code: Link Dropbox

Happy development =)