Forum:

Issue with command button image in data table.

Ranch Hand

Posts: 59

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Posts: 28479

210

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

Often the most important part of the news is what they didn't tell.

prasad kakani

Ranch Hand

Posts: 59

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi Tim,

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

This is my code..
//DataTableRowExpansion.xhtml

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
<h:outputScript library="js" name="common.js" />
<h:outputStylesheet library="css" name="table-style.css"/>
</h:head>
<h:body>
<h:form id="parentformID">
   	<h1>Order Data Table</h1>
 		
    		<h:dataTable id="parenttableID"  binding="#{order.dmdDataTable}" value="#{order.allOrderList}" var="o" styleClass="order-table"
    			headerClass="order-table-header" rowClasses="order-table-odd-row,order-table-even-row">
    			
    			<h:column id="orderNoID">
    				<f:facet name="header">Order No</f:facet>
    				#{o.orderNo}
    			</h:column>
 
    			<h:column id="orderDetailsID">
    				<f:facet name="header">Order Details</f:facet>
    				<h:commandButton rendered="#{o.cmdbtnrender}"  image="../images/plusfinal.jpg" id="cmdBtnID" actionListener="#{order.populateDataTable}">
    					<f:param name="flag" value="#{order.flagValue}"/>
    				</h:commandButton>
    				<h:outputText value="#{o.orderDetailsName}"/>
    			</h:column>
 
    			<h:column id="priceID">
    				<f:facet name="header">Price</f:facet>
    				#{o.price}
    			</h:column>
 
    			<h:column id="quantityID">
    				<f:facet name="header">Quantity</f:facet>
    				#{o.qty}
    			</h:column>
 
    		</h:dataTable>
    		
    		</h:form>
 </h:body>
</html>

//OrderBean.java

/**
 *
 */

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;

import javax.el.ValueExpression;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
import javax.faces.component.html.HtmlCommandButton;
import javax.faces.component.html.HtmlDataTable;
import javax.faces.context.FacesContext;
import javax.faces.event.ActionEvent;

/**
 * @author Venkata_P02
 *
 */
@ManagedBean(name="order")
@SessionScoped
public class OrderBean implements Serializable{

private static final long serialVersionUID = 1L;
	
	private boolean flagValue = true;
	
	private List<OrderBean.Order> orderList ;
	
	private HtmlDataTable dmdDataTable;
	
	/**
	 * @return the flagValue
	 */
	public boolean isFlagValue() {
		return flagValue;
	}
	/**
	 * @param flagValue the flagValue to set
	 */
	public void setFlagValue(boolean flagValue) {
		this.flagValue = flagValue;
	}

/**
	 * @return the dmdDataTable
	 */
	public HtmlDataTable getDmdDataTable() {
		return dmdDataTable;
	}
	/**
	 * @param dmdDataTable the dmdDataTable to set
	 */
	public void setDmdDataTable(HtmlDataTable dmdDataTable) {
		this.dmdDataTable = dmdDataTable;
	}
	
	/**
	 * @return the orderList
	 */
	public List<OrderBean.Order> getOrderList() {
		return orderList;
	}
	/**
	 * @param orderList the orderList to set
	 */
	public void setOrderList(List<OrderBean.Order> orderList) {
		this.orderList = orderList;
	}
	/**
	 *
	 */
	public List<OrderBean.Order> getAllOrderList(){

orderList = new ArrayList<OrderBean.Order>();

List<OrderBean.OrderDetails> orderDetailsList1 = new ArrayList<OrderBean.OrderDetails>();
		OrderBean.OrderDetails orderDetails1 = new OrderBean.OrderDetails("1/1/2012", "UniLever", "distributor1");
		orderDetailsList1.add(orderDetails1);
		OrderBean.OrderDetails orderDetails2 = new OrderBean.OrderDetails("2/1/2012", "P&G", "distributor2");
		orderDetailsList1.add(orderDetails2);

List<OrderBean.OrderDetails> orderDetailsList2 = new ArrayList<OrderBean.OrderDetails>();

OrderBean.OrderDetails orderDetails3 = new OrderBean.OrderDetails("1/1/2012", "AAA", "distributor1");
		orderDetailsList2.add(orderDetails3);
		OrderBean.OrderDetails orderDetails4 = new OrderBean.OrderDetails("2/1/2012", "BBB", "distributor2");
		orderDetailsList2.add(orderDetails4);

OrderBean.Order order1 = new OrderBean.Order("1", true,"Order1",true,orderDetailsList1, 1000.00,10);
		orderList.add(order1);
		OrderBean.Order order2 = new OrderBean.Order("2", true,"Order2",true,orderDetailsList2, 2000.00,20);
		orderList.add(order2);

return orderList;
	}
	/**
	 *
	 * @param valueExpression
	 * @param valueType
	 * @return
	 */
	private ValueExpression createValueExpression(String valueExpression, Class<?> valueType) {
        FacesContext facesContext = FacesContext.getCurrentInstance();
        return facesContext.getApplication().getExpressionFactory().createValueExpression(
            facesContext.getELContext(), valueExpression, valueType);
    }
	/**
	 * 
	 * @param actionEvent
	 */
	public void populateDataTable(ActionEvent actionEvent){
		try{
			FacesContext context = FacesContext.getCurrentInstance();
			Map<String,String> requestMap = context.getExternalContext().getRequestParameterMap();
			String value = (String)requestMap.get("flag");
			System.out.println("value-->"+value);
			//HtmlCommandButton htmlCommandButton = (HtmlCommandButton)dmdDataTable.getChildren().get(1).getChildren().get(1);
			//HtmlCommandButton htmlCommandButton =(HtmlCommandButton)actionEvent.getSource();

//System.out.println("htmlCommandButton.getClientId()-->"+htmlCommandButton.getClientId());
			OrderBean.Order order3 = new OrderBean.Order("1", false,"suborder",false,null, 2000.00,50);
			HtmlCommandButton htmlCommandButton = (HtmlCommandButton) dmdDataTable.getChildren().get(1).getChildren().get(0);
			if(value.equals("true")){
				orderList.add(dmdDataTable.getRowIndex()+1,order3);
				flagValue = false;
				htmlCommandButton.setImage("./images/minusfinal.jpg");
				/*htmlCommandButton.setValueExpression("value",createValueExpression(htmlCommandButton.getImage(), String.class));
				dmdDataTable.getChildren().get(1).getChildren().add(0,htmlCommandButton);*/
			}if(value.equals("false")){
				flagValue = true;
				htmlCommandButton.setImage("./images/plusfinal.jpg");
				orderList.remove(dmdDataTable.getRowIndex()+1);
			}
			
			dmdDataTable.setValueExpression("value",createValueExpression("#{order.orderList}", List.class));
		}catch(Exception e){
			e.printStackTrace();
		}

}

/**
	 * @param orderList the orderList to set
	 */
	public static class Order implements Serializable{

/**
		 *
		 */
		private static final long serialVersionUID = 1L;
		HtmlCommandButton htmlcmdbutton;

String orderNo;
		boolean cmdbtnrender;
		String orderDetailsName;
		boolean flagValue;
		List<OrderBean.OrderDetails> orderDetails;
		Double price;
		int qty;
		/**
		 * @return the cmdbtnrender
		 */
		public boolean isCmdbtnrender() {
			return cmdbtnrender;
		}

/**
		 * @param cmdbtnrender the cmdbtnrender to set
		 */
		public void setCmdbtnrender(boolean cmdbtnrender) {
			this.cmdbtnrender = cmdbtnrender;
		}

public Order(String orderNo, boolean cmdbtnrender,
				String orderDetailsName, boolean flagValue,
				List<OrderDetails> orderDetails, Double price, int qty) {
			super();
			this.orderNo = orderNo;
			this.cmdbtnrender = cmdbtnrender;
			this.orderDetailsName = orderDetailsName;
			this.flagValue = flagValue;
			this.orderDetails = orderDetails;
			this.price = price;
			this.qty = qty;
		}

/**
		 * @return the orderNo
		 */
		public String getOrderNo() {
			return orderNo;
		}

/**
		 * @param orderNo the orderNo to set
		 */
		public void setOrderNo(String orderNo) {
			this.orderNo = orderNo;
		}

/**
		 * @return the orderDetails
		 */
		public List<OrderBean.OrderDetails> getOrderDetails() {
			return orderDetails;
		}

/**
		 * @param orderDetails the orderDetails to set
		 */
		public void setOrderDetails(List<OrderBean.OrderDetails> orderDetails) {
			this.orderDetails = orderDetails;
		}

/**
		 * @return the price
		 */
		public Double getPrice() {
			return price;
		}

/**
		 * @param price the price to set
		 */
		public void setPrice(Double price) {
			this.price = price;
		}

/**
		 * @return the qty
		 */
		public int getQty() {
			return qty;
		}

/**
		 * @param qty the qty to set
		 */
		public void setQty(int qty) {
			this.qty = qty;
		}

/**
		 * @return the orderDetailsName
		 */
		public String getOrderDetailsName() {
			return orderDetailsName;
		}

/**
		 * @param orderDetailsName the orderDetailsName to set
		 */
		public void setOrderDetailsName(String orderDetailsName) {
			this.orderDetailsName = orderDetailsName;
		}

/**
		 * @return the flagValue
		 */
		public boolean isFlagValue() {
			return flagValue;
		}

/**
		 * @param flagValue the flagValue to set
		 */
		public void setFlagValue(boolean flagValue) {
			this.flagValue = flagValue;
		}

}

public static class OrderDetails implements Serializable
	{
		/**
		 *
		 */
		private static final long serialVersionUID = 1L;
		public String orderdate;
		public String prodCompName;
		public String distributerName;

public OrderDetails(String orderdate, String prodCompName,
				String distributerName) {
			super();
			this.orderdate = orderdate;
			this.prodCompName = prodCompName;
			this.distributerName = distributerName;
		}

public OrderDetails() {
			super();
			// TODO Auto-generated constructor stub
		}

/**
		 * @return the orderdate
		 */
		public String getOrderdate() {
			return orderdate;
		}
		/**
		 * @param orderdate the orderdate to set
		 */
		public void setOrderdate(String orderdate) {
			this.orderdate = orderdate;
		}
		/**
		 * @return the prodCompName
		 */
		public String getProdCompName() {
			return prodCompName;
		}
		/**
		 * @param prodCompName the prodCompName to set
		 */
		public void setProdCompName(String prodCompName) {
			this.prodCompName = prodCompName;
		}
		/**
		 * @return the distributerName
		 */
		public String getDistributerName() {
			return distributerName;
		}
		/**
		 * @param distributerName the distributerName to set
		 */
		public void setDistributerName(String distributerName) {
			this.distributerName = distributerName;
		}

}
}

Tim Holloway

Saloon Keeper

Posts: 28479

210

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

Often the most important part of the news is what they didn't tell.

Bajrang Asthana

Ranch Hand

Posts: 32

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Posts: 59

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!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">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Insert title here</title>
<h:outputScript library="js" name="common.js" />
<h:outputStylesheet library="css" name="table-style.css"/>
</h:head>
<h:body>
<h:form id="parentformID">
   	<h1>Order Data Table</h1>
 		
    		<h:dataTable id="parenttableID"  value="#{order.allOrderList}" var="myorder" border="1">
    			
    			<h:column id="orderNoID">
    				<f:facet name="header">Order No</f:facet>
    				#{myorder.orderNo}
    			</h:column>
 
    			<h:column id="orderDetailsID">
    				<f:facet name="header">Order Details</f:facet>
    				<h:commandButton rendered="#{myorder.cmdbtnrender}"  image="#{myorder.imageUrl}" id="cmdBtnID"     					<f:ajax listener="#{myorder.populateDataTable}">
 event="click" render=":parentformID:parenttableID" immediate="true"/>
    				</h:commandButton>
    				<h:outputText value="#{myorder.orderDetailsName}"/>
    			</h:column>
 
    			<h:column id="priceID">
    				<f:facet name="header">Price</f:facet>
    				#{myorder.price}
    			</h:column>
 
    			<h:column id="quantityID">
    				<f:facet name="header">Quantity</f:facet>
    				#{myorder.qty}
    			</h:column>
 
    		</h:dataTable>
    		
    		</h:form>
 </h:body>
</html>

//OrderBean.java

//Order.java(Pojo class)

package com.example;

import java.io.Serializable;
import java.util.ArrayList;
import java.util.List;

import javax.faces.model.ListDataModel;

public class Order implements Serializable{

/**
	 *
	 */
	private static final long serialVersionUID = 1L;
	private boolean flagValue = true;
	private String orderNo;
	boolean cmdbtnrender;
	private String orderDetailsName;
	private List<OrderDetails> orderDetails;
	private Double price;
	private int qty;
	private String imageUrl = "../images/plusfinal.jpg";
	private List<Order> orderList;
	private ListDataModel listDataModel ;

public Order(String orderNo, boolean cmdbtnrender,
			String orderDetailsName, boolean flagValue,
			List<OrderDetails> orderDetails, Double price, int qty) {
		super();
		this.orderNo = orderNo;
		this.cmdbtnrender = cmdbtnrender;
		this.orderDetailsName = orderDetailsName;
		this.flagValue = flagValue;
		this.orderDetails = orderDetails;
		this.price = price;
		this.qty = qty;
	}

public Order() {
		super();
		// TODO Auto-generated constructor stub
	}

//getter and setter methods for all properties.
	
	/**
	 * 
	 * @param 
	 */
	public void changeImage(){
		orderList = getTotalOrderList();
		System.out.println("In change Image method...");
		listDataModel = new ListDataModel<Order>(orderList);
		int rowIndex = listDataModel.getRowIndex();
		Order order = (Order)  listDataModel.getRowData();
		order.setImageUrl("../images/minusfinal.jpg");
		orderList.add(rowIndex,order);
		Order order3 = new Order("sub1", true,"SubOrder",true , null, 1000.00,20);
		order3.setCmdbtnrender(false);
		orderList.add(rowIndex+1, order3);
		listDataModel.setWrappedData(orderList);		
	}
	public List<Order> getTotalOrderList(){

orderList = new ArrayList<Order>();

List<OrderDetails> orderDetailsList1 = new ArrayList<OrderDetails>();
		OrderDetails orderDetails1 = new OrderDetails("1/1/2012", "UniLever", "distributor1");
		orderDetailsList1.add(orderDetails1);
		OrderDetails orderDetails2 = new OrderDetails("2/1/2012", "P&G", "distributor2");
		orderDetailsList1.add(orderDetails2);

List<OrderDetails> orderDetailsList2 = new ArrayList<OrderDetails>();

OrderDetails orderDetails3 = new OrderDetails("1/1/2012", "AAA", "distributor1");
		orderDetailsList2.add(orderDetails3);
		OrderDetails orderDetails4 = new OrderDetails("2/1/2012", "BBB", "distributor2");
		orderDetailsList2.add(orderDetails4);

Order order1 = new Order("1", true,"Order1",true,orderDetailsList1, 1000.00,10);
		orderList.add(order1);
		Order order2 = new Order("2", true,"Order2",true,orderDetailsList2, 2000.00,20);
		orderList.add(order2);

return orderList;
	}
	
		
}

//OrderDetails.java

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

Regards, Prasad

Tim Holloway

Saloon Keeper

Posts: 28479

210

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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 .

Often the most important part of the news is what they didn't tell.

prasad kakani

Ranch Hand

Posts: 59

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Posts: 28479

210

I like...

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

Often the most important part of the news is what they didn't tell.

prasad kakani

Ranch Hand

Posts: 59

posted 12 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

You didn't tell me he was so big. Unlike this tiny ad:

Smokeless wood heat with a rocket mass heater

https://woodheat.net