Aller au contenu

Articles marqués ‘wysiwyg’

23
mar

eZ Publish : premières impressions

Voilà plus de deux mois que j’utilise eZ Publish pour les projets qui me sont confiés chez Metycea et je n’ai pas résisté à l’envie de partager mes premières impressions. Pour plus d’informations sur l’outil, n’hésitez pas à consulter le site officiel de l’éditeur : http://ez.no/fr/

Une première approche

Le CMS peut paraître relativement indigeste pour un grand nombre de développeurs non-avertis, tout simplement parce qu’eZ Publish c’est avant tout des centaines de fichiers et de dossiers… très bien organisés! Rassurez-vous, avec le temps on fini par s’y retrouver très facilement, d’autant plus que lors d’un développement lambda, vous passerez près de 90% de votre temps dans ces deux répertoires :

  • design: contient ce qui touche de près comme de loin à l’élaboration de vos pages (html, css, js, images etc…) ;
  • settings: fichiers de configurations (.ini).

Il faut savoir qu’eZ Publish fonctionne en Modèle-Vue-Contrôleur, où toutes les vues seront des templates facilement personnalisables à l’aide de surcharges (selon les cas) définies dans un fichier de configuration bien spécifique. Notez que cette logique s’applique aussi-bien en front qu’en backend.

Sous eZ Publish, tout est objet

La force du CMS réside dans sa conception même. Admettons que vous souhaitez créer un template de page simple qui comporte un titre principal, une description courte et un corps.

Pour commencer, il suffira de vous rendre dans le manager et d’y créer une classe de contenu nommée « page » (son type) composée des attributs cités précédemment (name, description, body) eux aussi typés (ligne de texte, bloc de texte, éditeur wysiwyg). On remarque une forte analogie avec le modèle objet des langages de programmation, c’est normal puisqu’il s’agit réellement d’une classe comme vous avez très certainement l’habitude d’en créer en PHP ou en JAVA. Ensuite, lors de l’intégration, il faudra simplement créer un fichier page.tpl (dossier design) qui réalise les différents traitements (à l’aide de templates operators) pour l’affichage de nos différents éléments (les attributs cités plus haut). Pour terminer, vous aurez besoin d’indiquer à la plateforme quel template utiliser pour les objets de type « page », le tout dans d’un fichier de configuration nommé overrides.append.ini.php (dossier settings). La procédure restera identique pour toutes les classes de contenu que vous aurez besoin de créer par la suite.

En résumé: Création de la classe de contenu » Intégration (template) » Ajout de la classe dans les settings.

Une histoire de cache !

Sous eZ Publish, vous vous apercevrez très vite que tout est fait pour optimiser votre temps de développement, mais en contre-partie, votre site pourra parfois afficher des délais de réponses trop élevés pour internet. Pour pallier à ce manque de réactivité, et en vue du grand nombre de fichiers de configuration et de templates que vous aurez besoin de créer pour vos futurs projets, eZ Publish va tout mettre en cache … ou presque. La conséquence d’un tel comportement ? Un temps de réponse optimal avec des pages qui s’affichent très rapidement (sauf au premier chargement des vues qui seront alors mises en cache). Du peu que j’ai pu constater, le framework va stocker certaines de vos règles de configuration (les fichiers ini), vos templates et les différentes références de vos images, des tailles pré-définies susceptibles d’être utilisées en front et/ou backend.

L’aide au développement

Pour vous accompagner dans vos différentes phases de développement, eZ Publish propose un mode de débogage qui vous permettra entre autres de dépister les petites comme les plus grosses erreurs. Cet outil s’avère très pratique lorsque le résultat d’un traitement n’est pas celui escompté en vous indiquant précisément l’origine de l’erreur. En plus de ça, il affiche le nom des templates utilisés pour vos pages, et pour ma part, c’est ce qui rend son utilisation incontournable. En effet, lorsqu’on débute (et même des semaines plus tard), on ne connait pas toujours le chemin complet des templates standards à surcharger pour nos besoins, grâce à cette aide, fini les longues minutes de recherche dans le répertoire des templates par défauts.

En conclusion

Avec le recul, on s’aperçoit vite qu’eZ Publish a tout ce qu’il vous faut pour mettre en place des sites administrables robustes et sécurisés. De base, il propose une large palette de classes de contenu modifiables à souhait. Bien entendu, comme nous venons de le voir, il est aussi possible d’en créer autant que vous le souhaitez en ne partant de rien. Il n’est pas nécessaire d’avoir de très lourdes connaissances en PHP, en effet, avec eZ Publish vous devrez vous familiariser avec les templates operators qui permettent de récupérer les informations d’un objet à afficher lors du développement de vos templates  (titre d’une page, son contenu riche etc…). En revanche, si vous souhaitez développer des extensions, il faudra mettre les mains dans le cambouis. Fort heureusement, rien d’insurmontable et le site officiel propose de nombreux tutoriaux qui vous permettront d’arriver à vos fins.

Il faudra faire avec le cache, ne pas oublier de le désactiver lors de vos développements et surtout le vider régulièrement, sans oublier d’utiliser le mode de débogage et ainsi vous faire gagner un temps précieux.

Pour ma part, à l’heure où je rédige cet article je suis en plein dans mon 4me projet sous eZ Publish, je me rend compte sans grande surprise qu’il n’y a vraiment pas de limites. eZ Publish est développé de tel sorte que vous pourrez réellement faire de l’outil ce que vous en voulez!

Quelques liens utiles :

3
mai

Personnalisez vos polices avec l’éditeur de texte de flex

Flex intègre nativement dans ses composants un éditeur de texte de type wysiwyg (What You See Is What You Get) très simple à mettre en place dans vos applications flash. La tâche se complique un peu lorsqu’il est question d’embarquer vos polices, et ne parlons même pas de la possibilité d’afficher un aperçu de ces dernières dans le menu déroulant, pour choisir la police à utiliser.

Voir l’aperçu

1. Création des SWF qui embarquent les polices

La 1re étape consiste à créer les SWF qui embarquent vos polices, pour cela, plusieurs choix s’offrent à vous: Soit vous décidez d’utiliser l’IDE d’adobe (méthode que je ne vais pas aborder ici), soit vous le faites en ligne de commande avec le compilateur Flex sdk 3.5 (Gratuit et multiplateforme). Attention, il faut au minimum la version 3.5 de flex sdk disponible ici.

Personnellement, j’ai voulu embarquer plusieurs polices, et qui dit action répétée, dit forcément automatisation. J’ai donc mis au point un petit script PHP qui va me parcourir le contenu d’un répertoire, récupérer tous les fichiers TTF ou OTF, générer des scripts AS pour embarquer chaque police, et compiler le tout.

Voici un exemple de script AS généré automatiquement pour embarquer une police:

package {

    import flash.display.Sprite;

    public class mapolice extends Sprite {
        [Embed(source = 'mapolice.ttf', fontName = 'mapolice')]
        public static var font:Class;
    }

}

Une fois compilé, vous obtenez votre SWF, il ne vous reste plus qu’à le charger depuis votre application principale.

2. Méthode de chargement des SWF

La prochaine étape, consiste à charger tous les SWF. Vous pouvez indiquer en dur dans votre code les fichiers à charger, pour mes besoins, j’ai choisi de faire appel à un fichier XML contenant la liste de toutes mes fonts. Pourquoi un XML ? Car le jour où vous aurez besoin d’ajouter une nouvelle font, inutile de recompiler votre application, il suffira simplement de modifier votre fichier XML. Plus pratique, plus rapide … c’est bon pour la planète, mais là aussi, libre à vous de choisir votre méthode de travail. Si vous êtes certain de ne jamais avoir à ajouter de fonts supplémentaires, stocker dans un tableau la liste de tous les fichiers SWF à charger sera une bien meilleure solution!

3. Ajouter les fonts à l’éditeur de texte RichTextEditor de flex

Commencez par ajouter un event sur l’éditeur de texte:

<mx:RichTextEditor id="rte" x="10" y="10"
    title="Mon éditeur" width="540" creationComplete="init ();">
</mx:RichTextEditor>

La méthode d’initialisation:

public function init ():void {
    // On supprime la liste des polices par defauts.
    rte.fontFamilyCombo.dataProvider = [];
    // Chargement du fichier XML.
    XML = new CXml ("./fonts/fonts.xml", constructFonts);
} // init ();

L’objet CXml se contente de charger le fichier fonts.xml et de le parser, constructFonts est la fonction appelée en retour qui va charger toutes les fonts.

private function constructFonts ():void {
    var xml:XML = XML.getXML ();
    // On recupere la liste des fonts a charger.
    for each (var d:XML in xml.children ()) {
        var nDir:String = d.attribute ("name").toString ();
        if (d.attribute ("swf").toString () == "0") {
            // Police systeme embarquee depuis local.css.
            for each (var f:XML in d.children ()) {
                fontLoaded (f.attribute ("name").toString ());
            }
        } else {
            for each (var c:XML in d.children ()) {
                embedFont (nDir, c.attribute ("name").toString ());
            }
        }
    }
} // constructFonts ();

Dans le bout de code ci-dessus, vous observez qu’il faut utiliser un fichier local.css. Pourquoi me direz-vous ? Car ce fichier va nous permettre d’embarquer la police par défaut (verdana) de l’éditeur de texte (normal, bold, italic etc…), sans quoi, nos autres polices seraient inutilisables. Pour faire court, sans verdana, il devient impossible d’utiliser nos polices embarquées dans l’éditeur de texte.

Pour utiliser un fichier CSS externe:

<mx:Style source="fonts/local.css"></mx:Style>

4. Afficher l’aperçu de nos polices dans le menu déroulant de l’éditeur de texte

Dans mon code, j’ai choisi d’afficher l’aperçu uniquement lorsque toutes les fonts sont correctement chargées. Vous le verrez dans mes sources, mais lorsque tout est terminé, je fait appel à une classe qui va modifier le rendu des polices dans le menu déroulant de l’éditeur.

rte.fontFamilyCombo.itemRenderer
    = new ClassFactory (CFontStyleRenderer);

5. Conclusion

Mettre en place un tel système est plutôt difficile, et je l’avoue, je n’ai pas mis 5 minutes à découvrir tous les rouages du langage pour arriver à mes fins. C’est pourquoi je met à votre disposition toutes les sources de l’aperçu que vous avez vu en tout début d’article. Sachez qu’il est aussi possible d’embarquer plus simplement vos polices:

[Embed(source='assets/CALIBRII.TTF', fontName='fontCalibri',
    mimeType='application/x-font')]

Mais attention, vos polices seront incluses dans l’animation, qui sera de ce fait, beaucoup plus lourde et longue à charger!

Les sources