The way it works
Seeking hard for the solution, I found that I just forgot the leading h:head tags in my usage component. Adding them made all the errors disappear. So for a complete solution this here is my last code:
the composite component
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
<composite:attribute name="value" required="true" />
<composite:attribute name="size" required="false" default="20" />
<composite:clientBehavior name="change" event="change" targets="input" />
</composite:interface>
<composite:implementation>
<h:inputText id="input" value="#{cc.attrs.value}" size="#{cc.attrs.size}" />
</composite:implementation>
the bean
#ManagedBean
#SessionScoped
public class MyBean
{
private String value1;
private String value2;
private String value3;
public String exec()
{
this.value2 = value3;
return "";
}
public void listenAjax(AjaxBehaviorEvent e)
{
UIInput i = (UIInput) e.getComponent();
value2 = (String) i.getValue();
System.out.println("ajax value = " + i.getValue());
System.out.println("value1 = " + value1);
System.out.println("value2 = " + value2);
System.out.println("value3 = " + value3);
}
public String getValue3()
{
return value3;
}
public String getValue2()
{
return value2;
}
public String getValue1()
{
return value1;
}
public void setValue1(String value1)
{
this.value1 = value1;
}
public void setValue3(String value3)
{
this.value3 = value3;
}
}
the calling xhtml file
<!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:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:test="http://java.sun.com/jsf/composite/test">
<h:head>
</h:head>
<h:body>
<h:form id="form">
<h:panelGrid columns="2">
<h:outputText value="value3" />
<h:inputText value="#{myBean.value3}">
<f:ajax event="change" render="see" listener="#{myBean.listenAjax}" />
</h:inputText>
<h:outputText value="value1" />
<test:test value="#{myBean.value1}">
<f:ajax event="change" render=":form:see" listener="#{myBean.listenAjax}" />
</test:test>
<h:outputText value="value2" />
<h:outputText id="see" value="#{myBean.value2}" />
<h:outputText value="" />
<h:commandButton action="#{myBean.exec}" value="set" />
</h:panelGrid>
</h:form>
</h:body>
</html>
Finally, thanks to all that gave me some hints and helped me finding out about the bugs.
Improvements step 2
Redesigning the component now I have this:
composite component:
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
<composite:attribute name="value" required="true" />
<composite:attribute name="size" required="false" default="20" />
<composite:clientBehavior name="change" event="change" targets="input" />
</composite:interface>
<composite:implementation>
<h:inputText id="input" value="#{cc.attrs.value}" size="#{cc.attrs.size}" />
</composite:implementation>
managed bean:
#ManagedBean
#SessionScoped
public class MyBean {
private String value1;
private String value2;
private String value3;
public String exec()
{
this.value2 = value3;
return "";
}
public void listen(AjaxBehaviorEvent e)
{
UIInput i = (UIInput) e.getComponent();
value2 = (String) i.getValue();
System.out.println("ajax value = " + i.getValue());
System.out.println("value1 = " + value1);
System.out.println("value2 = " + value2);
System.out.println("value3 = " + value3);
}
public String getValue3()
{
return value3;
}
public String getValue2()
{
return value2;
}
public String getValue1()
{
return value1;
}
public void setValue1(String value1)
{
this.value1 = value1;
}
public void setValue3(String value3)
{
this.value3 = value3;
}
}
usage:
<!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:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" xmlns:test="http://java.sun.com/jsf/composite/test">
<h:body>
<h:form>
<test:test value="#{myBean.value1}">
<f:ajax event="change" render=":out" listener="#{myBean.listen}" />
</test:test>
<h:inputText value="#{myBean.value3}">
<f:ajax event="change" render=":out" listener="#{myBean.listen}" />
</h:inputText>
<h:commandButton action="#{myBean.exec}" value="set" />
</h:form>
<h:outputText id="out" value="#{myBean.value2}" />
</h:body>
</html>
Nevertheless no ajax response is done to my component outside of the form (no results in the log window). This is confusing me, how can I make it work?
Improvements step 1 (old)
So I tried to improve my code, changing the composite component to
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
<composite:attribute name="value" required="true" />
<composite:attribute name="size" required="false" default="20" />
<composite:clientBehavior name="change" event="change" targets="#{cc.clientId}:input" />
</composite:interface>
<composite:implementation>
<h:inputText id="input" value="#{cc.attrs.value}" size="#{cc.attrs.size}" />
</composite:implementation>
and my call would be
<my:test value="#{test.value1}">
<f:ajax event="change" render=":out" listener="#{test.listen}" />
</my:test>
<h:outputText id="out" value="#{test.value2}" />
with the result that exactly nothing happens. What may I do to make this work?
The original post*
I'd like to make my composite component working with AJAX. I googled a lot, found some solutions even here on stackoverflow, but they all seemed to work with buttons only. Here I have an inputText component, how can I give my component an AJAX event listener? Executing my example (see below) gives this error:
com.sun.faces.lifecycle.InvokeApplicationPhase execute
WARNING: 0
java.lang.ArrayIndexOutOfBoundsException: 0
at org.apache.el.parser.AstValue.convertArgs(AstValue.java:320)
at org.apache.el.parser.AstValue.invoke(AstValue.java:274)
at org.apache.el.MethodExpressionImpl.invoke(MethodExpressionImpl.java:274)
at com.sun.faces.facelets.el.ContextualCompositeMethodExpression.invoke(ContextualCompositeMethodExpression.java:187)
at com.sun.faces.facelets.tag.TagAttributeImpl$AttributeLookupMethodExpression.invoke(TagAttributeImpl.java:473)
at com.sun.faces.facelets.tag.jsf.core.AjaxBehaviorListenerImpl.processAjaxBehavior(AjaxHandler.java:459)
at javax.faces.event.AjaxBehaviorEvent.processListener(AjaxBehaviorEvent.java:113)
at javax.faces.component.behavior.BehaviorBase.broadcast(BehaviorBase.java:106)
at javax.faces.component.UIComponentBase.broadcast(UIComponentBase.java:809)
at javax.faces.component.UIViewRoot.broadcastEvents(UIViewRoot.java:800)
at javax.faces.component.UIViewRoot.processApplication(UIViewRoot.java:1292)
at com.sun.faces.lifecycle.InvokeApplicationPhase.execute(InvokeApplicationPhase.java:81)
at com.sun.faces.lifecycle.Phase.doPhase(Phase.java:101)
at com.sun.faces.lifecycle.LifecycleImpl.execute(LifecycleImpl.java:181)
at javax.faces.webapp.FacesServlet.service(FacesServlet.java:645)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:305)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:222)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:123)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:472)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:171)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:99)
at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:936)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:118)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:407)
at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp11Processor.java:1004)
at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:589)
at org.apache.tomcat.util.net.JIoEndpoint$SocketProcessor.run(JIoEndpoint.java:310)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1110)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:603)
at java.lang.Thread.run(Thread.java:722)
My composite component:
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:composite="http://java.sun.com/jsf/composite">
<composite:interface>
<composite:attribute name="value" required="true" />
<composite:attribute name="size" required="false" default="20" />
<composite:attribute name="enableAjax" required="false" default="false" />
<composite:attribute name="ajaxRender" required="false" />
<composite:attribute name="ajaxListener" required="false" method-signature="void listen(javax.faces.event.AjaxBehaviorEvent)" />
</composite:interface>
<composite:implementation>
<h:inputText id="input" value="#{cc.attrs.value}" size="#{cc.attrs.size}">
<f:ajax event="change" render="#{cc.attrs.ajaxRender}" listener="#{cc.attrs.ajaxListener}" disabled="#{!cc.attrs.enableAjax}" />
</h:inputText>
</composite:implementation>
My call:
<my:test value="#{test.value1}" ajaxRender=":out" ajaxListener="#{test.listen}" enableAjax="true" />
<h:outputText id="out" value="#{test.value2}" />
My Bean:
#ManagedBean
#SessionScoped
public class Test {
private String value1;
private String value2;
...
public void listen(AjaxBehaviorEvent e)
{
value2 = (String) ((UIInput) e.getComponent()).getValue();
}
... (getter & setter)
}
BTW. by composite component is much more complex, I reduced this example to the relevant parts.
The <cc:clientBehavior> should work. Your targets is only wrong.
<composite:clientBehavior name="change" event="change" targets="#{cc.clientId}:input" />
It must be relative to the composite itself, not to the parent/viewroot or whatever (as that would theoretically require editing the composite component everytime when you put it in a different naming container parent!).
Thus, so
<composite:clientBehavior name="change" event="change" targets="input" />
If we look at your composite component definition (especially at ajaxListener attribute) you defined a method with AjaxBehaviorEvent (which is correct signature for this kind of event listener) but in use of your component you defined an attribute as:
ajaxListener="#{test.listen}"
So, no arguments - and that is place where this exception is thrown (in trying to find arguments of method).
With this your use case, you should change your component definition little bit. So change:
<composite:attribute name="ajaxListener" required="false" method-signature="void listen(javax.faces.event.AjaxBehaviorEvent)" />
to something like this:
<composite:attribute name="bean" required="false" type="java.lang.Object" />
<composite:attribute name="ajaxListener" required="false" type="java.lang.String" />
Also change your listener attribute in f:ajax tag to:
listener="#{cc.attrs.bean[cc.attrs.ajaxListener]}"
Finally change the way how your composite component is used:
<my:test value="#{test.value1}" ajaxRender=":out" ajaxListener="listen" bean="#{test}" enableAjax="true" />
Related
I have a strange situation with a composite component. I'm using it all over my web application but now I noticed that if I update a form containing my composite component, the component get's rendered twice (at times).
My component (let's say it's called datecc) is defined as follows:
<?xml version="1.0" encoding="UTF-8"?>
<!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:composite="http://java.sun.com/jsf/composite" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:p="http://primefaces.org/ui">
<h:body>
<composite:interface>
<composite:attribute name="value"/>
<composite:attribute name="shortFormat"/>
<composite:attribute name="style"/>
<composite:attribute name="styleClass"/>
<composite:attribute default="false" name="inputLabel"/>
</composite:interface>
<composite:implementation>
<span id="#{cc.clientId}">
<h:outputText rendered="#{not cc.attrs.inputLabel}" style="#{cc.attrs.style}" styleClass="#{cc.attrs.styleClass}" value="#{cc.attrs.value}">
<f:convertDateTime pattern="#{cc.attrs.shortFormat ? 'dd/MM/yy' : 'dd/MM/yyyy'}" timeZone="#{timezone}"/>
</h:outputText>
<span>asdasdfasdf</span>
<h:inputText disabled="true" rendered="#{cc.attrs.inputLabel}" style="#{cc.attrs.style}" styleClass="#{cc.attrs.styleClass}" value="#{cc.attrs.value}">
<f:convertDateTime pattern="#{cc.attrs.shortFormat ? 'dd/MM/yy' : 'dd/MM/yyyy'}" timeZone="#{timezone}"/>
</h:inputText>
</span>
</composite:implementation>
</h:body>
</html>
The page I'm calling it from is something similar to this:
<h:form id="form">
<p:dataTable id="rowsTable" value="#{myBean.rows}" var="it"
selectionMode="single" selection="#{myBean.selectedRow}" rowKey="#{it.key}"
rowStyleClass="#{myBean.isRed(it) ? 'red' : null}">
<p:ajax event="rowSelect" update=":menuForm :detailForm :contextualMenu"/>
<column>....</column>
<column><mycc:datecc value="#{it.date}" inputLabel="true" /></column>
</p:dataTable>
</h:form>
<h:form id="detailForm>
<!-- this field is rendered twice once I select a row in the above table -->
<mycc:datecc value="#{myBean.selectedRow.date}" inputLabel="true" />
</h:form>
I'm unfortunatelly doing some work on the setSelectedRow method in my bean #Named #ConversationScoped public class MyBean { ... } however I don't think that's causing the problem.
I solved my problem by implementing the following class.
package com.company.faces.cc;
import javax.faces.component.FacesComponent;
import javax.faces.component.NamingContainer;
import javax.faces.component.UIInput;
import javax.faces.component.UINamingContainer;
#FacesComponent("inputDate")
public class Date extends UIInput implements NamingContainer {
#Override
public String getFamily() {
return UINamingContainer.COMPONENT_FAMILY;
}
}
Although I don't really know why this solves the issue since it doesn't add much to the component.
I'm new to web development using JSF , i have an issue in displaying a message for a validation.
I'm trying to display a message related to length validation.
this is the code for the page :
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<h:body>
<h:form>
<h:message showDetail="true" showSummary="true" for="txtNum" />
<p:panelGrid columns="2">
<p:outputLabel value="value" id="lblValue" for="txtNum" />
<p:inputText value="#{test.num}" required="true" id="txtNum">
<f:facet name="">
<f:validateLength maximum="3"></f:validateLength>
</f:facet>
</p:inputText>
<p:commandButton value="do" action="#{test.func()}"></p:commandButton>
</p:panelGrid>
</h:form>
</h:body>
</html>
this the code for the managed bean (configured from faces config):
public class Test {
private int num;
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}
public String func()
{
return null;
}
}
This should work. Don't forget about IDs and naming containers.When using AJAX do not skip process and update attributes.
<h:form id="form">
<p:panelGrid columns="2" id="formGrid">
<p:outputLabel value="value" id="lblValue" for=":form:txtNum" />
<p:inputText value="#{test.num}" required="true" id="txtNum">
<f:validateLength maximum="3"/>
</p:inputText>
<h:message showDetail="true" showSummary="true" for=":form:txtNum" />
<p:commandButton value="do" action="#{test.func()}" process=":form:formGrid" update=":form:formGrid"/>
</p:panelGrid>
</h:form>
I'm not sure how to properly ask that question but I will try like that:
Question is about Primefaces, JSF2 Calendar in composite.. I want to catch an event that is called after that calendar was changed (and catch its new Date value).
my composite xhtml:
<composite:interface componentType="myComponent">
<composite:attribute name="value" required="true"/>
</composite:interface>
<composite:implementation>
<p:calendar
id="tempCalendar"
pattern="dd.MM.yyyy" value="#{cc.attrs.value}"
valueChangeListener="#{cc.valueChanged}"
validator="DateValidator" converter="MyDateConverter" showOn="button" showButtonPanel="true" navigator="true" >
<p:ajax event="dateSelect" update="#this" listener="#{cc.event1}"/>
</p:calendar>
</composite:implementation>
my composite's bean:
public void valueChanged(Object event) {
log("valueChanged");
}
public void event1(AjaxBehaviorEvent ab) {
log("Event1");
if (ab != null && ab.getSource() != null && ab.getSource() instanceof Calendar) {
//....
}
}
page where I'm using composite:
<cc:inputdate value="#{mainBean.aDate}" />
In code above I'm trying to do catch new value in compotents bean, but log looks like that:
valueChanged
Event1
setADate
When I'm in valueChangedListener I still have old value of calendar. New value is set at the end.
So, first of all I want to have new value in my composites bean.. but my main question is:
How to implement an event in my mainBean, that will catch new value of that calendar when changed ?
EDIT: My composite now:
<composite:interface componentType="myComponent">
<composite:attribute name="value" required="true"/>
<composite:attribute
name="myListener"
method-signature="void listener()" />
</composite:interface>
<composite:implementation>
<h:panelGroup id="container">
<p:calendar
value="#{cc.attrs.value}"
valueChangeListener="#{cc.valueChanged}"
<p:ajax event="dateSelect" update="#this,:buttonpanel" listener="#{cc.attrs.myListener}"/>
</p:calendar>
</h:panelGroup>
</composite:implementation>
And that way I call it in my main page (connected with mainBean):
<cc:inputdate
value="#{mainBean.item.myDate}"
myListener="#{mainBean.event1}"/>
I want to catch evet AFTER change in mainBean.java...
You've specified it as value attribute of the composite, so it should be available in any of the backing component's methods by the inherited UIComponent#getAttributes() as follows:
Object value = getAttributes().get("value");
You can access it from the component's local value.
i.e.,
My Test Facelet
<!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:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<f:view>
<h:head />
<h:body>
<h:form>
<p:calendar pattern="dd.MM.yyyy">
<p:ajax event="dateSelect" process="#this"
listener="#{testBean.event1}" />
</p:calendar>
</h:form>
</h:body>
</f:view>
</html>
My test bean
import org.primefaces.component.calendar.Calendar;
#ManagedBean(name="testBean")
#SessionScoped
public class TestBackingBean
{
public void event1(AjaxBehaviorEvent ab)
{
if (ab != null)
{
Calendar calendar = (Calendar) ab.getSource();
if(calendar != null)
{
System.out.println(String.format("Newly selected value: %s",
calendar.getLocalValue()));
}
}
}
}
Could somebody explain me why a4j:commandButton doesn’t reacts at first click in the next scenario?
I have to hit it two times in order to get the action executed…
facelets composite template named principal.xhtml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<f:view contentType="text/html">
<h:head>
<meta http-equiv="content-type" content="text/xhtml; charset=UTF-8" />
</h:head>
<h:body>
<div id="heading">
<ui:insert name="heading">
<ui:include src="/adm/includes/menu.xhtml"/>
</ui:insert>
</div>
<div id="content">
<br />
<a4j:outputPanel ajaxRendered="true">
<ui:insert name="content"/>
</a4j:outputPanel>
<br />
</div>
<div id="footer">
<ui:insert name="footer">
<ui:include src="/adm/includes/footer.xhtml"/>
</ui:insert>
</div>
</h:body>
</f:view>
</html>
The JSF page with the problematic ajax button:
<ui:composition template="/adm/templates/principal.xhtml">
<ui:define name="content">
<rich:panel header="#{msgs.usuariosNuevo}">
<h:form id="formUsuariosNuevo" prependId="false">
<h:panelGrid columns="3">
<h:outputText value="#{msgs.email}" />
<h:inputText value="#{usuarioCtrl.mdl.email}" id="email" />
<h:outputText value="#{msgs.pwd}" />
<h:inputSecret value="#{usuarioCtrl.mdl.pwd}" id="pwd" />
</h:panelGrid>
<a4j:commandButton value="#{msgs.guardar}" action="#{usuarioCtrl.guardarUsuarioAction}" />
</h:form>
</rich:panel>
</ui:define>
</ui:composition>
... and the 'top' toolbar menu menu.xhtml:
<h:form prependId="false" id="formMenu">
<rich:toolbar height="26px">
<rich:dropDownMenu mode="ajax">
<f:facet name="label">
<h:panelGroup>
<h:graphicImage value="/resources/img/icon/usuarios.png" styleClass="pic" width="20" height="20" />
<h:outputText value="Usuarios" />
</h:panelGroup>
</f:facet>
<rich:menuItem label="Nuevo" action="#{menuCtrl.usuariosNuevoAction}" icon="/resources/img/icon/nuevo.png" />
<rich:menuItem label="Gestión" action="#{menuCtrl.usuariosGestionAction}" icon="/resources/img/icon/gestion.png" />
</rich:dropDownMenu>
<!-- Others dropDownsMenu's here ... -->
</rich:toolbar>
</h:form>
thanks!
I think the problem happens when you're using JSF #ManagedBean. You need declare that form bean variable in current flow.
I'm using Richfaces 4.2, Spring-web-flow 2.3.0, Spring 3.1.1
formbean
#RequestScoped
#ManagedBean
public class SearchForm implements Serializable {
private static final long serialVersionUID = 1L;
private String pattern = "Please insert";
public String getPattern() {
return pattern;
}
public void setPattern(String pattern) {
this.pattern = pattern;
}
}
home-flow.xml
<var name="searchForm" class="com.inhouse.web.form.SearchForm"/>
<view-state id="home" view="home.xhtml" model="searchForm">
<transition on="search">
<evaluate expression="searchController.search(requestParameters.pattern)" result="flashScope.searchResults"></evaluate>
</transition>
</view-state>
home.xhtml
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:sf="http://www.springframework.org/tags/faces"
xmlns:fn="http://java.sun.com/jsp/jstl/functions"
xmlns:a4j="http://richfaces.org/a4j"
xmlns:rich="http://richfaces.org/rich">
<ui:composition template="/WEB-INF/layouts/template.xhtml">
<ui:define name="content">
<h:form>
<h:inputText value="#{searchForm.pattern}" />
<a4j:commandButton action="search" value="Search" render="searchResult" immediate="true">
<f:param name="pattern" value="#{searchForm.pattern}"></f:param>
</a4j:commandButton>
</h:form>
<h:panelGroup id="searchResult">
<h:outputText value="#{searchResults}" />
</h:panelGroup>
</ui:define>
</ui:composition>
</html>
Controller
#Controller
public class SearchController {
public String search(String pattern) {
return "this is the search results";
}
}
This question already has answers here:
How to ajax-refresh dynamic include content by navigation menu? (JSF SPA)
(3 answers)
Closed 7 years ago.
In JSF2, is it possible to change the of value of src of ui:include dynamically using Ajax request (like for example PrimeFaces p:commandButton)?
Thank you.
<h:form>
<h:commandLink value="Display 2" action="#{fTRNav.doNav()}">
<f:setPropertyActionListener target="#{fTRNav.pageName}" value="/disp2.xhtml" />
</h:commandLink>
</h:form>
<ui:include src="#{fTRNav.pageName}"></ui:include>
That's what I have right now. Is it possible to make it Ajax (using p:commandButton)?
The JSTL tags as proposed in the other answer are not necessary and it is not nicely reuseable.
Here's a basic example using pure JSF (assuming that you runs Servlet 3.0 / EL 2.2, otherwise you indeed need to use <f:setPropertyActionListener> like as in your question):
<h:form>
<f:ajax render=":include">
<h:commandLink value="page1" action="#{bean.setPage('page1')}" />
<h:commandLink value="page2" action="#{bean.setPage('page2')}" />
<h:commandLink value="page3" action="#{bean.setPage('page3')}" />
</f:ajax>
</h:form>
<h:panelGroup id="include">
<ui:include src="#{bean.page}.xhtml" />
</h:panelGroup>
with
private String page;
#PostConstruct
public void init() {
this.page = "page1"; // Ensure that default is been set.
}
// Getter + setter.
here is how I render subcontent dynamically using MnagedBean. First I set page in the center (that will be changed by menu triggers) with private String name="/main_pages/mainpage.xhtml", then each time submenu is clicked the HelloBean resets "name" and contents is updated by update=":content" - then new name is retrieved from Bean:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui">
<h:head>
<f:facet name="first">
<meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
</f:facet>
</h:head>
<h:body>
<p:layout fullPage="true">
<p:layoutUnit position="north" size="150" resizable="true" closable="true" collapsible="true">
<h1>Madeline<br>shop</br></h1>
</p:layoutUnit>
<p:layoutUnit position="south" size="100" closable="true" collapsible="true">
Zapraszamy do odwiedzania naszego biura!
</p:layoutUnit>
<p:layoutUnit position="west" size="175" header="Menu" collapsible="true">
<h:form>
<p:menu>
<f:ajax render=":content">
<p:menuitem value="O naszej agencji" action="#{helloBean.setName('/main_pages/onas.xhtml')}" update=":content" />
<p:menuitem value="Ubezpieczenia pojazdów" action="#{helloBean.setName('/main_pages/ubpoj.xhtml')}" update=":content" />
<p:menuitem value="Ubezpieczenia majątkowe" action="#{helloBean.setName('/main_pages/ubmaj.xhtml')}" update=":content" />
<p:menuitem value="Ubezpieczenia na życie" action="#{helloBean.setName('/main_pages/ubnaz.xhtml')}" update=":content" />
<p:menuitem value="Zapytaj" action="#{helloBean.setName('/main_pages/zapytaj.xhtml')}" update=":content" />
<p:menuitem value="Kontakt" action="#{helloBean.setName('/main_pages/kontakt.xhtml')}" update=":content" />
</f:ajax>
</p:menu>
</h:form>
</p:layoutUnit>
<p:layoutUnit position="center">
<br></br><br></br>
<p:panel id="content">
<ui:include src="#{helloBean.name}" />
</p:panel>
</p:layoutUnit>
</p:layout>
</h:body>
</html>
my ManagedBean:
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
import java.io.Serializable;
/**
*
* #author root
*/
#ManagedBean
#RequestScoped
public class HelloBean implements Serializable {
/**
* Creates a new instance of HelloBean
*/
private static final long serialVersionUID = 1L;
private String name="/main_pages/mainpage.xhtml";
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
You need to use the <c:if test="condition"> tag around the ui:include and then when the ajax button is clicked, the panel that holds the ui:include is refreshed.
Example:
First make sure that the jstl core taglib is included by inserting the following namespace in the document:
<html xmlns:c="http://java.sun.com/jsp/jstl/core>"
Then, you can use the <c:if> tag as follows :
<c:if test="#{!logBean.loggedIn}">
<ui:include src="loginpage.xhtml" />
</c:if>
<c:if test="#{logBean.loggedIn}">
<ui:include src="home.xhtml" />
</c:if>