Cédric Hébert & Christophe Jermann présentent

aCSSe : a CSS editor

->top

aCSSe, laissez le charme agir...

Alors que le Web est en perpétuelle évolution, il se structure au fur et à mesure que de nouveaux besoins se créent. Cela se traduit par les nombreux travaux ayant conduit notamment au développement de XML. L'un de ces besoins est la nécessité de séparer les informations contenues dans un document HTML ou XML, des informations propres à son affichage ou à sa mise en page. Ceci mènera à long terme à rendre les informations totalement indépendantes du support de réalisation utilisé. L'apparition des feuilles de style CSS est une réponse qui a été apportée à ce problème.

Les feuilles de stryles CSS sont à base d'un langage descriptif balisé, "à la" HTML. Elles permettent d'associer à chaque balise HTML un style particulier de police, d'indentation, de fond d'ecran et de couleur et bien d'autres effets encore, tel la gestion du media d'affichage.
( cliquez ici pour atteindre la spécification de la norme CSS, actuellement en version 2 )

Malheureusement, bien que de nombreux éditeurs HTML plus ou moins WYSIWYG aient vu le jour ces dernières années, peu d'éditeurs offrent la possibilité de construire la feuille de style associée au document édité. C'est pour cette raison que nous avons décidé de développer aCSSe, un éditeur de feuilles de style.

Pour cette réalisation, nous n'avons pas voulu partir de zéro, mais plutot axer notre effort sur la recherche de références et parties réutilisables, comme par exemple le parser CSS du W3C. Ainsi, nous nous sommes accordés 2 semaines de recherche, et avons récupéré la documentation CSS, la grammaire du langage, 2 versions Java du parser, et finalement un exemple qui nous a été très utile: l'éditeur CSS intégré à HoTMetaL. Sur ces bonnes bases, nous avons pu commencer notre travail...

->top

Description de l'interface

Nous avons tout d'abord commencé par définir l'interface de nos rêves, celle qui permettrait à tout un chacun sans aucune notion de CSS (enfin, un minimum s'entend) de créer de fabuleuses feuilles de styles pour ses documents préférés. Le résultat est une interface assez proche de celle offerte par HoTMetaL, avec toutefois la correction de quelques détails qui nous avaient déplu à l'usage. Elle se compose d'une fenêtre unique permettant l'ajout et l'édition de règle. Une petite image vallant mieux qu'un long discours :

{short description of image}

Notre interface se décompose en :

Nous avons choisi ce modèle à onglet car il permettra l'extension dans le futur du nombre de propriétés reconnues et gérées par notre application. Voyons à présent ces fonctionnalités dans le détail:

->top

Importation d'une feuille de style

Il est possible d'attacher à notre document une ou plusieurs feuilles de style déjà définies. Selon la norme CSS, cela se traduit par l'utilisation du tag @Import. La boîte de dialogue suivante apparaît lorsque l'on clique sur le bouton 'Import...' de notre fenêtre principale:

{short description of image}

Les URI sont entrées à la main et stockées dans la listbox, d'où elles peuvent être visualisées / supprimées.

->top

Edition d'un sélecteur

A présent étudions l'édition d'une règle en elle même. L'édition d'une règle débute par la définition de l'élément que l'on veut mettre en forme. Cet élément est appelé Sélecteur.
La création du sélecteur s'effectue dans la partie supérieure de notre interface:

{short description of image}

La listbox permettant de visualiser et de choisir parmi les sélecteurs définis celui que l'on veut éditer.

Pour la manipulation des selecteurs, les fonctionnalités offertes sont :

Ces fonctionnalités sont atteintes grâce aux 3 boutons de gauche de la partie supérieure.

Création d'une nouvelle règle:

La création d'une nouvelle règle correspond à la définition d'un nouveau sélecteur dans la boite de dialogue suivante :

{short description of image}

Elle permet la définition de règles portant sur des balises HTML ou même XML, sur des classes, des identificateurs ou encore des pseudo classes, et toute combinaison de ces quatre types de selecteurs basiques. Elle permet aussi de spécifier pour quel(s) media(s) la règle est applicable. Seuls les attributs de balises (comme :FirstLetter) n'ont pas été intégrés, ainsi que 4 types de medias moins courants. Ils sont cependant accessibles indirectement par le bouton édition.
La représentation du sélecteur à la norme CSS est visualisable dans la case 'selector', et se met à jour en temps réel selon les actions de l'utilisateur.
Pour créer un sélecteur portant sur un tag HTML, il suffit de le choisir dans la listbox associée. La case à côté, disponible lorsque l'on choisit l'option 'other...', permet d'éditer des règles sur des tags non connus par notre application, ainsi que de définir des règles avancées portant sur des tags placés les uns à la suite des autres tels <BODY><P><A>

Edition d'un sélecteur:

L'édition, quand à elle, laisse la possibilité à l'utilisateur de saisir tout ce qu'il désire, comme par exemple les contextes de balises, etc..., dans la boite de dialogue suivante :

{short description of image}

Il est donc possible de gérer dès à présent, bien que notre produit soit incomplet, la totalité des fonctionnalités offertes par les sélecteurs. Les utilisateurs novices pourront se contenter de créer les principaux effets par le bouton de création; les utilisateurs expérimentés pourront règler les détails de sélection dans cette boîte.

->top

Edition d'une règle

Notre interface permet de saisir les principaux types de règles, en matière de mise en page d'un document HTML. Ceci s'est traduit en la mise en place des 3 onglets de gauche, à savoir: font pour la gestion des polices, text pour la gestion des espacements et indentations, background pour la couleur de fond et pour parametrer l'affichage d'une image de fond.
Enfin, l'onglet Other permet d'accéder de manière directe aux propriétés non encore intégrées dans notre interface.

L'onglet Font:

{short description of image}

Les différentes alternatives se choisissent dans des listbox, car elles sont prédéfinies au niveau de la norme CSS. Les push button pour gérer la priorité de la propriété sont placés judicieusement à côté de celles-ci.
La valeur par défaut 'inherit' signifie que la valeur définie dans le bloc immédiatement au dessus s'applique récursivement à cet élément. On appelle bloc immédiatement au dessus la règle telle que la règle courante soit la spécialisation la plus générale de cette règle. ( le niveau de spécialisation se définit par rapport à la complexité du sélecteur; voir la norme CSS pour plus de détails )

L'onglet Text:

{short description of image}

Les remarques faites précedemment s'appliquent. Dans un futur proche, les propriétés possédant l'attribut 'inherit' devraient voir leur editbox associée grisée...

L'onglet Background

{short description of image}

Les différentes options permettent de laisser l'image de fond fixée alors que le texte défile, de répeter l'image en mosaique en vertical, horizontal, ou les deux, et enfin de gérer l'espacement par rapport aux bords. A noter que ces caractéristiques, notamment le background-attachement, ne sont pas encore gérées par les browsers actuels.
La propriété background-image, enfin, devrait se voir un bouton 'browse' attaché rapidement.

L'onglet Other

{short description of image}

Sur le même principe que pour le sélecteur, les propriétés non-directement gérées par notre interface sont accessibles par l'intermédiaire de cet onglet. Les différentes propriétés ajoutées deviennent accessibles une fois créées en les recherchant dans la listbox associée.

L'utilisation de cet onglet permet à un utilisateur avancé de pouvoir utiliser la totalité des fonctionnalités des feuilles de style; ainsi nous pourrons enrichir l'interface au fur et à mesure tout en laissant la liberté à chacun d'importer et de manipuler des feuilles de style comportant des tags non encore reconnus par notre parseur.
Cet onglet permet l'introduction de propriétés normalement non reconnues par notre application, ainsi que la manipulation de toutes les propriétés plus simplement gérées par les autres onglets.

->top

Le parser: sauvegarde et chargement

Les fonctionnalités offertes par le menu permettent la sauvegarde ainsi que le chargement de feuilles de style CSS. A noter que le parser simplifié ne reconnait pas la norme CSS dans son ensemble, mais sait extraire ce qu'il reconnait d'un code CSS et notifie à l'utilisateur la présence de code non reconnu.

->top

Chargement:

Lors du chargement, chaque ligne du fichier en cours de parsing se voit découpée et stockée dans la structure de données correspondante. Le programme donne quelques informations à l'utilisateur, comme la détection d'une règle mal placée détectée ligne XX, par exemple. De même, si du code incompréhensible est détecté, ce code est stocké de manière non interprétée dans une structure, et l'utilisateur en est informé.
Pour la version courante, ce code non interprété n'est pas exploité, et est simplement perdu. Il est envisagé de le gérer d'une manière plus intelligente dans la prochaine version. Il est cependant indiqué à l'utilisateur de ne pas écraser son fichier lors de la sauvegarde, et de faire sa sauvegarde dans un nouveau fichier. Enfin bien entendu, notre algorithme de parsing sait reconnaître la totalité de ce qui a été sauvé par l'intermédiaire de notre programme. Les règles dont les sélecteurs ont été édités de manière brute et non conformes seront en revanche nettoyées.

ShortHands: certains types de règles permettent en CSS2 de définir toute une série de propriétés en une seule ligne. Cette possibilité est appelée une shorthand. Notre parser reconnaît et sait interpréter la shorthand 'font'. Il est prévu de gérer les autres shorthands au fur et à mesure que les onglets correspondants seront implémentés.

->top

Sauvegarde

Etant donné que le code à génerer est stocké dans diverses structures internes, nous pouvons offrir un fichier de sortie agréablement présenté. Le code sauvé sera en conséquence classifié par media dans l'ordre de spécificité, les règles seront regroupées ensemble, et un minimum de mise en page (indentation) sera effectué. Enfin, les shorthands seront remises sous une forme plus conventionnelle.

->top

Développement

Après notre période de recherche, et après avoir défini notre interface, nous avons commencé par essayer de la développer en Java, espérant ainsi économiser le développement d'un parser. (nous avions sous la main le parser du W3C en JavaCC). Malheureusement, n'ayant jamais eu de cours de Java, ni appris à travailler sous VisualAge ou toute autre interface, la tâche se révélait trop longue pour le peu de temps dont nous disposions. Nous avons alors décidé de réaliser notre projet en Visual C++, langage et environnement que nous maitrisons davantage. Il fallait cependant réduire la taille de notre projet car nous avions pris du retard avec notre expérimentation Java. Nous nous sommes alors réparti le travail comme suit : Cédric réaliserait le parser et une partie de la structure objet que nous avions définie pour stocker les règles, et Christophe s'occuperait de l'interface et de sa communication avec la structure objet. Globalement le projet a bien avancé et le résultat obtenu répond au spécifications que nous nous étions définis, mais un supplément de temps serait nécessaire pour le tester dans son ensemble et le débogger complètement.

->top

Conclusion

Arrivés à la fin du temps imparti, nous avons totalement spécifié puis implémenté un noyau qui pourrait servir de base pour un éditeur CSS complet. Certaines fonctionnalités à venir sont même bien entamées; le plus long a été de définir le noyau, l'extensibilité est réalisable à faible coût en temps.

Rien qu'avec ce noyau, il est déjà possible à un utilisateur novice de réaliser une bonne mise en page d'un document, sans se préoccuper des fonctionnalités avancées telles l'édition du sélecteur et l'utilisation de l'onglet 'other'. Il sera garanti d'un résultat efficace, et d'avoir créé une feuille de style valide.
L'utilisateur ayant de bonnes connaissances en feuilles de style, quand à lui, pourra utiliser pleinement utiliser la totalité des fonctionnalités du langage CSS. Il pourra charger, éditer et sauver toute feuille de style valide.

L'extensibilité et la viabilité du produit sont donc assurés de par le choix des structures utilisées pour la gestion interne des données, et de par les choix faits au niveau de l'interface. C'était le point principal que nous nous étions fixé dans le cahier des charges, et nous avons atteint l'objectif.

Pour le futur, nous avons envisagé les extensions suivantes:

Pour terminer, bien que nous ayons manqué d'un petit peu de temps sur la fin pour terminer l'integration (rendant du coup l'executable inutilisable en l'état !!), ce projet nous a permis de spécifier une application facilement extensible, où le code ajouté ne remet jamais en cause ce qui a été codé auparavant; nous avons par la même occasion acquis de très bonnes connaissances sur les feuilles de style CSS2.