JPlatform 10 - Les nouveautés techniques front-end

Cette page présente les principales nouveautés de JPlatform 10 concernant les développements front-ends.

1. Applications

Les Applications sont un nouvel élément essentiel dans JPlatform 10. Plusieurs fonctions cœurs (la gestion des alertes et des recommandations, la recherche) et surtout des modules (JTask, JLearn, JMag, JProcess, JReading, ...) sont présentées sous forme d'applications.

Dans JPlatform 10, une application est une interface utilisateur utilisant un gabarit particulier et avec un style et une ergonomie normée. Techniquement une application est matérialisée par une JSP.

1.1 Le menu des applications

Une application peut être accessible depuis différents endroits du site, dont notamment le menu des applications. Ce menu est un endroit privilégié pour accéder à une application (mais ce n'est pas obligatoire). Pour être présente dans ce menu, une application doit disposer d'un raccourci(voir la section suivante) qui amène vers sa JSP. A noter que le menu des applications peut aussi comporter des raccourcis vers des applications (ou tout simplement des pages) externes à JPlatform.

1.2 Structure d'une application

Une application doit respecter une certaine structure composée de 3 zones principales : l'en-tête, la sidebar à gauche (optionnelle) et la zone d'affichage.

1.3 Exemple d'application

Voici une JSP représentant une application minimale :

<%@ include file="/jcore/doInitPage.jspf" %><%
%><%@ include file="/front/app/doAppCommon.jspf" %><%
%><%@ include file="/jcore/doHeader.jspf" %>

<div class="app app-myfirstapp">
  
  <%-- SIDEBAR --%>
  <div class="app-sidebar">
    <div class="app-sidebar-icon">
      <jalios:icon src="glyph: icomoon-lab" />
    </div>
    <div class="app-sidebar-section">
      <div class="app-sidebar-section-title">My Section</div>   
      <ul class="app-sidebar-menu">
        <li class="active"><a href="https://community.jalios.com/jcms/jc2_362604/en/jplatform-10-les-nouveautes-techniques-front-end#">First Menu</a></li>
        <li><a href="https://community.jalios.com/jcms/jc2_362604/en/jplatform-10-les-nouveautes-techniques-front-end#">Second Menu</a></li> 
      </ul>
    </div>
  </div>

  <%-- MAIN --%>  
  <div class="app-main">

    <%-- HEADER --%>
    <div class="app-header">
      <h1>My First App</h1>
    </div>
      
    <%-- BODY --%>
    <div class="app-body">
       Hello World!
    </div>
  </div>
</div>

Et voilà le résultat :

Comme vous pouvez le constater, la mise en forme est prise en charge par JPlatform.

Vous pouvez appliquer un thème de couleur (qui s'applique sur l'en-tête et des éléments de la sidebar), simplement en ajoutant cette ligne dans votre fichier LESS pour votre application :

.app-theme-from-color(myfirstapp, #8ec255)

Par défaut, et si vous avez bien inclus doAppCommon.jspf lorsqu'on accède à l'application, elle est présentée dans le Portail des Applications. Mais si l'application est affichée au sein d'un espace collaboratif (qui dispose déjà d'un entête) alors JPlatform utilise un gabarit plus léger.

Voici le rendu de l'application dans un espace collaboratif.

Pour mieux vous rendre compte, voici un autre exemple d'affichage de la même application (JMag) dans le portail des applications et dans un espace collaboratif.

L'application JMag affichée dans le portail des applications. 

L'application JMag affichée dans un espace collaboratif.

1.4 Applications et Espaces de travail

Une application n'est pas assignée à un espace de travail. Une application peut s'afficher de façon transversale (dans le portail des applications) ou au sein d'un espace. Une application peut ainsi décider si elle filtre ses données sur l'espace courant ou pas. Il n'y a pas de contrainte. C'est au concepteur de faire ces choix selon les besoins de son application.

Si une application doit pouvoir affiner son contenu selon l'espace où elle se trouve, plusieurs techniques sont possibles :

1. Dédier un espace particulier à l'application (matérialisé par une propriété) et tenir compte de cet espace pour l'affichage et l'enregistrement.
2. Faire un affinement systématique si on se trouve dans un espace collaboratif et ne pas faire d'affinement autrement (on utilisera alors une portlet JSP pour exposer cette application dans les services des espaces collaboratifs).
3. Créer une portlet représentant cette application et disposant d'une option d'affinement. L'application doit alors tenir compte de cette option pour l'affichage des informations.

1.5 Pour aller plus loin

Le gabarit des applications permet d'accueillir des composants avec des styles prédéfinis, dans la sidebar (menu, zone de recherche, champs, bouton, ...), dans l'entête (onglet, sur-titre, ...) et dans la zone d'affichage (affichage de cartes, d'un contenu, d'une absence de résultat, ...)

Tous ces styles ainsi que les bonnes pratiques pour le développement d'une application seront détaillées dans une future documentation.

2. Raccourcis (shortcut)

2.1 Principes

Les raccourcis fournissent un accès à une ressource interne ou externe. Cette ressource est identifiée soit par son URL soit par un identifiant de publication. Les raccourcis sont notamment utilisés pour donner accès aux applications.

Le menu des Apps peut être réorganisé par chaque utilisateur (ordre des raccourcis et choix des raccourcis en premier niveau)

2.2 Création d'un raccourci

Un raccourci est une instance de la classe Shortcut qui dérive de Content. A ce titre, un raccourci a donc toutes les métadonnées d'une publication. Il est donc possible de limiter l'accès à une application simplement en définissant les droits d'accès sur le raccourcis.

Un raccourci a les attributs suivant (en plus des attributs hérités de Publication) :

• Une icône (qui doit être de 48x48px pour l'affichage dans le menu des application)
• Une image (actuellement pas utilisée)
• Un lien vers une publication (exclusif avec l'URL)
• Une URL (exclusif avec le lien vers une publication)
• Un mode d'ouverture
• Un indicateur de présence dans le menu des applications.

Pour créer un raccourcis, il suffit donc d'aller en Back-office de votre espace de travail par défaut, d'activer le type Racourci et d'en créer un.

2.3 Génération automatique de raccourcis

JPlatform 10 fournit un moyen simple de générer automatiquement un raccourci via les propriétés. Ceci est notamment pratique si vous développez un module qui doit proposer un raccourci pour votre application.

Pour cela, il faut faire les déclarations suivantes :

Dans plugin.prop

shortcut.jcmsplugin.myfirstapp.icon: plugins/MyFirstAppPlugin/images/myFirstApp48x48.png
shortcut.jcmsplugin.myfirstapp.link: plugins/MyFirstAppPlugin/jsp/app/myFirstApp.jsp

Dans fr.prop

shortcut.jcmsplugin.myfirstapp.title: Ma première App

Dans en.prop

shortcut.jcmsplugin.myfirstapp.title: My First App

Une fois JPlatform redémarré, votre raccourci est présent dans le menu des applications en cliquant sur "Voir plus". Vous pouvez alors le déplacer par glisser/déposer dans la première partie.

2.4 Pré-paramétrage du menu Application

Les utilisateurs peuvent organiser le contenu du menu Application comme bon leur-semble. Ils peuvent reordonner les applications, en ajouter et en retirer. Il est possible de définir le jeu d'applications qui seront présentées par défaut auxutilisateur. Ce jeux d'applications doit-être déclarée via la propriété mbrpref.topbarApplication et doit contenu une structure JSON comportant un entrée mbIds à laquelle est associé un tableau d'identifiant d'application. Il est recommandé d'utiliser les identifiants virtuels plutôt que les véritables identifiants des shortcuts.

Par exemple, pour proposer par défaut la composition d'applications ci-dessus, il faut déclarer la propriété suivante :

mbrpref.core.application.member-application: {"mbrIds":["$id.shortcut.jcmsplugin.myfirstapp","$id.shortcut.jcmsplugin.jlearn","calendar","$id.shortcut.jcmsplugin.jmag","$id.shortcut.jcmsplugin.bookmarks","workspace"]} 

2.5 Pour aller plus loin

L'API des Shortcut permet d'aller plus loin. Il est ainsi possible de contrôler dynamiquement la présence des applications dans le menu, d'ajouter des badges sur les shortcuts, de modifier dynamiquement l'URL du shortcut, d'avoir une JSP complète à la place de l'icône du shortcut ...

Le fonctionnement détaillé des raccourcis sera présenté dans la future documentation dédiée aux applications.

3. Portail des Applications

Le portail des applications est dédié à l'affichage des applications. Sa composition est optimisée pour afficher l'application en plein écran.

3.1 Déclaration du portail

Le portail des Applications est déclaré via la propriété channel.app-portal (éditable dans l'éditeur de propriétés)

Un portail des Applications est fourni dans le store.xml livré en standard (identifiant j_231) et ce portail référencé dans jcms.prop et custom.prop

Voici les lignes du store.xml correspondant :

<generated.PortletColumn stamp="j_230" id="j_230" op="create" abilities="" adate="" alignH="center" alignHorizontal="" alignTable=" " alignV="middle" alignVertical="" author="j_2" authorDBID="" authorizedGroupSet="" authorizedMemberSet="" backColor="" backImage="" backgroundColor="" backgroundImage="" backgroundRepeat="" behaviorCopy="true" border="0" borderColor="" cacheSensibility="None" cacheType="None" categories="" cdate="1495373583125" cellPadding="0" children="@|j_205" childrenBindings="" colSpacing="0" condition="@|None" cssClasses="" cssId="" dbFriendlyURLSet="" description="" descriptionML="%|java.lang.String/fr=java.lang.String/" displayCSS="" edate="" extension="" extraDataMap="" friendlyURLSet="" importMap="" insetBottom="0" insetLeft="0" insetRight="0" insetTop="0" invalidClass="" invalidTime="60" isTracked="false" mainInstance="" mainLanguage="en" majorVersion="1" mdate="1495373583125" mergeDate="" mergeId="" opAuthor="j_2" opDelegate="" originalPortlet="" pdate="" portletImage="" portletImageML="" pstatus="0" roleMap="" sdate="" templates="@|box.default|query.default" title="App Portal - Main Column" titleML="%|java.lang.String/fr=java.lang.String/Portail App - Colonne Principale" udate="1495373583125" updateGroupSet="" updateMemberSet="" width="100" workflowId="" workspace="j_4"  />
<generated.PortletPortal stamp="j_231" id="j_231" op="create" abilities="" adate="" author="j_2" authorDBID="" authorizedGroupSet="" authorizedMemberSet="" behaviorCopy="true" cacheSensibility="None" cacheType="None" categories="@|j_5" cdate="1495373583131" child="j_230" cssClasses="" cssFile="css/portal/jalios.css" cssId="" dbFriendlyURLSet="" description="The HomePage Portal of the JCMS Channel" descriptionML="%|java.lang.String/fr=java.lang.String/Portail Page d&apos;Accueil du canal JCMS" edate="" exactCategory="false" extension="" extraDataMap="" friendlyURLSet="" importMap="" invalidClass="" invalidTime="60" isTracked="false" mainInstance="" mainLanguage="en" majorVersion="1" mdate="1495373583131" mergeDate="" mergeId="" opAuthor="j_2" opDelegate="" pageTitle="" pageTitleML="" pdate="" portletImage="" portletImageML="" pstatus="0" roleMap="" sdate="" templates="@|box.default|query.default" title="App Portal" titleML="%|java.lang.String/fr=java.lang.String/Portail Application" udate="1495373583131" updateGroupSet="" updateMemberSet="" workflowId="" workspace="j_4"  />

3.2 Utilisation

Toute application qui veut bénéficier de l'affichage par défaut dans le portail des Applications doit inclure doAppCommon.jspf AVANT d'inclure doHeader.jspf.

Exemple :

<%@ include file="/front/app/doAppCommon.jspf" %>
<%@ include file="/jcore/doHeader.jspf" %>

Dans le cas où cette inclusion n'est pas possible, il faut ajouter la ligne suivante AVANT d'inclure doHeader.jspf.

request.setAttribute(PortalManager.APP_PORTAL_ATTR, Boolean.TRUE);

3.3 Principes de fonctionnement

Dans doHeader.jspf, lors de la résolution du portail d'affichage, si aucun portail n'a été fourni, on vérifie si l'attribue PortalManager.APP_PORTAL_ATTR est présent. Si c'est le cas alors on utilise le portail des applications (sauf s'il est null) au lieu du portail par défaut.

4. Cartes

Les cartes sont un type de composant très utilisé dans JPlatform 10. Elles offrent l'avantage de permettre une communication à la fois visuelle et textuelle. En mettant en avant des visuels, elles agrémentent et rendent plaisantes les interfaces. Une carte dispose d'un recto et éventuellement un verso qui permet d'afficher plus d'information. Enfin elles peuvent comporter des éléments d'interaction (lien, bouton, glisser/déposer, ...)

JPlatform 10 fournit un système générique de construction de carte, plusieurs styles de carte et plusieurs modes de mise en page des cartes.

4.1 Structure

Une carte est toujours affichée au sein d'un groupe de cartes.

Dans le cas général, une carte est représentée par le tag <jalios:card> qui doit être inséré au sein d'un groupe de cartes représenté par le tag <jalios:cards>

L'exemple ci-dessous affiche des médias dans des cartes.

<%
List mediaList = (List)HibernateUtil.query(Media.class, null, null, 0, 12);
%>
<jalios:cards>

  <jalios:foreach collection="<%= mediaList %>" name="media" type="Media">

    <jalios:card link="<%= media.getDisplayUrl(userLocale) %>">
      <jalios:cardImage src="<%= media.getDataImage() %>" alt="" />
      <jalios:cardBlock css="jalios-card-body">
        <div class="card-title"><%= media.getTitle(userLang) %></div>
      </jalios:cardBlock>
    </jalios:card>

  </jalios:foreach>

</jalios:cards>

Une carte peut avoir deux côtés, un recto et un verso. Lorsque c'est le cas, une icône doit être insérée pour permettre de retourner la carte. Pour faire une carte recto-verso, il faut préciser dans le tag <jalios:card>, la composition du recto (<jalios:cardFront>) et celle du verso (<jalios:cardBack>). Le tag <jalios:cardFlipper> permet d'insérer l'icône déclenchant la rotation de la carte.

Dans l'exemple ci-dessous, on ajoute au verso de chaque carte la description du media.

<%
List mediaList = (List)HibernateUtil.query(Media.class, null, null, 0, 12);
%>
<jalios:cards>
  <jalios:foreach collection="<%= mediaList %>" name="media" type="Media">
  
    <jalios:card link="<%= media.getDisplayUrl(userLocale) %>">
    
      <jalios:cardFront>
        <jalios:cardImage src="<%= media.getDataImage() %>" alt="" />
        <jalios:cardBlock css="card-body">
          <div class="card-title"><%= media.getTitle(userLang) %></div>
        </jalios:cardBlock>
        <jalios:cardBlock mode="<%= CardBlockMode.FOOTER %>">
          <jalios:cardFlipper css="pull-right" />
        </jalios:cardBlock>
      </jalios:cardFront>
      
      <jalios:cardBack>
        <jalios:cardBlock css="card-body">
          <%= media.getDescription(userLang) %>
        </jalios:cardBlock>
        <jalios:cardBlock mode="<%= CardBlockMode.FOOTER %>">
          <jalios:cardFlipper css="pull-right" />
        </jalios:cardBlock>
      </jalios:cardBack>
      
    </jalios:card>
    
  </jalios:foreach>
</jalios:cards>

 

Et voila le résultat, une fois intégré dans une application :

4.2 Affichage de cartes de données

Le tag <jalios:cardsData> affiche une collection données (publications, documents, catégories, membres, ...) sous forme de carte.

L'exemple présenté plus haut peut donc s'écrire simplement (uniquement en carte recto) :

<% List mediaList = (List)HibernateUtil.query(Media.class, null, null, 0, 12); %>
<jalios:cardsData collection="<%= mediaList %>"/>
 

Le tag <jalios:cardData> permet d'afficher la carte d'une donnée. Il peut donc être utilisé au sein d'un <jalios:cards>.

L'exemple ci-dessous affiche tous les membres ayant une photo.

<% Set memberSet = channel.getDataSet(Member.class); %>
<jalios:cards>
  <jalios:foreach collection="<%= memberSet %>" name="mbr" type="Member">
    <% if (mbr.hasPhoto()) { %>
    <jalios:cardData data="<%= mbr %>" />
    <% } %>
  </jalios:foreach>
</jalios:cards>

Le gabarit de cartes utilisé pour afficher une donnée dépend du type de la donnée. Il existe en standard un gabarit générique pour toutes les données et un gabarit spécifique pour les membres. Il est possible d'appliquer un nouveau gabarit pour un type de donnée. Ce gabarit peut être fourni directement au tag <jalios:cardData> avec l'attribut template ou, d'une manière plus générale, en déclarant une propriété de la forme :

jcms.resource.include.carddata.default.MyCustomType: plugins/MyPlugin/jsp/doCardMyCustomType.jsp

4.3 Pour aller plus loin

L'API des cartes permet de faire des contrôles fins sur la composition de la carte, d'introduire des actions (p. ex. une croix pour éliminer la carte), de réordonner les cartes par glisser/déposer ...

Une future documentation présentera l'API des cartes en détail.

5. Panneaux Coulissants

Un panneau coulissant (ou slide panel) apparait suite à un clic sur un élément déclencheur. Ce panneau vient au-dessus de l'interface courante en la recouvrant d'un masque opacifiant qui favorise le focus utilisateur.

5.1 Structure d'un panneau coulissant

Un panneau coulissant a l'avantage de comporter une bonne surface d'affichage (environs 500 pixels de large x la hauteur de l'écran). 
Le contenu du panneau est libre mais une mise en page par défaut est proposée par JPlatform. Elle comporte :

• une entête qui permet de renforcer l'identité visuelle du panneau
• des onglets représentés par une barre d'icône sur la gauche.
• une zone d'affichage avec des styles fournis pour le titre et la construction de liste d'items.

5.2 Développement d'un panneau coulissant

Votre application peut utiliser son propre panneau coulissant. Pour cela, il vous faut une JSP représentant le panneau, un élément déclencheur et une balise <div> pour recevoir le contenu du panneau.

Dans cet exemple, nous allons ajouter un panneau à notre application. Pour cela, ajoutez dans le corps (app-body) de l'application une balise <div> pour recevoir le contenu du panneau et un lien déclenchant l'ouverture du panneau.

<div class="my-slidepanel is-closed sidebar-component sidebar-tabbed sidebar-right" data-jalios-sidebar-direction="right"></div>
<a href="https://community.jalios.com/jcms/jc2_362604/en/jplatform-10-les-nouveautes-techniques-front-end#" onclick="return false;" data-jalios-sidebar-action="open" data-jalios-sidebar-target=".my-sidebar" data-jalios-sidebar-url="mySidebar.jsp">Open slide panel</a>

Le contenu du panneau composé de 2 onglets est décrit dans la JSP mySlidePanel.jsp.

<%@ include file="/jcore/doInitPage.jspf" %>
<%-- HEADER --%>
<div class="sidebar-header-icon">
  <jalios:icon src="glyph: icomoon-lab" />
</div>

<%-- BODY --%>
<div class="sidebar-body">

  <%-- TABS ICONS --%>
  <ul class="sidebar-tabs" role="tablist">
    <li role="presentation" class="active">
      <a href="https://community.jalios.com/jcms/jc2_362604/en/jplatform-10-les-nouveautes-techniques-front-end#INFO" data-toggle="tab" aria-controls="paths" role="tab"><span class="jalios-icon icomoon-info2"></span></a>
    </li>
    <li role="presentation" class="">
      <a href="https://community.jalios.com/jcms/jc2_362604/en/jplatform-10-les-nouveautes-techniques-front-end#ADVANCED" data-toggle="tab" aria-controls="paths" role="tab"><span class="jalios-icon icomoon-cog2"></span></a>
    </li>
  </ul>
  
  <%-- TABS CONTENT --%>
  <div class="sidebar-tab-content tab-content">

    <%-- TAB INFO --%>
    <div id="INFO" class="tab-pane  fade active in ">
      <div class="sidebar-tab-title">Info tab</div>
    </div>
 
    <%-- TAB ADVANCED--%>
    <div id="ADVANCED" class="tab-pane fade">
      <div class="sidebar-tab-title">Advanced tab</div>
    </div>                
  </div>
</div>

Et voici le résultat :

Note : Le préfixe sidebar- utilisé dans les classes CSS sera remplacé par le suffixe slidepanel- dans la premier Service Pack de JPlatform afin de ne pas créer d'ambiguïté avec la notion de sidebar des applications.

6. Toastr

Un toastr est un composant qui affiche une bulle d'information pendant quelques secondes. Ce type de composant est notamment destiné à informer l'utilisateur que l'action qu'il vient de faire a bien été prise en compte.

Un toastr est par exemple utilisé dans JTask lorsqu'on ajoute une tâche.

Dans JReading, un toastr apparaît lorsque l'on marque un contenu à lire plus tard (ou que l'on marque ce même contenu comme lu).

6.1 Le tag <jalios:toastr>

Le tag <jalios:toastr> vous permet de faire apparaitre des toastrs, avec un style standard et sans avoir à écrire de Javascript. Ce composant repose sur la bibliothèque Toastr.

Les attributs du tag <jalios:toastr> :

• message (obligatoire) : le message à afficher
• options (facultatif) : une Map<String, String> d'options du toastr
• level (facultatif) : l'importance du message: MessageLevel.SUCCESS, MessageLevel.INFO, MessageLevel.WARNING, MessageLevel.ERROR. Par défaut le toastr s'affiche en haut au milieu avec un message de niveau MessageLevel.INFO.

Pour la liste des options référez-vous à l'interface de démonstration de la bibliothèque Toastr: http://codeseven.github.io/toastr/demo.html

Exemple d'options :

 "closeButton": false,
  "debug": false,
  "newestOnTop": false,
  "progressBar": false,
  "positionClass": "toast-top-right",
  "preventDuplicates": false,
  "onclick": null,
  "url": "www.google.fr",
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "5000",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"

6.2 Exemple

6.2.1 Utilisation dans une JSP

<%
Map<String, String> optionMap = Util.getHashMap("progressBar", "true");
String message = "My message";
%>
<jalios:toastr message="<%= message %>" url="plugins/MyPlugin/jsp/myFirstApp.jsp" level="<%= MessageLevel.INFO %>" optionMap="<%= optionMap %>"/>

6.2.2 Utilisation dans un handler Java

Vous pouvez également déclencher un Toastr depuis un Form Handler :

MapBuilder optionMap = MapUtils. builder()
.put("progress", "true")
.put("timeOut", "8000")
.put("url", "https://www.jalios.com")
.build();

JcmsContext.addToastr(request, new JcmsToastr("My message").setOptionMap(optionMap));

7. Topbar

La nouvelle topbar aide les utilisateurs qui ont besoin d'avoir un point de repère. Elle évite que l'utilisateur perde du temps à chercher certaines actions dans la page. Elle propose des accès rapides à la recherche, aux outils, aux applications, à la contribution, à ses alertes et aux informations personnelles du membres.

7.1 Structure de la topbar

La topbar se divise en plusieurs composants :

• Logo du site
• Menu des espaces (uniquement en back-office)
• Recherche
• Menu Outils
• Menu Caddy (uniquement en back-office)
• Menu Applications
• Menu Ajouter
• Menu Alertes
• Photo du membre connecté (et accès à la sidebar)
• Barre de navigation

7.1.1 Logo

Le logo se divise maintenant en deux images distinctes. Une version pour le desktop, et une autre pour les mobiles.

Pour le desktop c'est la propriété suivante qui est utilisée :

icon.topbar-logo: images/jalios/topbar/topbar-logo-jalios.png

Pour les mobiles, un breakpoint est défini dans les propriétés :

jcms.topbar.logo-breakpoint: 992px

Et l'image qui sera utilisée en dessous de ce breakpoint est définie dans la propriété suivante :

icon.topbar-logo-mobile: images/jalios/topbar/topbar-logo-jalios-mobile.png

7.1.2 Menu des espaces (back-office)

Ce menu est affiché dans les zones back office. Il liste les espaces auxquels l'utilisateur appartient.

La recherche est effectuée via le WorkspaceQueryHandler qui de base va fournir dans un objet WorkspaceResult la liste des espaces récemment visités, et tous les autres espaces auxquels le membre appartient.

Lors d'une recherche, on cherchera aussi dans les espaces auxquels le membre n'appartient pas, tout en respectant les restrictions de visibilité (notamment sur les espaces secrets des espaces collaboratifs).

7.1.3 Recherche

Barre de recherche

La barre de recherche est créée automatiquement. Il est nécessaire qu'elle ait le gabarit types/PortletSearch/doPortletSearchTopbar.jsp.

Lorsque la recherche est effectuée, 3 colonnes sont affichées (Espaces, Contenus, Membres). Il est possible de désactiver la recherche de membres en décochant la case "Membres" dans l'option "Chercher dans...". Dans ce cas, seulement deux colonnes seront affichées.

La recherche est effectuée en utilisant les paramètres définis dans la portlet.

Résultats de recherche

Il est possible d'influer sur les résultats via un QueryFilter, en testant si le contexte contient l'entrée jcms.live-search.

Dans la colonne "Espaces", si un nom d'espace faisant partie des espaces favoris de l'utilisateur correspond au texte saisi, il sera affiché en premier avec une étoile indiquant son statut de favori.

Interaction avec le module Favoris

Le module favori rajoute un bloc de résultats avec une étoile indiquant le statut de favori dans la colonne "Contenus" si des éléments des favoris matchent la recherche effectuée par l'utilisateur. Ces résultats sont retirés des résultats classiques afin de ne pas avoir de doublons.

7.1.4 Icônes

Les icônes présents dans la partie droite de la topbar sont déclarés via des propriétés préfixée par jcms.topbar-item.. Pour chaque item, on définit son index et le chemin de la jsp qui servira à l'affichage.

Exemple :

jcms.topbar-item.application: jcore/topbar/items/doTopbarApplicationMenu.jsp
jcms.topbar-item.application.index: 30

Des targets sont aussi disponibles pour afficher d'autres liens : SITE_TOPBAR_RIGHT_START, WORK_TOPBAR_RIGHT_START, ADMIN_TOPBAR_RIGHT_START et SITE_TOPBAR_RIGHT_END, WORK_TOPBAR_RIGHT_END et ADMIN_TOPBAR_RIGHT_END.

7.2 Barre de Navigation

7.2.1 Portlet Navigation

La barre de navigation est affichée seulement si une portlet Navigation est définie dans les propriétés du site (propriété channel.topbar.navigation-portlet). Cette propriété est éditable dans l'interface des propriétés, onglet "Portail". Pour être intégrée à la topbar, la portlet doit utiliser le gabarit "Topbar" dédié.

Une portlet Navigation intitulée "Topbar - Navigation" utilisant le gabarit Topbar est fournie dans le store.xml par défaut (identifiant j_240).

7.2.2 Fonctionnement

La portlet est dépliée par défaut dans les espaces éditoriaux, et repliée dans les espaces collaboratifs ou dans le portail des applications.

Une des entrées peut avoir un comportement spécifique, dans le cas où cette entrée est définie comme étant la catégorie racine des espaces favoris.

7.3 Paramétrage de la Topbar

7.3.1 Désactivation

Il est possible de désactiver la topbar via les propriétés suivantes :

channel.topbar.enabled: true // Global
channel.topbar.site.enabled: true // Affichage front office
channel.topbar.work.enabled: true  // Affichage back office d'espace
channel.topbar.admin.enabled: true // Affichage interface d'administration

7.3.2 Affichage

Il est possible de choisir si la topbar doit prendre toute la largeur, ou une largeur fixe via la propriété :

channel.topbar.front.full-width: true

A noter que la topbar en mode réduit fait la taille de 1184px, modifiable en changeant la valeur de la variable less @topbar-width

Il est possible de modifier la jsp utilisée pour la topbar via les propriétés suivantes :

jcms.resource.topbar: jcore/topbar/doDefaultTopbar.jsp // Global
jcms.resource.topbar.site: // Affichage front office
jcms.resource.topbar.admin: // Affichage back office d'espace
jcms.resource.topbar.work: // Affichage interface d'administration

8. Panneau Personnel

En standard, JPlatform 10 fournit un panneau personnel (aussi appellé sidebar) qui regroupe toute une série de données propres à l'utilisateur (calendrier, tâches, favoris, ...). Ce panneau coulissant apparaît lors du clic sur la photo du membre dans la topbar.

Le panneau personnel est extensible. Des modules peuvent y insérer leur onglet. C'est par exemple le cas des modules Calendrier, JTask, Favoris, JReading, ...

L'insertion d'un nouvel onglet dans le panneau personnel, se fait avec une JSP que l'on injecte par une déclaration de propriétés :

Dans plugin.prop

# Sidebar
jcms.sidebar-tab.mypluygin:           plugins/MyPlugin/jsp/sidebar/myPluginSidebar.jsp
jcms.sidebar-tab.mypluygin.icon:      glyph: icomoon-lab
jcms.sidebar-tab.mypluygin.index:     100

A noter que vous pouvez ajouter une propriété suffixée par .tab pour faire vous-même le rendu de cet onglet (ou ne pas l'afficher en fonction des droits du membre) :

jcms.sidebar-tab.mypluygin.tab: plugins/MyPlugin/jsp/sidebar/myPluginSidebar_tab.jsp

Dans en.prop

jcms.sidebar-tab.jreading:        My First App

Dans fr.prop

jcms.sidebar-tab.jreading:        Ma première App

La JSP myPluginSidebar.jsp :

<%@ include file='/jcore/doInitPage.jspf' %>
<div class="sidebar-tab-content">
  <div class="sidebar-tab-title">My First App</div>
  <div class="list-group list-group-bordered">
     <a class="list-group-item sidebar-menu-item-sub" href="https://community.jalios.com/jcms/jc2_362604/en/jplatform-10-les-nouveautes-techniques-front-end#"><jalios:icon src="glyph: icomoon-lab" /> Item 1</a>
     <a class="list-group-item sidebar-menu-item-sub" href="https://community.jalios.com/jcms/jc2_362604/en/jplatform-10-les-nouveautes-techniques-front-end#"><jalios:icon src="glyph: icomoon-lab" /> Item 2</a>
  </div>
</div>

Et voici le résultat :

9. Recherche de publications similaires

La méthode QueryManager.getRelatedPublicationSet() permet de rechercher des publications similaires à une publication donnée. Elle se base pour cela sur le nombre de catégories communes. La méthode retourne un ensemble ordonné de publications en commençant par celles ayant le plus de catégories en commun. En cas d'égalité, le tri se fait sur la date de publication (de la plus récente à la plus ancienne).

Une méthode du même nom mais avec plus de paramètres permet de préciser le jeu de catégories à explorer et d'avoir un comparateur spécifique en cas d'égalité sur le nombre de catégories communes.

Si une des catégories de référence comportent des sous-catégories, celles-ci sont comptabilisées comme leurs catégories parents. P. ex. si on recherche les publications liées aux catégories C1 et C2 et que C1 a une sous-catégorie C11 qui a elle-même une sous-catégorie C111, alors on fait la comparaison avec l'ensemble {C1, C11, C111, C2}.

Pour afficher les publications similaires, vous pouvez utiliser la JSP front/publication/doPublicationRelated.jspf. Elle affiche un ensemble de publications sous forme de mini-cartes. Indiquez la collection de publications à afficher avec la variable pubRelatedCollection et le nombre à afficher avec la variable pubRelatedMax.

Exemple :

<%
Publication currentPub = ...;
QueryHandler qh = new QueryHandler();
qh.setTypes(new String[] {"generated.Article"});
Collection pubRelatedCollection = QueryManager.getInstance().getRelatedPublicationSet(currentPub, qh));
int pubRelatedMax = 4;
%>
<%@ include file="/front/publication/doPublicationRelated.jspf" %>
 

Exemple de rendu :

10. Palette de couleurs

JPlatform 10 fournit une palette de 52 couleurs. Cette palette est utilisée par la plupart des composants de JPlatform 10, ce qui participe à l'homogénéité des interfaces.

La palette est composée de 13 tons disponibles chacun en 4 nuances (light, normal, deep, dark) ; soit un total de 52 couleurs.

Les couleurs de la palette sont accessibles par leur nom en LESS et en Java.

En LESS, les variables commencent toutes par @jalios-color-, suivi du nom de la couleur (p. ex. blue, blue-light, blue-deep, blue-dark). Pour pouvoir les utiliser vous devez importer le fichier jcms-variables-colors.less (ce qui est le cas si vous importez initi-mixins.less)

Exemple :

En Java, la palette est définie dans l'enum com.jalios.jcms.ui.Color.

Exemple :

11. Nouvelle police de caractères

Dans JPlatform 10, la police de caractères par défaut pour le texte est Roboto. Pour les titres (H1, H2, H3) c'est sa variante Roboto Condensed qui est utilisée.

Ces polices sont disponibles en romain et en italique et dans plusieurs graisses :

Des variables LESS sont disponibles pour utiliser ces variantes.

Exemple :

12. Autres nouveautés

12.1 Champ Autocompletion

Ce composant permet de développer rapidement un filtre de recherche sur une liste des résultats avec un rafraîchissement à chaque frappe clavier.

Pour l'utiliser, il faut ajouter le JavaScript jalios-field-autocomplete.js :

Afin de donner un feedback à l'utilisateur lorsque la recherche prend du temps, il est conseiller de mettre en place aussi le composant d'attente de chargement :

Il faut ensuite préparer des data-attributes pour le champ de saisie :

Enfin, ajoutez le champ texte, avec une JSP qui fera l'affichage des résultats :

Il vous suffit alors de taper dans le champ pour voir les résultats se rafraîchir.

12.2 Troncature des textes côté client

JPlatform propose depuis longtemps une troncature de texte server-side avec la méthode Util.truncate() et le tag <jalios:truncate>. Parfois, il n'est pas simple de choisir la valeur de la troncature pour être sûr que le texte tiendra sur un nombre de lignes donné. C'est par exemple le cas dans les cartes, où l'on veut pouvoir limiter le nombre de lignes de texte à 2 ou 3.

Avec JPlatform 10, il est désormais aussi possible de faire la troncature client-side en choisissant un nombre de lignes à afficher.

Pour l'utiliser, il faut ajouter les fichiers JavaScript suivants :

Il est possible de l'utiliser soit de manière déclarative avec l'attribut data-jalios-truncate et en indiquant le nombre de lignes avec la propriété value :

soit de manière programmatique en JavaScript :

12.3 Ajout du champ "Pied de page de l'habillage"

Une portlet qui dérive de AbstractPortletSkinable (c'est à dire la majorité des portlets), dispose désormais d'un champ "Pied de page de l'habillage". Il s'agit d'un champ wysiwyg, dans lequel il est possible de saisir un texte destiné à l'habillage. Ceci est notamment utile lorsqu'une portlet doit avoir un lien amenant vers une version plus détaillée (eg. "Voir toutes les actualités").

Attention : Ce champ n'est pas pris en compte par les gabarits d'habillage livrés en standard avec JPlatform 10. Pour le mettre en oeuvre vous devez donc faire votre propre gabarit d'habillage.

12.4 Effet Ripple

L'effet ripple produit une onde de couleur lors du clic sur un éléments (bouton, carte, ...) pour renforcer la prise en compte de l'action.

Pour cela, il suffit de déclarer la class CSS js-ripple sur l'élément sur lequel doit s'appliquer l'effet.

Exemple :

12.5 Gabarit Article

Le gabarit des articles a été revu pour être plus lisible et avoir une présentation plus moderne. Avec l'affichage des contenus similaires (soit ceux déclarés explicitement dans l'article soit en utilisant la nouvelle API de recherche de contenus similaires).