I.T. aware

Ok the news is not hot (Didier was talking about it in onGWT on April) but i just try Cypal Studio plugin for eclipse and i found it really interresting. The features are the one you can expect for that kind of tool (project creation wizzard, compilation, creating module and remote service…). To have if you start GWT project.

Bon l’info n’est pas nouvelle, Didier en parlait déjà dans onGWT en avril , mais je viens de tester le plugin Cypal Studio pour eclipse et franchement c’est un très bon outils. On y retrouve toutes les fonctionalités que l’on peut attendre de ce type de plugin (aide à la création de projet GWT, compilation, d’ajout de module, de services asynchrones…). Donc à utiliser pour travailler sur des projets GWT.

For a new project i try the following project:

TIMELINE:
It allow to create a widget representing a time scale on which you can put event.

The tutorial is well thinking. The API is rich enough to allow to custom the component according to your context. For example the following code show how to synchronise 2 timelines with differents time unit.
function init() { var eventSource = new Timeline.DefaultEventSource(); var bandInfos = [ Timeline.createBandInfo({ eventSource: eventSource, date: new Date(), width: "100%", locale:'fr', intervalUnit: Timeline.DateTime.MONTH, intervalPixels: 100 }) ]; tl = Timeline.create(document.getElementById("my-timeline"), bandInfos); var band=tl.getBand(0); band.addOnScrollListener(<strong>onScroll</strong>); var eventSource2 = new Timeline.DefaultEventSource(); var bandInfos = [ Timeline.createBandInfo({ eventSource: eventSource2, date: new Date(), width: "70%", intervalUnit: Timeline.DateTime.DAY, intervalPixels: 100 }), ]; tl2 = Timeline.create(document.getElementById("my-timeline2"), bandInfos); } function onScroll(band) { tl2.getBand(0).setCenterVisibleDate(band.getCenterVisibleDate()); }

Some functionalities are quit deep and we find hard to see there goal but the timeline is what you need for that kind of widget.

Notice that a GWT version exist

jsgraphics

It is a library offering graphic features. What seduced me in this approach it is the possibility of realizing drawings without using supplementary technologies (SVG, CANVAS, FLASH). Indeed the main concept is that every drawing corresponds to DIV pile optimized. It is a of low level API but it offers the necessary and sufficient features to realize more complex component (I think of graphs)

Dans le cadre d’un nouveau projet j’ai testé les 2 librairies suivantes:

TIMELINE:

Il s’agit d’une librairie permettant de créer des échelles de temps.
Le tutorial est très bien fait. L’API est assez riche pour agrémenter le composant au fil des besoins. Le code suivant permet par exemple de synchroniser 2 timelines indépendantes (avec des unité de temps différentes)
function init() { var eventSource = new Timeline.DefaultEventSource(); var bandInfos = [ Timeline.createBandInfo({ eventSource: eventSource, date: new Date(), width: "100%", locale:'fr', intervalUnit: Timeline.DateTime.MONTH, intervalPixels: 100 }) ]; tl = Timeline.create(document.getElementById("my-timeline"), bandInfos); var band=tl.getBand(0); band.addOnScrollListener(<strong>onScroll</strong>); var eventSource2 = new Timeline.DefaultEventSource(); var bandInfos = [ Timeline.createBandInfo({ eventSource: eventSource2, date: new Date(), width: "70%", intervalUnit: Timeline.DateTime.DAY, intervalPixels: 100 }), ]; tl2 = Timeline.create(document.getElementById("my-timeline2"), bandInfos); } function onScroll(band) { tl2.getBand(0).setCenterVisibleDate(band.getCenterVisibleDate()); }

La description des différentes fonctions de l’API est parfois limite et on a du mal à comprendre le but de certaines fonctions mais c’est un très bon composant pour qui désirent intégrer ce type de widget.

A noté qu’une version existe pour GWT

jsgraphics

Il s’agit d’une librairie offrant des fonctionnalités graphiques. Ce qui m’a séduit dans cette approche c’est la possibilité de réaliser des dessins sans utiliser des technologies supplémentaires (SVG,CANVAS,FLASH…). En effet la technique de base employée est que chaque dessin correspond à un empilement optimisé de DIV. C’est une librairie de bas niveau mais elle offre les fonctionnalités nécessaires et suffisantes pour réaliser des composants plus complexes (je pense à des graphiques…)

I was confronted with this problem. How to retrieve Element references the body. As GWT API doesn’t provide this service directly you need to use an other way.

You can add for example an id to the body in the HTML description of the page
<html> <head> <meta name='gwt:module' content='fr.improve.testGWT.gwt.Application'> </head> <body id='bodyId'> <script language="javascript" src="gwt.js"></script> </body> </html>

In your java application you just have to use the following code:

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;

Element body= DOM.getElementById(”bodyId”);

Another solution is to use the JSNI with the following method:

public static native Element getBody() /*-{ return $doc.body; }-*/;

The body element is retrieve with this call:

Element body = getBody();

And you don’t need to change the HTML page of your application.
It is a little bit strange that base element like the body can’t be directly accessible

J’ai été confronté à ce probleme. Comment récupérer un Element faisant référence au body. L’API de GWT ne fournit pas “directement” ce service et il faut donc utiliser des méthodes détournées.

On peut par exemple rajouter un id au body dans la description HTML de la page

<html> <head> <meta name='gwt:module' content='fr.improve.testGWT.gwt.Application'> </head> <body id='bodyId'> <script language="javascript" src="gwt.js"></script> </body> </html>

Dans votre application java il suffit ensuite d’utiliser le code ci-dessous

import com.google.gwt.user.client.DOM;
import com.google.gwt.user.client.Element;

Element body= DOM.getElementById(”bodyId”);

Une autre solution consiste à utiliser le JSNI

Il suffit d’utiliser la méthode suivante:

public static native Element getBody() /*-{ return $doc.body; }-*/;

L’élément est ensuite récupére par l’appel suivant :

Element body = getBody();

L’intérêt est qu’il n’y a plus besoin de modifier les pages HTML de l’application

Un peu étrange que des éléments de base comme le body ne soit pas directement accessible….