如何在PrimeFaces Mobile頁面中佈置按鈕？

我想創建一個移動網頁（基於PrimeFaces移動），它看起來像這樣：如何在PrimeFaces Mobile頁面中佈置按鈕？

的圖像和它的下面 - 兩個按鈕。

我寫了這以下的XHTML頁面：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml" 
     xmlns:h="http://java.sun.com/jsf/html" 
     xmlns:f="http://java.sun.com/jsf/core" 
     xmlns:p="http://primefaces.org/ui" 
     xmlns:pm="http://primefaces.org/mobile"> 

<f:view renderKitId="PRIMEFACES_MOBILE"/> 

<h:head> 

</h:head> 

<f:event listener="#{main.loadFirstImage}" type="preRenderView" /> 

<h:body id="body"> 

    <pm:page id="page"> 
     <pm:header title="myapp"> 
     </pm:header> 

     <pm:content id="content"> 
      <h:form> 
       <p:panelGrid columns="2"> 
        <p:row> 
         <p:column colspan="2"> 
          <p:graphicImage id="image" rendered="false" value="#{main.currentImage()}" 
              cache="false"> 
          </p:graphicImage> 
         </p:column> 
        </p:row> 
        <p:row> 
         <p:column colspan="1"> 
          <p:commandButton id="hotButton" 
              value="Button 1"/> 

         </p:column> 
         <p:column colspan="1"> 
          <p:commandButton id="notButton" 
              value="Button 2"/> 

         </p:column> 
        </p:row> 
       </p:panelGrid> 
      </h:form> 
     </pm:content> 

     <pm:footer title="m.myapp.info"></pm:footer> 
    </pm:page> 
</h:body> 

</html>

而是我得到這樣的觀點：

我怎樣才能改變我的XHTML文件以獲得所需的佈局？

來源

2014-11-05 DP_

簡化您的<p:panelGrid>您不需要<p:row>和<p:column>。

<p:panelGrid columns="1"> 
    <p:graphicImage id="image"></p:graphicImage> 
    <p:panelGrid columns="2"> 
     <p:commandButton id="hotButton" value="Button 1"/> 
     <p:commandButton id="notButton" value="Button 2"/> 
    </p:panelGrid> 
</p:panelGrid>

或全部真的要改變的是你的panelGrid中列2至1：

<p:panelGrid columns="1">

在<p:panelGrid>每個JSF組件將根據在columns指定的號碼創建一個新列屬性。

實例：

<p:panelGrid columns="1"> 
    <h:outputText value="1" /> 
    <h:outputText value="2" /> 
</p:panelGrid>

enter image description here

<p:panelGrid columns="2"> 
    <h:outputText value="1" /> 
    <h:outputText value="2" /> 
</p:panelGrid>

enter image description here

來源

2014-11-05 20:17:20 Mark

如何在PrimeFaces Mobile頁面中佈置按鈕？

回答

相關問題