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