Vous êtes ici : Accueil - Ressources Flash - Mise en forme de contenu xml-based html/css sous Flash.

Mise en forme de contenus xhtml/css sous Flash

Suite aux articles que j'ai écris sur l'utilisation des bibliothèques partagées et spécialement sur l'utilisation de jeux de polices de caractères, je poursuis avec une partie de projet plus en amont : la mise en forme au niveau des données. Je vais pour cela me baser sur un jeu de fichier xml-based html/css pour exposer le principe. A vous après d'adapter selon vos besoin, si le principe vous plait, que cela soit en dur ou en dynamique, requette serveur ou non... \(^_^)/

Présentation des fichiers

Depuis quelques projets déjà, j'ai pris le parti de sauvegarder mes fichiers textuels au format html et non plus au format xml. Ce choix a été décidé très rapidement sur un projet où je m'attendais à avoir beaucoup de mise en forme css et je savais que je n'avais ni de temps à perdre à rédiger les tags à la main, mais encore moins la patience et le courage de me prendre la tête dessus. Ce que j'avais en tête à ce moment, c'était de pouvoir rédiger copier/coller les contenus de cahier de fabrication en ayant en temps réel la mise en forme sous les yeux via un éditeur wysiwyg tout en gardant une structure xml pour le bon fonctionnement de Flash.

Je me suis donc retrouvé à expérimenter différentes choses et au final, je me suis retrouvé avec un fichier html et trois feuilles de styles. La raison pour laquelle on se retrouve avec 3 css provient du fait que certains styles ne fonctionne pas sous Flash, et vis versa, certains styles sous Flash ne réagissent pas de la même façon en html. Du coup, le fichier html appelle une feuille qui importe les deux autres, celle pour flash en premier et celle pour la mise en forme html pour que les redéfinitions de styles s'écrasent par inhéritance.

Une petit visu simple de ces trois feuilles :

Quant au fichier html, c'est de loin, le plus important de par sa mise en forme; il impose uniquement des tags issus du langage html, mais sa mise en forme xhtml stricte permettra de l'utiliser comme un fichier xml, et son extention de le visionner dans un navigateur ou de l'éditer via Dreamweaver ou n'importe quel autre éditeur.

Pour le principe, il aura toujours cette structure :

Comme on peut le voir, aucune définition de DOM n'est présente et les fameux tag html, head et body servent de structure de base. Les données réelles viendront se placer dans le tag body.

Du côté de chez Flash

Pour le début, une fois le chargement de la css en mémoire - attention, ici on ne charge que la css Flash.css, elle est appliqué à un champ de texte. Rien de difficile jusque là. En fait, les problèmes vont vraiment commencer qu'avec le fichier html.

Premier problème : le fichier html étant chargé en post/get, on se retrouve avec une chaîne dont chaque caractère est encodé avec un code en pourcentage. Rien de folichon, on échappe la chaîne et on se retrouve avec le texte voulu.

En fait, oui et non. Le texte est retourné à condition d'avoir pris en compte 2 ou 3 choses.

Deuxième problème : certains caractères ne passe pas. C'est le cas pour %, &, +, < et >; le & fait carrément planté la chaine vu que son utilisation dans un chargement en get/post revient à rajouté un argument, et donc, la chaine est cindé en deux, et les signes < et > sont bien sur réservé pour les tags des noeuds. Et oui, on n'est pas dans du cdatas.

Pour remédier à ce petit problème, je me suis implémenter dans la classe qui me gère toutes mes données une méthode qui me remplace un bout de chaine par un autre. De ce fait, dans mes fichiers, je n'ai plus qu'à décider quelles chaînes écrire. J'ai fait dans le simple : _/100_ est remplacé par %, _plus_ par +, _inf_ par <, _sup_ par > et _and_ par &. Les caractères cités ici étant largement utilisé en html/xml, je ne donne que ceux-là, mais il se peut que d'autres puissent poser problème. De la même façon, il suffit de leur donné un code équivalent qui sera remplacé.
notes : j'y reviendrais un peu plus tard, mais j'ai un peu poussé la méthode pour qu'elle me traite des données en dynamique à l'intérieur même des chaînes, soit par un appel de valeur stocké en mémoire, soit par un traitement de donnée à récupérer à la volée avant affichage.

Voilà pour cette première partie. La seconde partie présentera quelques exemples pour structurer les données à l'intérieur du tag body (je sais pas si je vais le décomposer en plusieurs parties parce qu'il y a mine de rien pas mal de chose à présenter). Et dans la dernière partie (dans le cas où ce ne sera pas la 3ème), j'exposerais une version simplifié de ma classe Lang.