Building an auto image slideshow using AJAX & DOM Object with eXo DriverConnector API


AJAX allows a gadget to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. Moreover, with the support of HTML DOM Object, the gadget’s content can be created dynamically based on AJAX’s response data. This section shows you how to leverage these utilities to customize your gadget.

1/ Create a basic pom.xml file and configure your gadget’s name as auto-slideshow as follows:

2/ Add this web.xml file to the src/main/webapp/WEB-INF directory of your project:

3/ Now, create a simple UI for your gadget with its style:

4/ Create the following JavaScript function using AJAX to call the DriverConnector API to get all the public images of the root user (see here for more details). Notice the traverseXMLDoc function will be created in the following steps.

5/ Create the traverseXMLDoc function with two input parameters as follows:

6/ Now, add some image effects to your gadget:

7/ Finally, include all your created contents in the AutoSlideshowGadget.xml file under src/main/webapp/gadgets/AutoSlideshowGadget/ to get this script:

Notice that you can follow this to create CSS and JavaScript resources in separate files to share with other gadgets. In this guide, we keep it simple by including one file only.

8/ Add the following content to the gadget.xml file under the src/main/webapp/WEB-INF directory:

9/ Create the target war with the Maven command: mvn clean install

10/ Add the context name auto-slideshow of the gadget war to $PLATFORM_TOMCAT_HOME/lib/customextension-config.jar!/conf/configuration.xml as in step 6 of Create a very simple gadget.

11/ Restart the server, then deploy it in the application server by copying the generated web archive autoslideshow.war, from the target folder into the deployment folder where you unpacked the eXo Platform installation.

12/ Go to the Applications menu and select the Gadget button. The new gadget will be listed:


Add this gadget into a specific category to bring it into use.

13/ Before using this gadget, you need to log in as root user. Then you can upload images into the Pictures folder under the Documents folder.

14/ Go to the Dashboard to insert the gadget into the page. Open the Dashboard Workspace by clicking the Add Gadgets link and choose the auto slideshow gadget named “Memories!” The result is as below:


The source code for this demonstration is available on GitHub, so you can download and test it.

(this article was originally posted on my blog: Lan Nguyen ~ Writing is sharing)

Join the eXo tribe by registering for the community and get updates, tutorials, support, and access to the Platform and add-on downloads!

Make the most out of eXo Platform 4

Register to the next weekly live demo session and get a complete overview of what you can do with eXo Platform 4. Reserve your seat now!

Be part of the discussion, share your comments