TwinXeon by Renaudet
Le Blog de TwinXeon
Archives
Avancement de la bibliothèque twinxeon-graphics.js   (précédent)

J'ai commencé il y a quelques semaines un nouveau projet pour le Virtual Desktop. Il s'agit d'une bibliothèque de composants UI graphiques de style AWT basée sur le canvas HTML5.

Ce projet est né suite aux travaux réalisés pour l'atelier de développement intégré au Virtual Desktop. Il m'avait alors fallu écrire une bibliothèque de gestion évènementielle partielle pour permettre l'édition de diagrammes en mode interactif. Cette bibliothèque a été étendue et généralisée de manière à permettre la conception d'interfaces graphiques classiques aussi facilement que si l'on utilisait l'API AWT.

Exemple :

var graphicContainer = new GraphicContainer(this.id%2B'.gc',rootDiv,this.window,width,height); graphicContainer.background = '#d0d0d0';
graphicContainer.initialize();

var button1 = new Button(10,30,80,20);
button1.setLabel('Submit');
var label1 = new Label(100,30);
label1.setLabel('');

button1.onMouseDown = function(p){
  label1.setLabel('Hello, World !');
}
graphicContainer.addChild(button1);
graphicContainer.addChild(label1);
graphicContainer.draw();


Jusqu'à présent, j'ai réalisé le moteur événementiel et les deux objets de base que sont le conteneur graphique (qui créé le canvas HTML5) et l'objet graphique racine (GraphicElement). J'ai également implémenté quelques composants de base de toute interface graphique : Layout, Panel, Label, Button, Edit, Scrollbar, Viewport. D'autres suivront.

A partir de ces composants de base, on peut également développer des composants composites. C'est le cas de mon composant ScrollableEditText qui utilise un Viewport, une Scrollbar et un composant EditText. Cet éditeur de texte brut (il ne s'agit pas d'un éditeur WYSIWYG) est parfaitement fonctionnel et j'ai déjà implémenté un nouvel éditeur de texte / code source pour le Virtual Desktop en utilisant ce composant :



Ce nouvel éditeur ne nécessite plus de gérer les sauts de ligne comme avec l'ancien éditeur basé sur l'éditeur RichText natif du Browser. De plus, en étant entièrement maître, je peux lui ajouter des fonctionnalités, comme la complétion de code, la coloration syntaxique ou la mise en évidence de la ligne en cours d'édition comme dans la copie d'écran ci-dessus.

Il me reste à implémenter le copier / coller, la sélection à la souris et d'autres petites choses du même genre, mais les fonctionnalités d'édition classiques sont présentes.

Je ferai bientôt un article complet sur cette API pour permettre la création rapide de nouvelles applications pour le Virtual Desktop.


Par Nicolas Renaudet, le 24/03/2013 14:13
Ajoutez votre commentaire :
  Votre pseudo :
  Votre adresse mail (obligatoire):
  Votre commentaire :
 
 
Site optimisé pour un affichage en 800x600 sous Firefox 8.x - ©Copyright 2011-2012 by Nicolas Renaudet