My JSF Books/Videos My JSF Tutorials OmniFaces/JSF PPTs
JSF 2.3 Tutorial
JSF Caching Tutorial
JSF Navigation Tutorial
JSF Scopes Tutorial
JSF Page Author Beginner's Guide
OmniFaces 2.3 Tutorial Examples
OmniFaces 2.2 Tutorial Examples
JSF Events Tutorial
OmniFaces Callbacks Usages
JSF State Tutorial
JSF and Design Patterns 		JSF 2.3 New Features (2.3-m04)
Introduction to OmniFaces
25+ Reasons to use OmniFaces in JSF
OmniFaces Validators
OmniFaces Converters
JSF Design Patterns
Mastering OmniFaces
Reusable and less-verbose JSF code

My JSF Resources ...

 Java EE Guardian
Member of JCG Program
Member MVB DZone
Blog curated on ZEEF
OmniFaces is an utility library for JSF, including PrimeFaces, RichFaces, ICEfaces ...

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

.

[OmniFaces Utilities] - Find the right JSF OmniFaces 2 utilities methods/functions

Search on blog

Petition by Java EE Guardians

Twitter

miercuri, 4 noiembrie 2015

[JSF Page Author Beginner's Guide] JSF <panelGrid> / HTML5 <table>

The <h:panelGrid> renders an HTML "table" element

Common/basic usage is JSF (I) - populate a static table:

<?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">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html">
 <h:head>
  <title>JSF panelGrid examples</title>        
 </h:head>
 <h:body>
  <h:panelGrid columns="6">
   <h:outputText value="1"/>
   <h:outputText value="Williams, Serena"/>
   <h:outputText value="United States"/>
   <h:outputText value="26 Sep 1981"/>
   <h:outputText value="11285"/>
   <h:outputText value="15"/>

   <h:outputText value="2"/>
   <h:outputText value="Halep, Simona"/>
   <h:outputText value="Romania"/>
   <h:outputText value="27 Sep 1991"/>
   <h:outputText value="6580"/>
   <h:outputText value="18"/>

   <h:outputText value="3"/>
   <h:outputText value="Sharapova, Maria"/>
   <h:outputText value="Russia"/>
   <h:outputText value="19 Apr 1987"/>
   <h:outputText value="4691"/>
   <h:outputText value="17"/>
  </h:panelGrid>
 </h:body>
</html>

The columns attribute represents the number of columns to render before starting a new row. The above code will be rendered in HTML as:

<table>
 <tbody>
  <tr>
   <td>1</td>
   <td>Williams, Serena</td>
   <td>United States</td>
   <td>26 Sep 1981</td>
   <td>11285</td>
   <td>15</td>
  </tr>
  <tr>
   <td>2</td>
   <td>Halep, Simona</td>
   <td>Romania</td>
   <td>27 Sep 1991</td>
   <td>6580</td>
   <td>18</td>
  </tr>
  <tr>
   <td>3</td>
   <td>Sharapova, Maria</td>
   <td>Russia</td>
   <td>19 Apr 1987</td>
   <td>4691</td>
   <td>17</td>
  </tr>
 </tbody>
</table>

Basic/common usage (II) - display a nice form with labels, inputs and error messages:

<h:form>
 <h:panelGrid columns="3">
  <h:outputLabel for="nameId" value="Name:"/>
  <h:inputText id="nameId" required="true"/>
  <h:message for="nameId" style="color:red;"/>
  <h:outputLabel for="emailId" value="E-mail:"/>
  <h:inputText id="emailId" required="true"/>
  <h:message for="emailId"  style="color:red;"/>
  <h:outputLabel for="countryId" value="Country:"/>
  <h:selectOneMenu id="countryId" required="true">
   <f:selectItem itemLabel="Romania"/>
   <f:selectItem itemLabel="Spain"/>
   <f:selectItem itemLabel="Italy"/>
  </h:selectOneMenu>  
  <h:message for="countryId"  style="color:red;"/>
  <h:commandButton value="Order"/>           
 </h:panelGrid>
</h:form>
More examples:
Render a table with header and footer

<h:form>
 <h:panelGrid columns="3">
  <f:facet name="header">
   Place your order below
  </f:facet>
  <h:outputLabel for="nameId" value="Name:"/>
  <h:inputText id="nameId" required="true"/>
  <h:message for="nameId" style="color:red;"/>
  <h:outputLabel for="emailId" value="E-mail:"/>
  <h:inputText id="emailId" required="true"/>
  <h:message for="emailId"  style="color:red;"/>
  <h:outputLabel for="countryId" value="Country:"/>
  <h:selectOneMenu id="countryId" required="true">
   <f:selectItem itemLabel="Romania"/>
   <f:selectItem itemLabel="Spain"/>
   <f:selectItem itemLabel="Italy"/>
  </h:selectOneMenu>  
  <h:message for="countryId"  style="color:red;"/>
  <h:commandButton value="Order"/>           
  <f:facet name="footer">
   <h:outputText value="Last updated: October 17, 2015" style="font-size:10px;"/>
  </f:facet>
 </h:panelGrid>     
</h:form>

Styling a table using CSS class

<h:form>
 <h:panelGrid columns="3" class="panelGrid-css">
  <f:facet name="header">
   Place your order below
  </f:facet>
  <h:outputLabel for="nameId" value="Name:"/>
  <h:inputText id="nameId" required="true"/>
  <h:message for="nameId" style="color:red;"/>
  <h:outputLabel for="emailId" value="E-mail:"/>
  <h:inputText id="emailId" required="true"/>
  <h:message for="emailId"  style="color:red;"/>
  <h:outputLabel for="countryId" value="Country:"/>
  <h:selectOneMenu id="countryId" required="true">
   <f:selectItem itemLabel="Romania"/>
   <f:selectItem itemLabel="Spain"/>
   <f:selectItem itemLabel="Italy"/>
  </h:selectOneMenu>  
  <h:message for="countryId"  style="color:red;"/>
  <h:commandButton value="Order"/>           
  <f:facet name="footer">
   <h:outputText value="Last updated: October 17, 2015" style="font-size:10px;"/>
  </f:facet>
 </h:panelGrid>
</h:form>

CSS sample:

.panelGrid-css, .panelGrid-css td {
  border-collapse:collapse;
  background-color:#eee;
  border:1px solid #000;
  padding:3px 5px;
 }
 .panelGrid-css th {
  background-color:#ccc;
 }
 .panelGrid-css tfoot td {
  background-color:#ccc;
  text-align:right;
  font-size:12px;
 }
Dynamic table rows

<h:panelGrid columns="6" class="panelGrid-css">
 <f:facet name="header">
   WTA Singles Rankings
 </f:facet>
 <c:forEach items="#{playerBean.players}" var="player">
  <h:column>
   #{player.rank}
  </h:column>
  <h:column>
   #{player.name}
  </h:column>
  <h:column>
   #{player.country}
  </h:column>
  <h:column>
   #{player.dateOfBirth}
  </h:column>
  <h:column>
   #{player.points}
  </h:column>
  <h:column>
   #{player.tournaments}
  </h:column>
 </c:forEach>
 <f:facet name="footer">
  Last updated: #{playerBean.today.toLocaleString()}
 </f:facet>
</h:panelGrid>

The PlayerBean is (Player is just a simple bean, not listed here):

@Named
@RequestScoped
public class PlayerBean {

 private final List<Player> players;
 private final Date today;

 public PlayerBean() {
  today = new Date();
  players = new ArrayList<>();
  players.add(new Player(1, "Serena Williams", "United States", "26 Sep 1981", 11285, 15));
  players.add(new Player(2, "Simona Halep", "Romania", "27 Sep 1991", 6580, 18));
  players.add(new Player(3, "Maria Sharapova", "Russia", "19 Apr 1987", 4691, 17));
  players.add(new Player(4, "Garbine Muguruza", "Spain", "08 Oct 1993", 4690, 20));
  players.add(new Player(5, "Petra Kvitova", "Czech Republic", "08 Mar 1990", 3860, 19));
  players.add(new Player(6, "Agnieszka Radwanska", "Poland", "06 Mar 1989", 3515, 23));
 }

 public List<Player> getPlayers() {
  return players;
 }

 public Date getToday() {
  return today;
 }
}

Do not try to obtain the same thing via <ui:repeat>. While <c:forEach> is a view build time tag, the <ui:repeat> is a render time tag. With other words, <ui:repeat> is a component handler, while <c:forEach> is a tag handler, so you have to pay attention when you choose between them! In case of <ui:repeat>, the <h:panelGrid> will contain a single child, which is that <ui:repeat>. In case of <c:forEach>, the <h:panelGrid> will have n children (one for each iteration).
Nested panel grids

<h:form>
 <h:panelGrid columns="3" class="panelGrid-css">
  <f:facet name="header">
   Place your order below
  </f:facet>
  <h:outputLabel for="nameId" value="Name:"/>
  <h:inputText id="nameId" required="true"/>
  <h:message for="nameId" style="color:red;"/>
  <h:outputLabel for="emailId" value="E-mail:"/>
  <h:inputText id="emailId" required="true"/>
  <h:message for="emailId"  style="color:red;"/>
  <h:outputLabel for="countryId" value="Country:"/>
  <h:selectOneMenu id="countryId" required="true">
   <f:selectItem itemLabel="Romania"/>
   <f:selectItem itemLabel="Spain"/>
   <f:selectItem itemLabel="Italy"/>
  </h:selectOneMenu>  
  <h:message for="countryId"  style="color:red;"/>
  <h:panelGrid columns="4">
   <h:commandButton value="Order"/>           
   <h:commandButton value="Cancel"/>           
   <h:commandButton value="Clear"/>           
   <h:commandButton value="Back"/>           
  </h:panelGrid>
  <f:facet name="footer">
   <h:outputText value="Last updated: October 17, 2015" style="font-size:10px;"/>
  </f:facet>
 </h:panelGrid>
</h:form>
Styling table header and footer using CSS classes

<h:panelGrid columns="6" headerClass="header" footerClass="footer">
 <f:facet name="header">
  WTA Singles Rankings
 </f:facet>

 <h:outputText value="1"/>
 <h:outputText value="Williams, Serena"/>
 <h:outputText value="United States"/>
 <h:outputText value="26 Sep 1981"/>
 <h:outputText value="11285"/>
 <h:outputText value="15"/>
 ...
 <f:facet name="footer">
  Last updated: October 17, 2015
 </f:facet>
</h:panelGrid>

CSS sample:

.header {
 background-color:#6cf;
 color:#444;
}
.footer {
 background-color:#9ff;
 font-size:12px;
 color:#444;
} 
Individual row styles in a table

<h:panelGrid columns="6" rowClasses="first,second,third">
 <h:outputText value="1"/>
 <h:outputText value="Williams, Serena"/>
 <h:outputText value="United States"/>
 <h:outputText value="26 Sep 1981"/>
 <h:outputText value="11285"/>
 <h:outputText value="15"/>

 <h:outputText value="2"/>
 <h:outputText value="Halep, Simona"/>
 <h:outputText value="Romania"/>
 <h:outputText value="27 Sep 1991"/>
 <h:outputText value="6580"/>
 <h:outputText value="18"/>
 ...
</h:panelGrid>

CSS sample:

.first {
 background-color:#ffc;
}
.second {
 background-color:#cfc;
}
.third {
 background-color:#fcc;
}
Individual column styles in a table

<h:panelGrid columns="6" columnClasses="first,second,third">
 <h:outputText value="1"/>
 <h:outputText value="Williams, Serena"/>
 <h:outputText value="United States"/>
 <h:outputText value="26 Sep 1981"/>
 <h:outputText value="11285"/>
 <h:outputText value="15"/>

 <h:outputText value="2"/>
 <h:outputText value="Halep, Simona"/>
 <h:outputText value="Romania"/>
 <h:outputText value="27 Sep 1991"/>
 <h:outputText value="6580"/>
 <h:outputText value="18"/>
 ...
</h:panelGrid>

CSS sample:

.first {
 background-color:#ffc;
}
.second {
 background-color:#cfc;
}
.third {
 background-color:#fcc;
}
Adding cell spacing and padding to a table

<h:panelGrid columns="6" cellspacing="30" cellpadding="15" class="custom">
 <h:outputText value="1"/>
 <h:outputText value="Williams, Serena"/>
 <h:outputText value="United States"/>
 <h:outputText value="26 Sep 1981"/>
 <h:outputText value="11285"/>
 <h:outputText value="15"/>

 <h:outputText value="2"/>
 <h:outputText value="Halep, Simona"/>
 <h:outputText value="Romania"/>
 <h:outputText value="27 Sep 1991"/>
 <h:outputText value="6580"/>
 <h:outputText value="18"/>
 ...
</h:panelGrid>

CSS sample:

.custom {
 background-color:#999;
}
.custom td {
 background-color:#eee;
 border:1px solid #000; 
}
Different alignment styles in a table cell (I)

<h:panelGrid columns="6" class="td-size" columnClasses="text-left,text-center,text-right,
                                                        text-vbottom,text-vmiddle,text-vtop">
 <h:outputText value="1"/>
 <h:outputText value="Williams, Serena"/>
 <h:outputText value="United States"/>
 <h:outputText value="26 Sep 1981"/>
 <h:outputText value="11285"/>
 <h:outputText value="15"/>

 <h:outputText value="2"/>
 <h:outputText value="Halep, Simona"/>
 <h:outputText value="Romania"/>
 <h:outputText value="27 Sep 1991"/>
 <h:outputText value="6580"/>
 <h:outputText value="18"/>

 <h:outputText value="3"/>
 <h:outputText value="Sharapova, Maria"/>
 <h:outputText value="Russia"/>
 <h:outputText value="19 Apr 1987"/>
 <h:outputText value="4691"/>
 <h:outputText value="17"/>
</h:panelGrid>

CSS sample:

.td-size td {
 border:1px solid #000;
 width:150px;
 height:100px;
}
.text-left {
 text-align:left;
}
.text-center {
 text-align:center;
}
.text-right {
 text-align:right;
}
.text-vbottom {
 vertical-align:bottom;
}
.text-vmiddle {
 vertical-align:middle;
}
.text-vtop {
 vertical-align:top;
}
Different alignment styles in a table cell (II)

<h:panelGrid columns="6" class="td-size" columnClasses="text-topleft,text-topcenter,
                         text-topright,text-bottomleft,text-bottomcenter,text-bottomright">
 <h:outputText value="1"/>
 <h:outputText value="Williams, Serena"/>
 <h:outputText value="United States"/>
 <h:outputText value="26 Sep 1981"/>
 <h:outputText value="11285"/>
 <h:outputText value="15"/>

 <h:outputText value="2"/>
 <h:outputText value="Halep, Simona"/>
 <h:outputText value="Romania"/>
 <h:outputText value="27 Sep 1991"/>
 <h:outputText value="6580"/>
 <h:outputText value="18"/>

 <h:outputText value="3"/>
 <h:outputText value="Sharapova, Maria"/>
 <h:outputText value="Russia"/>
 <h:outputText value="19 Apr 1987"/>
 <h:outputText value="4691"/>
 <h:outputText value="17"/>
</h:panelGrid>

CSS sample:

.td-size td {
 border:1px solid #000;
 width:150px;
 height:100px;
}
.text-topleft {
 text-align:left;
 vertical-align:top;
}
.text-topcenter {
 text-align:center;
 vertical-align:top;
}
.text-topright {
 text-align:right;
 vertical-align:top;
}
.text-bottomleft {
 text-align:left;
 vertical-align:bottom;
}
.text-bottomcenter {
 text-align:center;
 vertical-align:bottom;
}
.text-bottomright {
 text-align:right;
 vertical-align:bottom;
}
Setting a vertical text-direction in cells

<h:panelGrid columns="2" class="td80" columnClasses="vertical-rl,vertical-lr">
 <h:outputText value="Williams, Serena"/>
 <h:outputText value="Williams, Serena"/>

 <h:outputText value="Halep, Simona"/>
 <h:outputText value="Halep, Simona"/>

 <h:outputText value="Sharapova, Maria"/>
 <h:outputText value="Sharapova, Maria"/>
</h:panelGrid>

<!-- NOTE -->
<br/>
<p class="vertical-lr" style="height:100px">
 For Chrome and Opera, 'writing-mode' vertical-rl and
 vertical-lr is currently not supported inside table cells.
</p>
<br/><br/>
<p class="vertical-rl" style="height:100px">
 For Chrome and Opera, 'writing-mode' vertical-rl and
 vertical-lr is currently not supported inside table cells.
</p>

CSS sample:

.td80 td {
 border:1px solid #000;
 width:80px;
 height:80px;
}
.vertical-rl {
 -ms-writing-mode:tb-rl;
 -webkit-writing-mode:vertical-rl;
 -moz-writing-mode:vertical-rl;
 -ms-writing-mode:vertical-rl;
 writing-mode:vertical-rl;
}
.vertical-lr {
 -ms-writing-mode:tb-lr;
 -webkit-writing-mode:vertical-lr;
 -moz-writing-mode:vertical-lr;
 -ms-writing-mode:vertical-lr;
 writing-mode:vertical-lr;
}
Mozilla FirefoxGoogle Chrome

Center a table horizontally

<h:panelGrid columns="6" class="centerHorizontally">
 <h:outputText value="1"/>
 <h:outputText value="Williams, Serena"/>
 <h:outputText value="United States"/>
 <h:outputText value="26 Sep 1981"/>
 <h:outputText value="11285"/>
 <h:outputText value="15"/>
 ...
</h:panelGrid>

CSS sample:

.centerHorizontally {
 border:1px solid #000;
 position:relative;

 width:500px;
 height:200px;

 margin-left:-250px;
 left:50%;
}
Center a table horizontally and vertically

<h:panelGrid columns="6" class="centerOnScreen">
 <h:outputText value="1"/>
 <h:outputText value="Williams, Serena"/>
 <h:outputText value="United States"/>
 <h:outputText value="26 Sep 1981"/>
 <h:outputText value="11285"/>
 <h:outputText value="15"/>
 ...
</h:panelGrid>

CSS sample:

.centerOnScreen {
 border:1px solid #000;
 position:absolute;
                
 width:500px;
 height:200px;
            
 margin-left:-250px;
 margin-top:-100px;
 top:50%;
 left:50%;
}
Set table background and border

<h:panelGrid columns="6" border="3" bgcolor="orange">
 <h:outputText value="1"/>
 <h:outputText value="Williams, Serena"/>
 <h:outputText value="United States"/>
 <h:outputText value="26 Sep 1981"/>
 <h:outputText value="11285"/>
 <h:outputText value="15"/>
 ...
</h:panelGrid>
Set table caption

<h:panelGrid columns="6" border="1">
 <f:facet name="caption">
  WTA Singles Rankings
 </f:facet>
 <h:outputText value="1"/>
 <h:outputText value="Williams, Serena"/>
 <h:outputText value="United States"/>
 <h:outputText value="26 Sep 1981"/>
 <h:outputText value="11285"/>
 <h:outputText value="15"/>
 ...
</h:panelGrid>
Styling table caption, header and footer with CSS classes

<h:panelGrid columns="6" border="1" headerClass="header" footerClass="footer" captionClass="caption">
 <f:facet name="caption">
  WTA Singles Rankings
 </f:facet>
 <f:facet name="header">
  First six positions
 </f:facet>
 <h:outputText value="1"/>
 <h:outputText value="Williams, Serena"/>
 <h:outputText value="United States"/>
 <h:outputText value="26 Sep 1981"/>
 <h:outputText value="11285"/>
 <h:outputText value="15"/>
 ...
 <f:facet name="footer">
  Last updated: October 17, 2015
 </f:facet>
</h:panelGrid>

CSS sample:

.header {
 background-color:#6cf;
 color:#444;
}
.footer {
 background-color:#9ff;
 font-size:12px;
 color:#444;
}
.caption{
 background-color: aqua;
 font-style: inherit;
 font-weight: bolder;
}
There is also available the captionStyle attribute for inline CSS code, and <f:facet> supports the class attribute for indicating CSS classes for header, footer and caption.
Complete source code on GitHub.
See also Mkyong.com.
More resources on Constantin Alin, ZEEF page.
PanelGrid in JSF Extension on JSF ShowCase ZEEF page.
Publicat de la
Etichete:

Niciun comentariu :

Trimiteți un comentariu

Abonați-vă la: Postare comentarii ( Atom )

JSF BOOKS COLLECTION

Postări populare

OmniFaces/JSF Fans

Visitors Starting 4 September 2015

Locations of Site Visitors