URL: https://linuxfr.org/users/mcmic/journaux/utiliser-un-theme-d-icones-standard-dans-une-application-php Title: Utiliser un thème d’icônes standard dans une application PHP Authors: MCMic Date: 2014年03月26日T12:00:15+01:00 License: CC By-SA Tags: fusiondirectory, php, icône, icon, développement, développement_web et development Score: 28 Bonjour, En ces temps d’applications web, on se retrouve à vouloir importer sur le web les technologies utilisées dans les applications desktop. Les icônes font parties de ces problématiques. Je m’y suis intéressé en partant d’un constat : dans notre application (FusionDirectory), plusieurs problèmes émanent à propos des icônes : différentes icônes pour la même chose (un coup une information est symbolisée par ![Ampoule](https://forge.fusiondirectory.org/projects/fd/repository/revisions/441a0d05/entry/html/images/lists/on.png), un coup par ![I sur fond bleu](https://forge.fusiondirectory.org/projects/fd/repository/revisions/441a0d05/entry/html/images/info_small.png) (OK, pour la suite j’évite les images inline et je vais voter pour [suivi/image-en-ligne](https://linuxfr.org/suivi/image-en-ligne) au passage)), même icône pour différentes choses (un coup le drapeau rouge représente une erreur, un coup simplement une option désactivée ou la valeur _false_ d’un booléen), ou tout simplement des icônes incohérente visuellement (l’icône représentant un serveur vient d’un thème et celle représentant un client d’un autre par exemple). Le premier reflexe pour faire face à ces problèmes, c’est de (ré?)organiser le dossier d’image : si les images sont classées correctement, on aura moins ce genre d’erreur. Du coup naturellement, je me tourne vers les thèmes d’icônes existant voir si je peux m’en inspirer. Puis me vient l’idée, quitte à m’en inspirer, pourquoi ne pas directement respecter la norme? C’est ainsi qu’il y a quelques temps j’écrivais sur les forums pour me renseigner sur une éventuelle implémentation PHP de la norme freedesktop «Icon Theme Specification» (et sa copine «Icon Naming Specification») : http://linuxfr.org/forums/programmation-php/posts/normes-freedesktop-et-icones-une-libxdg-pour-php Ne trouvant rien, je me décide à implémenter la norme moi même. Au fur et à mesure de l’implémentation, j’ai du prendre quelques libertés avec la norme pour mieux satisfaire nos besoins, j’ai essayé chaque fois de mettre un attribut booléen correspondant pour que ma classe puisse être utilisée par quelqu’un souhaitant suivre la norme à la lettre. Résultat: - Une classe IconTheme pour la recherche d’icône et un geticon.php pour faciliter l’utilisation - Les icônes sont liées en utilisant une url type geticon.php?context=action&icon=edit-delete&size=16 - Je cherche les thèmes dans un sous-dossier de notre application, pour rendre un thème d’icône installé disponible, un lien symbolique sera utilisé - J’ai ajouté une option &disabled=1 à geticon.php pour griser une icône (sur une appli desktop c’est généralement le toolkit qui s’en charge) - SVG n’est pas supporté (support dans les navigateurs aléatoire, difficile à griser et/ou rendre en PHP, contributions bienvenues) - J’ai ajouté un fallback sur notre thème pour les icônes manquantes - J’ai du ajouter un fallback entre les icônes à cause du peu de noms d’icônes standard (norme non mise à jour depuis 2006, rien que Tango et Oxygen n’ont pas fait les mêmes choix de nommage) - J’ai désactivé le fallback sur la taille la plus proche même si non compatible prévue par la norme pour privilégier les deux sus-nommés Remarque : je n’ai implémenté aucun cache, c’est le boulot du navigateur. Le résultat est assez plaisant, ci-dessous une capture avec le thème par défaut et une avec le thème oxygen: ![Default theme](http://mcmic.haxx.es/fotoo/i/bc/6HC6cxF0Y.Main-menu-default-theme.png) ![Oxygen theme](http://mcmic.haxx.es/fotoo/i/1e/6HC6g4DsZ.Main-menu-oxygen-theme.png) Même comparaison sur la liste d’utilisateur: ![Default theme](http://mcmic.haxx.es/fotoo/i/07/6HC6nGI2L.User-list-default-theme.png) ![Oxygen theme](http://mcmic.haxx.es/fotoo/i/ef/6HC6jZPyi.User-list-oxygen-theme.png) Sous Debian un lien symbolique suffit pour avoir le thème oxygen, pour le thème Tango le paquet ne contient pas les rendus au format 48x48 donc comme je n’ai pas implémenté le SVG il faudra ajouter un dossier avec ces rendus. Notre logiciel y gagne des icônes cohérentes (y compris dans le thème par défaut puisque cela m’a forcé à le réorganiser et supprimer les doublons), et dans le cas d’environnement maitrisé (c’est souvent le cas puisque notre logicel est utilisé en réseau local) on peut prendre le même thème que le desktop des utilisateurs et ainsi améliorer le confort d’utilisation. À l’avenir il serait bien que notre soft permette à chaque utilisateur de choisir son thème afin qu’il puisse prendre le même que son desktop (Note: pour ce qui est des formulaires je considère que c’est le boulot du navigateur de les rendres de la même manière que le toolkit du desktop) Si quelqu’un veut réutiliser ce boulot dans son appli, la classe IconTheme est réutilisable en l’état, geticon.php sera à adapter, n’hésitez pas à me contacter (#fusiondirectory sur freenode) PS: pour les utilisateurs FusionDirectory, il faudra attendre la version 1.0.8 pour profiter de ce travail

AltStyle によって変換されたページ (->オリジナル) /