Adding the JavaScript resources to the portlet

In this recipe, you will add the JavaScript code to add functionalities to a portlet. You will see how to assign JavaScript functions to a portlet.

Getting ready

Look at the previous example. If you click on an empty node of the tree after the second level, for example, on the left of the Application Registry node, you will see that nothing happens. Remember that you have configured, in the Creating views recipe, the in-memory state for a maximum of two levels. Therefore, you need to add the functions to collapse and update the tree of the pages for the levels that are not in memory.

How to do it...

  1. First, declare the JavaScript module in the gatein-resources.xml:
    <javascript>
   <param>
      <js-module>eXo.webui.Mycomponent</js-module>
      <js-path>
        /javascript/eXo/webui/Mycomponent.js
     </js-path>
   </param>
</javascript>

    This module will be registered in the portal page before the rendering operation.

  2. Add the JavaScript file in the declared path MyApplication.war/javascript/exo/webui/Mycomponent.js. Here is a basic example:
    Mycomponent.prototype.updateTreeNode = function (nodeToUpdate, getNodeURL) {
   ...
};
eXo.webui.Mycomponent = new Mycomponent();

    The JavaScript updateTreeNode function is triggered when you click on a node of the tree because it is started by the Groovy page seen before, UISitemapTree.gtmpl.

    In this method, you have access to all eXo scripts. eXo counts about 200 scripts. Useful utilities include the operations for the keyboard, the pop-ups, the upload utilities, the tool bar, the management of the contents, and drag-and-drop. You are free to use eXo JavaScripts or some other framework, such as prototype or jquery.

    As for the CSS, if it is still not done, you need to activate the filter for the resources, as shown in the Handling different skins in the portlet recipe.

  3. Now you can add the following code to your portlet class (my.sample.Myportlet in the Getting started with WebUI recipe) or Groovy script of your portlet:
    PortalRequestContext pcontext = 
     Util.getPortalRequestContext();      
JavascriptManager jsmanager = 
     pcontext.getJavascriptManager();
jsmanager.importJavascript('eXo.webui.JSPHelloUser') ;

It will load the functions on the page.

How it works...

JavascriptConfigDeployer waits for the JavaScript module declared in the gatein-service.xml when the application is deployed.

It passes the module to the JavascriptConfigService that registers it in an internal cache.

This service maintains the following information about the modules:

  • portal-name: The name of the portal where the JavaScript is loaded. The WebUI framework always declares the JavaScript at the portal level. The JavaScripts are always declared in the head of the page.
  • js-path: The path of the file where the JavaScript code is located.
  • js-priority: The priority of loading the module. If 0, it will be loaded last, with higher numbers loaded before lower numbers.

The org.exoplatform.web.application.JavascriptManager is the interface that interacts with the scripts. Here are the main operations:

  • importJavascript (module_id): Imports the module inside the Manager Service. It can be called at any part of the portal, passing the ID of the module configured in the gatein-resources.xml.
  • writeJavascript (Writer writer): This is called by GateIn to append the requests of the JavaScript modules. They are written at the end of the page. The page that calls this method is UIPortalApplicationChildren.gtmpl. It is inside the $PORTAL_ROOT/groovy/portal/webui/workspace folder.
  • writeCustomizedOnLoadScript (Writer writer): This is called by an internal Groovy page of GateIn. The UIPortalApplicationChildren.gtmpl is used to append the custom JavaScript calls. Some pages would add an onLoad function passing a parameter. GateIn offers this method to use the classic onload event in a page. This eXo method allows to order the onload functions in the pages. Here is an example to import JavaScript code:
    javascriptmanager.addCustomizedOnLoadScript(
   'eXo.portal.UIAdminToolbar.onLoad(
       "' + uicomponent.id + '"
   );
'),

They are written at the end of the page too.

In the example seen earlier, you have these declarations as the last result: 

<script type="text/javascript" src="/MyApplication/javascript/eXo/webui/Mycomponent.js"></script>
...
eXo.require(', eXo.webui.Mycomponent, '),

The UIApplication.gtmpl page loads the first row. This page is located in the $PORTAL_ROOT/groovy/portal/webui/workspace folder; it represents the default layout of the portal. It calls the Javascript Config Service and takes all the available JS paths at the head of the page.

The eXo.require row is written by the writeJavascript method. This is a JavaScript function used to find the JS modules that are not declared in the gatein-resources.xml file. It automatically searches for the JS modules in the eXoResources path, and if it finds the file .js with the same name, it is cached on the client side. An example is the eXo.portal.UIAdminToolbar module.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.218.3.204