ejemplo

Dentro de la carpeta pages encontramos una carpeta ejemplos y el archivo list.xhmtl

Desde el navegador

http://localhost:8080/tallerjsd/faces/pages/ejemplo/list.xhtml

Como aun no nos hemos logeado se mostrara

Cuando implementemos las demás opciones del proyecto tendría la siguiente apariencia

Al ejecutarlo mostrará el siguiente diseño

Codigo completo

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:b="http://bootsfaces.net/ui">

    <body>

        <ui:composition template="./../../WEB-INF/template.xhtml">
            <ui:define name="top">
                <!--
                titulo de la pagina
                -->
                <h1>
                    #{msg['paises.title']}
                    <small> </small>
                </h1>

            </ui:define>

            <!--
            Contenido
            -->
            <ui:define name="content">

                <h:form id="form" rendered="#{loginController.loggedIn}">
                    <h:panelGroup id="content" layout="block"> 
                        <p:messages id="msgs"/>
                        <!--
                      header del formulario
                        -->
                        <div class="row form-header-2" style="padding-top: 5px;">
                            <div class="col-md-12 record-status-buttons">   

                                <p:commandButton class="btnn btnn-primary" value="#{msg['boton.save']}"   update=":form:content" /> 

                            </div>
                        </div>
                        <!--
                        body
                        -->
                        <div class="row form-body">  

                            <!--
                            los elementos en filas
                            -->
                            <div class="form-group row">
                                <p:outputLabel class="col-xs-2 col-form-label" value="Texto"/>

                                <div class="col-xs-4">

                                    <p:inputText value=""/>
                                </div>

                            </div>

                        </div>


                    </h:panelGroup>

                </h:form>

            </ui:define>

        </ui:composition>

    </body>
</html>

Se compone de varias secciones

top: definimos el titulo de la pagina

<ui:define name="top">
                <!--
                titulo de la pagina
                -->
                <h1>
                    #{msg['paises.title']}
                    <small> </small>
                </h1>

            </ui:define>

Content: Se define el contenido de la pagina

  <ui:define name="content">
       Aquí escribir el contenido de la pagina
  </ui:define>

Verificar el acceso al formulario

<h:form id="form" rendered="#{loginController.loggedIn}">

Definir un panel general

<h:panelGroup id="content" layout="block">

Agregar un componente para mensajes

<p:messages id="msgs"/>

Header del formulario, donde definimos los botones

 <!--

                      header del formulario
                        -->
                        <div class="row form-header-2" style="padding-top: 5px;">
                            <div class="col-md-12 record-status-buttons">   

                                <p:commandButton class="btnn btnn-primary" value="#{msg['boton.save']}"   update=":form:content" /> 

                            </div>
                        </div>

El cuerpo del formulario

  <!--
                        body
                        -->
                        <div class="row form-body">  

                            <!--
                            los elementos en filas
                            -->
                            <div class="form-group row">
                                <p:outputLabel class="col-xs-2 col-form-label" value="Texto"/>

                                <div class="col-xs-4">

                                    <p:inputText value=""/>
                                </div>

                            </div>

                        </div>

Esta es la estructura básica de los formularios, los elementos serán colocados mediante <div class="">

Previousweb.xml Nextindex

Last updated 6 years ago

Was this helpful?