Projet esup-ecm

Recherche

Sommaire

Pages enfant
  • ContentViews, Layouts et Widgets par l'exemple

Vous regardez une version antérieure (v. /wiki/spaces/PROJESUPECM/pages/109805611/ContentViews+Layouts+et+Widgets+par+l+exemple) de cette page.

afficher les différences afficher l'historique de la page

Vous regardez la version actuelle de cette page. (v. 1) afficher la version suivante »

Pour gérer la façon dont s'affiche les documents ainsi que les champs, nuxeo s'appuie sur les notions de contentViews, de layouts et de Widgets.

Cette page, au travers d'un exemple concret, a pour objectif d'expliquer chacun de ces concepts qui sont par ailleurs bien documentés sur le site de Nuxeo.

Dans notre exemple, notre objectif est de ne plus afficher les champs "sujets" et "couverture", de ne plus afficherl'état (mais de continuer à afficher la version) et d'afficher le lien universel.

Pour cela, nous allons déclarer un nouveau contentViews dans lequel on va pointer vers de nouveaux layouts.

contentViews ?

C'est un fichier qui définit comment obtenir et afficher des listes de documents. On  commence par déclarer la requête qui permet d'obtenir les document et ensuite on lie l'affichage des résultats à un (ou des) layouts qui vont gérer la façon dont il s'affiche .

Voici le contenu (commenté) de notre fichier templates/custom/config/esup-contentview-config.xml :

<?xml version="1.0"?>
<component name="org.esup.ecm.webapp.contentview.contrib">
  <extension target="org.nuxeo.ecm.platform.ui.web.ContentViewService"
    point="contentViews">
<!-- contenu d'un document (de type folder ou workspace -->
    <contentView name="esup_document_content">
      <!-- définition de la requête -->
      <coreQueryPageProvider>
        <property name="coreSession">#{documentManager}</property>
        <!-- requete au format NXQL, possibilités de définir des paramètres (le ?)
        qui sont remplacés par les varibales définis dans les attributs parameters : Attention à l'ordre !!! -->
        <pattern>
          SELECT * FROM Document WHERE ecm:parentId = ? AND
          ecm:isCheckedInVersion = 0 AND ecm:mixinType != 'HiddenInNavigation'
          AND ecm:currentLifeCycleState != 'deleted'
        </pattern>
        <!-- ici le paramètre est l'identifiant du document parent, la requete revient donc à lister tous les
         documents enfants n'ayant pas été supprimés et n'étant pas de type caché (HiddenInNavigation) -->
        <parameter>#{currentDocument.id}</parameter>
         <!-- critère de tri par defaut -->
        <sort column="dc:title" ascending="true" />
         <!-- nombre de resultats par defaut -->
        <pageSize>20</pageSize>
       </coreQueryPageProvider>
      <!-- permet de modifier le nombre de resultats affiches -->
      <useGlobalPageSize>true</useGlobalPageSize>
      <!-- critière imposant le rafraichissement du cache -->
      <refresh>
        <event>documentChanged</event>
        <event>documentChildrenChanged</event>
      </refresh>
       <!-- cache -->
      <cacheKey>#{currentDocument.id}</cacheKey>
      <cacheSize>10</cacheSize>

       <!-- définition des fichiers de layouts qui vont permettre l'affichage personnalisé des résultats -->
      <resultLayouts>
        <layout name="esup_document_listing_ajax" title="document_listing"
          translateTitle="true" iconPath="/icons/document_listing_icon.png" />
        <layout name="esup_document_listing_ajax_compact_2_columns"
          title="document_listing_compact_2_columns" translateTitle="true"
          iconPath="/icons/document_listing_compact_2_columns_icon.png" />
        <layout name="esup_document_listing_ajax_icon_2_columns"
          title="document_listing_icon_2_columns" translateTitle="true"
          iconPath="/icons/document_listing_icon_2_columns_icon.png" />
      </resultLayouts>
      <!-- gere l'affichage des actions (boutons) au bas de la liste de documents -->
      <selectionList>CURRENT_SELECTION</selectionList>
      <actions category="CURRENT_SELECTION_LIST" />
    </contentView>

<!-- on procède de la même façon pour les contenus des "corbeilles" -->
<!-- la requete NXQL remonte ici tous les documents enfant supprimés (ecm:currentLifeCycleState = 'deleted')-->
    <contentView name="esup_document_trash_content">
      <coreQueryPageProvider>
        <property name="coreSession">#{documentManager}</property>
        <pattern>
          SELECT * FROM Document WHERE ecm:parentId = ? AND
          ecm:isCheckedInVersion = 0 AND ecm:mixinType != 'HiddenInNavigation'
          AND ecm:currentLifeCycleState = 'deleted'
        </pattern>
        <parameter>#{currentDocument.id}</parameter>
        <sort column="dc:title" ascending="true" />
        <pageSize>20</pageSize>
      </coreQueryPageProvider>
      <useGlobalPageSize>true</useGlobalPageSize>
      <refresh>
        <event>documentChanged</event>
        <event>documentChildrenChanged</event>
      </refresh>
      <cacheKey>#{currentDocument.id}</cacheKey>
      <resultLayouts>
        <layout name="esup_document_listing_ajax" title="document_listing"
          translateTitle="true" iconPath="/icons/document_listing_icon.png" />
        <layout name="esup_document_listing_ajax_compact_2_columns"
          title="document_listing_compact_2_columns" translateTitle="false"
          iconPath="/icons/document_listing_compact_2_columns_icon.png" />
        <layout name="esup_document_listing_ajax_icon_2_columns"
          title="document_listing_icon_2_columns" translateTitle="true"
          iconPath="/icons/document_listing_icon_2_columns_icon.png" />
      </resultLayouts>
      <selectionList>CURRENT_SELECTION_TRASH</selectionList>
      <actions category="CURRENT_SELECTION_TRASH_LIST" />
    </contentView>
    <!-- contenu des sections de publications, même principe  -->
    <contentView name="esup_section_content">
      <coreQueryPageProvider>
        <property name="coreSession">#{documentManager}</property>
        <pattern>
          SELECT * FROM Document WHERE ecm:parentId = ? AND
          ecm:isCheckedInVersion = 0 AND ecm:mixinType != 'HiddenInNavigation'
          AND ecm:currentLifeCycleState != 'deleted'
        </pattern>
        <parameter>#{currentDocument.id}</parameter>
        <sort column="dc:title" ascending="true" />
        <pageSize>20</pageSize>
      </coreQueryPageProvider>
      <useGlobalPageSize>true</useGlobalPageSize>
      <refresh>
        <event>documentChanged</event>
        <event>documentChildrenChanged</event>
      </refresh>
      <cacheKey>#{currentDocument.id}</cacheKey>
      <cacheSize>10</cacheSize>
      <resultLayouts>
        <layout name="esup_document_listing_ajax" title="document_listing"
          translateTitle="true" iconPath="/icons/document_listing_icon.png" />
        <layout name="esup_document_listing_ajax_compact_2_columns"
          title="document_listing_compact_2_columns" translateTitle="true"
          iconPath="/icons/document_listing_compact_2_columns_icon.png" />
        <layout name="esup_document_listing_ajax_icon_2_columns"
          title="document_listing_icon_2_columns" translateTitle="true"
          iconPath="/icons/document_listing_icon_2_columns_icon.png" />
      </resultLayouts>
      <selectionList>CURRENT_SELECTION_SECTIONS</selectionList>
      <actions category="CURRENT_SELECTION_SECTIONS_LIST" />
    </contentView>
  </extension>
</component>

Il nous faut maintenant définir les layouts que l'on a lié à nos contentViews.

Un layout permet de définir quels champs d'un document (correspondant à des widgets) on affiche et comment on les affiche (typiquement on trouve deux types d'affichage : un affichage de type listing (tableau avec widget en colonnne) et un affichage de type summary (affichage en ligne des champs). Les layout (et les widgets) sont liés à des modes (VIEW, EDIT, CREATE, SUMMARY ou ANY qui correpond à tous les modes) permettant de définir un affichage différent suivant le contexte (consultation d'un document ou édition par exemple)

Voici le contenu (commenté toujours ...) de notre fichier templates/custom/config/esup-layouts-listing-config.xml :

 <?xml version="1.0"?>
<component name="org.esup.ecm.platform.forms.layouts.webapp.listing">
<!-- nous permet de bénéficier des la definition des widgets de ce composant -->
<require>org.nuxeo.ecm.platform.forms.layouts.webapp.listing</require>
  <extension target="org.nuxeo.ecm.platform.forms.layout.WebLayoutManager" point="layouts">
    <!-- definition du layout esup_document_listing qu'on appelle dans nos contentViews du fichier ci-dessus -->
    <layout name="esup_document_listing">
      <templates>
        <!-- fichier xhtml lié, on garde celui par defaut qui convient en general très bien -->
        <template mode="any">/layouts/layout_listing_template.xhtml</template>
      </templates>
      <properties mode="any">
       <!-- affichage des titres et couleur une ligne sur deux -->
        <property name="showListingHeader">true</property>
        <property name="showRowEvenOddClass">true</property>
      </properties>
      <!-- définition du contenu de chaque colonne -->
      <columns>
        <column>
          <!-- affiche le widget de selection (case a cocher) -->
          <properties mode="any">
            <property name="isListingSelectionBoxWithCurrentDocument">
              true
            </property>
            <property name="useFirstWidgetLabelAsColumnHeader">false</property>
            <property name="columnStyleClass">iconColumn</property>
          </properties>
          <widget>listing_selection_box_with_current_document</widget>
        </column>

        <column>
          <properties mode="any">
            <property name="useFirstWidgetLabelAsColumnHeader">false</property>
            <property name="columnStyleClass">iconColumn</property>
          </properties>
          <widget>listing_icon_type</widget>
        </column>
        <column>
          <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>
          <widget>listing_lock_icon</widget>
        </column>
        <column>
          <properties mode="any">
            <property name="useFirstWidgetLabelAsColumnHeader">true</property>
            <property name="sortPropertyName">dc:modified</property>
            <property name="defaultSortAscending">false</property>
          </properties>
          <widget>listing_modification_date</widget>
        </column>
        <column>
          <properties mode="any">
            <property name="useFirstWidgetLabelAsColumnHeader">true</property>
            <property name="sortPropertyName">dc:creator</property>
          </properties>
          <widget>listing_author</widget>
        </column>
        <column>
          <properties mode="any">
            <property name="columnStyleClass">iconColumn</property>
            <property name="useFirstWidgetLabelAsColumnHeader">true</property>
            <property name="isSortable">false</property>
          </properties>
          <widget>listing_version</widget>
        </column>
        <column>
          <properties mode="any">
            <property name="columnStyleClass">iconColumn</property>
          </properties>
          <widget>listing_livedit_link</widget>
        </column>
      </columns>
    </layout>

    <layout name="esup_document_listing_ajax">
      <templates>
        <template mode="any">
          /layouts/layout_listing_ajax_template.xhtml
        </template>
      </templates>
      <properties mode="any">
        <property name="showListingHeader">true</property>
        <property name="showRowEvenOddClass">true</property>
      </properties>
      <columns>
        <column>
          <properties mode="any">
            <property name="isListingSelectionBoxWithCurrentDocument">
              true
            </property>
            <property name="useFirstWidgetLabelAsColumnHeader">false</property>
            <property name="columnStyleClass">iconColumn</property>
          </properties>
          <widget>listing_ajax_selection_box_with_current_document</widget>
        </column>
        <column>
          <properties mode="any">
            <property name="useFirstWidgetLabelAsColumnHeader">false</property>
            <property name="columnStyleClass">iconColumn</property>
          </properties>
          <widget>listing_icon_type</widget>
        </column>
        <column>
          <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>
          <widget>listing_lock_icon</widget>
        </column>
        <column>
          <properties mode="any">
            <property name="useFirstWidgetLabelAsColumnHeader">true</property>
            <property name="sortPropertyName">dc:modified</property>
            <property name="defaultSortAscending">false</property>
          </properties>
          <widget>listing_modification_date</widget>
        </column>
        <column>
          <properties mode="any">
            <property name="useFirstWidgetLabelAsColumnHeader">true</property>
            <property name="sortPropertyName">dc:creator</property>
          </properties>
          <widget>listing_author</widget>
        </column>
        </columns>
    </layout>

    <layout name="esup_document_listing_compact_2_columns">
      <templates>
        <template mode="any">/layouts/layout_listing_template.xhtml</template>
      </templates>
      <columns>
        <column alwaysSelected="true">
          <properties mode="any">
            <property name="columnStyleClass">iconColumn</property>
          </properties>
          <widget>listing_selection_box_with_current_document</widget>
        </column>
        <column alwaysSelected="true">
          <properties mode="any">
            <property name="columnStyleClass">iconColumn</property>
          </properties>
          <widget>listing_icon_type</widget>
        </column>
        <column alwaysSelected="true">
          <widget>listing_title_link</widget>
          <widget>listing_modification_date</widget>
          <widget>listing_author</widget>
        </column>
      </columns>
    </layout>

    <layout name="esup_document_listing_ajax_compact_2_columns">
      <templates>
        <template mode="any">
          /layouts/layout_listing_ajax_template.xhtml
        </template>
      </templates>
      <columns>
        <column alwaysSelected="true">
          <properties mode="any">
            <property name="columnStyleClass">iconColumn</property>
          </properties>
          <widget>listing_ajax_selection_box_with_current_document</widget>
        </column>
        <column alwaysSelected="true">
          <properties mode="any">
            <property name="columnStyleClass">iconColumn</property>
          </properties>
          <widget>listing_icon_type</widget>
        </column>
        <column alwaysSelected="true">
          <widget>listing_title_link</widget>
          <widget>listing_modification_date</widget>
          <widget>listing_author</widget>
        </column>
      </columns>
    </layout>

    <layout name="esup_document_listing_icon_2_columns">
      <templates>
        <template mode="any">/layouts/layout_listing_template.xhtml</template>
      </templates>
      <columns>
        <column alwaysSelected="true">
          <widget>listing_selection_box_with_current_document</widget>
        </column>
        <column alwaysSelected="true">
          <widget>listing_big_icon_type_link</widget>
        </column>
        <column alwaysSelected="true">
          <widget>listing_title_link</widget>
        </column>
      </columns>
    </layout>

    <layout name="esup_document_listing_ajax_icon_2_columns">
      <templates>
        <template mode="any">
          /layouts/layout_listing_ajax_template.xhtml
        </template>
      </templates>
      <columns>
        <column alwaysSelected="true">
          <widget>listing_ajax_selection_box_with_current_document</widget>
        </column>
        <column alwaysSelected="true">
          <widget>listing_big_icon_type_link</widget>
        </column>
        <column alwaysSelected="true">
          <widget>listing_title_link</widget>
        </column>
      </columns>
    </layout>
  </extension>

</component>

Maintenant, nous devons lier ces contentViews au type de documents concernés (folder/workspaces et section)





                
        
    
        


                        
    





    

	

		
    
    
            
  • 
            Aucune étiquette
        
    •