Status

WIP.

Description

This article provides the list of shared JavaScript resources and detailed information on each of them.

Actual resource organizing was obtained following effort on Resource Controller and Javascript Optimization

Specification

We remind the definitions of resource and module concepts:

• resource is an abstract bundle of modules and dependent resources. It also defines the policy toward JavaScript code files that its modules

    referring to.

• module refers to a physical Javascript code file.

Each resouce has scope SHARED, PORTAL or PORTLET.

The term shared in this article signifies resources having SHARED scope. There are now nine shared resouces (see below list), all of them are configured in eXoResouces/src/main/webapp/WEB-INF/gatein-resouces.xml

{code}
jquery, bootstrap, base, common, navigation, webui, webui-ext, portal, dashboard
{code}

JQuery

{code:xml}
   <module>
      <name>jquery</name>
      <script>
         <name>jquery</name>
         <path>/javascript/exo-jquery-1.7.1.js</path>
      </script>
   </module>
{code}

The resouce contains a single module named jquery, which refers to our built-in JQuery Core

Bootstrap

{code:xml}
   <!-- Bootstrap Javascripts -->
   <module>
      <name>bootstrap</name>
      <script>
         <name>eXo</name>
         <path>/javascript/eXo.js</path>
      </script>
      <script>
         <name>eXo.core.Loader</name>
         <path>/javascript/eXo/core/AsyncLoader.js</path>
      </script>
   </module>
{code}

The resouce groups JavaScript files dealing with:

- Initializing eXo namespaces.

- Loading JavaScript code into browser.

Base

{code:xml}
   <!-- Base Javascripts for anonymous mode -->
   <module>
      <name>base</name>
      <supported-locale>de</supported-locale>
      <supported-locale>en</supported-locale>
      <supported-locale>fr</supported-locale>
      <supported-locale>ru</supported-locale>
      <supported-locale>vi</supported-locale>
      <script>
         <name>eXo.core.Utils</name>
         <path>/javascript/eXo/core/Util.js</path>
      </script>
      <script>
         <name>eXo.webui.UIPopupSelectCategory</name>
         <path>/javascript/eXo/webui/UIPopupSelectCategory.js</path>
      </script>
      <script>
         <name>eXo.core.Browser</name>
         <path>/javascript/eXo/core/Browser.js</path>
      </script>
      <script>
         <name>eXo.core.JSON</name>
         <path>/javascript/eXo/core/JSON.js</path>
      </script>
      <script>
         <name>eXo.core.I18n</name>
         <path>/javascript/eXo/core/I18n.js</path>
      </script>
      <script>
         <name>eXo.core.Skin</name>
         <path>/javascript/eXo/core/Skin.js</path>
      </script>
      <script>
         <name>eXo.portal.PortalHttpRequest</name>
         <path>/javascript/eXo/portal/PortalHttpRequest.js</path>
      </script>
 
      <script>
         <name>eXo.webui.UIPopup</name>
         <path>/javascript/eXo/webui/UIPopup.js</path>
      </script>
 
      <script>
         <name>eXo.core.UIMaskLayer</name>
         <path>/javascript/eXo/core/UIMaskLayer.js</path>
      </script>
      <script>
         <name>eXo.portal.UIMaskWorkspace</name>
         <path>/javascript/eXo/portal/UIMaskWorkspace.js</path>
      </script>
 
      <script>
        <name>eXo.i18n.I18NMessage</name>
        <path>/javascript/eXo/i18n/I18NMessage.js</path>
        <resource-bundle>eXo.portal</resource-bundle>
      </script>
      <depends>
        <module>bootstrap</module>
      </depends>
      <depends>
        <module>jquery</module>
      </depends>
   </module>
{code}

The resouce groups minimal JavaScript code to display the front of GateIn (i.e: the content that an annonymous user could see)

Common

{code:xml}
   <!-- CORE Javascripts -->
   <module>
      <name>common</name>
      <script>
         <name>eXo.core.DragDrop2</name>
         <path>/javascript/eXo/core/DragDrop2.js</path>
      </script>
 
      <!-- Gadget Javascripts -->
      <script>
         <name>eXo.gadget.UIGadget</name>
         <path>/javascript/eXo/gadget/UIGadget.js</path>
      </script>
 
      <depends>
         <module>base</module>
      </depends>
   </module>
{code}

Navigation

{code:xml}
   <module>
      <name>navigation</name>
      <script>
         <name>eXo.portal.ScrollManager</name>
         <path>/javascript/eXo/portal/ScrollManager.js</path>
      </script>
      <script>
         <name>eXo.webui.UIPopupMenu</name>
         <path>/javascript/eXo/webui/UIPopupMenu.js</path>
      </script>
      <script>
         <name>eXo.portal.UIPortalNavigation</name>
         <path>/javascript/eXo/portal/UIPortalNavigation.js</path>
      </script>
      <depends>
         <module>base</module>
      </depends>
   </module>
{code}

The resouce groups JavaScript code required for navigation toolbar, popup and the scrolling.

Portal

{code:xml}
   <!-- Portal Javascripts -->
   <module>
      <name>portal</name>
      <script>
         <name>eXo.portal.UIPortal</name>
         <path>/javascript/eXo/portal/UIPortal.js</path>
      </script>
      <script>
         <name>eXo.portal.PortalComposer</name>
         <path>/javascript/eXo/portal/PortalComposer.js</path>
      </script>
      <script>
         <name>eXo.portal.PortalDragDrop</name>
         <path>/javascript/eXo/portal/PortalDragDrop.js</path>
      </script>
      <depends>
         <module>common</module>
      </depends>
   </scripts>
{code}

The resouce groups JavaScript code used for content edition feature in GateIn

WebUI

{code:xml}
   <!-- WebUI Javascripts -->
   <module>
      <name>webui</name>
      <script>
         <name>eXo.webui.UIItemSelector</name>
         <path>/javascript/eXo/webui/UIItemSelector.js</path>
      </script>
      <script>
         <name>eXo.portal.UIPortalControl</name>
         <path>/javascript/eXo/portal/UIPortalControl.js</path>
      </script>
      <script>
         <name>eXo.portal.VerticalScrollManager</name>
         <path>/javascript/eXo/portal/VerticalScrollManager.js</path>
      </script>
      <script>
         <name>eXo.webui.UIForm</name>
         <path>/javascript/eXo/webui/UIForm.js</path>
      </script>
      <script>
         <name>eXo.webui.UIPopupWindow</name>
         <path>/javascript/eXo/webui/UIPopupWindow.js</path>
      </script>
      <script>
         <name>eXo.webui.UIHorizontalTabs</name>
         <path>/javascript/eXo/webui/UIHorizontalTabs.js</path>
      </script>
      <depends>
         <module>common</module>
      </depends>
   </module>
{code}

The resouce groups JavaScript code of frequently-used UI components.

WebUI-ext

{code:xml}
   <module>
      <name>webui-ext</name>
      <script>
         <name>eXo.webui.UICalendar</name>
         <path>/javascript/eXo/webui/UICalendar.js</path>
      </script>
      <script>
         <name>eXo.webui.UIUpload</name>
         <path>/javascript/eXo/webui/UIUpload.js</path>
      </script>
      <script>
         <name>eXo.webui.UIRightClickPopupMenu</name>
         <path>/javascript/eXo/webui/UIRightClickPopupMenu.js</path>
      </script>
      <script>
         <name>eXo.webui.UIDropDownControl</name>
         <path>/javascript/eXo/webui/UIDropDownControl.js</path>
      </script>
      <script>
         <name>eXo.webui.UIVirtualList</name>
         <path>/javascript/eXo/webui/UIVirtualList.js</path>
      </script>
      <script>
         <name>eXo.webui.UIColorPicker</name>
         <path>/javascript/eXo/webui/UIColorPicker.js</path>
      </script>
      <script>
         <name>eXo.webui.UICombobox</name>
         <path>/javascript/eXo/webui/UICombobox.js</path>
      </script>
      <depends>
         <module>common</module>
      </depends>
   </module>
{code}

The resouce groups JavaScript code of non-frequently-used UI components.

Dashboard

{code:xml}
   <module>
      <name>dashboard</name>
      <script>
         <name>eXo.webui.UIDashboard</name>
         <path>/javascript/eXo/webui/UIDashboard.js</path>
      </script>
      <script>
         <name>eXo.webui.UIDashboardUtil</name>
         <path>/javascript/eXo/webui/UIDashboardUtil.js</path>
      </script>
      <depends>
         <module>common</module>
      </depends>
   </module>
{code}

The resouce groups JavaScript code required for dashboard feature.

As dashboard portlet would be converted into a special container, we configure the dashboard resouce with SHARED scope instead of PORTLET scope.