JSF – 26 – JSF HTML Tag – 10 – Panel

Merhaba Arkadaslar
Bu bolumde h:panelGrid ve h:panelGroup tag’larini inceleyecegiz. h:panelGrid , HTML table elementi olusturmak icin kullanilir.

PanelGridBean.java

package _32.panel;

import javax.faces.bean.ManagedBean;

@ManagedBean
public class PanelGridBean {

	private String name;
	private String surname;
	private String age;
	//getters and setters
...
}

panel.xhtml

 <h:panelGrid border="1">
 
 <h:outputText value="Name" />
 <h:inputText value="#{panelGridBean.name}" />
 <h:outputText value="Surname" />
 <h:inputText value="#{panelGridBean.surname}" />
 <h:outputText value="Age" />
 <h:inputText value="#{panelGridBean.age}" />

 </h:panelGrid>

h:panelGrid tag’i HTML table elementine donusur. Yukaridaki kod icin her bir tag bir row’da olacaktir.

<table border="1">
   <tbody>
      <tr>
          <td>Name</td>
      </tr>
      <tr>
          <td><input type="text" name="j_idt5:j_idt16"></td>
      </tr>
      <tr>
          <td>Surname</td>
      </tr>
      <tr>
          <td><input type="text" name="j_idt5:j_idt18"></td>
      </tr>
      <tr>
         <td>Age</td>
      </tr>
      <tr>
         <td><input type="text" name="j_idt5:j_idt20"></td>
      </tr>
   </tbody>
</table>

hpanelgrid

h:panelGroup tagini kullanarak tek bir <td> icerisinde elemanlari gruplayabiliriz.

 <h:panelGrid border="1">

     <h:panelGroup>
        <h:outputText value="Name" />
        <h:inputText value="#{personBean.name}" />
     </h:panelGroup>

     <h:panelGroup>
        <h:outputText value="Surname" />
        <h:inputText value="#{personBean.surname}" />
     </h:panelGroup>

     <h:panelGroup>
        <h:outputText value="Age" />
        <h:inputText value="#{personBean.age}" />
     </h:panelGroup>
 </h:panelGrid>

hpanelgrid2

<tr>
    <td>Name<input type="text" name="j_idt5:j_idt42"></td>
</tr>

h:panelGrid tag’inda column attribute u kullanabiliriz.

  <h:panelGrid columns="2" border="1">

 <h:outputText value="Name" />
 <h:inputText value="#{personBean.name}" />
 <h:outputText value="Surname" />
 <h:inputText value="#{personBean.surname}" />
 <h:outputText value="Age" />
 <h:inputText value="#{personBean.age}" />

 </h:panelGrid>

hpanelgrid1

h:panelGrid tag’inda ekleyebilecegimiz cesitli attribute’ler vardir. rowClass , footerClass , bgcolor vs.

f:facet tagini kullanarak header ve footer olusturabiliriz.

  <h:panelGrid columns="2" border="1" rowClasses="myRowClass" bgcolor="" footerClass="myFooterClass">

 <f:facet name="header">
 <h:outputText value="User Details" />
 </f:facet>
 
 <f:facet name="footer">
 <h:outputText value="footer info" />
 </f:facet>

 <h:outputText value="Name" />
 <h:inputText value="#{personBean.name}" />
 <h:outputText value="Surname" />
 <h:inputText value="#{personBean.surname}" />
 <h:outputText value="Age" />
 <h:inputText value="#{personBean.age}" />

 </h:panelGrid>

hpanelgrid3

Kaynak kodlar : Injavawetrust.jsf
Yazimi burada sonlandiriyorum.
Herkese bol Javali gunler dilerim.
Be an oracle man , import java.*;
Levent Erguder
OCP, Java SE 6 Programmer
OCE, Java EE 6 Web Component Developer

Print Friendly, PDF & Email

Leave a Reply

Your email address will not be published. Required fields are marked *