FrançaisEnglish

ClientSide Elements

Introduction

There are 2 kinds of client side elements. Basic and dynamics ones.


ClientSideElement

Introduction

ClientSideElement is a java interface for declaring a javascript class.

It is structured in :

  • javascript classname
  • class parameters
  • script files
  • css files


Implementation

The main implementation is a static one, that reads the configuration from the plugin.xml and send it directly to the browser.

Each time you need to implement a ClientSideElement, it is a good idea to inherit this implementation.
Here is the configuration of this class.

<extension id=".." point=".." class="class="org.ametys.cms.workspace.impl.StaticClientSideElement">
    <action class="MYJSCLASSNAME">
        <param name="...">...</param>
        <param name="..." i18n="true">MYI18NKEY</param>
        <param name="..." i18n="true">OTHERCATALOGUE:MYI18NKEY</param>
        <param name="..." file="true">img/myimg.png</param>
        <param name="..." file="true" plugin="cms">img/cmsimg.png</param>
        ...
    </action>
    <scripts>
        <file>js/MYJSFILE.js</file>
        <file plugin="cms">js/ANOTHERJSFILE.js</file>
    </scripts>
    <css>
        <file>css/MYCSSFILE.css</file>
        <file plugin="cms">css/ANOTHERCSSFILE.css</file>
    </css>
</extension>

Action parameters can be a string, or an i18n key (optionnaly prefixed by a catalogue name - default one is the current plugin one) or file to resources (from current plugin or from another plugin)

 Files to import (script or css) are relative to the current plugin resources directory ; but you can be relative to another plugin by specifying the attribute "plugin".

ContextualClientSideElement

Introduction

ContextualClientSideElement is an interface that inherit the ClientSideElement to add a single behavior.

ContextualClientSideElement can give dynamic parameters.

The purpose a of such an item is to send to the JS parameters depending on their current state.

Implementation

The static implementation (org.ametys.cms.workspace.impl.StaticContextualClientSideElement) does nothing dynamically, but you may inherit it to add your own behavior.

Dynamic

When you want to make your element uptodate

org.ametys.ribbon.RibbonManager.getInstance().refreshElement(TYPE, this, params)

where params are JSON parameters to send to the server, and TYPE can be

  • 'control' means you want to update a RibbonControlManager extension
  • 'tab' means you want to update a RibbonTabManager extension

Then the java method "getCurrentPatameters" of your implementation of ContextuelClientSideElement is called with the JSON parameters.

    public Map<String, I18nizableText> getCurrentParameters(Map<String, Object> parameters)
    {
        Map<String, I18nizableText> results = new HashMap<String, I18nizableText>();
        ...
        return results;
    }

This method returns a map of parameter, that will be transmited to your JS throught the method "configurationChanged"

MyElement.prototype.configurationChanged = function(params)
{
    ...
}


In case of error, the method configurationError will be called with the response param ; but please note an error message would already been displayed.

Back to top

Development