Tables with JSF

Hi,
I need to use Tables (the same that HTML), but in JSF.
I test with panelGrid and panelGroup, but I can't to to merge two or more columns (as "colspan" in HTML).
How I can do this?.
Thanks by any help.
Tania.

Use this lib
http://www.jsftutorials.net/htmLib/

Similar Messages

How can I represent a table with JSF ?

Hi,
I want to replace my (html) table with a JSF representation..
I found the tag <h:dataTable>, and this defines <h:column> but there is no <h:row> !!
There is an attribute rows to represent the number of rows to display, but how can I add these rows ?
Thank you

<h:panelGrid columns="2">
</h:panelGrid>will produce table with 2 columns and if provided, the next 2 columns will appear in the next row and so forth...

Dynamic table with JSF

Hi, ALL!
I need to create the dynamic table which should be able to automatically add th e rows after getting command from server without redrawing the whole page.
Is it possible to do it with JSF ?
Or I have to use smth else?
Thank you

You should use ajax.

How to populate a jsf table with an array?

I have a JSF project where I'm using a table and I would like to populate that table with some custom information without using a database. I'm trying to write my own data provider. I was wondering if anyone knows how to populate a jsf table using an array. Any help would be appreciated. Thanks.

Hey thanks for replying. I'm not quite sure what you mean, but I am using a woodstock table in Netbeans. I would love to skip writing the data provider since I've never done that before, but I'm not sure how I would go about populating the table with a regular List or Model. I have populated a JTable with my own model, but never a woodstock table. They don't seem to work the same way. Thanks for the help. I've spent hours trying to figure this out.

Suggestions for JSF table with sortale columns and Pagination

Hi,
My JSF application needs a table with sortable columns and also pagination.
Thank you.

Just add a bunch of commandlinks and/or commandbuttons at the right locations and invoke the appropriate logic in the backing bean.
You can find some useful insights in this article: [http://balusc.blogspot.com/2006/06/using-datatables.html].

Display Tag use with JSF Data Tables

Has Anyone got to work the Display tag with JSF
I have got soo far to display the table by using Display tag with JSF dataTables but unable to have a link or command button to navigate
Theirs a online hack available for the same .....But i am unable to get to run it
Has anybody got the solution for the same

Hi ,
I am trying to do the same but I have no success.
My code is
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
     xmlns:f="http://java.sun.com/jsf/core"
     xmlns:h="http://java.sun.com/jsf/html"
     xmlns:jsp="http://java.sun.com/JSP/Page"
     xmlns:c="urn:jsptld:http://java.sun.com/jstl/core"
     xmlns:display="urn:jsptld:http://displaytag.sf.net">
<jsp:directive.page contentType="text/html; charset=UTF-8" />
<jsp:directive.page import="fi.tavutaito.hibernate.User,java.util.*,org.displaytag.tags.TableTag" />
     <h:dataTable value="#{sessionScope.users}" var="user" style=""/>
     <display:table name="sessionScope.users" class="" id="user">
          <display:column property="username"/>
          </display:table>
</html>
where users is a List Obj in the session. In output I receive just this page.
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:c="urn:jsptld:http://java.sun.com/jstl/core" xmlns:display="urn:jsptld:http://displaytag.sf.net">
<jsp:directive.page contentType="text/html; charset=UTF-8"></jsp:directive.page>
<jsp:directive.page import="fi.tavutaito.hibernate.User,java.util.*,org.displaytag.tags.TableTag"></jsp:directive.page><table style="">
<tbody>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
     <display:table name="sessionScope.users" id="user">
          <display:column property="username"></display:column>
          </display:table>
</html>
It seems to that display tags are not parsed...
Do zou have an idea?
Thanks a lot in advance
beppoz

How to solve problem with JSF table's border (style) ??

Hi, I would like to create table in JSF like this
               <table align="center"
                         width="250"
                         style="border-collapse: collapse; border: 1px black solid;" >
               <tr>
                    <td align="center"
                         colspan="2"
                         style="border: 1px black solid;">
                         Header A
                    </td>
               </tr>
               <tr>
                    <td> a1 </td>
                    <td> a2 </td>
               </tr>
               <tr>
                    <td> b1 </td>
                    <td> b2 </td>
               </tr>
               <tr>
                    <td align="center"
                         colspan="2"
                         style="border: 1px black solid;" >
                         <BUTTON value="12" > button1 </BUTTON>
                         <BUTTON value="12"> button2 </BUTTON>
                    </td>
               </tr>
               </table>I don't know how to create borders like this with JSF's components.
I know how to create table and collspan, but I have a problem with
border and style.
below is example that I creat it, but borders are not OK
IF ANYONE FIND SOLUTION I WILL BE TANKFUL
JSF:
<hx:panelBox id="box1"
           layout="pageDirection"
           bgcolor="silver"
           align="center"
           style="border: 1px red solid;"
           border="0">
          <hx:panelBox id="box2" layout="pageDirection" width="100%" bgcolor="#aec74e" height="100%" align="center" style="border: 1px black solid;">
               <center>
                    <h:outputText styleClass="outputText" id="text9" value="Prazniki"></h:outputText>
               </center>
          </hx:panelBox>
          <h:panelGrid styleClass="panelGrid" id="grid1" columns="3">
               <h:outputText styleClass="outputText" id="text4" value="#{msgs.planDan}">
               </h:outputText>
               <h:inputText styleClass="inputText" id="text3" value="#{pc_Koledar.praznikBean.dan}">
               </h:inputText>
               <f:verbatim></f:verbatim>
               <h:outputText styleClass="outputText" id="text5" value="#{msgs.planMesec}">
               </h:outputText>
               <h:selectOneMenu styleClass="selectOneMenu" id="menu1" value="#{pc_Koledar.praznikBean.selectedMesec}">
                <f:selectItems value="#{pc_Koledar.praznikBean.meseci}" />
               </h:selectOneMenu>
               <f:verbatim></f:verbatim>
               <h:outputText styleClass="outputText" id="text6" value="#{msgs.planLeto}">
               </h:outputText>
               <h:inputText styleClass="inputText" id="text2" value="#{pc_Koledar.praznikBean.leto}">
               </h:inputText>
               <f:verbatim></f:verbatim>
               <h:outputText styleClass="outputText" id="text7" value="#{msgs.nazivPraznika}">
               </h:outputText>
               <h:inputText styleClass="inputText" id="text1" value="#{pc_Koledar.praznikBean.nazivPraznika}">
               </h:inputText>
               <f:verbatim></f:verbatim>
          </h:panelGrid>
          <hx:panelBox id="box3"
                     align="center"
                     layout="lineDirection"
                     width="100%"
                     style="border: 1px black solid;" bgcolor="#aec74e">
                    <center>
                      <hx:commandExButton type="submit" value="Dodaj" id="button1" action="#{pc_Koledar.doButton1Action}" lang="CP1250">
                      </hx:commandExButton>
                       <hx:commandExButton type="submit" id="button3" action="#{pc_Koledar.doButton3Action}" value="Prika�">
                      </hx:commandExButton>
                    </center>
          </hx:panelBox>
</hx:panelBox>

Couldn't you use styleClass or id for CSS?

JSF: Problems adding rows to table with custom method

Since this being my first post, I find it only appropriate to thank the development team for such a huge addition to the application development world. You guys rock. You have cured my Java identity crisis. That being said...
I have been stumped for days. I'm making a simple web cart. I am trying to get two string values (name and price) passed through a custom exposed application module method ran on a backing bean. What I want the exposed VO module to do is, upon receiving the two strings, create a new row on the empty data controlled table I have built to store them. Basically I just need to add rows to a table with my custom managed bean. Most recent version.
I have written a test method to make sure my backing bean and exposed app module impl were working. This test works:
//WORKS
//CartInfo.java
    public String cb1_action() {
        AppModuleImpl am = new AppModuleImpl();
        am.testMethod();
        return null;
//AppModuleImp.java
    public void testMethod() {
        System.out.println("WORKS");
    }I found some code on how to add rows and unfortunately it isn't working out for some reason. Here is what is producing the error "Caused By: java.lang.NullPointerException" :
//DOESN'T WORK IN CUSTOM METHOD BUT WORKS WHEN DRAGGED ON TO THE PAGE AS A COMMAND BUTTON
//CartInfo.java
    public String cb1_action() {
        AppModuleImpl am = new AppModuleImpl();
        am.testMethod("test", "test");
        return null;
//AppModuleImp.java
       public void testMethod(String pName,String pPrice) {
        ViewObjectImpl vo = this.getCartVO1();
        Row r = vo.createRow();
        r.setAttribute("NAME", pName);
        r.setAttribute("PRICE", pPrice);
        vo.insertRow(r);
//The VO attributes for the DC are:
// Name : Type : Alias Name : Entity Usage : Info
NAME : String : NAME : (blank) : Transient
PRICE : String : PRICE : (blank) : TransientSo what I have so far is a table linked to my database. A user can select and click on a product on the row's individual Add button and using a modified selection listener, it returns the values to the backing_bean.
Then what I want it to do is have those variables passed to the other table. I just can't put it together.
Please if there is anyone that could send me in the right direction I would greatly appreciate it!
Thank you,
Jack

if i understand you, you want to call application module method when user clicks on add button on the UI and your table is from VO
so what i can come up for now is:
1) create variable binding from the iterator for both name and price.
2) on your UI action button :
<af:commandButton actionListener="yourbean.addToCart">
<f:attribute name="pName" value ="binding.<created name bind variable>"
<f:attribute name="pPrice" value = "binding.<created price bind variable>"
</af:commandButton>
3) custom Managed Bean:
//yourBean.java
public void addToCart(ActionEvent e){
// get binding here
// use executeWitParams method to send parameter to the function "testMethod" and execute
//AppModuleImp.java
public void testMethod(String pName,String pPrice) {
CardVOImpl vo = this.getCartVO1();
CardVORowImpl r = (CardVORowImpl)vo.createRow();
r.setAttribute("NAME", pName);
r.setAttribute("PRICE", pPrice);
vo.insertRow(r);
Hope this helps...
Let me know if not..
Thanks
Edited by: MavenDev on Oct 30, 2011 8:08 PM

Need Suggestion on including JSTL Tags with JSF

Hi..All....
I need some suggestions.. i Started doing a project in JSF.. i am new to JSF...
I Developed some part of the project in Struts.. but now.. our clinet says... The Application Has to go
with JSF.so.. started redesigning again....
Can i use JSTL...where ever i want....when i am developing a JSF Application...
Please suggest..me...
Thanks.. for the Help..
Arthi

I am freely mixing jstl and jsf in my project using:
JSTL RI 1.2
JSF RI 1.2
Tomcat 6
i am mixing c:forEach and h: tags successfully, which i needed for some javascript functionality that i could not do with data table. but stick to JSF wherever possible!

Strange behavior in a table with dropTarget and delete action

I am having a strange behavior in a table with drag and drop and action component to delete row.
Steps:
Drag the first row to the table and appears in the destination table (works well)
Select and change the value by 156, appears an error (works fine)
delete the row, the row disappears (works well)
Add the first row again and the value is 156 instead of 158 (why ????)
I guess the error is the deletion that is not correct, but do not know how?
Can anyone help?
I add the source code if you see where I'm wrong
Java class:
+public class BeanExample {+
private ArrayList<RowExample> starttValues;
private ArrayList<RowExample> endValues;
+public BeanExample() {+
super();
+}+
+public void setStarttValues(ArrayList<BeanExample.RowExample> starttValues) {+
this.starttValues = starttValues;
+}+
+public ArrayList<BeanExample.RowExample> getStarttValues() {+
+if (starttValues == null) {+
starttValues = new ArrayList<BeanExample.RowExample>();
starttValues.add(new RowExample("1", new Number(158)));
starttValues.add(new RowExample("21", new Number(12565464)));
+}+
return starttValues;
+}+
+public void setEndValues(ArrayList<BeanExample.RowExample> endValues) {+
this.endValues = endValues;
+}+
+public ArrayList<BeanExample.RowExample> getEndValues() {+
+if (endValues == null) {+
endValues = new ArrayList<BeanExample.RowExample>();
+}+
return endValues;
+}+
+public void validatorExample(FacesContext facesContext, UIComponent uIComponent, Object object) {+
Number number = (Number)object;
+if ((number.longValue() % 2) == 0) {+
FacesMessage message = new FacesMessage(FacesMessage.SEVERITY_ERROR, "ES PAR", "ES PAR");
throw new ValidatorException(message);
+}+
+}+
+public DnDAction handleDrop(DropEvent dropEvent) {+
Transferable transferable = dropEvent.getTransferable();
DataFlavor<RowKeySet> rowKeySetFlavor = DataFlavor.getDataFlavor(RowKeySet.class, "loteDrag");
RowKeySet rowKeySet = transferable.getData(rowKeySetFlavor);
+if (rowKeySet != null) {+
CollectionModel dragModel = transferable.getData(CollectionModel.class);
+if (dragModel != null) {+
Object currKey = rowKeySet.iterator().next();
dragModel.setRowKey(currKey);
RowExample table = (RowExample)dragModel.getRowData();
getEndValues().add(new RowExample(table.getId(), table.getValue()));
return dropEvent.getProposedAction();
+}+
+}+
return DnDAction.NONE;
+}+
+public void borrarFila(ActionEvent actionEvent) {+
endValues.remove(0); RequestContext.getCurrentInstance().addPartialTarget(FacesContext.getCurrentInstance().getViewRoot().findComponent("pc1:t2"));
+}+
+public static class RowExample {+
private String id;
private Number value;
+public RowExample(String id, Number value) {+
super();
this.id = id;
this.value = value;
+}+
+public void setId(String id) {+
this.id = id;
+}+
+public String getId() {+
return id;
+}+
+public void setValue(Number value) {+
this.value = value;
+}+
+public Number getValue() {+
return value;
+}+
+}+
+}+JSF
+<?xml version='1.0' encoding='windows-1252'?>+
+<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"+
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
+<jsp:directive.page contentType="text/html;charset=windows-1252"/>+
+<f:view>+
+<af:document id="d1">+
+<af:form id="f1">+
+<af:panelGroupLayout id="pgl1">+
+<af:table value="#{beanExample.starttValues}" var="row"+
rowBandingInterval="0" id="t1" rowSelection="single"
displayRow="selected" contentDelivery="immediate">
+<af:column sortable="false" headerText="Id" align="start" id="c2">+
+<af:outputText value="#{row.id}" id="ot1"/>+
+</af:column>+
+<af:column sortable="false" headerText="Value" align="start" id="c1">+
+<af:outputText value="#{row.value}" id="ot2"/>+
+</af:column>+
+<af:collectionDragSource actions="COPY" modelName="loteDrag"/>+
+</af:table>+
+<af:panelCollection id="pc1">+
+<f:facet name="toolbar" >+
+<af:toolbar id="dc_t2" >+
+<af:commandToolbarButton shortDesc="Delete"+
icon="/imagesDemo/delete_ena.png"
id="dc_ctb3" immediate="true"
+actionListener="#{beanExample.borrarFila}"/>+
+</af:toolbar>+
+</f:facet>+
+<af:table value="#{beanExample.endValues}" var="row"+
+rowBandingInterval="0" id="t2">+
+<af:column sortable="false" headerText="Id" align="start" id="c3">+
+<af:outputText value="#{row.id}" id="ot3"/>+
+</af:column>+
+<af:column sortable="false" headerText="Value" align="start" id="c4" >+
+<af:inputText value="#{row.value}" autoSubmit="true" id="it1" validator="#{beanExample.validatorExample}"/>+
+</af:column>+
+<af:collectionDropTarget actions="COPY" modelName="loteDrag"+
+dropListener="#{beanExample.handleDrop}"/>+
+</af:table>+
+</af:panelCollection>+
+</af:panelGroupLayout>+
+</af:form>+
+</af:document>+
+</f:view>+
+</jsp:root>+

I think the problem is the validator
I changed the practical case, I added an InputText to enter new values in the first row.
+<af:inputText immediate="true" label="new value" id="it2"+
+valueChangeListener="#{beanExample.newvalue}" autoSubmit="true"/>+
+public void newvalue (ValueChangeEvent valueChangeEvent) {+
+String valor = (String)valueChangeEvent.getNewValue();+
+Number valorNumber=null;+
+try {+
+valorNumber = new Number (valor);+
+} catch (SQLException e) {+
+}+
+RowExample example = (RowExample) endValues.get(0);+
+example.setValue(valorNumber);+
+example.setId(valorNumber.toString());+
+RichTable table = (RichTable)FacesContext.getCurrentInstance().getViewRoot().findComponent(id);+
+RequestContext.getCurrentInstance().addPartialTarget(table);+
+}+
Case 1
I drag the first row to the target table (ok)
The new row appears (ok)
Enter the value 77 in the InputText (ok)
id content and value change (ok)
Case2
I drag the first row to the destination table
The new row appears (ok)
Change the value of the first row by 80 (ok)
errors appears (by validator) (ok)
Enter the value 77 in the InputText (ok)
the id is changed but the value NO (*KO*)
I do not understand the behavior
Edited by: josefuente on 27-oct-2010 16:03

How to setup a gridPane/Table with a customer header/footer

Hello -
I'm going crazy trying to figure this one out and any help would be greatly appreciated!
I'd like to create a table with a custom 4 column header and footer, but with a single cell as the "main" section holding a child table(another gridPanel, I presume). I've been using the headerClass property on the gridPanel, but not sure what this actually DOES. Do I need to use the "facet" tags manually to set up a header row? Basically, I'd like the effect of using graphics to create a "framed" effect for another table. I hope I've explained this okay :) Any thoughts/help would be so appreciated!
Thanks,
Tom

Hello -
I'm going crazy trying to figure this one out and any
help would be greatly appreciated!
I'd like to create a table with a custom 4 column
header and footer, but with a single cell as the
"main" section holding a child table(another
gridPanel, I presume). I've been using the
headerClass property on the gridPanel, but not sure
what this actually DOES. Do I need to use the
"facet" tags manually to set up a header row?
Basically, I'd like the effect of using graphics
ics to create a "framed" effect for another table.
I hope I've explained this okay :) Any
ny thoughts/help would be so appreciated!
Thanks,
TomIn JSF terms, using a Panel Grid component, you can specify a header that goes across the top of the entire grid using a "header" facet. Likewise, the "footer" facet can set a footer that goes across the entire bottom of the grid. You might want something like this:
<h:panelGrid ... columns="3">
<f:facet name="header">
    <h:outputText value="This Is The Entire Header"/>
</f:facet>
<f:facet>
    
    <h:graphicImage .../>
</f:facet>
<h:outputText value="Row 1 Column 1"/>
<h:outputText value="Row 1 Column 2"/>
<h:outputText value="Row 1 Column 3"/>
<h:outputText value="Row 2 Column 1"/>
<h:outputText value="Row 2 Column 2"/>
<h:outputText value="Row 2 Column 3"/>
</h:panelGrid>So, the "headerClass" attribute on a PanelGrid sets the CSS style class that will be used; it does not define the content of the header. Instead, you do that by embedding a component inside the facet.
Creator doesn't currently have any GUI to help you set up the header and footer facets, but you can still add them in the JSP source mode.
Craig

Dojo integration with JSF

Hello Friends,
Is there any docs regarding the integration of Dojo with JSF ? Or can somebody please explain it here ?
Thank you.
Sudheer Palaparambil

Not sure which part of Dojo you're interested in. Some components (such as Woodstock) make use of Dojo for their JSF components (https://woodstock.dev.java.net). If you're just looking for XHR functionality, you might look at Ajax4JSF or Dyna-Faces (https://ajax4jsf.dev.java.net or https://jsf-extensions.dev.java.net), although I don't think either one use Dojo for this. jMaki does a very nice job at wrapping JS widgets (such as those provided by Dojo), jMaki has support for JSF, PHP, JSP and more. It also abstracts the model for trees, tables, RSS, and more so that you can swap out JS widgets without changing your code.
Good luck,
Ken Paulsen
https://jsftemplating.dev.java.net

Very big problem with JSF about FORM and "id=" for HTML form's elements and

I have discovered a very big problem with JSF about FORM and "id=" for HTML form's elements and java instruction "request.getParameterNames()".
Suppose you have something like this, to render some datas form a Java Beans :
<h:dataTable value="#{TablesDb2Bean.myDataDb2ListSelection}" var="current" border="2" width="50%" cellpadding="2" cellspacing="2" style="text-align: center">
<h:column>
<f:facet name="header">
<h:outputText value="Name"/>
</f:facet>
<h:outputText id="nameTableDb2" value="#{current.db2_name_table}"/>
</h:column>
</h:dataTable>
Everything works fine...
Suppose you want to get the name/value pairs for id="nameTableDb2" and #{current.db2_name_table} to process them in a servlet. Here is the HTML generated :
<td><span <span class="attribute-name">id=<span class="attribute-value">"j_id_jsp_1715189495_22:0:nameTableDb2">my-table-db2-xxxxx</span></td>
You think you can use the java instructions :
Enumeration NamesParam = request.getParameterNames();
while (NomsParam.hasMoreElements()) {
String NameParam = (String) NamesParam.nextElement();
out.println("<h4>"++NameParam+ "+</h4>);
YOU ARE WRONG : request.getParameterNames() wants the syntax *name="nameTableDb2" but JSF must use id="nameTableDb2" for "<h:outputText"... So, you can't process datas in a FORM generated with JSF in a Servlet ! Perhaps I have made an error, but really, I wonder which ?
Edited by: ungars on Jul 18, 2010 12:43 AM
Edited by: ungars on Jul 18, 2010 12:45 AM

While I certainly appreciate ejb's helpful responses, this thread shows up a difference in perspective between how I read the forum and how others do. Author ejb is correct in advising you to stay inside JSF for form processing if form processing is what you want to do.
However, I detect another aspect to this post which reminds me of something Marc Andreesen once said when he was trying to get Netscape off the ground: "there's no such thing as bad HTML."
In this case, I interpret ungar's request as a new feature request. Can I phrase it like this?
"Wouldn't it be nice if I could render my nice form with JSF but, in certain cases, when I REALLY know what I'm doing" just post out to a separate servlet? I know that in this case I'll be missing out on all the nice validation, conversion, l10n, i18n, ajax, portlet and other features provided by JSF".
If this is the case, because it really misses the point of JSF, we don't allow it, but we do have an issue filed for it
https://javaserverfaces-spec-public.dev.java.net/issues/show_bug.cgi?id=127
If you can't wait for it to be fixed, you could decorate the FormRenderer to fix what you want.
I have an example in my JSF book that shows how to do this decoration. http://bit.ly/edburnsjsf2
Ed

Problems with JSF and included subviews

Hi everybody,
I' ve got a problem with JSF and included subviews which makes me going
crazy. I've got no clue why my web-pages are represent wrongly. The only
tip I've got is that it must be connected with the kind I do include my JSF-pages.
When I use <%@file="sub.jsp"%> my pages are are represent right. When I use <jsp:include page="Sub.jsp" /> or <c:import url="Sub.jsp" /> ( mark: the usage of flush="true" or flush="false" doesn't matter )
my pages are represent wrongly.
The usage of tags like f:facet or f:verbatim were also included but didn't point to an solution.
I searched the whole Sun Developer Forum and some other web-sites for any solution for my problem but the given hints and clues didn't help. Now I'm trying to post my problem directly in Sun's Forum in hope to get help.
My environment is the following:
JAVA JDK 1.5 Update 4
Tomcat 5.5.9
JSLT 1.1
Sun JSF 1.1
Win 2K
Here's my code:
Main.jsp
<%@ page language="java"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
          String path = request.getContextPath();
          String basePath = request.getScheme() + "://" + request.getServerName()
                    + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
     <base href="<%=basePath%>">
     <meta http-equiv="pragma" content="no-cache">
     <meta http-equiv="cache-control" content="no-cache">
     <meta http-equiv="expires" content="0">
     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
     <meta http-equiv="description" content="This is my page">
     <link rel="stylesheet" href="stil.jsp" type="text/css" />
</head>
<body>
     <f:view>
          <h:form>
               <div class="table">
                    <div class="tr">
                         <h:outputText styleClass="tdleft" value="value 1"/>
                         <h:outputText styleClass="tdinfo" value="value 2"/>
                    </div>
                    <div class="tr">
                         <h:outputText styleClass="tdleft" value="value 3"/>
                         <h:outputText styleClass="tdinfo" value="value 4"/>
                    </div>
               </div>
          </h:form>
          <jsp:include page="Sub.jsp" />
     </f:view>
</body>
</html>Sub.jsp
<%@ page language="java"%>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h"%>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<f:subview id="subview">
     <h:form>
          <div class="table">
               <div class="tr">
                         <h:outputText styleClass="tdleft" value="value 11"/>
                         <h:outputText styleClass="tdinfo" value="value 22"/>
               </div>
               <div class="tr">
                    <h:outputText styleClass="tdleft" value="value 33"/>
                    <h:outputText styleClass="tdinfo" value="value 44"/>
               </div>
          </div>
     </h:form>
</f:subview>stil.jsp
<%@page contentType="text/css"%>
<%
    String schwarz     = "#000000",
            grau1       = "#707070",
            grau2       = "#c0c0c0",
            grau3       = "#e0e0e0",
            grau4       = "#e8e8e8",
            grau5       = "#fdfdfd",
            blau        = "#0000dd",
            tuerkis     = "#00cfff";
    String liniendicke = "1px",
            linienart   = "solid";
    String allgemeineTextFarbe           = schwarz;
    String allgemeineHintergrundFarbe    = grau3;
    String infoTextFarbe                 = blau;
    String fieldsetRandFarbe             = blau;
    String fieldsetRandDicke             = liniendicke;
    String fieldsetRandArt               = linienart;
    String hrLinienFarbe                 = blau;
    String hrLinienDicke                 = liniendicke;
    String hrLinienArt                   = linienart;
    String inputAktivHintergrundFarbe    = grau5;
    String inputReadonlyHintergrundFarbe = grau4;
    String inputPassivHintergrundFarbe   = grau4;
    String inputPassivFarbe              = schwarz;
    String inputRandFarbe1               = grau1;
    String inputRandFarbe2               = grau5;
    String inputRandDicke                = liniendicke;
    String inputRandArt                  = linienart;
    String inputButtonHintergrundFarbe   = grau3;
    String legendenFarbe                 = blau;
    String linkFarbe                     = blau;
    String linkAktivFarbe                = tuerkis;
    String linkBesuchtFarbe              = blau;
    String linkFocusFarbe                = tuerkis;
    String objectGitterFarbe             = grau5;
    String objectGitterDicke             = liniendicke;
    String objectGitterArt               = linienart;
    String tabellenGitterFarbe           = grau5;
    String tabellenGitterDicke           = liniendicke;
    String tabellenGitterArt             = linienart;
%>
<%-- ----------------------------------------------- --%>
<%-- Textdarstellung mittels der Display-Eigenschaft --%>
<%-- in den Tags div und span                        --%>
<%-- ----------------------------------------------- --%>
*.table {
    display:table;
    border-collapse:collapse;
*.tbody {
    display:table-row-group;
*.tr {
    display:table-row;
*.td,*.tdright,*.tdleft,*.tdinfo,*.th {
    display:table-cell;
    padding:3px;
    vertical-align:middle;
*.td,*.th {
    text-align:center;
*.tdright {
    text-align:right;
*.tdleft {
    text-align:left;
*.tdinfo {
    color:<%=infoTextFarbe%>;
    text-align:right;
*.th {
    color:<%=infoTextFarbe%>;
    font-weight:bold;
}thanks in advance
benjamin

Hello Zhong Li,
many thanks for your post, but it didn't work.
My problem is that the JSF-Components im my included or imported
JSP-Pages does not accept any kind of style or styleClass for
designing. The components take over the informations for colors
but not for alignment.
When I take a look at the generated JAVA-Source in $TOMCAT/WORK/WEBAPP for my sub.jsp ( sub.java )
it seems that the resulting HTML-page would be presented correctly.
But later when I start the application via Firefox or Mozilla the html-sourcecode is totally wrong.
In my example I create a simple grid with 2 rows and 2 columns.
Both columns contains JSF-Outtext-Components and are included with div-tags.
The generated Sub.java shows that the text would be setted in the div-tags. Unfortunately the html-sourcecode represented by my browser shows that jsf-text is not setted in the tags but in the <h:form> tags. The div-tags are neither rounded by <h:form> nor containing the JSF-OutText-Components.
Any clue?
Many thanks Benjamin
Here is the html-code from Firefox:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
     <base href="http://polaris21:8080/webtest/">
     <meta http-equiv="pragma" content="no-cache">
     <meta http-equiv="cache-control" content="no-cache">
     <meta http-equiv="expires" content="0">
     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
     <meta http-equiv="description" content="This is my page">
     <link rel="stylesheet" href="stil.jsp" type="text/css" />
</head>
<body>
     <form id="_id0" method="post" action="/webtest/Main.faces" enctype="application/x-www-form-urlencoded">
          <div class="table">
               <div class="tr">
                    <span class="tdleft">value 1</span>
                    <span class="tdinfo">value 2</span>
               </div>
               <div class="tr">
                    <span class="tdleft">value 3</span>
                    <span class="tdinfo">value 4</span>
               </div>
          </div>
          <input type="hidden" name="_id0" value="_id0" />
     </form>
      <form id="SUB:_id5" method="post" action="/webtest/Main.faces" enctype="application/x-www-form-urlencoded">
           <span class="tdleft">value 11</span>
          <span class="tdinfo">value 22</span>
          <span class="tdleft">value 33</span>
          <span class="tdinfo">value 44</span>
          <input type="hidden" name="SUB:_id5" value="SUB:_id5" />
     </form>
     <div class="table">
          <div class="tr">
          </div>
          <div class="tr">
          </div>
     </div>
</body>
</html>

How I can change visible property of an af:table with an af:selectOneRadio?

How I can change visible property of an af:table with an af:selectOneRadio? Anyone can help me with a tutorial, example or link?
Thanks in advance.

After you add the required libraries to your classpath
you can do your use case as explained in this sample
page source
<?xml version='1.0' encoding='UTF-8'?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<f:view xmlns:f="http://java.sun.com/jsf/core" xmlns:af="http://xmlns.oracle.com/adf/faces/rich">
    <af:document title="untitled2.jsf" id="d1">
        <af:messages id="m1"/>
        <af:form id="f1">
            <af:selectOneRadio label="radio" id="sor1" autoSubmit="true"
                               valueChangeListener="#{ControlVisibilty.onRadioSelected}">
                <af:selectItem label="0" value="0" id="si1"/>
                <af:selectItem label="1" value="1" id="si2"/>
            </af:selectOneRadio>
            <af:table value="#{bindings.DepartmentsView1.collectionModel}" var="row"
                      rows="#{bindings.DepartmentsView1.rangeSize}"
                      emptyText="#{bindings.DepartmentsView1.viewable ? 'No data to display.' : 'Access Denied.'}"
                      fetchSize="#{bindings.DepartmentsView1.rangeSize}" rowBandingInterval="0"
                      selectedRowKeys="#{bindings.DepartmentsView1.collectionModel.selectedRow}"
                      selectionListener="#{bindings.DepartmentsView1.collectionModel.makeCurrent}" rowSelection="single"
                      id="t1" partialTriggers="::sor1" visible="#{ControlVisibilty.table}">
                <af:column sortProperty="#{bindings.DepartmentsView1.hints.DepartmentId.name}" sortable="false"
                           headerText="#{bindings.DepartmentsView1.hints.DepartmentId.label}" id="c1">
                    <af:inputText value="#{row.bindings.DepartmentId.inputValue}"
                                  label="#{bindings.DepartmentsView1.hints.DepartmentId.label}"
                                  required="#{bindings.DepartmentsView1.hints.DepartmentId.mandatory}"
                                  columns="#{bindings.DepartmentsView1.hints.DepartmentId.displayWidth}"
                                  maximumLength="#{bindings.DepartmentsView1.hints.DepartmentId.precision}"
                                  shortDesc="#{bindings.DepartmentsView1.hints.DepartmentId.tooltip}" id="it1">
                        <f:validator binding="#{row.bindings.DepartmentId.validator}"/>
                        <af:convertNumber groupingUsed="false"
                                          pattern="#{bindings.DepartmentsView1.hints.DepartmentId.format}"/>
                    </af:inputText>
                </af:column>
                <af:column sortProperty="#{bindings.DepartmentsView1.hints.DepartmentName.name}" sortable="false"
                           headerText="#{bindings.DepartmentsView1.hints.DepartmentName.label}" id="c2">
                    <af:inputText value="#{row.bindings.DepartmentName.inputValue}"
                                  label="#{bindings.DepartmentsView1.hints.DepartmentName.label}"
                                  required="#{bindings.DepartmentsView1.hints.DepartmentName.mandatory}"
                                  columns="#{bindings.DepartmentsView1.hints.DepartmentName.displayWidth}"
                                  maximumLength="#{bindings.DepartmentsView1.hints.DepartmentName.precision}"
                                  shortDesc="#{bindings.DepartmentsView1.hints.DepartmentName.tooltip}" id="it2">
                        <f:validator binding="#{row.bindings.DepartmentName.validator}"/>
                    </af:inputText>
                </af:column>
                <af:column sortProperty="#{bindings.DepartmentsView1.hints.ManagerId.name}" sortable="false"
                           headerText="#{bindings.DepartmentsView1.hints.ManagerId.label}" id="c3">
                    <af:inputText value="#{row.bindings.ManagerId.inputValue}"
                                  label="#{bindings.DepartmentsView1.hints.ManagerId.label}"
                                  required="#{bindings.DepartmentsView1.hints.ManagerId.mandatory}"
                                  columns="#{bindings.DepartmentsView1.hints.ManagerId.displayWidth}"
                                  maximumLength="#{bindings.DepartmentsView1.hints.ManagerId.precision}"
                                  shortDesc="#{bindings.DepartmentsView1.hints.ManagerId.tooltip}" id="it3">
                        <f:validator binding="#{row.bindings.ManagerId.validator}"/>
                        <af:convertNumber groupingUsed="false"
                                          pattern="#{bindings.DepartmentsView1.hints.ManagerId.format}"/>
                    </af:inputText>
                </af:column>
                <af:column sortProperty="#{bindings.DepartmentsView1.hints.LocationId.name}" sortable="false"
                           headerText="#{bindings.DepartmentsView1.hints.LocationId.label}" id="c4">
                    <af:inputText value="#{row.bindings.LocationId.inputValue}"
                                  label="#{bindings.DepartmentsView1.hints.LocationId.label}"
                                  required="#{bindings.DepartmentsView1.hints.LocationId.mandatory}"
                                  columns="#{bindings.DepartmentsView1.hints.LocationId.displayWidth}"
                                  maximumLength="#{bindings.DepartmentsView1.hints.LocationId.precision}"
                                  shortDesc="#{bindings.DepartmentsView1.hints.LocationId.tooltip}" id="it4">
                        <f:validator binding="#{row.bindings.LocationId.validator}"/>
                        <af:convertNumber groupingUsed="false"
                                          pattern="#{bindings.DepartmentsView1.hints.LocationId.format}"/>
                    </af:inputText>
                </af:column>
            </af:table>
        </af:form>
    </af:document>
</f:view>The managed bean code is
import javax.faces.event.ValueChangeEvent;
public class ControlVisibilty {
    private boolean table;
    public ControlVisibilty() {
        setTable(false);
    public void onRadioSelected(ValueChangeEvent valueChangeEvent) {
        // Add event code here...
        if(valueChangeEvent.getNewValue().toString().equals("1"))
            setTable(true);
        else
            setTable(false);
    public void setTable(boolean table) {
        this.table = table;
    public boolean isTable() {
        return table;
}

Tables with JSF

Similar Messages

Maybe you are looking for