Home >> Miscellaneous
>> JSF-Example-Tags-dataTable
Taking another small step towards learning JSF Tags, I have tried to
extend one example already in discussion in thie web site at
Referring to the earlier example page
In this writing I shall be using dataTable from JSF-based Tag library,
in order to show a tabular structure with header and body section filled
up dynamically from the managed bean field variables.
These field variables are defined as String arrays, and there is a separate
field acting as counter for data table's column tag.
For the sake of making this example simple and to the point I shall be
removing some and adding some of the fields in the managed bean of this
example, that is "ButtonEventCapture.java"
ButtonEventCapture.java
package sample;
import java.io.PrintStream;
import java.util.Iterator;
import java.util.List;
import java.util.ArrayList;
import javax.faces.application.FacesMessage;
import javax.faces.context.FacesContext;
import javax.faces.model.SelectItem;
import javax.faces.context.FacesContext;
import javax.faces.component.UIComponent;
import javax.faces.validator.Validator;
public class ButtonEventCapture
{
public ButtonEventCapture()
{
tableData = new SelectItem[]{new SelectItem("zero","zero"),
new SelectItem("one","one"),
new SelectItem("two","two"),
new SelectItem("three","three"),
new SelectItem("four","four"),
new SelectItem("five","five"),
new SelectItem("six","six"),
new SelectItem("seven","seven"),
new SelectItem("eight","eight")};
}
public String submitButton()
{
//do something useful here.
return "preview";
}
public String cancelButton()
{
System.out.println("Cancel button is clicked...");
return null;
}
public SelectItem[] getTableData() {
return tableData;
}
public void setTableData(SelectItem[] objs) {
System.out.println(objs.length +" "+objs[0]);
}
public void setSelectedData(String[] arg) {
System.out.println(arg.length + " " +arg[0]);
selectedData = arg;
}
public String[] getSelectedData() {
return selectedData;
}
public void setSelectedList(String[] arg) {
System.out.println(arg.length + " " +arg[0]);
selectedList = arg;
}
public String[] getSelectedList() {
return selectedList;
}
public void setSelectedListData(String data) {
selectedListData = data;
}
public String getSelectedListData() {
return selectedListData;
}
public void setSelectedRadioData(String data) {
selectedRadioData = data;
}
public String getSelectedRadioData() {
return selectedRadioData;
}
public void setChkBox(boolean arg) {
System.out.println(arg);
chkBox = arg;
}
public boolean getChkBox() {
return chkBox;
}
public void setChkBoxLabel(String arg) {
System.out.println(arg);
}
public String getChkBoxLabel() {
return chkBoxLabel;
}
public String[] getCountData() {
countData = new String[selectedData.length];
for(int i=0;i<countData.length;i++) {
countData[i] = i+"";
}
return countData;
}
SelectItem[] tableData;
boolean chkBox;
String chkBoxLabel;
String[] selectedData;
String[] selectedList;
String selectedListData;
String selectedRadioData;
String[] countData;
}
|
This class has countData as the field for retaining count starting from 0
to the number of data/values to be displayed in the dataTable JSF-based
Tag.
While selectedData and selectedList fields are String arrays for holding
ids of those check boxes/list items selected by the user in the index page.
On submission of index page, these values gets populated in the respective
fileds of this managed bean, and preview page uses these values to display
a tabular data with header and body facets defined in the JSF-based dataTable
Tag.
index.jsp
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="sampleHtml" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="sampleCore" %>
<html>
<body>
<sampleCore:view locale="en_US">
<sampleCore:loadBundle basename="sample" var="s"/>
<h4><sampleHtml:outputText value="#{s.title_text}"/></h4>
<sampleHtml:messages layout="table"/>
<sampleHtml:form>
<sampleHtml:selectManyCheckbox id="manyChkBoxes" value="#{SampleMGMTBean.selectedData}">
Selected Many Checkboxes :
<sampleCore:selectItems value="#{SampleMGMTBean.tableData}"/>
</sampleHtml:selectManyCheckbox>
<br>
<sampleHtml:selectManyListbox id="manyListBoxes" value="#{SampleMGMTBean.selectedList}">
selectManyListbox :
<sampleCore:selectItems value="#{SampleMGMTBean.tableData}"/>
</sampleHtml:selectManyListbox>
<br>
<table>
<tr><td><sampleHtml:commandButton value="Submit"
action="#{SampleMGMTBean.submitButton}"/></td>
<td><sampleHtml:commandButton value="Cancel"
action="#{SampleMGMTBean.cancelButton}"/></td></tr>
</table>
</sampleHtml:form>
</sampleCore:view>
</body>
</html>
|
This index.jsp is displayed when the URL for this example is
something like this : http://localhost:8080/JSF-Based-Example/index.jsf
(please note that the index.jsp is addressed as indes.jsf in the above URL)
preview.jsp
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="sampleHtml" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="sampleCore" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="jstlCore" %>
<html>
<body>
<h4>Preview</h4>
<sampleCore:view>
<sampleHtml:form>
<sampleHtml:dataTable width="100" first="0" border="0" bgcolor="#eeff44"
style="border: 1px solid #000000;" var="v1" value="#{SampleMGMTBean.countData}" >
<sampleHtml:column>
<sampleCore:facet name="header">
<sampleHtml:outputText value="Selected Checkboxes"/>
</sampleCore:facet>
<sampleHtml:outputText value="#{SampleMGMTBean.selectedData[v1]}"/>
</sampleHtml:column>
<sampleHtml:column>
<sampleCore:facet name="header">
<sampleHtml:outputText value="Selected List"/>
</sampleCore:facet>
<sampleHtml:outputText value="#{SampleMGMTBean.selectedList[v1]}"/>
</sampleHtml:column>
</sampleHtml:dataTable>
</sampleHtml:form>
</sampleCore:view>
</body>
</html>
|
The above preview page is displayed as shown below:

This may not be the only way to use dataTable Tag, but one can explore
many different ways of doing certain things right.
Hope to read from you soon, please use the comment section below.
If anything missed out , please let me know at
techienjoy at yahoo . com
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Android Canvas Example : |
Example using Canvas using Android Platform
and source code implementing this example.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Android Gallery Example : |
Example on Android Gallery View
explained with a very simple scenario
and appropriate screens captured and shown.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Android Draw Example : |
Example using Draw using Android Platform
and source code implementing this example.
|
|
| Android Examples : |
List of ANDROid examples
with source code and output
screens captured and shown.
|
|
|
|
|
| Android Robots Example : |
Example using Borots using Android Platform
and source code implementing this example.
|
|
| Android Tab View Example : |
Example on Android Tab View
explained with a very simple scenario
and appropriate screens captured and shown.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Android Intent Example : |
Example using Intent from Android Platform
and source code implementing this example.
|
|
|
|
|
|
|
|
|
| Android ListView Example : |
Example on Android ListView
explained with a very simple scenario
whereby showing folder and files with
structure and appropriate screens
captured and shown.
|
|
|
|
|
|
| Android Views Example : |
Example using Views using Android Platform
and source code implementing this example.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Android Sensors Example : |
Example on Android Sensors Listed and
explained with a very simple scenario
and article with appropriate screens
captured and shown.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Google GWT Example : |
Example using GWT and some design patterns and various
ways of implementing this example.
|
|
| Android ListView Example : |
Example on Android ListView and
explained with a very simple scenario
and article with appropriate screens
captured and shown.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Android NFC Example : |
Example using NFC using Android Platform
and source code implementing this example.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| Android GridView Example : |
Example using GridView Widget using Android Platform
and source code implementing this example.
|
|
|
|
| Android ListView Example : |
Example on Android List View
explained with a very simple scenario
and article with appropriate screens
captured and shown.
|
|
|
|
|