aspose file tools*
The moose likes JSF and the fly likes Issue with command button image in data table. Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of Java 8 in Action this week in the Java 8 forum!
JavaRanch » Java Forums » Java » JSF
Bookmark "Issue with command button image in data table." Watch "Issue with command button image in data table." New topic
Author

Issue with command button image in data table.

prasad kakani
Ranch Hand

Joined: Jul 15, 2008
Posts: 59
Hi ,

I have a data table, where it contains 4 columns and 4 rows. each row has one image button column.On click of this image, on a perticuler row, the image should be changed to another image. But issue is all images in all rows are getting changed on click of image in a perticuler row .How this can be achieved. so that only that clicked image should be changed.

For a command button tag, we have a action listener, that calls the some method, inside the method we can get the command button from the binded datatable by using getChildrens, and setting the image and adding this button back to datatable. Is this correct approch are not?

Help would be greatly appreciated.

Thanks
Prasad
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 15665
    
  15

Actually, you shouldn't be using ActionListeners so freely. Most of the time, they don't add value, but do add complexity and remove portability and make code harder to test. Use a POJO action method, instead.

In JSF, the more JSF-specific code you write, the more likely that you're not doing it right.

The simpler way to make changeable images in a datatable is to make the image source be one of the column values of the table's DataModel object. That way, to change the image for that particular row, you'd simply change the image source value and refresh the table display. You can do this using a simple POJO action method processor. To make the table display update without re-displaying the entire page, attach an ajax tag to the clickable display element(s). All done with simple POJO. No specialized methods, no mucking around with bindings or other JSF internal properties.


Customer surveys are for companies who didn't pay proper attention to begin with.
prasad kakani
Ranch Hand

Joined: Jul 15, 2008
Posts: 59
Hi Tim,

Thanks for your reply.. Can you just see my code what was wrong in my code.

This is my code..
//DataTableRowExpansion.xhtml


//OrderBean.java
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 15665
    
  15

That's definitely doing it the hard way.

Delete all the event handlers (listeners) from your backing bean.

Replace


With this:


Note that I'm not fluent with the JSF2 ajax tag (I use RichFaces, so some tweaking may be required.

In the backing bean in place of all that ugly listener and component tree code, create this method:


You'll need to add a property to the row model class to hold the "imageURL" value, which is simply the URL of the image to display as a String property.
Bajrang Asthana
Ranch Hand

Joined: May 24, 2011
Posts: 32
I think, It would be good to define an attribute URL in your Order class. You can set this attribute to any url that you want to display in command button.

Something like below -
<code>
<h:commandButton image="#{o.url}" >
</code>

I think, It will be clear to you.
prasad kakani
Ranch Hand

Joined: Jul 15, 2008
Posts: 59
Thank you for reply Tim,

The way you suggested is fine. I have some doubts regarding this.

<h:commandButton rendered="#{o.cmdbtnrender}" image="#{o.buttonURL}" id="cmdBtnID" action="#{o.changeImage}">
<f:ajax event="onclick" render="@this" immediate="true" >
</h:commandButton>

public void changeImage() {
Order row = getAllOrderList().getRowData();
row.setImageURL("newImage");
}

1. where we can populate getAllOrderList() ? i mean in backing bean or Order( Pojo ) class? If we populate the total list in backing bean, how we can access that list in POJO class ,i mean how we can access the getAllOrderList() in Order(Pojo) class.?

2.In case of populating the list in POJO Class i.e Order class, when running the application for the first time table got rendered on the screen. On click of the image, the respective action i.e changeImage method is not getting called, immediatly ,prior to that many times the backing bean datable orderbean.allOrderList() method is getting executed. after some time the flow comes into changeImage() method. Why this is happeing?

please check my code as well. Can you please verify this code is fine or not.
//DataTableRowExpansion.xhtml

//OrderBean.java

//Order.java(Pojo class)

//OrderDetails.java


Kindly request you clarify these two issues. Thanks in advance for your excellant help.

Regards, Prasad


Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 15665
    
  15

It's better to excerpt only the important parts of your code and XML for examples. When you post the whole thing it's hard to understand.

You need to replace this:


With this:


And change this:


into this:


JSF2 added the ability to use a collection directly as a DataModel. However, if you do, you won't get the benefit of the DataModel's display cursor functionality. A lot of people have written a lot of very bad web pages (and code) because they insisted on using a raw collection as their dataTable's model. Don't do that unless you expect never to need feedback on which row is being chosen in a table.

To wrap a collection in a DataModel - and thus gain the additional cursor functionality, use this statement:


You have an "allOrderListModel" and an "orderListModel" in your samples. I hope that they're actually supposed to be the same thing.

As far as POJOS go, the OrderBean itself should be a POJO. Trouble arises when people attempt to make their JSF backing beans into non-POJO objects (meaning that they load them down with gratuitous JSF-specific code and non-model JSF objects).

I should also mention that in my experience, making an inner class for stuff like what you're doing is more trouble than it is worth. Life will be a little simpler if you make Order be a stand-alone class.

Also, any JSF property tag attribute whose name begins with "on" is a client-side Javascript function, not a JSF function. Also, listeners are NOT interactive or immediate. They are auxiliary services called when a form is submitted and cannot be used to asynchronously communicate with the server. Only AJAX can do that, and AJAX doesn't need Listeners. It can (and usually should) fire POJO action methods and property "set" methods.

The user's browser only updates when a form has been submitted (AJAX does a partial form submit, which is sufficient). If you're doing a regular submit, the entire page is re-drawn using the current data values in the Model (backing bean). An AJAX request normally does a partial page update, leaving the rest of the page unchanged, but updating the selected parts of the page using the current data values in the Model .
prasad kakani
Ranch Hand

Joined: Jul 15, 2008
Posts: 59
Hey sorry Tim , i was editing that moment..

I have edited and posted the new code .. Please give your comments on this.. actually this is not working.. it seems.

Please hellp me out.

Thanks
Prasad
Tim Holloway
Saloon Keeper

Joined: Jun 25, 2001
Posts: 15665
    
  15

Unfortunately, I can't do a whole lot more here. A detailed inspection would take time that I'd be getting paid for. You look to be getting on the right track, though.

The main things I saw when scanning over all that stuff were that you apparently didn't initialize the image URL in Order when you first created the Order row. Also you don't actually have to re-wrap the data every time you change the order list. Once the list is wrapped by the datamodel, you can just make changes to the list and its members itself. You can also get the list back using the getWrappedData() method, but it's the same list in either case - the list isn't copied or modified.
prasad kakani
Ranch Hand

Joined: Jul 15, 2008
Posts: 59
Hi Tim,

Thank you sooooo much.. i acheived row expansion in data table with your awesome suggestions and comments ..

I really apreciates your help in this regard.. Thanks once again....

Regards,
Prasad

 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: Issue with command button image in data table.
 
Similar Threads
Action on datatable row is executed on different row if table data is modifed in background
Issue with command button image in data table.
Gather dataTable with selectOneMenu to bean
Dynamic positioning of image in JSP
how to send datatable column value which contains array onclicking of that column, to javascript?