template avec primeface et update
Contexte : Je cherche a faire un moteur de recherche, affichant des produits suivant la recherche. Cette recherche ce trouve dans un header, inserer via un template. Si le contenue actuel n'est pas le contenue affichant les produits, je charge le contenue sinon je fais un update de la table affichant les produit. Avec mon implémentation impossible de concilier la navigation et l'update.
Le header : herder.xhtml
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
>
<h:head>
<title>IGNORED</title>
</h:head>
<h:body>
<ui:composition>
<div id="logo"><a href="/AJIcommerce-web"><h:graphicImage value="/resources/design/aji-commerce-logo.png" /></a> </div>
<div id="recherche">
<h:form>
<div id="recherche2">
<f:ajax render=":formContent">
<p:outputLabel for="input_recherche" value="Votre recherche" />
<p:inputText id="input_recherche" value="#{rechercheBean.stringRecherche}" size="75"/>
<p:commandButton id="btcon" value="#{msgs1.label_recherche_produit}" action="#{rechercheBean.recherche}" update=":formContent:rechercheProduits" partialSubmit="true"/> <!-- #{rechercheBean.update} -->
</f:ajax>
</div>
<div id="espace_client" class="taille">
<a href="/AJIcommerce-web/FrontOffice/espace_client.xhtml"><h:graphicImage value="/resources/design/espace_client.png" width="200" height="65" /></a>
</div>
<div id="panier" class="taille">
<a href="/AJIcommerce-web/FrontOffice/gest_panier.xhtml"><h:graphicImage value="/resources/design/panier.png" width="200" height="65" /></a>
</div>
</h:form>
</div>
</ui:composition>
</h:body>
</html> |
le corps du template : basicTemplate.xhtml
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
>
<f:view locale="#{facesContext.externalContext.request.locale}">
<h:head>
<title><ui:insert name="title">Default title</ui:insert></title>
<link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.requestContextPath}/resources/design/reset.css" />
<link rel="stylesheet" type="text/css" href="#{facesContext.externalContext.requestContextPath}/resources/design/template.css" />
</h:head>
<h:body>
<div id="header">
<ui:insert name="header">
<ui:include src="/WEB-INF/templates/FrontOffice/Header.xhtml">
</ui:include>
</ui:insert>
</div>
<div id="central">
<div id="content">
<ui:insert name="content"></ui:insert>
</div>
</h:body>
</f:view>
</html> |
l'index.xhtml
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<ui:composition template="/WEB-INF/templates/FrontOffice/BasicTemplate.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html">
<ui:define name="title">Acceuil</ui:define>
<ui:define name="content">
<p>BIENVENUE SUR LE SITE AJIECOMMERCE.</p>
</div>
</ui:define>
</ui:composition> |
L'affichage de la recherche rechercheProduits.xhtml
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<ui:composition template="/WEB-INF/templates/FrontOffice/BasicTemplate.xhtml"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
xmlns:c="http://xmlns.jcp.org/jsp/jstl/core">
<ui:define name="title">Ma recherche de produit </ui:define>
<ui:define name="content">
<h:form id="formContent">
<p:dataTable id="rechercheProduits" value="#{rechercheBean.listeProduitRecherche}" var="o" >
<p:column>
<f:facet name="header">
#{msgs1.label_nom_produit}
</f:facet>
<h:outputText value="#{o.label}" />
</p:column>
<p:column>
<f:facet name="header">
#{msgs1.label_prix_produit}
</f:facet>
<h:outputText value="#{o.prix}" />
</p:column>
<p:column>
<f:facet name="header">
#{msgs1.label_reference_produit}
</f:facet>
<h:outputText value="#{o.reference}" />
</p:column>
<p:column>
<f:facet name="header">
#{msgs1.label_description}
</f:facet>
<h:outputText value="#{o.description}" />
</p:column>
<p:column>
<f:facet name="header">
#{msgs1.label_ajouter_panier}
</f:facet>
<p:commandButton value="#{msgs1.label_ajouter_panier}" action="#{o.test()}" />
</p:column>
<p:column>
<f:facet name="header">
#{msgs1.label_image}
</f:facet>
<div id="logo"><h:graphicImage value="#{o.getAPhoto(0).getPath()}" width="50" /></div>
</p:column>
</p:dataTable>
</h:form>
</ui:define>
</ui:composition> |
J'ai essayé plusieurs techniques pour différer l'update du content, mais n'ai pas réussi. Une petite idée propre pour faire cela ? (une idée crade était de mettre un élément vide ayant l'id à update dans chaque content, mais je trouve cela bien contraignant pour si peu)
