Templating

Les vues standard du studio

Les templates de vue peuvent être utilisés les vues standard du studio en ajoutant dans le XML la balise <template>.

Cette balise a un attribut type qui permet de définir un mode de rendu différent entre “desktop” et “mobile”.

Info

Pour lire les valeurs de la IResource il faut ${iResource.values.xxx} où xxx est le nom système du champ.

Note

Si des CDATA sont utilisées à la sauvegarde, elles seront supprimées et remplacées par le résultat de la fonction xmlencode(CDATA).

Exemple

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<definition name="DEFAULT" catalog="PilotageProjet" catalogType="4" class="com.axemble.vdoc.sdk.interfaces.IStorageResource" extensionClasses="com.vdoc.projectsteering.extensions.view.ProjectsViewExtension">
    <filters>
        <fieldgroup operator="AND">
            <field name="sys_ResourceDefinition" value="Projet"/>
            <fieldgroup operator="AND">
                <field name="EtatDuProjet" operator="notEquals" value="termine"/>
            </fieldgroup>
        </fieldgroup>
    </filters>
    <template type="desktop">
	<![CDATA[
      <div class="projectsteering" onclick="window.location.href='${baseUrl}/easysite/production/projectsteering/reservoir-de-donnees/edit-document/${iResource.id}'">
        <div class="detail">
          <img src="/vdoc/easysite-resources/skins/2011/images/${iResource.values.MeteoDuProjet}.png" />
          <span class="icon icon-arrow-${MeteoTendance}"></span>
          <span class="avancement-projet-vue">${iResource.values.avancementProjet}%</span>
          <div class="thumbnail-zone">
            <div class="thumbnail">
             <img class="project-logo" src="${tmp_logo}" title="" class="">
            </div>
          </div>
          <div class="text-zone">
            <a>${sys_Title}</a>
            <p class="project-manager-label">Chef de projet</p>
            <p class="project-manager-value">${iResource.values.ChefDeProjet}</p>
            <p class="last-maj-title"> Mis à jour <span title="${iResource.values.DateDeDerniereMAJ}" >${tmp_LastMAJ}</span></p>
            <div class="indicator-container">
              <p><span class="indicator-label">Coût : </span><span class="icon ${tendanceCoutColor} icon-arrow-${tendanceCout}"></span><span class="percentage textcolor-${indicatorCostColor}">${iResource.values.IndicateurCout} %</span></p>
              <p><span class="indicator-label">Qualité: </span><span class="icon ${tendanceQualiteColor} icon-arrow-${tendanceQualite}"></span><span class="percentage textcolor-${indicatorQualityColor}">${iResource.values.IndicateurQualite} %</span></p>
              <p><span class="indicator-label">Délai: </span><span class="icon ${tendanceDelaiColor} icon-arrow-${tendanceDelai}"></span><span class="percentage textcolor-${indicatorDelayColor}">${iResource.values.IndicateurDelai} %</span></p>
            </div>
          </div>
        </div>
      </div>
	]]>
    </template>
    <view sortBy="sys_Title" sortAscending="true" enableCreateTreatment="true" enableOpenTreatment="true" enableDeleteTreatment="true" enableSecureTreatment="true" itemsPerPage="10" countElements="true">
        <column name="sys_Title"/>
        <column name="ChefDeProjet.fullName"/>
        <column name="MeteoDuProjet"/>
        <column name="TypeDeProjet"/>
        <column name="MeteoTendance"/>
    </view>
</definition>

Le même système de template peut être utilisé dans les vues custom.

La balise <template> a des attributs :

type : qui permet de définir un mode de rendu différent entre “desktop” et “mobile” (il ne peut donc y avoir que 2 templates au maximum)
displayMode : si le template est activé c’est son displayMode par defaut
diplayModeAvailabe : la liste des modes possibles.

Exemple

<view name="SupplierCommentsView" action="display" label="LG_SUPPLIER_COMMENTS_EXCHANGE_VIEW" provider="com.vdoc.visiativ.ged.supplierfiles.view.providers.SupplierCommentsExchangeViewProvider" sortable="false" selectable="false" filterable="false" paginable="false">
	<template type="desktop" displayMode="table" >
		<![CDATA[
			<div class="comments-exchange-section">
				<div class="section-header">
					<div class="section-header-index">
						<div class="exchange-id">${id}</div>
					</div>
					<div class="section-header-infos">
						<div class="section-title">${title}</div>
						<div class="section-status">
						    ${LG_COMMENTS_EXCHANGE_STATUS} - 
						    <input type="text" value="${lastModificationDate}" style="display:none;"/>
						    <span class="moment-js-date"></span>
						</div>
					</div>
					<div class="section-header-operators"> 
						<div class="section-operators-user1">
							<img src="${image1URI}"/><br>${creatorName}
						</div>
					</div>
					<div class="section-header-actions">${changeStatus} ${addCommentToSection} ${deleteSection}</div>
				</div>
				<div class="comments-exchange-list">
					${commentList}
				</div>
			</div>
		]]>
	</template>
	<column name="id" label="" />
	<column name="creatorName" label="" />
	<column name="supplierName" label="" />
	<column name="title" label="" />
	<column name="LG_COMMENTS_EXCHANGE_STATUS" label="" />
	<column name="lastModificationDate" label="" />
	<column name="commentList" label="" />
	<column name="addCommentToSection" label="" />
	<column name="deleteSection" label="" />
	<column name="changeStatus" label="" />
	<column name="image1URI" label="" />
</view>

Source: https://wiki.myvdoc.net/xwiki/bin/view/Dev+Floor/ScreensWithTemplateRendering partie 3

Templating

Templating

Les vues standard du studio

Exemple

Les vues de navigation (fichier xml)

Exemple