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>看做是一個組件來看待， 其完成的版面配置以下所示：