h:panelGrid、h:panelGroup标签学习

      这个标签能够用来做简单的组件排版， 它 会使用HTML表格标签来绘制表格 ，并将组件置于其中，主要指定columns属性，例如设定为 2：
      <h:panelGrid columns="2">
              <h:outputText value="Username"/>
              <h:inputText id="name" value="#{userBean.name}"/>
              <h:outputText value="Password"/>
              <h:inputText id="password" value="#{userBean.password}"/>
              <h:commandButton value="submit" action="login"/>
              <h:commandButton value="reset"  type="reset"/ >
      </h:panelGrid>
      则自动将组件分做 2 个 column来排列，排列出来的样子以下：
                                                      

      <h:panelGrid>的本体间只能包括JSF组件， 若是想要放入非JSF组件 ，例如简单的样版（template）文字，则要使用 <f:verbatim>包括住，例如：
      <h:panelGrid columns="2">
              <f:verbatim> Username </f:verbatim>
              <h:inputText id="name" value="#{userBean.name}"/>
              <f:verbatim>Password</f:verbatim>
              <h:inputText id="password" value="#{userBean.password}"/>
              <h:commandButton value="submit" action="login"/>
              <h:commandButton value="reset" type="reset"/>
      </h:panelGrid>
      <h:panelGroup> 这个组件用来将数个JSF组件包装起来，使其看来像是一个组件，例如：
      <h:panelGrid columns="2">
              <h:outputText value="Username"/>
              <h:inputText id="name" value="#{userBean.name}"/>
              <h:outputText value="Password"/>
              <h:inputText id="password" value="#{userBean.password}"/>
              <h:panelGroup>
                      <h:commandButton value="submit" action="login"/>
                      <h:commandButton value="reset" type="reset"/>
              </h:panelGroup>
      </h:panelGrid>
      在<h:panelGroup>中包括了两个<h:commandButton>，这使得< h:panelGrid>在处理时， 将那两个<h:commandButton>看做是一个组件来看待， 其完成的版面配置以下所示：