Leaving the existing classes

At first we started using parts of several existing classes and guides :

Initially we mainly based ourselves on the classes found on the Dynamic Duo site. We were quite satisfied with it in the beginning, but as we progressed there were a number of features which were lacking in the underlying design :

When trying to add these shortcoming to the existing classes by integrating parts of other code, we quickly noticed that it would be better to start from scratch and design a class of our own.

Focus on web design

The main guideline that was adopted to design the functionalities of RelativeLayers, was that layer creation and definition should be completely oriented to web design and not to web programming, without losing the power and flexibility of direct manipulation through code. This means that when thinking of the positioning of layers and their dimensions, it should be possible to write and maintain the code that executes the imagined design in an intuitive and immediate manner. To achieve this, the current model of layer definition is not appropriate in several areas :

The solutions that RelativeLayers offers to all these issues make the creation of advanced designs significantly faster and much more understandable. Imagined design concepts and their relations can exactly be transposed to code and maintained without having to keep seperate notes about the construction process.

Extending the event model

Javascript always has had an event model that can tie only one handler to one event type for each object. Typically this is done through the use of simple definitions like :

layer.onclick = clickhandler;

Working like this can be sufficient for basic scripting needs. More elaborated DHTML applications however, require the possibility to register as many listeners as needed and to remove them at will. This offers an event model that is completely similar to what can be found for the development of regular GUI applications with modern toolkits such as Swing, Qt and Gtk+. In RelativeLayers, event listeners can be registered like this :

layer1.addEventListener("click", handler1);
layer1.addEventListener("click", handler2);

function handler1(event)
{
    // do something
};
function handler2(event)
{
    // do something
};

The extended event model contains a large number of additional event types that provide access to the new functionalities of RelativeLayers. Custom event types can be transparently integrated, gaining instant access to all the new features.

Adapting to the browsers

The features of RelativeLayers were very carefully designed to make sure that as many browsers as possible were able to use the core functionalities. The following list contains the browsers and platforms that are constantly checked and targeted. A complete list of all the tested versions and supported features can be found in Appendix A.