How to create an EL-Reference pointing to a Resource in JSF - jsf

I am currently using something like this in a composite component to create an EL-Reference to a resource:
<composite:implementation>
<ui:param name="resourceName" value="images:#{cc.resourceName}" />
<h:commandButton id="button" image="#{resource[resourceName]}" />
</composite:implementation>
As you can see, ui:param refers to a method named getResourceName() in the component class. This method determines which resource to load.
I would like to have a solution where the whole ui:param thing is unneccessary, something like:
<composite:implementation>
<h:commandButton id="button" image="#{cc.resource}" />
</composite:implementation>
Currently I don't even know if this is possible.
Any ideas?
Thx,
DS

If you do not want to use Resource API provided by JSF then you can just pass the context relative url to the image,
For example:
If this is your custom component:
<util:mbt actionMethod="#{bean.show}" resourceName="#{bean.img}" />
change it to:
<util:mbt actionMethod="#{bean.show}" resource="#{bean.img}" />
where bean.getImg() returns a String "/resources/images/test.jpg"
Alternatively, use resource API when adding the component like this:
<ui:param name="resourceName" value="images:#{bean.img}" />
<util:mbt actionMethod="#{bean.show}" resource="#{resource[resourceName]}" />
and use it like this:
<composite:implementation>
.....
<h:commandButton id="button" action="#{cc.attrs.actionMethod}" image="#{cc.attrs.resource}" />
.....
</composite:implementation>
The question still remains in my mind. "But why?"

Related

Implementing a return navigation in JSF

I am looking for a JSF coding practice that will allow one page to link to another that, when it completes, will return to the original page. So I have a page viewDoc.xhtml that has this:
<f:metadata>
<f:viewParam name="id" value="#{viewDoc.id}" />
</f:metadata>
( bunch of stuff to show the document indicated by "id" )
<p:button value="Edit Name/Title"
outcome="editnametitle">
<f:param name="id" value="#{param.id}" />
</p:button>
Then I have a page editnametitle.xhtml that has this:
<h:form>
(input fields and stuff)
<p:commandButton value="Save Changes"
action="#{editNameTitle.doSave()}"
/>
<p:commandButton value="Cancel"
action="#{editNameTitle.doCancel()}"
immediate="true"
/>
</h:form>
So how do I implement the backing bean methods doSave() and doCancel() such that when they finish they navigate back to viewDoc.xhtml with the id parameter of the document included?
I haven't found any guidance for a solution and I haven't been happy with any approach I have thought of so far. I have thought of something like adding to the p:button the return path like:
<p:button value="Edit Name/Title"
outcome="editnametitle">
<f:param name="id" value="#{param.id}" />
<f:param name="returnoutcome" value="viewDoc" />
</p:button>
Is this the right approach? Or is there some JSF facility that does this that I missed?
Yes, that's basically it if those requests are idempotent.
One possible improvement is that you can dynamically obtain the current view ID as below:
<f:param name="returnoutcome" value="#{view.viewId}" />
This allows abstracting away it in a reusable custom tag.
Personally I'd use parameter name "from" too as that's more short.

Every include should refer to other instance

I include a part of the XHTML page to my Web Application. This part can be included multiple times. And that's the problem! Because every include refers to the same java object. That means that every element has the same value. But I want for each include a new Java object. So whats the best way to solve this problem?
Main page with includes:
<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>
includAbleEditor.xhtml
<h:commandButton value="#{editorVisibility.evb.value}"
action="#{editorVisibility.evb.toggle}" />
<h:inputTextarea rendered="#{editorVisibility.evb.enabled}" />
This <h:inputTextarea> is an example for my problem. Every included inputTextarea has a toggle button. By clicking the button the textarea should be shown or hidden. But because of the same reference of the boolean value all <h:inputTextarea> will always have the same rendered value.
Do you have any suggestions?
Thanks a lot!
You'll have to hold as many instances of editorVisibility.evb as you have editors. You could for example create a List<TypeOfEvb> evbList in your EditorVisibility bean, and pass only one element to the <ui:include> as a <ui:param>:
Main page
<ui:include src="include/includeAbleEditor.xhtml">
<ui:param name="includeParam" value="MyClass" />
<ui:param name="evb" value="#{editorVisibility.evbList[0]}" />
</ui:include>
includAbleEditor.xhtml
<h:commandButton value="#{evb.value}"
action="#{evb.toggle}" />
<h:inputTextarea rendered="#{evb.enabled}" />
You could also create a composite component.
See also:
http://www.mkyong.com/jsf2/composite-components-in-jsf-2-0/

Cancel button doesn't work in case of validation error

i have a form with some inputs that have validation (required=true)
and when i click on the cancel button in case of validation error, the cancel button doesn't navigate to previous page, instead it removes the validation error (i think it goes back one step that was before the validation error ?)
here's my code:
<h:form>
<h:inputText value="#{myBean.nickName}" id="nickname" required="true"
requiredMessage="nickname should be specified" />
<h:commandLink immediate="true" id="cancel_link" onclick="history.back(); return false" style="float: left;margin: 118px 189px 0 0;">
<h:graphicImage width="90" height="28" value="#{resource['images:blu_btnCancel.png']}" />
</h:commandLink>
</h:form>
please advise how to fix that.
The JavaScript history.back() function takes you to the previous synchronous request, not to the previous view as you seemed to expect.
Even though the history.back() is terrible this way (unreliable, hackable, etc), a quick fix would be to send an ajax request on form submit instead of a synchronous request.
<h:form>
...
<h:commandButton value="submit">
<f:ajax execute="#form" render="#form" />
</h:commandButton>
</h:form>
Ajax requests doesn't account as browser history.
A more robust way is to just pass the identifier of the previous view along during navigation and then use <h:link> to link back to it. E.g.
<h:link value="Go to next view" outcome="nextview">
<f:param name="from" value="#{view.viewId}" />
<h:link>
And then in the nextview.xhtml
<f:metadata>
<f:viewParam name="from" />
</f:metadata>
...
<h:link ... outcome="#{from}" rendered="#{not empty from}">
<h:graphicImage ... />
</h:link>
If you're navigating by POST, you might consider using the flash scope to remember the initial view.
Unrelated to the concrete problem, the proper way to use <h:graphicImage> with JSF2 resources is to just use its name attribute instead of its value attribute with a #{resource} which is plain clumsy.
Replace
<h:graphicImage width="90" height="28" value="#{resource['images:blu_btnCancel.png']}" />
by
<h:graphicImage name="images/blu_btnCancel.png" width="90" height="28" />
Note that the library name images is here just replaced by the path name. The usage of the name "images" as library name is highly questionable. See also What is the JSF resource library for and how should it be used?

Pass actionListener method to commandButton within a component

first, please forgive my ignorance and inability so use the search engine (i swear i have searched long and often but did not find any satisfying answer to this problem).
I have a bean implementing a action-listener compatible method:
#ManagedBean(name = "myBean")
#ViewScoped
class Bean{
public String myAction(ActionEvent event){
... = event.getComponent().getAttributes().get("something");
}
}
Then, i have a jsf component like this:
<composite:interface>
<composite:attribute name="actionBean" required="true"/>
<composite:attribute name="actionMethod" method-signature="void myAction(javax.faces.event.ActionEvent)" />
</composite:interface>
<composite:implementation>
<h:form>
<p:commandButton actionListener="#{cc.attrs.actionBean[cc.attrs.actionMethod]}">
<f:attribute name="something" value="somevalue" />
</p:commandButton>
</h:form>
</composite:implementation>
It is called something like this:
<namespace:myComponent actionBean="#{myBean}" actionMethod="myAction" />
I know that this call is not working, and i wonder how to do it right!
My main intention is that i want to have a relatively generic jsf-component (would be nice to have it reusable later), that contains a button. On click to this button i want to pass an object (no simple string! in case of string i would just use action="..." and pass it via f:param). With the actionListener method i take the object via event.getComponent().getAttributes().get("something").
I think the signature void myAction(javax.faces.event.ActionEvent) is the problem that breaks passing the related method to the component, isnt it? Is it in general possible to pass method with any argument to jsf components (and if yes, how)?
So, i hope there is a possible solution to solve the general problem with altering the above strategy or maybe use something nice and different (in general i prefer not to use any hacks or workarounds, but like to use what is intended by the framework).
Thanks if somebody would find the time to point me the way! In case this question already exists, would be nice to get to the related post and have this deleted.
Try following:
<namespace:myComponent myAction="#{myBean.myAction}"/>
And composite component:
<composite:interface>
<composite:attribute name="myAction"
required="true"
method-signature="void myAction(javax.faces.event.ActionEvent)"
targetAttributeName="actionListener"/>
</composite:interface>
<composite:implementation>
<h:form>
<p:commandButton id="myAction">
<f:attribute name="something" value="somevalue" />
</p:commandButton>
</h:form>
</composite:implementation>
Check composite:attribute documentation. It has several options to pass listeners to composite component. I used targetAttributeName for this.

How to parameterize an a4j:commandLink properly?

I have the following problem: I need to redirect from a "list page" to a details page, but I need the id from the list. "record" in this example is the var attribute of a rich:dataTable. First of all I thought about this:
<a4j:commandLink id="detailsLink" value="show details" execute="#this" action="/customerDetails?faces-redirect=true&cusid=#{record.id}" />
But this is invalid syntax, so I tried something like this:
<a4j:commandLink id="detailsLink" value="show details" execute="#this" action="/customerDetails?faces-redirect=true">
<f:attribute name="cusid" value="#{record.id}"/>
</a4j:commandLink>
(I even tried f:param)
On the target page I tried to receive the value with...
<f:metadata>
<f:viewParam required="false" name="cusid" value="#{customerBean.editCustomer}"/>
</f:metadata>
Basically f:metadata works, because when I try it with the following hard coded parameter, I receive its value:
<a4j:commandLink id="detailsLink" value="show details" execute="#this" action="/customerDetails?faces-redirect=true&cusid=120" />
I found a solution, but I'm not sure if this is the right way:
In customerBean I make the following:
public String editCustomer(long customerId)
{
edit(customerId);
return "/customerDetails?faces-redirect=true";
}
But I don't think that this is the usual way to send and receive parameters with Rich Faces. Is there maybe a better solution?
The <a4j:commandLink> sends an ajax POST request while you need a normal GET request. Use <h:link> instead.
<h:link value="show details" outcome="/customerDetails?cusid=120" />
Here's the best way to do it. The example provided passes 2 parameters. You can have more than one. Just use the assignTo attribute and the value attribute. Hope this answers your question.
<a4j:commandLink action="#{myBackingBean.myAction}">
<a4j:param name="jobIdParam" value="#{job.jobNumber}"
assignTo="#{myBackingBean.jobId}" />
<a4j:param name="isDisplayedParam" value="true"
assignTo="#{myBackingBean.displayed}"/>
</a4j:commandLink>

Resources