When to go for AJAX components!
Hi All,
I am very new to JSF and we are trying with Spring! I have just started JSF and in our applciation we are planning to use ICEfaces. I am not clear of when to go for AJAX components?
One more requirement in our project is:
We get a list from service and we have to display the values in it vertically using text boxes along with a checkbox side to it so that when user wants to modify the value,she/he checks the box and dynamically text box has to enabled. How do we associate a check box to a text box?
Do we use JSTL to iterate and create a text box and check box?
I nthe same page we have to show a add button, when we click on that a new text box has to appear with out page refresh?
I want you ppl. to help.
Thnx.
~ Kranthi
# 1
Hello Friend,
Well as far as Displaying textboxes & checkboxes with ADD button are concern they could well be managed with core JSF tags without the use of JSTL itration tags.But when it comes to enabled disabled this is where AJAX controls come into picture where we would have to go with an implementation of such controls.
However,let me give you an example of implementing your textboxes/checkbox along with add button issue.
checkout the below example
faces-config.xml :
==============
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE faces-config PUBLIC
"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN"
"http://java.sun.com/dtd/web-facesconfig_1_1.dtd">
<!-- =========== FULL CONFIGURATION FILE ================================== -->
<faces-config>
<managed-bean>
<managed-bean-name>SampleBean</managed-bean-name>
<managed-bean-class>SampleManagedBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<navigation-rule>
<from-view-id>/index.jsp</from-view-id>
<navigation-case>
<from-outcome>1</from-outcome>
<to-view-id>/index.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
Test.jsp :
=======
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Sample Page</title>
</head>
<body>
<f:view>
<h:form>
<!-- trying to display multiple textboxes using datatable collection itrative property -->
<h:dataTable value="#{SampleBean.table}" var="list">
<h:column>
<h:inputText value="#{list.value}"/>
</h:column>
</h:dataTable>
<!-- calls an actionListen method whenever button is being which updates the collection size clicked and ultimately generates action outcome which refershes the with the changed state value -->
<h:commandButton action="1" actionListener="#{SampleBean.actionListen}" value="ADD"/>
</h:form>
</f:view>
</body>
</html>
SampleManagedBean.java :
======================
import java.util.List;
import java.util.ArrayList;
import javax.faces.event.ActionEvent;
/**
*
* @author RaHuL
*/
public class SampleManagedBean {
private List<SimpleBean> table;
/** Creates a new instance of SampleManagedBean */
public SampleManagedBean() {
this.setTable(new ArrayList<SimpleBean>());
for(int i=0; i < 10;i++){
SimpleBean sim = new SimpleBean();
sim.setIndex(new String().valueOf(i));
sim.setValue(new String().valueOf(i+1));
getTable().add(sim);
}
}
public List<SimpleBean> getTable() {
return table;
}
public void setTable(List<SimpleBean> table) {
this.table = table;
}
public void actionListen(ActionEvent ae){
int size = this.table.size();
SimpleBean sim = new SimpleBean();
sim.setIndex(new String().valueOf(size));
sim.setValue(new String().valueOf(size+1));
this.table.add(sim);
}
}
SimpleBean.java:
==============
/**
*
* @author RaHuL
*/
public class SimpleBean {
private String index;
private String value;
public String getIndex() {
return index;
}
public void setIndex(String index) {
this.index = index;
}
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
}
following is a simple application where we are displaying 10 textboxes dynamically & we are adding new ones by using add button
Now coming to the checkbox control enabling & disabling textboxes that is where usage of AJAX can come into picture where ICEFaces can use what is called a D to D architecture inorder to create a dependency between control between few specific controls.I'd advice you to follow up with ICEFaces Sample Sources which clearly gives you a very convinient way to use it by using a method of what so called as partialsubmit of the request which renders the components accordingly without refershing the view which we were doing it in the stated example.
Hope this might help :)
REGARDS,
RaHuL
# 2
Hi Rahul,
Thanks a lot for your explantaion with example! I got an idea of how to display the text components using list.
Is there any way to capture the Id of the individual input textbox?
I am trying to explore ICEFACES on that D to D. Will get back to you once its done.
Req: Can you send your mail id?
Thnx,
~Kranthi
# 3
Yes you may....itz rahul.akkina@gmail.com
# 4
Hi Rahul,
I have modified the same code with Icefaces just by simply replacing <h with ><ice.
It is working fine. I have created a ><ice:selectBooleanCheckbox> and put it inside column tag of data table.
Display is perfect.
As per my requirement when I select checkbox, associated text box should be enabled and I have to capture the value of text box.
How can I do this?
Thanks,
Kranthi
# 5
Well here there is a simple work around now in the SimpleBean example i've given add an additional property disabling inputtext
add a valuechangelistener in a backing bean from valuechange event you would get the which checkbox has been checked accordingly Update The Collection Object as per the which checkbox has been checked & make partialsubmit="true" for the checkbox control & assign the corresponding property for disabled for inputtextbox this should update the control & enable it write a similar functionality for uncheck of the checkbox.checkout the pattern metioned below.
If u still have issues we can have a chat on GTALK 2morrow....
<ice:selectBooleanCheckbox valueChangeListener="#{BackingBean.ValueChangeListen}" value="#{BackingBean.CheckPropertyProperty}"
partialSubmit="true"/>
<ice:inputText disabled="#{BackingBean.CheckPropertyProperty}" partialSubmit="true" value="#{BackingBean.CorresProperty}"/>
& u may check a similar demo given at icefaces site
http://component-showcase.icefaces.org/component-showcase/
even the source code is given along the iceface zip file you download
U Hav a gud one... :)
REGARDS,
RaHuL
# 6
Hi Rahul,
Thank you very much for your help.
I have modified the code to some extent but I am unable to get what I want.
--Index.jsp--
<ice:dataTable value="#{SampleBean.table}" var="list">
<ice:column>
<ice:selectBooleanCheckbox
valueChangeListener="#{SampleBean.valueChangeListen}"
value="#{SampleBean.checkPropertyProperty}" partialSubmit="true">
</ice:selectBooleanCheckbox>
<ice:inputText value="#{list.value}"
disabled="#{!SampleBean.checkPropertyProperty}"
partialSubmit="true" />
</ice:column>
</ice:dataTable>
--SampleManagedBean--
public void valueChangeListen(ValueChangeEvent ve)
{
boolean flag = ((Boolean)ve.getNewValue()).booleanValue();
setCheckPropertyProperty(!flag);
}
public boolean getCheckPropertyProperty() {
return checkPropertyProperty;
}
public void setCheckPropertyProperty(boolean checkPropertyProperty) {
this.checkPropertyProperty = checkPropertyProperty;
}
In the above code if I select checkbox no. 10 all the text boxes are enabling and some times few..very confusing for me.
Let I be clear with what I want--
1. There will be a DTO which has text1, text2, text3, text4 (setters and gettters).
2. Now I have to extract text1 and text2 and put them in text fields with a checkbox associated to it. Initially the textboxes should be disabled and when ever I check a check box associated text fields should be enabled so that I can edit and click on save button to save it back to database.
3. There will be two buttons : Add/Save.
4. If I click add, a new text field has to be added with out checkbox and user has to enter the data and clicks on save so that it will be saved to database.(User shudn't be able to add one more unless he saves the previous one)
--
Rahul I tried but I am unable to associate checkbox to text fields.
Thanks in advance.
Regards,
Kranthi
# 7
Hi Rahul,
Thank you very much for your help.
I have modified the code to some extent but I am unable to get what I want.
--Index.jsp--
<ice:dataTable value="#{SampleBean.table}" var="list">
<ice:column>
<ice:selectBooleanCheckbox
valueChangeListener="#{SampleBean.valueChangeListen}"
value="#{SampleBean.checkPropertyProperty}" partialSubmit="true">
</ice:selectBooleanCheckbox>
<ice:inputText value="#{list.value}"
disabled="#{!SampleBean.checkPropertyProperty}"
partialSubmit="true" />
</ice:column>
</ice:dataTable>
--SampleManagedBean--
public void valueChangeListen(ValueChangeEvent ve)
{
boolean flag = ((Boolean)ve.getNewValue()).booleanValue();
setCheckPropertyProperty(!flag);
}
public boolean getCheckPropertyProperty() {
return checkPropertyProperty;
}
public void setCheckPropertyProperty(boolean checkPropertyProperty) {
this.checkPropertyProperty = checkPropertyProperty;
}
In the above code if I select checkbox no. 10 all the text boxes are enabling and some times few..very confusing for me.
Let I be clear with what I want--
1. There will be a DTO which has text1, text2, text3, text4 (setters and gettters).
2. Now I have to extract text1 and text2 and put them in text fields with a checkbox associated to it. Initially the textboxes should be disabled and when ever I check a check box associated text fields should be enabled so that I can edit and click on save button to save it back to database.
3. There will be two buttons : Add/Save.
4. If I click add, a new text field has to be added with out checkbox and user has to enter the data and clicks on save so that it will be saved to database.(User shudn't be able to add one more unless he saves the previous one)
--
Rahul I tried but I am unable to associate checkbox to text fields.
Thanks in advance.
Regards,
Kranthi
