Ellipse Tutorial

WARNING: This tutorial is being written! Do not hesitate to report any errors or suggestions.

Quick access:
   The functions proposed by the file JwtUtility.js
   The JWT object model and its main pseudo classes

The JWT API are found its inspiration in the Swing API of the Java SE 6.0(Java Standard Edition 6.0) . Actually the Swing API(API that allows to implement graphic interfaces in Java) offers many graphic components that can be assembled to each other with a great ease and a great clarity in the code. Hence the next idea: why could we not have a similar model in a browser and which can be manipulated through Javascript? Many other Javascript libraries do the same. Our little "more" is in the fact that these JWT components can be manipulated on the server side through the notion of Ellipse components (but this point will not be apprehended in this document.)

You can note that the JWT library offers many features. These features are exploited by the JWT graphics components. But why we could not be able to use them on conventional HTML tags? That is why the JWT library is divided into two main parts. First, a set of functions is proposed in the file corelib/services/web/javascript/jwt/JwtUtility.js: these functions work, most of the time, on ids or elements of the DOM (tags). Then these functions are encapsulated in an object model similar to that of the Swing API: the object model offers many components such as the web calendar, progress bars, ... We will therefore consider in more detail each of these two parts.

Three types of data, with a relatively small size, allow to manage the positioning of elements in the page. These types are: Point, Dimension and Rectangle. Here is the list of attributes and methods exposed by these three types of data.

• Point: exposes the attributes x and y and also a method toString (it facilitates the debugging of your scripts).

• Dimension: exposes the attributes width and height and also a method toString ( it facilitates the debugging of your scripts).

• Rectangle: exposes the attributes x, y, width and height and also a method toString (it facilitates the debugging of your scripts).

Here is a list of the main functions proposed by the file JwtUtility.js.

• var position = computeAbsolutePosition( node );: allows to calculate the coordinates (in pixels) of the element relatively to the top-left corner of the web page. These coordinates are, of course, stored in an instance of the pseudo-class Point.

• var size = computeSize( node );: allows to calculate the size of the considered element. This size will be returned as an instance of the pseudo-class Dimension.

• changeOpacity( node, opacity );: allows to change the opacity of a node in the document (a tag of the document if you prefer). The opacity must be between 0 and 100. 0 meaning that the node will be completely transparent and therefore not visible. 100 meaning a full opacity.

• moveAndResizeElement( id, x, y, width, height, sequenceNumber, interval, callback );: allows, from the current position of a node, to move it (and to resize it) to a new position. This function is based on calls for window.setTimeout. It is including why you should use the node identifier considered and not directly the node. The parameters x, y, width and height correspond to the final position of the element. The parameters sequenceNumber and interval allow to control the quality of the animation indicating respectively the number of sequences to use for the animation and the interval of time (in milliseconds) between each sequence of the animation. The last parameter is optional. It is a reminder procedure (known as callback - it is actually a simple Javascript function) that will be invoked when the animation will end: it can allow you to finalize any aspect, even chaining another animation. For example, you can visit the website http://www.adc-recrutement.fr: it implements this technique to link the four animations at the start of the site. WARNING: if you want an element to be repositioned on the page, its CSS characteristic position should be fixed at the value absolute.

The Java SE environment defined two libraries for implementing graphical interfaces: the AWT (Abstract Window Toolkit) and Swing. From a certain point of view, we can see the JWT library (JavaScript Widget Toolkit) as a simplification of the model object of these two libraries applied to the Javascript language. As we have already seen, there is not, strictly speaking, any concept of classes in Javascript. However, the concept of Javascript prototypes allows to approach the concept of classes. JWT offers a number of pseudo-classes (however we will speak of classes later in this document) so the names and the members often look to those proposed in the Java libraries considered. You can also note that we will use a notation similar to Java in terms of package: although Javascript does not use any package, strictly speaking, the definition files of classes of the JWT library are classified into folders.

The class corelib.services.web.javascript.jwt.Component is the common behavior of all graphical component of the JWT library. This class exposes especially the methods getId, setId, getLocation, setLocation, getSize, setSize, getBounds, ... Also note the presence of the method injectInDocument: it allows to inject the JWT component in a node of the document.

The class corelib.services.web.javascript.jwt.Container allows to contain other JWT components. As in Java, investment strategies (the Layout) can be automatically used to automatically position the sub components of the document. This class exposes especially the method add allowing to add components to the container.