forms - template - ¿Cómo se usa<h: form> en la página JSF? ¿Forma única? Múltiples formas? Formas anidadas?

ui:composition primefaces

Question

Estoy utilizando la tecnología de plantillas de Facelet para diseñar mi página en una aplicación JSF 2 en la que estoy trabajando.

En mi header.xhtml, primefaces requiere que la barra de menú esté encerrada en h: form.

<h:form>
    <p:menubar autoSubmenuDisplay="true">
        Menu Items here!
    </p:menubar>
</h:form>

Entonces, en mis páginas de contenido, tendré otro h: formulario o más.

¿Funcionará simplemente si coloco el formulario h: en mi template.xhtml?

<h:body>
    <h:form>
        <div id="top">
            <ui:insert name="header"><ui:include src="sections/header.xhtml"/></ui:insert>
        </div>
        <div>
            <div id="left">
                <ui:insert name="sidebar"><ui:include src="sections/sidebar.xhtml"/></ui:insert>
            </div>
            <div id="content" class="left_content">
                <ui:insert name="content">Content</ui:insert>
            </div>
        </div>
        <div id="bottom">
            <ui:insert name="footer"><ui:include src="sections/footer.xhtml"/></ui:insert>
        </div>
    <h:form>
</h:body>

De hecho, estoy pensando en un caso de uso donde necesito múltiples h: formulario en una página.

Gracias

Answer 1

Estuve confundido por este problema por un tiempo. En lugar de una serie de formularios independientes, me convertí a una plantilla, es decir, en lugar de hacer una llamada a un xhtml con formularios enumerados, generalmente como ui: include, hago una llamada a las páginas anteriormente ui: incluidas xhtml que ui: contenido capturado en una plantilla principal.

Answer 2

Puede usar múltiples formularios de forma segura en una página JSF. No es diferente a cuando se usa HTML simple.

Anidar elementos <form> no es válido en HTML . Como JSF solo genera un montón de HTML, no es diferente en JSF. Por lo tanto, anidar <h:form> tampoco es válido en JSF.

<h:form>
    ...
    <h:form> <!-- This is INVALID! -->
        ...
    </h:form>
    ...
</h:form>

El comportamiento del navegador en cuanto a enviar un formulario anidado no está especificado. Puede o no funcionar de la manera que esperas. Por ejemplo, puede actualizar la página sin invocar el método de acción de frijol. Incluso si mueve la forma anidada (o un componente que la contiene) fuera de la forma principal con manipulación dom (o, por ejemplo, usando PrimeFaces appendTo="@(body)" ), todavía no funcionará y debería haber no hay formularios anidados en el momento de cargar la página.

En cuanto a qué formas necesitas conservar, tener un solo "dios" <h:form> es una práctica pobre. Por lo tanto, será mejor que elimine la <h:form> externa de la plantilla maestra y deje que las secciones de header , sidebar , content , etc. definan su propia <h:form> . Múltiples formas paralelas es válido.

<h:form>
    ...
</h:form>
<h:form> <!-- This is valid. -->
    ...
</h:form>

Cada formulario debe tener una responsabilidad clara. Por ejemplo, un formulario de inicio de sesión, un formulario de búsqueda, el formulario principal, el formulario de diálogo, etc. No desea procesar innecesariamente todas las demás formas / entradas, cuando envía un formulario determinado.

Tenga en cuenta que cuando envía un formulario determinado, otros formularios NO se procesan. Entonces, si tiene la intención de procesar una entrada de otra forma de todos modos, entonces tiene un problema de diseño. O póngalo en la misma forma o agregue algunos feos hacks de JavaScript para copiar la información necesaria en un campo oculto del formulario que contiene el botón de enviar.

Dentro de una cierta forma, puede usar ajax para limitar el procesamiento de las entradas a un subconjunto más pequeño. Por ejemplo, <f:ajax execute="@this"> procesará (enviar / convertir / validar / invocar) solo el componente actual y no otros dentro del mismo formulario. Esto generalmente se usa en casos de uso donde otras entradas dentro de la misma forma deben ser dinámicamente rellenas / renderizadas / alternadas, por ejemplo, menús desplegables dependientes, listas de autocompletar, tablas de selección, etc.

Ver también:

• commandButton / commandLink / ajax action / listener method no invocado o input value not set / updated - point 2
• ¿Qué se supone que debe hacer <f: ajax execute = "@ all">? POST solo el formulario adjunto
• Comprender el proceso / actualización PrimeFaces y los atributos JSF f: ajax execute / render
• <p: botón de comando> la acción no funciona dentro de <p: ​​diálogo>