Associer une icône à une donnée

Technique

Les icônes permettent aux utilisateurs d'identifier rapidement les contenus qu'ils cherchent. Si par exemple il cherche une question, son regard filtrera les résultats avec l'icône question.

On voit par exemple que cela facilite l'identification des données dans la recherche instantanée : 

jcms - instant search data icons 
Les icônes facilitent la recherche d'information

Ou dans la Portlet favoris (Module Favoris) : 

screenshot-bookmarks-portlet

JCMS 8 fournit une nouvelle mécanique de gestion des icônes associée aux données et aux types de données : 

  • Le tag <jalios:dataicon>affiche l'icône d'une donnée, ou d'une classe.
  • Le choix des icônes peut être paramétré via : 
    • Les propriétés
    • La classe DataIconPolicyFilter (depuis JCMS 8.0.2)
    • En surchargeant les méthodes de la classe Data

Le tag <jalios:dataicon>

Vous pouvez utiliser le tag <jalios:dataicon> de différentes façons :  

  • En fournissant une donnée dans l'attribut data : <jalios:dataicon data="<%= pub %>"/> affichera l'icône suivant pour une publication de type Document image : jpeg
  • En fournissant une classe dans l'attribut class : <jalios:dataicon class="<%= WikiPage.class %>"/> affichera l'icône suivant pour une page wiki : favicon

Paramétrage des icônes 

Paramétrage via les propriétés

Vous pouvez modifier l'affichage d'un icône en définissant vos propres valeurs pour la source de l'image, l'attribut alt et l'attribut title.

  • types.Type.icon : URL de l'image ou classe du sprite commençant par ss_sprite
  • types.Type.icon.alt : la propriété de langue définissant le alt qui sera la plupart du temps vide, afin de répondre aux critères W3C de sémantique HTML
  • types.Type.icon.title: la propriété de langue définissant le title

Vous pouvez donc définir dans le fichier plugin.prop de votre module les valeurs pour un type donné. 

Par exemple, pour un type nommé ArticleCustom on déclare la propriété suivante dans le fichier plugin.prop :

types.ArticleCustom.icon : plugins/MyPlugin/images/icons/article-custom.png 
types.ArticleCustom.title : myplugin.label.article-custom.title

Et dans les propriétés de langue on définira la propriété définie pour l'attribut title :

types.ArticleCustom.title : Article Custom

Paramétrage dynamique avec la classe DataIconPolicyFilter

Dans des cas plus avancés, on peut avoir besoin de choisir dynamiquement l'icône à afficher. C'est par exemple le cas dans le plugin GoogleDocs, pour afficher les icônes de document Google, si le document JCMS est un document Google.

Les méthodes suivantes permettent de définir l'icône : 

  • getDataIcon(Data data,String icon);
  • getDataIconAlt(Data data,String alt,String userLang);
  • getDataIconTitle(Data data,String title,String userLang);
  • getDataIconHtml(Data data,String html,String userLang);

La déclaration du DataIconPolicyFilter se fait dans le fichier plugin.xml : 

<policyfilter class="com.example.MyCustomDataIconPolicyFilter"/>

Exemple de classe qui retourne la même icône pour tous les FileDocument : 

public class MyCustomDataIconPolicyFilter extends BasicDataIconPolicyFilter{

private static final String DOCUMENT_ICON = "mondocument.png";

   @Override
   public String getDataIcon(Data data,String icon) {
      if (data instanceof FileDocument) {
         return DOCUMENT_ICON;
      }
      return icon;
   }
}

Paramétrage avancé en surchargeant les méthodes de la classe Data

Certaines classes de JCMS utilisent ces méthodes comme par exemple :

  • Workspace qui surcharge getDataIcon() afin de renvoyer une icône différente en fonction de l'état du Workspace (Ouvert, fermé, modèle ou espace collaboratif).
  • WebPage qui renvoie le Favicon de la page web

Si vous écrivez vous-même une classe dérivant de la classe Data, vous pouvez surcharger les méthodes suivantes :

  • getDataIcon() qui retourne l'URL ou la classe css d'un sprite
    • cette méthode peut être surchargée afin d'être gérée différemment
    • une propriété peut être définie pour chacun des types : jcms.icon.Type : src ou sprite class
  • getDataIconAlt(String lang) qui retourne l'attribut alt pour l'icône localisé dans la langue "lang"
  • getDataIconTitle(String lang) qui retourne l'attribut title multilingue pour l'icône localisé dans la langue "lang"
    • Par défaut, Publication renvoie le TypeLabel (Le nom du type).
  • getDataIconHtml() et getDataIconHtml(String lang) qui retournent le tag <img/> pour le data en utilisant les méthodes précédentes pour définir le alt, le title et le src.

 Ressources

 

Vous pourrez retrouver ici les dernières nouvelles et les retours d'expérience de l'équipe technique Jalios :

  • Points techniques
  • Retours d'expérience
  • Bonnes pratiques
  • Sécurité
  • Méthodologie Etc.

Ainsi que les principales actualités Jalios.