Modifier le fichier

Tutoriel : Mise en place d'une personnalisation projet de la structure de la page

Construction de la structure d'une page

Les pages refronte sont construites à partir de différents ViewModel. La structure de la page est définie par le modèle de vue "template". Le template possède en sous-vue les principaux bloc de la page, qui ont eux-mêmes des sous-vues.

image Structure par défaut des pages K-Sup V7

Ce système d'emboitement de vue permet de personnaliser une partie de la structure de la page sans impacter le reste, par exemple personnaliser le header. On peut toutefois vouloir modifier la structure globale de la page.

Pour rappel, on parle ici de template au sens de template de page, pas de template de site. Cf documentation sur les templates de site. On peut créer un nouveau template de site sans nouveau template de page, en déclarant de nouveaux viewPreparer pour les zones à personnaliser.

Architecture générale

Le template des pages suit le pattern MVC de Spring et s'intègre dans l'architecture K-Sup avec les composants suivants :

  • ViewPreparer de template : hérite de DefaultTemplateViewPreparer
  • Bean de déclaration du template : implémente le viewPreparer, liste les sous-vues
  • Jsp du template : la jsp d'affichage

Il n'y a généralement pas besoin de personnaliser le modèle de vue, le template n'affiche pas de données. Les données sont portées par les sous-vues.

Procédure

Le tutoriel présenté ci-dessous reprend les principes de personnalisation de la structure. Il n'est pas toujours obligatoire de modifier tous les éléments listés.

Déclarer le bean du prépareur de vue

En fonction de la personnalisation voulue, il ne sera pas utile de personnaliser tous les éléments :

  • Si la condition d'utilisation du template est sur un template de site, il n'est pas utile de créer un nouveau préparer de vue. Il faut déclarer un bean de classe DefaultTemplateViewPreparer et indiquer le code du template dans la propriété includedSiteTemplate du bean.
  • Si la personnalisation du template consiste à ne pas utiliser certain type de sous-vue, il n'y a pas besoin de personnaliser la jsp

Exemple de bean à déclarer :


    <util:constant id="codeTemplateVotreTemplate" static-field="fr.votreprojet.utils.VotreprojetUtils.CODE_TEMPLATE_VOTRETEMPLATE"/>

    <bean id="votreTemplateViewPreparer" class="fr.votreprojet.template.view.VotreTemplateViewPreparer">
        <property name="type" value="template" />
        <property name="view" value="/WEB-INF/jsp/votreProjet/main.jsp" />
        <property name="expectedViewTypes">
            <list>
                <value>head</value>
                <value>header</value>
                <value>body</value>
                <value>footer</value>
            </list>
        </property>
        <property name="includedSiteTemplate">
            <list>
                <ref bean="codeTemplateVotreTemplate"/>
            </list>
        </property>
    </bean>

Créer le préparateur de vue du template

La classe fr.votreprojet.template.view.VotreTemplateViewPreparer permet de spécifier les conditions d'utilisation du template et de préparer les données qui vont être affichées

/**
 * Préparateur de la vue de [Description].
 */
public class VotreTemplateViewPreparer extends DefaultTemplateViewPreparer {

    /**
     * Indique si le préparateur de contenu est habilité à traiter une requête en fonction du contexte.
     * @param frontContext Le contexte.
     * @return true si le préparateur est habilité, false sinon.
     */
    @Override
    public boolean accept(final FrontContext frontContext) {
        return // vos conditions;
    }
}

Créer la jsp d'affichage

Créer la jsp à l'emplacement indiqué dans le bean :

<%@ page trimDirectiveWhitespaces="true" errorPage="/WEB-INF/jsp/error/exception.jsp" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%--@elvariable id="headViewModel" type="com.kosmos.core.model.fragments.HeadViewModel"--%>
<%--@elvariable id="headerViewModel" type="com.kosmos.core.header.HeaderViewModel"--%>
<%--@elvariable id="bodyViewModel" type="com.kosmos.body.BodyViewModel"--%>
<%--@elvariable id="footerViewModel" type="com.kosmos.footer.FooterViewModel"--%>

<!DOCTYPE html>
<html lang="${headViewModel.lang}">
    <c:if test="${not empty headViewModel.view}">
        <jsp:include page="${headViewModel.view}"/>
    </c:if>
    <body class="k-body body l-expanded-body">
        <c:if test="${not empty headerViewModel.view}">
            <jsp:include page="${headerViewModel.view}"/>
        </c:if>
        <jsp:include page="/WEB-INF/jsp/technical/pre-content.jsp" />
        <jsp:include page="${bodyViewModel.view}"/>
        <c:if test="${not empty footerViewModel.view}">
            <jsp:include page="${footerViewModel.view}"/>
        </c:if>
        <jsp:include page="/WEB-INF/jsp/technical/footer.jsp" />
    </body>
</html>