Je viens de terminer une nouvelle démo du framework Rialto. Une des nouveautés que je souhaitais apporter était la visualisation dynamique du code source exécuté. C’est la qu’intervient SyntaxHighlighter. Entièrement écrit en javascript il permet d’intégrer cette fonctionnalité très rapidement en trois étapes:
Read the rest of this entry »
Archive for the ‘Javascript’ Category
SyntaxHighlighter
09
juil
Javascript et les évènements
30
avr
Les évènements sont au cœur de toutes les applications pour autoriser l’expérience utilisateur. Toute personne qui s’est frottée au développement d’application javascript sait qu’il s’agit d’un point sensible à maitriser. Peter-Paul Koch vient de mettre à jour sur son fameux site une table de compatibilité des évènements dans les différents navigateur. Tout y est.
J’avais déjà fait un billet sur ce site qui m’a énormément aidé pour le lancement de Rialto. C’est une mine d’information. Des tables de compatibilité sur le DOM, des articles.
A « bookmarqué » impérativement….
Comment avoir IE3,IE4, IE5…IE6 sur le même PC
22
nov
En lisant ce billet de Fred Cavazza j’ai donc été me balader sur le site free tools et j’y ai trouvé ce que je cherche depuis longtemps: une façon simple de faire tourner plusieurs versions d’IE sur mon PC. C’est en effet vital pour pouvoir s’assurer que Rialto est toujours compatible au fur et à mesure de son évolution. Un grand bravo donc à Multiple IE installer. Reste à valider les différentes versions d’IE.
DebugBar v5.0 beta 1
14
nov
J’ai déjà parlé d’eux ici et la. Et voila la version 5.0 de la debugbar.
Les nouveautés concernent essentiellement les possibilités d’analyse dynamique des composants de votre page. J’ai particulièrement apprécié l’onglet « compute style » qui permet d’observer les propriétés de style d’un élément en temps réel (C’est à dire après application des règles css ou des règles « inline ».
C’est donc un outils de plus en plus aboutit que nous propose DebugBar. L’essayer c’est l’adopter
GWT et les CHAR
09
nov
GWT transforme les variables de type char en leur code ascii. Ca n’a pas trop d’importance si vous utilisez GWT uniquement en « java ». Par contre l’utilisation combinée de GWT et de javascript peut provoquer des surprises. Donc si vous utilisez des scripts qui testent les characteres sur leurs valeurs et non leurs code ascii il faudra passer par des String en java.
C’est bon à savoir
Un debbuger javascript pour IE…
29
oct
L’offre est tellement rare et la nouvelle mérite d’être relayer. Companion.JS (c’est son petit nom) permet d’avoir une idée plus précise lors de la levée d’erreurs. La pile d’exécution est tracée et le code source responsable est mis en évidence. Il offre aussi une console javascript qui permet d’évaluer dynamiquement un bloc de script. Son utilisation couplé à la debug bar que j’évoquais ici permet de disposer de moyens plus efficaces que le classique alert pour debugger un script.
IE n’aime pas les <titres> vides…..
20
sept
ARRRGGGG!!!
Ca fait une heure que je modifie une page HTML basique dans tous les sens pour qu’elle puisse s’afficher dans IE avant de me rendre compte que le probleme venait du titre. En effet dans ma page j’avais:
<title/>
Cette simple ligne suffit à empecher l’affichage de la page. Il faut ne rien mettre ou écrire
<title></title>
Super….
version 4.1 de la DebugBar
20
sept
DebugBar est un plug-in pour Internet Explorer qui m’a beaucoup servit pour les 1er développements de Rialto. Ils étaient parmis les premiers à proposer un DOM inspector dynamique. La version 4.1 integre la visualisation des requêtes HTTP asynchrones. Ce n’est pas Firebug mais ca reste pratique pour explorer vos pages dans IE ou le manque d’outils se fait cruellement sentir.
Dommage que ça ne soit pas un freeware mais vous pouvez toujours evaluer le produit pendant 30 jours.
2 librairies intéressantes…
21
juin
Dans le cadre d’un nouveau projet j’ai testé les 2 librairies suivantes:
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
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
10
juin
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….