Jsf 如何在PrimeFaces移动页面中布局按钮？_Jsf_Jsf 2_Primefaces_Primefaces Mobile

Jsf 如何在PrimeFaces移动页面中布局按钮？

jsf jsf-2 primefaces

Jsf 如何在PrimeFaces移动页面中布局按钮？,jsf,jsf-2,primefaces,primefaces-mobile,Jsf,Jsf 2,Primefaces,Primefaces Mobile,我想创建一个移动网页（基于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 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文件以获得所需的布局？

简化您的布局，您不需要

和

<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>

<p:panelGrid columns="1">

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

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