How to put a p:commandButton inside a p:panel footer

Question

I want to put a primefaces commandButton inside a panel footer but it seems that primefaces panel footers take only text, i want to do something like that :

            <p:panel id="JunglePanel" header="Jungle" footer="<p:commandButton action="#{JungleBean.navigate}"
                            ajax="false" value="Navigate"">
           </p:panel>

but it didn't work, does anyone know how to achieve that ?

Answer 1

If you want footer have the same css as header, you can apply header's css to footer, i have tested and it work:

         <h:form>
            <p:panel id="JunglePanel" header="Jungle">
                <f:facet name="footer" >
                    <div class="ui-panel-titlebar ui-widget-header ui-helper-clearfix ui-corner-all">
                        <p:commandButton value="xxx" />
                    </div>
                </f:facet>
                Content here
            </p:panel>
        </h:form>

Answer 2

You can't put tags inside EL, do it like this :

<p:panel id="JunglePanel" header="Jungle">
    <f:facet name="footer">
        <p:commandButton action="#{JungleBean.navigate}" ajax="false" value="Navigate" />
    </f:facet>
</p:panel>

Answer 3

那个方面不是对话框，它属于形式，把它带到外面。