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.
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
DefaultTemplateViewPrepareret indiquer le code du template dans la propriétéincludedSiteTemplatedu 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>
Structure par défaut des pages K-Sup V7