Tag Archives: dojo

Create your custom attribute editor (part 1)

In this series of posts, we will learn how to develop and use a new attribute/property editor in your Entry Template layout.

ICN_editor_settings

This is not as easy as it first sounds, so I will split this tutorial in 6 parts.

Here is the summary of all parts, they should be taken in order.

  1. Part 1: Principle and configuration injection
  2. Part 2: Create the editor
  3. Part 3: Create the widget
  4. Part 4: Deploy and test
  5. Part 5: Add custom settings
  6. Part 6: Create a fancier widget and extra editor configuration

First part, how is it all connected

It’s good to start with some basic comprehension of how the editor mechanism works in ICN. The most important class is the ecm/model/configuration/ControlRegistry class

Everything starts with this class, this is the main registry storing the configuration of the editors. This consists of:

  • The editors configuration: Label, class, options
  • The mappings: types/cardinality to editor and free/choices/coumpound to editor

This is how looks this class:
Continue reading

Make a MessageDialog larger

I’ve been really busy for the past three months but I’ll be writing again soon. Meanwhile, here is a quick tip that may be handy sometimes to make any MessageDialog larger, because default size is 350x275px, which is really not much if you have large information to display.

Use the following code just before calling the show function on your MessageDialog.

domClass.add(dialog.domNode, "largeMessageDialog");
dialog.show();

You will have to import dojo/dom-class as domClass of course.

And add the following code in your css file of your plugin:

.ecmBaseDialog.ecmMessageDialog.largeMessageDialog {
    height: 90%;
    width: 90%;
}

If you’re using this a lot, I would recommend creating a new dialog extending MessageDialog and putting this in the postCreate but that will do the trick for one dialog.

And last quick thing, if you want to pre-positioned/scrolled down the content at the bottom of the div because the bottom is more important (like success/failure…), you can just do this:

dialog.description.scrollTop = dialog.description.scrollHeight;

It has to be after the call to the show function:

dialog.show();
dialog.description.scrollTop = dialog.description.scrollHeight;

Dojo constraints documentation

I couldn’t find any proper documentation on the constraints object we can use in Dojo to validate Text, Number and Date field, especially for ValidationTextBox. So here is what I gather or figured out from Dojo’s code.

ValidationTextBox:

The documentation says “user-defined object needed to pass parameters to the validator functions“, but actually that’s not true. This actually will never be used, except if you set a pattern abeing a function (this.pattern). If you do that then the pattern function you gave will be called on every validation with the constraints object as parameter, which can be anything since you are the only one using it in your function. The pattern function must return a String. Of course this.pattern can also be a simple pattern as a string, then constraints becomes useless and won’t be used. Example:

this._myValidationTextBox.set('pattern', function (constraints) {
    return constraints + '.*'; // For instance my input must start with my constraints
});
// OR
this._myValidationTextBox.set('pattern', constraints + '.*');
// Are exactly the same, but using the combo pattern function and
// dynamic constraints you can have a more dynamic behavior

I guess this could be used for complex scenarios where validation need to be more dynamic and we on;t want to change the pattern every time. Although I’ve never got to use it.

NumberTextBox:

Actually they put some documentation under the NumberTextBox documentation, so I won’t bother rewriting what they already wrote.

DateTextBox:

And the documentation for this one is here.

Using an external JavaScript (not Dojo module) in your ICN plugin

Sometimes you need to use an external JavaScript libraries in your plugin, because you don’t want to reinvent the wheel. Problem is that often those libraries are not Dojo modules. So how to use them in your dojo class?

Well that’s simple, dojo provides an generic script injection mechanism. Everything declared in the external script will be available in your class. Code is the following:

require(["http://host.com/stuff.js"], function(){
    // Everything declared in stuff.js is available here
});

You can link to an http location, or relative location into your project, for instance /application/stuff.js.

Now how to use that in your plugin? You can place your JavaScript file in another application or a CDN to refer it with an http protocole, example:

require(["http://host.com/application/stuff.js"], function(){
    // Everything declared in stuff.js is available here
});

Or you can leave the file in your plugin so everything is embedded when you deploy:

require(["plugin/MyPluginID/getResource/jszip/zip.js"], function () {
  // Here I can use the variable zip
});

Continue reading

Proper asynchronous with Dojo

Not long ago, I was not really dealing as I should with asynchronous development in javascript. For instance, when I had to launch several asynchronous process and wait for them all to all complete, I was using a counter and decreasing it in the callback method until 0. Coming from the Java world and being use to synchronize/join/notify which make this so easy, I thought it has to be something better than this. And of course like always with Dojo, there is.

The solution lies in the dojo/Deferred, dojo/promise/Promise and dojo/promise/all classes.
Continue reading