H:panelgrid, h:panelgroup label Learning

This tag can be used for simple component typesetting, which uses HTML table tags to draw tables and place components in them, primarily specifying the Columns property, for example, set to 2:
The component is automatically divided into 2 column, arranged as follows:


The <f:verbatim>Username</f:verbatim>
<f:verbatim>Password</f:verbatim>



This component is used to wrap several JSF components so that they look like a component, such as:
Includes two

Reproduced below and http://blog.csdn.net/liyong1115/archive/2008/02/27/2125029.aspx
First, the Panelgrid and the related design elements

Panelgrid equivalent HTML table, in the design of the components associated with the Panelgrop, and the matching CSS

Design elements include Styleclass, Headerclass, Footerclass, rowclasses, and columnclasses. These dollars

The organic combination of the element, can design different output picture.

In HTML Web page design, the table has <table><tr><td> mark symbol, also can embed the CSS control inside the markup symbol

System statement to control the output of the expression form. Panelgrid in JSF, although they correspond to HTML tables, are designed

There's still a lot of difference. For example we assume that there is an HTML table as follows:

<table>
<tr>
<td>...</td>
<td>...</td>
</tr>

<tr>
<td>...</td>
<td>...</td>
</tr>
</table>

Then the Panelgrid's corresponding tag is:

...
...
...
...


It has only shell tags, no row control, and column control tags.

Familiar with the HTML programming of the Taoist at a glance, only the shell tag, you how to control the row or column output style. Don't

Anxious that the JSF designers had thought that they were designing

Styleclass, Headerclass, Footerclass, rowclasses, columnclasses These design elements to control

The output style of the row and column, where
Styleclass is the overall appearance of the format table, such as the length and width of the table, the outer border style, the table background style, and so on.
Headerclass and Footerclass are the header and footer of the control table respectively.
Rowclasses and columnclasses control the row and column styles of a table, respectively.

Let's say for example, we have the following example:

Styleclass= "Styleclazz"
Headerclass= "Headerclazz"
Footerclass= "Footerclazz"
Rowclasses= "Row1,row2"
Columnclasses= "Column1"
>

<f:facet >
</f:facet>


<f:facet >
</f:facet>

This is a table, columns= "1", which stipulates that only one column of this table, cellpadding= "5" describes the border outside

The distance from the inside is 5 pixels. The table consists of three parts, one head, one tail, and the middle table body. Headerclass

Is the style of the format head, the Footerclass is the format tail style, rowclasses and columnclasses are the format lines and

of the column style. Rowclasses= "Row1,row2" stipulates that rows and rows of tables are alternately formatted with ROW1 and Row2 style classes

Output style, same as column, and can also use 3, 4 or more row3, row4 ... To lose in alternate format

Out of style.

The corresponding style class can be written in a CSS file as follows:


/*styleclass is in the parent class, headerclazz,rowclasses, and so on when the font is set to take EM,
The size displayed on the screen will be enlarged or reduced by reference to the font size setting of the class.

. styleclazz{
Font-size:1em;
Color:blue;
Border-style:solid;
border-color:red;
border-width:1px;
}

. headerclazz{
Background-color: #3F536B;
Font-family: Song body;
Font-size:1.5em;
Color:white;
Text-align:center;
}

. footerclazz{
Background-color: #3F536B;
Font-family: Song body;
Font-size:1.5em;
Color:white;
Text-align:center;
}

/* Line style is subject to column style when both row and column styles are used
The color of the border needs to be defined in columnclasses,
Definition does not work in rowclasses
*/

. row1{
Background-color: #FFFFFF;
}

. row2{
Background-color: #C9D3E0;
}

. column1{
Border-style:solid;
border-color:red;
border-width:1px;
}

. column2{
}


You can use CSS in the JSP syntax to write it in the JSP file.

Ii. Panelgrid How to format a table with split-merged styles

This is used to panelgroup, and its role is to treat the encapsulated components as a component, if the Panelgroup

Encapsulates a panelgrid, the encapsulated table in the other table is equivalent to a child table. To seal through the Panelgroup

The way to install the UI components is to implement the table splitting purpose.

...

Or:


They are equivalent to a display element in the container (as if they had been living in a room alone, and now more people are living in a room).

Iii. How to implement design element alignment in Panelgrid

Panelgrid is a CSS language to format the output style, in the CSS language can be used vertial-align: ...; Come on, Gerry.

The output element is vertically aligned, using the text-align: ...; To achieve horizontal alignment of the output elements. where Text-align a bit

Confused, because literally it should be for text, but it also works for other elements.

Having a center alignment problem in the alignment design is easy to wrap around people. Available in HTML <center>...</center> for real

The encapsulated view element is centered, but there seems to be no similar statement in the CSS. Actually, it's just a corner.

。 You want to, when it comes to centering, that's how wide the center is. It's me. This element is centered in the container that encapsulates me,

Or the element that I encapsulated is centered in my container. This problem CSS is not the same as HTML processing semantics.

In HTML, the table is centered:
<table align= "center" >
...
</table>

The table centered here means that the form "I" is centered in the container <body> that encapsulates me, as shown in the screen

, but you cannot pass the

...

To achieve Panelgrid in <body> Center. Because the Panelgrid tag does not support this statement at all. Or are you going through CSS

To achieve. The following syntax for using CSS statements to describe the center semantics differs from HTML using align= "center" semantics.


This statement is about me. This object is centered in the Panelgrid, not the table centered in the <body> (screen). I

What to do if you are centered in the screen. There are two ways, one is to add a format description to the <body>, and the second way is to

Panelgrid a Panelgrid the outside. That





This enables the encapsulated Panelgrid B to be centered in a, note that the width=979px here is necessary, it

The center is centered within the width of the range. The number can be adjusted, but you cannot write this agreement, otherwise, be

Panelgrid that are encapsulated inside are still not centered on the screen.

There is also a point of attention, inside Panelgrid B's text-align inheritance outside Panelgrid a text-align genus

Sex of the agreement, that is, inside the Panelgrid do not write style= "Text-align:center", the object of me will also be in the

Center in the face Panelgrid. But inside the Panelgrid does not inherit the outside width, like above, inside Panelgrid the apparent

The width is related to the longest me1, not the width of the outer panelgrid a 979px.

Iv. Other
When the screen's explicit format is 1024 X 768, the outermost panelgrid width is 979px when the screen is maximized

The bottom scroll bar appears as a critical value that does not appear, such as more than 979 scroll bars.
It can be encapsulated by a CSS class that works on <table><tr> or <td>. As written in the style statement

, the form is as follows:

...