2 librairies intéressantes…

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(onScroll);
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…)

GWT-Comment référencer le body dans le code JAVA

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









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….

Détection des sites visités…par CSS

Je suis tombé sur cet article ce week-end et j’ai vraiment été bluffé par la simplicité et l’efficacité du script proposé. L’auteur explique comment il peut retrouver les sites visités par l’utilisateur en utilisant uniquement la propriété CSS visited d’un lien hypertexte.
Comment ça marche ?
En fait dans la page l’auteur à « caché » la liste des sites qu’il désire tester sous forme de liens hypertextes.


MySite.com
....

Il a aussi définit une propriété css particulière pour les liens visités

a:visited {
..
height:100px;
...
}

Ensuite votre navigateur fait le reste en marquant les liens que vous avez déjà visités
Il reste plus qu’à parcourir ces liens et de tester leur propriété offsetHeight.

var items = document.getElementsByTagName('a');
for (var i=0,i

Simple et efficace....

Release V0.9 de Rialto

Une payday 2 wiki nouvelle version de Rialto (v0.9) est disponible dans la section download du site

Quoi de neuf:

* Correction des bugs
* les onglets ont maintenant instant payday network un nouveau paramètre ‘orientation’ qui permet payday loans de déterminer le sens d’affichage des titres payday game d’onglets avec comme valeurs `t’ pour top, http://paydayloansusca.com/ `l’ pour left, `r’ pour right et `b’ pour bottom.
*intégration de la console de débugage firebug lite. Si vous project payday scam disposez du plugin dans Firefox les http://paydayloansusca.com/ messages lui seront envoyés.

Sinon (IE ou FF sans firebug) une émulation de la console apparait dans un frame flottant. payday 2 reddit J’ai déjà évoqué cette intégration ici
* le payday loan store composant grid devient skinable

La prochaine version de Rialto sera la V1 http://paydayloansusca.com et elle est prévu pour payday the heist le mois de septembre.

Modele de boite et quirks mode….

L’une des difficultés dans le design de composants javascript provient des différences d’interprétation du modèle de boite de la part des navigateurs. Pour faire simple, le W3C spécifie que la largeur ou la hauteur d’un élément doit correspondre à son contenu effectif. C’est à dire que les dimensions de padding, border et margins doivent être ajouter aux dimensions spécifiées. Malheureusement, Microsoft dans ces premières versions de navigateurs (jusqu’à internet explore 5) utilise un autre rendu, c’est à dire que la taille d’un élément corresponds à sa taille globale (incluant les bordures, marges….).

Vous me direz « bon c’est pas grave, ils ont corrigé le tir depuis la version 6 ». Oui mais non en raison du mode Quirks (par opposition au mode standard) qui permet au navigateur d’assurer une rétro-compatibilité en conservant l’ancien mode de calcul. Et comment est on en mode quirks (entre autre) ?

En utilisant une page HTML sans DOCTYPE autant dire dans la majorité des cas

Pour visualiser le phénomène il suffit de tester le code suivant dans une page HTML

Vous observerez selon les navigateurs la différence entre la taille fixée (width et height) et la taille réellement occupée (offsetWidth et offsetHeight) en passant la souris sur la div.

Alors quelles sont les solutions:

  • introduire dans vos pages la fameuse doctype.
  • Utiliser des techniques de détection de navigateurs pour au besoin redimensionner les éléments

La plupart des frameworks ajax utilise la 2eme solution dans la mesure ou ils ne maîtrisent pas les pages dans lesquelles ils sont exécutés.

Attention il ne faut pas oublier de tester le mode de rendu pour affecter ou non les nouvelles tailles. Il suffit pour cela de tester la propriété document.compatMode

  • si la propriété vaut « CSS1Compat il s’agit du mode standart et on n’a pas besoin de modifier les tailles
  • si la propriété vaut « BackCompat » il s’agit du mode Quirks et il faut modifier les tailles

Ci-dessous un squelette de fonction permettant de modifier le width d’un objet

Ce probleme peut sembler anodin mais la construction de composant complexes nécessitent l’assemblage d’un grand nombre d’élément HTML et les positionnement sont très rigoureux. Des décalages de 1 ou 2px ont bien évidemment des conséquences sur la cohérence du composant.

Et voilà tout ce travail pour un bug qui date ….

Lien utile…

Cela fait longtemps que je veux rendre hommage au site quirksmode.
Pour ceux qui veulent utiliser javascript et l’api Dom ce site doit être dans vos signets. Il nous a vraimment été utile quand nous avons fait la première mise en oeuvre de Rialto (et j’y trouve toujours des informations).

N’hésitez pas donc à visiter ce site.

Firebug Lite

Firebug est devenu un outils indispensable pour le développement de composants « riches » en javascript. Malheureusement son utilisation se limite à firefox. Pour offrir un service minimum dans d’autres navigateurs l’équipe de firebug propose Firebug Lite, une émulation de la célèbre console. Je viens de tester son intégration dans Rialto. Le premier constat est que le script est très simple et que les fonctionnalités offertes sont bien pensées. On retrouve les 4 types de messages (log,info,warm et error) mais aussi des petits plus comme les console.time et console.timeEnd qui permettent de mesurer le temps d’exécution d’un bloc de script. On peut également afficher l’ensemble des propriétés d’un objet avec la fonction console.dir ou le contenu d’un noeud avec la fonction console.dirxml

Un champs texte permet également d’évaluer n’importe quelle expression javascript. Pratique pour vérifier les propriétés de vos objets.

firebug