inject ui:param into backend bean

Question

I'm working on an item list and maintenance combo page using jsf2. In this combo page, the left panel should show rows of item with edit button on each row. When edit button is clicked, the right panel will need to show a edit page of the selected item. This will need to be done with ajax request. I'm trying to put the right panel edit page into a include file. Because there is another place where user can access this edit page.

My question is below: This edit page has its own backend bean. This backend bean needs some info about the selected item in order to initailze and display the item correctly. How can I pass the selected item info to the backend bean of the edit page each time user clicked on the edit button? Please note that display of this edit page needs to be done as an ajax request.

thanks

Hi HockChai Lim, you are asking for basic JSF-2 knowledge here - any tutorial would be the best place to start. Listings in JSF-2 are e.g. done via h:dataTable, selections via h:commandButton and ajax-rerender via f:ajax with a fitting render-attribute. As soon as you have a possible example and run into problems... stackoverflow is the point to ask. — L-Ray

Patrick Patrick · Accepted Answer · 2013-12-07T14:58:52

Hej HockChai Lim,

you could use a dataTable like this:

<h:form id="myForm">
<h:dataTable id="myTable value="#{backingBeanA.items}" var="item">
<h:column>
 <f:facet name="header">ItemName</f:facet>
 <h:outputText value="#{item.name}">
</h:column>
<h:column>
 <h:panelGrid columns="2">
  <h:commandButton id="editBtn" action="#{backingBeanB.editItem(item)}" value="edit Item"/>
  <h:commandButton id="deleteBtn" action="#{backingBeanA.deleteItem(item)}" value="delete"/>
 </h:panelGrid>
</h:column>
</h:dataTable>
</h:form>

in backingBeanB you need the method

// saves the item in item2Edit 
// and returns the editPage.xhtml
// there you could get the item from
// backingBeanB with
// #{backingBeanB.item2Edit}
public String editItem(Item item) {
  this.item2Edit = item;
  return "editPage";

for deleting the item in backingBeanA, also the method

// saves the given item in item2Delete member and
// returns a deletion confirm page
public String deleteItem(Item item) {
  this.item2Delete = item;
  return "confirmItemDeletion";

or you could use the

<f:setPropertyListener target="#{backingBeanB.item}" value="item"/>

within your dataTable

hope this helps a bit..

Patrick

inject ui:param into backend bean

1 Answers