Contact us
  • en
  • fr
  • Solutions
    • Company IntranetDiscover our company intranet software to connect and engage your employees
    • Collaboration PlatformDiscover our digital collaboration platform that boost your employee engagement and performance
    • Knowledge ManagementHow To build and manage your knowledge base with eXo Platform
    • Employee EngagementDiscover how to boost your employee engagement
  • Product
    • Overview
      • Software TourAn overview of our software capabilities
      • Why eXoHow eXo improves your employee experience
    • Features
      • CommunicationFeatures to facilitate employee communications
      • CollaborationFeatures to create efficient teams
      • KnowledgeKnowledge management capabilities
      • ProductivityEmployee productivity tools to engage employees
    • Technology
      • Open sourceAn overview of our technology
      • IntegrationsDiscover how eXo integrates with your tools and systems
      • SecurityHow eXo Platform ensures your data security
  • Pricing
    • Product pricingLearn about our business model and pricing
    • ServicesLearn about our professional services
    • FAQsQuestions about the software, the community and our offers
  • Resources
    • Resource center
      • Case studies
      • White Papers
      • Datasheets
      • Videos
    • Technical documentation
      • Getting started
      • Developer Guide
      • Technical administration guide
      • REST APIs
    • From The Blog
      • eXo Platform 6.4 is here, available in both Enterprise and Community editions!
      • eXo Platform community edition is back
      • Cloud Vs On-premise Digital Workplace: Which one is right for your business?
  • Company
    • About us
    • Careers
    • Customers
    • Newsroom
    • Contact us
    • Partners
  • Menu mobile
    • Pricing
    • About us
    • Services
    • FAQs
    • Customers
    • Resource center
    • Contact us
    • Blog
Company Intranet Discover our company intranet software to connect and engage your employees
Collaboration Platform Discover our digital collaboration platform that boost your employee engagement and performance
Knowledge Management How To build and manage your knowledge base with eXo Platform
Employee Engagement Discover how to boost your employee engagement
Overview
  • Software Tour An overview of our software capabilities
  • Why eXo How eXo improves your employee experience
Features
  • Communication Features to facilitate employee communications
  • Collaboration Features to create efficient teams
  • Knowledge Knowledge management capabilities
  • Productivity Employee productivity tools to engage employees
Technology
  • Open source An overview of our technology
  • Integrations Discover how eXo integrates with your tools and systems
  • Security How eXo Platform ensures your data security
Product pricing Learn about our business model and pricing
Services Learn about our professional services
FAQs Questions about the software, the community and our offers
Resource center
  • Case studies
  • White Papers
  • Datasheets
  • Videos
Technical documentation
  • Getting started
  • Developer Guide
  • Technical administration guide
  • REST APIs
From The Blog
  • eXo Platform 6.4 is here, available in both Enterprise and Community editions!
  • eXo Platform community edition is back
  • Cloud Vs On-premise Digital Workplace: Which one is right for your business?
About us
Careers
Customers
Newsroom
Contact us
Partners
Pricing
About us
Services
FAQs
Customers
Resource center
Contact us
Blog
  1. Accueil
  2. Uncategorized
  3. Building an auto image slideshow using AJAX & DOM Object with eXo DriverConnector API

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

Image-slideshow

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:

<project xmlns="https://maven.apache.org/POM/4.0.0" xmlns:xsi="https://www.w3.org/2001/XMLSchemainstance"
xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>sample</groupId>
    <artifactId>gadget</artifactId>
    <packaging>war</packaging>
    <version>1.0</version>
    <name>Auto Slideshow Gadget sample</name>
    <build>
        <finalName>auto-slideshow</finalName>
    </build>
</project>

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

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" metadata-complete="true"
xmlns="https://java.sun.com/xml/ns/javaee" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://java.sun.com/xml/ns/javaee https://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
    <display-name>auto-slideshow</display-name>
</web-app>

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

<!--Defining style for gadget-->
  <style type="text/css">
    img {
        width: 240px;
    }
    #slideshow { 
        margin: 10px auto 10px; 
        position: relative; 
        width: 240px; 
        height: 200px; 
        padding: 10px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    }
    #slideshow > div { 
        position: absolute; 
        top: 10px; 
        left: 10px; 
        right: 10px; 
        bottom: 10px; 
    }
  </style>
  
  <!--Gadget's main body which will be added by HTML DOM Object later-->
  <div id="slideshow">
  </div>

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.

function getImages() {
    //This function uses AJAX to send GET request to server's DriverConnector API and receive XML response
     jQuery.ajax({
         type: "GET",
         url: "https://localhost:8080/portal/rest/wcmDriver/getFoldersAndFiles?driverName=Collaboration&currentFolder=Users/r___/ro___/roo___/root/Private/Pictures&currentPortal=intranet&repositoryName=repository&workspaceName=collaboration&filterBy=Image",
         contentType: "application/xml; charset=utf-8",
         dataType: "xml",
         success: function (data, status, jqXHR) {
            var strResults=new XMLSerializer().serializeToString(data.documentElement);
            //build dynamic html content for "slideshow" div tag
            traverseXMLDoc(strResults, "slideshow");
         },
        //error report
         error: function (jqXHR, status) {
             // error handler
             alert("Cannot retrieve data!");
         }
    });
    }

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

function traverseXMLDoc(xmlDoc, idOfContainerDomElement){
    //This function traverses through the whole XML response returned from server
    
        var $xmlDocObjChildren, $contentDiv;
        $contentDiv = $('#' + idOfContainerDomElement);
        if ($contentDiv.length === 0) {
            throw new Error('There are no DOM elements with this id: "' + idOfContainerDomElement + '"');
        }
        //Information of each image object is contained in "File" tag
        $xmlDocObjChildren = $(xmlDoc).find("File");
        $xmlDocObjChildren.each(function(index, Element) {
        var $currentObject = $(this),
            childElementCount = Element.childElementCount,
            //Image's url is contained in "url" attribute
            currentNodeType = $currentObject.attr('url');
            
        //Adding dynamic content into gadget's body
        $contentDiv.append('<div><img src="'+currentNodeType+'"></div>');
        });
    }

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

<script type="text/javascript">
//Creating gagdet's effects
    $("#slideshow > div:gt(0)").hide();
    setInterval(function() { 
      $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    },  3000);
 </script>

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

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Memories!" width="240" height="200"/>
  <Content type="html">
  <![CDATA[
  <!--Including JQuery library-->
  <script src="https://code.jquery.com/jquery-2.1.3.js"></script>
  
  <!--Defining style for gadget-->
  <style type="text/css">
    img {
        width: 240px;
    }
    #slideshow { 
        margin: 10px auto 10px; 
        position: relative; 
        width: 240px; 
        height: 200px; 
        padding: 10px; 
        box-shadow: 0 0 20px rgba(0,0,0,0.4); 
    }
    #slideshow > div { 
        position: absolute; 
        top: 10px; 
        left: 10px; 
        right: 10px; 
        bottom: 10px; 
    }
  </style>
  
  <!--Gadget's main body which will be added by HTML DOM Object later-->
  <div id="slideshow">
  </div>
  
  <script type="text/javascript">
    getImages();
    function traverseXMLDoc(xmlDoc, idOfContainerDomElement){
    //This function traverses through the whole XML response returned from server
    
        var $xmlDocObjChildren, $contentDiv;
        $contentDiv = $('#' + idOfContainerDomElement);
        if ($contentDiv.length === 0) {
            throw new Error('There are no DOM elements with this id: "' + idOfContainerDomElement + '"');
        }
        //Information of each image object is contained in "File" tag
        $xmlDocObjChildren = $(xmlDoc).find("File");
        $xmlDocObjChildren.each(function(index, Element) {
        var $currentObject = $(this),
            childElementCount = Element.childElementCount,
            //Image's url is contained in "url" attribute
            currentNodeType = $currentObject.attr('url');
            
        //Adding dynamic content into gadget's body
        $contentDiv.append('<div><img src="'+currentNodeType+'"></div>');
        });
    }
    
    function getImages() {
    //This function uses AJAX to send GET request to server's DriverConnector API and receive XML response
     jQuery.ajax({
         type: "GET",
         url: "https://localhost:8080/portal/rest/wcmDriver/getFoldersAndFiles?driverName=Collaboration&currentFolder=Users/r___/ro___/roo___/root/Private/Pictures&currentPortal=intranet&repositoryName=repository&workspaceName=collaboration&filterBy=Image",
         contentType: "application/xml; charset=utf-8",
         dataType: "xml",
         success: function (data, status, jqXHR) {
            var strResults=new XMLSerializer().serializeToString(data.documentElement);
            //build dynamic html content for "slideshow" div tag
            traverseXMLDoc(strResults, "slideshow");
         },
        //error report
         error: function (jqXHR, status) {
             // error handler
             alert("Cannot retrieve data!");
         }
    });
    }
    
    //Creating gagdet's effects
    $("#slideshow > div:gt(0)").hide();
    setInterval(function() { 
      $('#slideshow > div:first')
        .fadeOut(1000)
        .next()
        .fadeIn(1000)
        .end()
        .appendTo('#slideshow');
    },  3000);
  </script>
  ]]>
  </Content>
</Module>

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:

<gadgets
xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="https://www.gatein.org/xml/ns/gatein_objects_1_0 https://www.gatein.org/xml/ns/gadgets_1_0"
xmlns="https://www.gatein.org/xml/ns/gadgets_1_0">
    <gadget name="AutoSlideshowGadget">
        <path>/gadgets/AutoSlideshowGadget/AutoSlideshowGadget.xml</path>
    </gadget>
</gadgets>

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:

01-gadget-details

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:

02-gadget

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

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!

Lan Nguyen

Full-featured digital workplace with everything your employees need to work efficiently, smartly integrated for a compelling employee experience

  • Product
    • Software tour
    • Communication
    • Collaboration
    • Knowledge
    • Productivity
    • Open Source
    • Integrations
    • Security
  • Uses cases
    • Digital Workplace
    • Intranet software
    • Collaboration software
    • Knowledge management software
    • Entreprise Social Network
    • Employee Engagement platform
  • Roles
    • Internal Communications
    • Human Resources
    • Information Technology
  • Company
    • Product offer
    • Services Offer
    • Customers
    • Partners
    • About us
  • Resources
    • FAQs
    • Resource Center
    • Collaboration guide
    • What is a Digital workplace?
    • What is an intranet?
    • Employee engagement
  • Terms and Conditions
  • Legal
  • Privacy Policy
  • Accessibility
  • Contact us
  • Sitemap
  • Facebook
  • Twitter
  • LinkedIn
wpDiscuz