Esta pagina contendrá una representación de los atributos de la colección que nos permitirá insertarlos en el documento.
Crear la carpeta titpovehiculo (Se debe crear una carpeta para cada entity)
Deseamos crear una pagina con este diseño
Dentro de Web Pages / pages creamos la carpeta tipovehiculo (el mismo nombre del entity)
Dentro de la carpeta crearemos tres paginas java server faces (.xhtml)
list : Contendra la lista de todos los tipovehiculo
create: Permite crear uno nuevo
view: Para las operaciones de edición
En el paquete tipovehiculo seleccionar File-> New
en File Name: create
Indicar el template
<ui:composition template="./../../WEB-INF/template.xhtml">
Colocar el titulo en la sección top
<ui:define name="top">
<h1>
#{msg['tipovehiculo.title']}
<small> </small>
</h1>
</ui:define>
El contenido se define en la sección content
<ui:define name="content">
Agregar un <h:form> con rendered
<h:form id="form" rendered="#{loginController.loggedIn}">
Agregar panel group (como contenedor general) y messages (para desplegar los mensajes)
<h:panelGroup id="content" layout="block">
<p:messages id="msgs"/>
Botones del formulario los creamos en la sección form-header-2 donde crearemos los botones
<p:commandButton para guardar el documento
<p:commandButton para limpiar el contenido de la pagina
<p:link para invocar la pagina list
<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']}"
process=":form:content" action="#{tipovehiculoController.save()}" update=":form:content" />
<p:commandButton class="btnn btnn-primary" value="#{msg['boton.clear']}" process="@this"
action="#{tipovehiculoController.reset()}" update=":form:content" />
<p:link class="btnn btnn-primary" value="#{msg['boton.return']}"
outcome="/pages/tipovehiculo/list"/>
</div>
</div>
La sección principal para agregar documentos esta establecida mediante form-body
<div class="row form-body">
La disposición de los elementos usamos bootstrap, por lo cual debemos dividir cada fila en doce (12) columnas
En este caso usamos solo 6 columnas para mostrar los elementos
<div class="form-group row">
<p:outputLabel class="col-xs-2 col-form-label" value="#{msg.idtipovehiculo}"/>
<div class="col-xs-4">
<p:inputText id="name" value="#{tipovehiculoController.tipovehiculo.idtipovehiculo}" class="required form-name-input fullWidth"
placeholder="#{msg.idtipovehiculo}" required="true"
requiredMessage="#{msg.idtipovehiculo} #{msg['info.required']}" maxlength="50"/>
</div>
</div>
Si deseamos mostrar las 12 columnas, elementos al lado del otro
Agregamos un class="form-group row" para indicar que es una fila estilo formulario
Las etiquetas que identificaran los componentes usaran class="col-xs-2 col-form-label"
El elemento a mostrar se debe colocar dentro de un div class="col-xs-4".
Si sumamos los valores de col-xs deben sumar 12.
<div class="form-group row">
<p:outputLabel class="col-xs-2 col-form-label" value="#{msg.marca}"/>
<div class="col-xs-4">
<p:selecOneMenu/>
</div>
<p:outputLabel class="col-xs-2 col-form-label" value="#{msg.modelo}"/>
<div class="col-xs-4">
<p:selectOneMenu />
</div>
</div>
Generaría una apariencia de esta manera
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"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:jsf="http://xmlns.jcp.org/jsf">
<body>
<ui:composition template="./../../WEB-INF/template.xhtml">
<ui:define name="top">
<h1>
#{msg['tipovehiculo.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"/>
<!--<p:growl id="msgs" widgetVar="growl"/>-->
<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']}" process=":form:content" action="#{tipovehiculoController.save()}" update=":form:content" />
<p:commandButton class="btnn btnn-primary" value="#{msg['boton.clear']}" process="@this" action="#{tipovehiculoController.reset()}" update=":form:content" />
<p:link class="btnn btnn-primary" value="#{msg['boton.return']}" outcome="/pages/tipovehiculo/list"/>
</div>
</div>
<div class="row form-body">
<div class="form-group row">
<p:outputLabel class="col-xs-2 col-form-label" value="#{msg.idtipovehiculo}"/>
<div class="col-xs-4">
<p:inputText id="name" value="#{tipovehiculoController.tipovehiculo.idtipovehiculo}" class="required form-name-input fullWidth"
placeholder="#{msg.idtipovehiculo}" required="true"
requiredMessage="#{msg.idtipovehiculo} #{msg['info.required']}" maxlength="50"/>
</div>
</div>
<div class="form-group row">
<p:outputLabel class="col-xs-2 col-form-label" value="#{msg.tipo}"/>
<div class="col-xs-4">
<p:inputText id="tipo" class="fullWidth" value="#{tipovehiculoController.tipovehiculo.tipo}"
placeholder="#{msg.tipo}" maxlength="55" requiredMessage="#{msg.tipo} #{msg['info.required']}"/>
</div>
</div>
<div class="form-group row">
<p:outputLabel class="col-xs-2 col-form-label" value="#{msg.fecha}"/>
<div class="col-xs-4">
<p:calendar id="desde" class="fullWidth required"
selectOtherMonths="true"
navigator="true"
pattern="dd/MM/yyyy"
value="#{tipovehiculoController.tipovehiculo.fecha}" title="#{msg.fecha}" >
</p:calendar>
</div>
</div>
</div>
</h:panelGroup>
</h:form>
</ui:define>
</ui:composition>
</body>
</html>
