Loading Status

Overview

This article shows you how to customise the Cooee's loading status (the dull vertical bars) with more attractive animation. Whilst images can be used for the loading status (i.e. animated gif files), unless your application startup time takes a very long time, it is recommended that large images be avoided, otherwise it might take longer to load the image(s) than to startup the applicaation.

Hook up

Cooee uses the EchoClientEngine.renderLoadStatus() method to repeatly redraw the loading status. The method can be found in ClientEngine.js around line 429 (Cooee 1.0). In this method, if it cannot find the EchoClientEngine.renderCustomLoadStatus() method where you hook your custom loading drawer, it will use its default one (no panic here).

All you have to do is writing a non-bug JavaScript file and tell Cooee to load it.

Java Code

Somewhere in your code, you need to tell Cooee to loading your JavaScript code. Best is to place it in a static statement of a class.

static {
    CoreServices.CLIENT_ENGINE_EXTRAS = Resource.getResourceAsString("/org/karora/cooee/webrender/resource/ClientEngineExtras.js");
    CoreServices.reloadClientEngine();
}

The first line is to place your JavaScript content into CLIENT_ENGINE_EXTRAS then tell CoreServices to reload the ClientEngine which is now got your custom code attached to it. The reason of appending custom code to ClientEngine is to avoid another request from client which might affect the loading performance.

Note: If your application is running in an OSGi environment, you may need to place these into an Activator which guarantee to be run first.

JS Template

The following template barely does what the original loading does:

EchoClientEngine.renderCustomLoadStatus = function(loadStatusDivElement) {
    var text = "";
    for (var i = 0; i < EchoClientEngine.loadStatus; ++i) {
        text += "|";
    }
    loadStatusDivElement.removeChild(loadStatusDivElement.firstChild);
    loadStatusDivElement.appendChild(document.createTextNode(text));
};

Example Code

Labels

 
(None)
  1. Aug 07, 2007

    ashvedov says:

    Why do you recommend not to use any images? Image animation would be better than...

    Why do you recommend not to use any images? Image animation would be better than dumb text animation...

  2. Aug 10, 2007

    Pete Butland says:

    The recommendation is really to avoid large images. I have modified the text in ...

    The recommendation is really to avoid large images. I have modified the text in the overview to reflect this.

Add Comment