Command Button inside composition page in JSF - jsf

I have the same problem as user1598186 has stated in his question here : p:commandButton doesn't call bean's method in an <ui:include> page
However, no solution has been given (he has removed <ui:include> tags altogether and used variables instead)
Are there any ways of using <ui:include> and still have my backing bean's method executed, when I'm calling it inside the commandButton.
Any help will be much appreciated.

EL 2.2 method parameters (so, #{bean.method()} instead of #{bean.method}) can be used to pass a method signature that can be used in the actionListener attribute of a commandButton. The following is an example of passing a ManagedBean property as well as passing a method signature:
Main Page
<ui:include src="/jointeam.xhtml">
<ui:param name="propertyValue" value="#{managedBean.property1} />
<ui:param name="method" value="#{managedBean.performAction()}" />
</ui:include>
jointeam.xhtml
...
<h:inputText value="#{propertyValue}" />
...
<p:commandButton value="Submit" actionListener="#{method}" />
You can see how powerful this is in terms of code reuse and for many instances is less verbose and easier to use than composite components.

Related

Setting f:setPropertyActionListener value with a f:param value

I'm trying to use the setPropertyActionListener tag to set a value in my backing bean. However, it doesn't work as I expected.
Context: userService is an instance of my backing bean, which contains an int member, reqID. This, in turn, is the key to a map of objects that belong to a class called User. I'm trying to create a page that will list all instances of User, and provide a button to visit a separate view that shows that particular User's information. To do this, I'm attempting to set userService.reqID to the id of the chosen User so it can generate a reference to that user for the next view (which is done in the call userService.toUserInfo).
If I use the xhtml snippet below:
<ui:define name="content">
<h:form>
<h:panelGrid>
<ui:repeat value="#{userService.UserList.getUserList()}" var="user">
<li>
<h:outputText value="#{user.name}" />
<h:commandButton value="View details of #{user.name}" action="#{userService.toUserInfo}">
<f:param name="id" value="#{user.id}" />
<f:setPropertyActionListener target="#{userService.reqID}" value="#{id}"/>
</h:commandButton>
</li>
</ui:repeat>
</h:panelGrid>
</h:form>
</ui:define>
The tag does not appear to evaluate id correctly and I get a Null Pointer Exception.
Earlier, I tried changing my setPropertyActionListenerTag so it read out as:
<f:setPropertyActionListener target="#{userService.reqID}" value="id"/>
which gave me an error, because the tag was sending the string "id" as opposed to the int value of the parameter.
Is there some way to force f:setPropertyActionListener to evaluate the expression under value? Or is there another tag that will allow me to do this?
Also, is ui:param used appropriately here?
The <f:param> (and <ui:param>) doesn't work that way. The <f:param> is intented to add HTTP request parameters to outcome of <h:xxxLink> and <h:xxxButton> components, and to parameterize the message format in <h:outputFormat>. The <ui:param> is intented to pass Facelet context parameters to <ui:include>, <ui:decorate> and <ui:define>. Mojarra had the bug that it also behaves like <c:set> without a scope. This is not the intented usage.
Just use <c:set> without a scope if it's absolutely necessary to "alias" a (long) EL expression.
<c:set var="id" value="#{user.id}" />
Put it outside the <h:commandLink> though. Also in this construct, it's kind of weird. It doesn't make the code better. I'd just leave out it.
<f:setPropertyActionListener ... value="#{user.id}" />
See also:
Setting ui:param conditionally
what is the scope of <ui:param> in JSF?
Defining and reusing an EL variable in JSF page
Unrelated to the concrete problem, if you're using EL 2.2 (as you're using JSF 2.2, you undoubtedly are as it requires a minimum of Servlet 3.0, which goes hand in hand with EL 2.2), then just pass it as bean action method argument without <f:setPropertyActionListener> mess. See also a.o. Invoke direct methods or methods with arguments / variables / parameters in EL and How can I pass selected row to commandLink inside dataTable?
<h:commandButton ... action="#{userService.toUserInfo(user.id)}">
On again another unrelated note, such a "View user" or "Edit user" request is usually idempotent. You'd better use <h:link> (yes, with <f:param>) for this. See also a.o. Creating master-detail pages for entities, how to link them and which bean scope to choose and How to navigate in JSF? How to make URL reflect current page (and not previous one).
Oh, that <h:panelGrid> around the <ui:repeat><li> doesn't make sense in HTML perspective. Get rid of it and use <ul> instead. See also HTMLDog HTML Beginner tutorial.

How to call the same method after every include of a .xhtml page in JSF?

I have the following part of a .xhtml page:
<ui:composition template="./templates/template.xhtml">
<ui:define name="mainContent">
<ui:include src="include/includeAbleEditor.xhtml">
<ui:param name="includeParam" value="MyClass" />
</ui:include>
<ui:include src="include/includeAbleEditor.xhtml">
<ui:param name="includeParam" value="YourClass" />
</ui:include>
</ui:define>
In the "includeAbleEditor.xhtml" I want to call a method after it was included (In this case this should happend two times).
Now I tried to solve it like this: (metadata tag is part of the includeAbleEditor.xhtml)
<f:metadata>
<f:event type="preRenderView" listener="#{editor.onload}" />
<f:attribute name="textFieldId" value="#{includeParam}" />
</f:metadata>
The Problem:
The method is being called only once. But it should be called two times. Once with the parameter "MyClass" and once with "YourClass".
Do you have any suggestions?
Thanks a lot!
There can be only one <f:metadata> in the entire view and it must be in the top level view. Unlike e.g. <f:view>, they don't "extend" each other and all others will be ignored.
You actually don't need it here. It's only necessary whenever you need to attach <f:viewParam> and/or <f:viewAction> to the specific view. The <f:event> doesn't require a <f:metadata>. It will just be hooked to the parent UIComponent. It was during JSF 2.0/2.1 ages (when <f:viewAction> didn't exist) being abused to have a hook to invoke a listener after <f:viewParam> values are being set. It's just for self-documentary purposes being placed in the same <f:metadata> as where all <f:viewParam>s are.
So, just get rid of it.
<f:event type="preRenderView" listener="#{editor.onload(includeParam)}" />
That said, postAddToView is likely a better event to hook this all on. And to avoid "Duplicate component ID" errors over all place later on, consider wrapping it in <f:subview> or making it a composite.
See also:
When using <ui:composition> templating, where should I declare the <f:metadata>?
What can <f:metadata>, <f:viewParam> and <f:viewAction> be used for?
Avoiding duplicate ids when reusing facelets compositions in the same naming container

PrimeFaces p:ajax Unable to resolve bean

I am writing an application with PrimeFaces 5, currently I am writing a screen with a couple of AutoComplete elements, with the idea that the value of one autocomplete influences the selections available in the second autocomplete.
The way I have tried to get this to work is that when the first autocomplete it filled in, an Ajax event is fired to update the backing bean with the value, so that when the second autocomplete is invoked, it had the value from the first autocompleted ready to switch on.
This is the page:
<ui:composition
xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://xmlns.jcp.org/jsf/passthrough"
xmlns:pf="http://primefaces.org/ui">
<pf:panel id="header" header="Details" style="margin-bottom:20px">
<h:panelGrid columns="3" style="margin-bottom:10px;border-style:solid;border-width:0.1em;width:100%" cellpadding="5">
<pf:outputLabel id="input1Label" for="input1" value="Specify Input 1" />
<pf:autoComplete id="input1" value="#{bean.input1}" completeMethod="#{bean.completeInput1}"
var="input1" itemLabel="#{input1}" itemValue="#{input1}" >
<pf:ajax event="itemSelect" listener="#{bean.input1ItemSelect}"/>
</pf:autoComplete>
<pf:message id="input1Msg" for="input1"/>
<pf:outputLabel id="input2Label" for="input2" value="Input 2?" />
<pf:autoComplete id="input2" value="#{bean.input2}" completeMethod="#{bean.completeInput2}"
var="input2" itemLabel="#{input2}" itemValue="#{input2}" />
<pf:message id="input2Msg" for="input2"/>
</h:panelGrid>
</pf:panel>
</ui:composition>
However when a value is selected in input1, I get this error:
Unreachable, identifier 'bean' resolved to null: javax.el.PropertyNotFoundException: Target Unreachable, identifier 'bean' resolved to null
Now the next thing to point out is that this composition is included in a parent composition and "bean" is passed in as a parameter in the following fashion:
<c:forEach items="#{parentBean.blockNames}" var="blockName" varStatus="loop">
<f:subview id="block_subview_#{loop.index}">
<ui:include src="#{blockName}">
<ui:param name="bean" value="#{parentBean.blockBeans[loop.index]}"/>
</ui:include>
</f:subview>
</c:forEach>
What I've been able to establish is that if I change the reference "bean" in the pf:ajax tag to a named bean it is able to resolve the bean reference and attempts to invoke the listener method. So it seems like for some reason the pf:ajax tag is unable to cope with the "bean" reference because it is not the name of an actual bean but rather the name of a bean parameter passed in from the parent. However all the other tags are perfectly able to resolve "bean" here.
Is there a way round this?
Edit:
Changing the pf:ajax to a f:ajax seems to make the error go away, at least the correct listener method is then invoked. I'd rather not use this approach but maybe this information is useful.
You could try to put the content of the included page in a composite component and then use the composite component instead of the ui:include.
I worked at several complex JSF websites and never had any problems with the composite component technique while those ui:include always created some kind of problems in a loop.
Found out the cause, turns out the backing bean (or specifically, the backing bean of the parent page) was using #RequestScoped (or rather it was defaulting to this since no scope was specified), so presumably no longer existed by the time the user invoked the ajax call to it. Changing it to #ViewScoped fixed the problem.
Well,
this is probably happening because of the c:forEach tag. Try to use ui:repeat instead.
c:forEach is not a JSF tag, and it may cause confusion.

Pass an input value directly as action method argument

Is there a way to do pass an input value as a action's parameter without using managed properties?
i.e.
<h:form>
<h:inputText id="input" />
<h:commandButton action="#{someBean.doSome(input)}" />
</h:form>
Yes, it's during the form submit already there in the JSF component state. Just bind the input component to the view by binding attribute, which will reference an UIInput instance, which in turn has a getValue() method for the very purpose of retrieving the input value (so that you can pass it as action method argument):
<h:form>
<h:inputText ... binding="#{input}" />
<h:commandButton ... action="#{someBean.doSome(input.value)}" />
</h:form>
The properness of this approach is however highly questionable and depends on concrete functional requirements. This approach is namely basically tight-coupling the view with the model and therefore considered a bad practice.
See also:
How to send form input values and invoke a method in JSF bean
How does the 'binding' attribute work in JSF? When and how should it be used?

Binding a JSF bean to a included JSF

I'm at the end of my rope with this one. I'm new to JSF so this is probably my misunderstanding of a lot of stuff.
<ui:composition>
<f:view>
<tr:form>
<ui:fragment rendered="#{param['type'] eq 'myType'}">
<ui:include src="/home/myPage.jspx" />
</ui:fragment>
......
I pass the page a certain type, it display's certain fields/criteria for a form and a bean backs it all because there is a single search.
Within myPage.jspx I have:
action="#{MyBean.submitForm}"
does not work, although a onsubmit="alert('hi');" does work as an attribute of the form element.
I guess what's most confusing is that
valueChangeListener="#{MyBean.stateChanged}"
does work on a field in the myPage.jspx
Why does the action (attribute of a button) not work?
During processing of the form submit, if the button or one of its parent components is not rendered, then the button's action won't be invoked. You need to make sure that the rendered attribute evaluates the same during processing of the form submit as it did when the form was displayed. In your case, you're depending on the value of a request parameter with the name type.
In this particular case, you could solve the problem by retaining the request parameter type by a <f:param> nested in the command button:
<h:commandButton ...>
<f:param name="type" value="#{param.type}" />
</h:commandButton>
Or, if you're using JSF 2.0, placing the bean in the view scope and setting the type parameter in the managed bean by <f:viewParam> can also solve it.
<f:metadata>
<f:viewParam name="type" value="#{bean.type}" />
</f:metadata>
...
<ui:fragment rendered="#{bean.type eq 'myType'}">
See also:
commandButton/commandLink/ajax action/listener method not invoked or input value not updated

Resources