Projet esup-ecm

Recherche

Sommaire

Pages enfant
  • Les layouts et les widgets

Principe

Les layouts sont des fichiers xml permettant de définir l'affichage d'un ou plusieurs documents.

Ils se présentent sous la forme d'assemblage de widgets.

Un widget est un fichier qui définit comment s'affiche un (ou plusieurs champs) du schéma correspondant à un document (s'applique aussi dans le cas d'un utilisateur). Les layout comme les widgets intègrent une notion de mode qui peut faire varier leur comportement (par exemple, un widget de type text affichera simplement le contenu du champ en mode view et affichera ce dernier un champ de formulaire de type input type=text en mode edit).

Pour les layouts utilisés pour la présentation des documents, on va trouver deux grands types :

  • les layouts de type listing qui présente les documents dans un tableau et les champs (widgets donc) qu'on affiche en colonne. C'est ce type de layout que l'on utilise dans les contentViews pour l'affichage des résultats.
  • Les layouts de type summary qui présente un affichage en ligne des champs pour un seul document.

Layouts et widgets par l'exemple

Reprenons l'exemple abordé dans le chapitre sur lescontentViews. Il s'agit donc de supprimer l'affichage du champ "etat" dans le listing des documents.

Nous avons donc défini plusieurs layouts dans le point d'extension lié notamment esup_document_listing_ajax.

Il faut donc créer un point d'extension qui définit chaque layout que l'on souhaite personnaliser en précisant quels sont les widgets que l'on va y afficher. Ce fichier esup-layout-listing-config.xml est à placer dans les répertoire config du template custom.

Nous avons utilisé plusieurs layouts dans notre fichier content-views-config. Pour des raisons de lisibilité, nous ne définissons qu'un layout dans l'exemple ci-dessous mais il faudrait bien sûr tous les définir comme celui-ci.

<?xml version="1.0"?>

<component name="org.esup.ecm.platform.forms.layouts.webapp.listing">
<require>org.nuxeo.ecm.platform.forms.layouts.webapp.listing</require>

<extension target="org.nuxeo.ecm.platform.forms.layout.WebLayoutManager"
    point="layouts">
<layout name="esup_document_listing_ajax">
 <!-- fichier xhtml de présentation lié au template, diffèrent selon le mode -->
      <templates>
        <template mode="any">
          /layouts/layout_listing_ajax_template.xhtml
        </template>
        <template mode="csv">
          /layouts/layout_listing_csv_template.xhtml
        </template>
        <template mode="pdf">
          /layouts/layout_listing_pdf_template.xhtml
        </template>
      </templates>
      <properties mode="any">
        <property name="showListingHeader">true</property>
        <property name="showRowEvenOddClass">true</property>
      </properties>
<!-- définition des champs que l'on va afficher dans les colonnes du tableau listant les résultats -->
      <columns>

        <column>
         <!-- widget permettant de sélectionner le document (case à cocher) -->
          <properties mode="any">
            <property name="isListingSelectionBoxWithCurrentDocument">
              true
            </property>
            <property name="useFirstWidgetLabelAsColumnHeader">false</property>
            <property name="columnStyleClass">iconColumn</property>
          </properties>
          <properties mode="csv">
            <property name="isHidden">true</property>
          </properties>
          <properties mode="pdf">
            <property name="isHidden">true</property>
          </properties>
          <widget>listing_ajax_selection_box_with_current_document</widget>
        </column>
        <column>
          <!- widget affichant l'icone liee au type de document -->
           <properties mode="any">
            <property name="useFirstWidgetLabelAsColumnHeader">false</property>
            <property name="columnStyleClass">iconColumn</property>
          </properties>
          <widget>listing_icon_type</widget>
        </column>
        <column>
         <!-- widget affichant le titre du doc avec un lien sur ce dernier
             champ triable -->
          <properties mode="any">
            <property name="useFirstWidgetLabelAsColumnHeader">true</property>
            <property name="sortPropertyName">dc:title</property>
          </properties>
          <widget>listing_title_link</widget>
        </column>
        <column>
          <properties mode="any">
            <property name="columnStyleClass">iconColumn</property>
          </properties>
          <properties mode="csv">
            <property name="isHidden">true</property>
          </properties>
          <properties mode="pdf">
            <property name="isHidden">true</property>
          </properties>
          <!-- widget affichant un cadenas si le document est verrouille -->
          <widget>listing_lock_icon</widget>
        </column>
        <column>
           <!-- widget affichant la date de modification, champ triable -->
           <properties mode="any">
            <property name="useFirstWidgetLabelAsColumnHeader">true</property>
            <property name="sortPropertyName">dc:modified</property>
          </properties>
          <widget>listing_modification_date</widget>
        </column>
        <column>
           <!-- widget affichant le dernier contributeur sur le document, triable -->
           <properties mode="any">
            <property name="useFirstWidgetLabelAsColumnHeader">true</property>
            <property name="sortPropertyName">dc:lastContributor</property>
          </properties>
          <widget>listing_last_contributor</widget>
        </column>
        <column>
          <!-- widget affichant le lien liveEdit -->
          <properties mode="any">
            <property name="columnStyleClass">iconColumn</property>
          </properties>
          <properties mode="csv">
            <property name="isHidden">true</property>
          </properties>
          <properties mode="pdf">
            <property name="isHidden">true</property>
          </properties>
          <widget>listing_livedit_link</widget>
        </column>
      </columns>
    </layout>
 </extension>
</component>

Autre exemple : surcharger le layout dublinCore

Dans le chapitre sur les layouts, nous avons redéfinis les types de documents pour utiliser deux layouts spécifiques à la place du layout dublin core par défaut : lightdublincore et esup-dublin-core.

Voici leur définition placée dans un fichier esup-layout -config.xml dans le répertoire config du template custom.

<?xml version="1.0"?>
<component name="org.esup.ecm.layouts">
<!-- on utilise des widgets définis dans les layouts de dam -->
<require>org.nuxeo.dam.layouts</require>

<extension target="org.nuxeo.ecm.platform.forms.layout.WebLayoutManager" point="layouts">
    <layout name="esupdublincore">
      <templates>
        <template mode="any">/layouts/layout_default_template.xhtml</template>
      </templates>
      <rows>
        <row>
          <widget>nature</widget>
        </row>
<!-- on ne souhaite pas afficher le champ droit et le champ couverture
  <row>
          <widget>rights</widget>
        </row>
        <row>
          <widget>source</widget>
        </row>
-->
        <row>
       <!-- on souhaite utiliser le widget permettant de préciser une date de création reelle du document
         Par défaut Nuxeo fixe automatiquement cette dernière à la date de création dans Nuxeo -->
          <widget>damc_authoringDate</widget>
        </row>
        <row>
          <widget>created</widget>
        </row>
        <row>
          <widget>modified</widget>
        </row>
<!--
     On ne souhaite pas afficher le champ format et le champ couverture -->
        <row>
          <widget>format</widget>
        </row>
        <row>
          <widget>language</widget>
        </row>
-->
        <row>
          <widget>expired</widget>
        </row>
          <row>
        <!-- on ajoute un champs auteur reel qui permet de renseigner l'auteur réel du document
        Par defaut Nuxeo fixant le champ auteur à l'utilisateur qui a créé le document dans Nuxeo -->
          <widget>damc_author</widget>
        </row>
        <row>
          <widget>author</widget>
        </row>
        <row>
          <widget>contributors</widget>
        </row>
        <row>
          <widget>lastContributor</widget>
        </row>
      </rows>
    </layout>

    <layout name="lightdublincore">
      <templates>
        <template mode="any">/layouts/layout_default_template.xhtml</template>
      </templates>
      <rows>
        <row>
          <widget>nature</widget>
        </row>
<!--
          <row>
          <widget>rights</widget>
        </row>
        <row>
          <widget>source</widget>
        </row>
-->
        <row>
          <widget>created</widget>
        </row>
        <row>
          <widget>modified</widget>
        </row>
<!--
        <row>
          <widget>format</widget>
        </row>
        <row>
          <widget>language</widget>
        </row>
-->
        <row>
          <widget>expired</widget>
        </row>
        <row>
          <widget>author</widget>
        </row>
        <row>
          <widget>contributors</widget>
        </row>
        <row>
          <widget>lastContributor</widget>
        </row>
      </rows>
    </layout>
  </extension>
</component>
  • Aucune étiquette