{"id":37769,"date":"2015-04-21T05:55:49","date_gmt":"2015-04-21T12:55:49","guid":{"rendered":"http:\/\/localhost\/exoblog\/?p=8692"},"modified":"2015-04-21T05:55:49","modified_gmt":"2015-04-21T12:55:49","slug":"building-an-auto-image-slideshow-using-ajax-dom-object-with-exo-driverconnector-api","status":"publish","type":"post","link":"https:\/\/www.exoplatform.com\/blog\/building-an-auto-image-slideshow-using-ajax-dom-object-with-exo-driverconnector-api\/","title":{"rendered":"Building an auto image slideshow using AJAX & DOM Object with eXo DriverConnector API"},"content":{"rendered":"

\"Image-slideshow\"<\/a><\/p>\n

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\u2019s content can be created dynamically based on AJAX\u2019s response data. This section shows you how to leverage these utilities to customize your gadget.
\n
\n1\/ Create a basic pom.xml<\/span> file and configure your gadget\u2019s name as auto-slideshow<\/em> as follows:<\/p>\n

<project xmlns=\"https:\/\/maven.apache.org\/POM\/4.0.0\" xmlns:xsi=\"https:\/\/www.w3.org\/2001\/XMLSchemainstance\"\nxsi:schemaLocation=\"https:\/\/maven.apache.org\/POM\/4.0.0 https:\/\/maven.apache.org\/maven-v4_0_0.xsd\">\n    <modelVersion>4.0.0<\/modelVersion>\n    <groupId>sample<\/groupId>\n    <artifactId>gadget<\/artifactId>\n    <packaging>war<\/packaging>\n    <version>1.0<\/version>\n    <name>Auto Slideshow Gadget sample<\/name>\n    <build>\n        <finalName>auto-slideshow<\/finalName>\n    <\/build>\n<\/project><\/pre>\n
2\/ Add this web.xml<\/span> file to the src\/main\/webapp\/WEB-INF<\/span> directory of your project:<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<web-app version=\"3.0\" metadata-complete=\"true\"\nxmlns=\"https:\/\/java.sun.com\/xml\/ns\/javaee\" xmlns:xsi=\"https:\/\/www.w3.org\/2001\/XMLSchema-instance\"\nxsi:schemaLocation=\"https:\/\/java.sun.com\/xml\/ns\/javaee https:\/\/java.sun.com\/xml\/ns\/javaee\/web-app_3_0.xsd\">\n    <display-name>auto-slideshow<\/display-name>\n<\/web-app><\/pre>\n
3\/ Now, create a simple UI for your gadget with its style:<\/p>\n
<!--Defining style for gadget-->\n  <style type=\"text\/css\">\n    img {\n        width: 240px;\n    }\n    #slideshow { \n        margin: 10px auto 10px; \n        position: relative; \n        width: 240px; \n        height: 200px; \n        padding: 10px; \n        box-shadow: 0 0 20px rgba(0,0,0,0.4); \n    }\n    #slideshow > div { \n        position: absolute; \n        top: 10px; \n        left: 10px; \n        right: 10px; \n        bottom: 10px; \n    }\n  <\/style>\n  \n  <!--Gadget's main body which will be added by HTML DOM Object later-->\n  <div id=\"slideshow\">\n  <\/div><\/pre>\n
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<\/a> for more details). Notice the traverseXMLDoc<\/span> function will be created in the following steps.<\/p>\n
function getImages() {\n    \/\/This function uses AJAX to send GET request to server's DriverConnector API and receive XML response\n     jQuery.ajax({\n         type: \"GET\",\n         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\",\n         contentType: \"application\/xml; charset=utf-8\",\n         dataType: \"xml\",\n         success: function (data, status, jqXHR) {\n            var strResults=new XMLSerializer().serializeToString(data.documentElement);\n            \/\/build dynamic html content for \"slideshow\" div tag\n            traverseXMLDoc(strResults, \"slideshow\");\n         },\n        \/\/error report\n         error: function (jqXHR, status) {\n             \/\/ error handler\n             alert(\"Cannot retrieve data!\");\n         }\n    });\n    }<\/pre>\n
5\/ Create the traverseXMLDoc<\/span> function with two input parameters as follows:<\/p>\n
function traverseXMLDoc(xmlDoc, idOfContainerDomElement){\n    \/\/This function traverses through the whole XML response returned from server\n    \n        var $xmlDocObjChildren, $contentDiv;\n        $contentDiv = $('#' + idOfContainerDomElement);\n        if ($contentDiv.length === 0) {\n            throw new Error('There are no DOM elements with this id: \"' + idOfContainerDomElement + '\"');\n        }\n        \/\/Information of each image object is contained in \"File\" tag\n        $xmlDocObjChildren = $(xmlDoc).find(\"File\");\n        $xmlDocObjChildren.each(function(index, Element) {\n        var $currentObject = $(this),\n            childElementCount = Element.childElementCount,\n            \/\/Image's url is contained in \"url\" attribute\n            currentNodeType = $currentObject.attr('url');\n            \n        \/\/Adding dynamic content into gadget's body\n        $contentDiv.append('<div><img src=\"'+currentNodeType+'\"><\/div>');\n        });\n    }<\/pre>\n
6\/ Now, add some image effects to your gadget:<\/p>\n
<script type=\"text\/javascript\">\n\/\/Creating gagdet's effects\n    $(\"#slideshow > div:gt(0)\").hide();\n    setInterval(function() { \n      $('#slideshow > div:first')\n        .fadeOut(1000)\n        .next()\n        .fadeIn(1000)\n        .end()\n        .appendTo('#slideshow');\n    },  3000);\n <\/script><\/pre>\n
7\/ Finally, include all your created contents in the AutoSlideshowGadget.xml<\/span> file under src\/main\/webapp\/gadgets\/AutoSlideshowGadget\/<\/span> to get this script:<\/p>\n
<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n<Module>\n  <ModulePrefs title=\"Memories!\" width=\"240\" height=\"200\"\/>\n  <Content type=\"html\">\n  <![CDATA[\n  <!--Including JQuery library-->\n  <script src=\"https:\/\/code.jquery.com\/jquery-2.1.3.js\"><\/script>\n  \n  <!--Defining style for gadget-->\n  <style type=\"text\/css\">\n    img {\n        width: 240px;\n    }\n    #slideshow { \n        margin: 10px auto 10px; \n        position: relative; \n        width: 240px; \n        height: 200px; \n        padding: 10px; \n        box-shadow: 0 0 20px rgba(0,0,0,0.4); \n    }\n    #slideshow > div { \n        position: absolute; \n        top: 10px; \n        left: 10px; \n        right: 10px; \n        bottom: 10px; \n    }\n  <\/style>\n  \n  <!--Gadget's main body which will be added by HTML DOM Object later-->\n  <div id=\"slideshow\">\n  <\/div>\n  \n  <script type=\"text\/javascript\">\n    getImages();\n    function traverseXMLDoc(xmlDoc, idOfContainerDomElement){\n    \/\/This function traverses through the whole XML response returned from server\n    \n        var $xmlDocObjChildren, $contentDiv;\n        $contentDiv = $('#' + idOfContainerDomElement);\n        if ($contentDiv.length === 0) {\n            throw new Error('There are no DOM elements with this id: \"' + idOfContainerDomElement + '\"');\n        }\n        \/\/Information of each image object is contained in \"File\" tag\n        $xmlDocObjChildren = $(xmlDoc).find(\"File\");\n        $xmlDocObjChildren.each(function(index, Element) {\n        var $currentObject = $(this),\n            childElementCount = Element.childElementCount,\n            \/\/Image's url is contained in \"url\" attribute\n            currentNodeType = $currentObject.attr('url');\n            \n        \/\/Adding dynamic content into gadget's body\n        $contentDiv.append('<div><img src=\"'+currentNodeType+'\"><\/div>');\n        });\n    }\n    \n    function getImages() {\n    \/\/This function uses AJAX to send GET request to server's DriverConnector API and receive XML response\n     jQuery.ajax({\n         type: \"GET\",\n         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\",\n         contentType: \"application\/xml; charset=utf-8\",\n         dataType: \"xml\",\n         success: function (data, status, jqXHR) {\n            var strResults=new XMLSerializer().serializeToString(data.documentElement);\n            \/\/build dynamic html content for \"slideshow\" div tag\n            traverseXMLDoc(strResults, \"slideshow\");\n         },\n        \/\/error report\n         error: function (jqXHR, status) {\n             \/\/ error handler\n             alert(\"Cannot retrieve data!\");\n         }\n    });\n    }\n    \n    \/\/Creating gagdet's effects\n    $(\"#slideshow > div:gt(0)\").hide();\n    setInterval(function() { \n      $('#slideshow > div:first')\n        .fadeOut(1000)\n        .next()\n        .fadeIn(1000)\n        .end()\n        .appendTo('#slideshow');\n    },  3000);\n  <\/script>\n  ]]>\n  <\/Content>\n<\/Module><\/pre>\n
Notice that you can follow this<\/a> 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.<\/p>\n
8\/ Add the following content to the gadget.xml<\/span> file under the src\/main\/webapp\/WEB-INF<\/span> directory:<\/p>\n
<gadgets\nxmlns:xsi=\"https:\/\/www.w3.org\/2001\/XMLSchema-instance\"\nxsi:schemaLocation=\"https:\/\/www.gatein.org\/xml\/ns\/gatein_objects_1_0 https:\/\/www.gatein.org\/xml\/ns\/gadgets_1_0\"\nxmlns=\"https:\/\/www.gatein.org\/xml\/ns\/gadgets_1_0\">\n    <gadget name=\"AutoSlideshowGadget\">\n        <path>\/gadgets\/AutoSlideshowGadget\/AutoSlideshowGadget.xml<\/path>\n    <\/gadget>\n<\/gadgets><\/pre>\n
9\/ Create the target war with the Maven command: mvn clean install<\/span><\/p>\n
10\/ Add the context name auto-slideshow<\/em> of the gadget war to $PLATFORM_TOMCAT_HOME\/lib\/customextension-config.jar!\/conf\/configuration.xml<\/span> as in step 6 of Create a very simple gadget<\/a>.<\/p>\n
11\/ Restart the server, then deploy it in the application server by copying the generated web archive autoslideshow.war<\/span>, from the target folder into the deployment folder where you unpacked the eXo Platform installation.<\/p>\n
12\/ Go to the Applications<\/strong> menu and select the Gadget<\/strong> button. The new gadget will be listed:<\/p>\n
\"01-gadget-details\"<\/a><\/p>\n
Add this gadget into a specific category to bring it into use.<\/p>\n
13\/ Before using this gadget, you need to log in as root user. Then you can upload images into the Pictures<\/span> folder under the Documents<\/span> folder.<\/p>\n
14\/ Go to the Dashboard<\/strong> to insert the gadget into the page. Open the Dashboard Workspace<\/strong> by clicking the Add Gadgets<\/strong> link and choose the auto slideshow gadget named \u201cMemories!<\/em>\u201d The result is as below:<\/p>\n
\"02-gadget\"<\/a><\/p>\n
The source code for this demonstration is available on GitHub<\/a>, so you can download and test it.<\/p>\n
(this article was originally posted on my blog: Lan Nguyen ~ Writing is sharing<\/a>)<\/p>\n
Join the eXo tribe<\/a> by registering for the community and get updates, tutorials, support, and access to the Platform and add-on downloads!<\/b><\/p>\n
<\/p>\n
\n
\n

\n\"make-the-most-out-of-eXo-platform4\"
\n<\/a><\/div>\n
\n
Make the most out of eXo Platform 4<\/h4>\n
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!<\/a><\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"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\u2019s content can be created dynamically based on AJAX\u2019s response data. This section shows you how to leverage these utilities to customize your gadget.","protected":false},"author":105,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[699],"tags":[],"lang":"en","translations":{"en":37769},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/37769"}],"collection":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/users\/105"}],"replies":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/comments?post=37769"}],"version-history":[{"count":0,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/37769\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/media?parent=37769"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/categories?post=37769"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/tags?post=37769"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}