Pagina Web
Editaremos la pagina index.xhtml para incluir etiquetas primefaces para mostrar e interactuar con los documentos de la base de datos.
Editar el archivo index.xhtml
Definimos un panelGrid donde colocaremos dos cajas de texto correspondientes al idplaneta y al planeta usando componentes de primefaces.
<p:panelGrid columns="2">
<p:outputLabel value="idplaneta"/>
<p:inputText value="#{planetasController.planetas.idplaneta}"/>
<p:outputLabel value="planeta"/>
<p:inputText value="#{planetasController.planetas.planeta}"/>
<p:commandButton value="Guardar" action="#{planetasController.save()}"
update=":form:messages, :form:planetasDataTable"/>
</p:panelGrid>Mostraremos los documentos almacenados en un datatable, que es un componente de primefaces que genera un <table>
<p:dataTable id="planetasDataTable" var="item"
value="#{planetasController.planetasList}"
rowsPerPageTemplate="5,10,15" emptyMessage="No hay registros" reflow="true">
<p:column headerText="idplaneta" >
<h:outputText value="#{item.idplaneta}" />
</p:column>
<p:column headerText="planeta" >
<h:outputText value="#{item.planeta}" />
</p:column>
</p:dataTable>Codigox 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:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:jsf="http://xmlns.jcp.org/jsf">
<h:head>
<title>Facelet Title</title>
</h:head>
<h:body>
<f:view >
<h:form id="form">
<h1>Planetas con jmoordb(MongoDB)</h1>
<p:messages id="messages"/>
<p:panelGrid columns="2">
<p:outputLabel value="idplaneta"/>
<p:inputText value="#{planetasController.planetas.idplaneta}"/>
<p:outputLabel value="planeta"/>
<p:inputText value="#{planetasController.planetas.planeta}"/>
<p:commandButton value="Guardar" action="#{planetasController.save()}"
update=":form:messages, :form:planetasDataTable"/>
</p:panelGrid>
<p:dataTable id="planetasDataTable" var="item"
value="#{planetasController.planetasList}"
rowsPerPageTemplate="5,10,15" emptyMessage="No hay registros" reflow="true">
<p:column headerText="idplaneta" >
<h:outputText value="#{item.idplaneta}" />
</p:column>
<p:column headerText="planeta" >
<h:outputText value="#{item.planeta}" />
</p:column>
</p:dataTable>
</h:form>
</f:view>
</h:body>
</html>Si ejecutamos el proyecto
Ingresamos en el idplaneta el valor de tierra y presionar el botón Guardar
Si observas se activa el Bean Validation que se estableció para el atributo planeta (@Size)
Ingresar el nombre del planeta y presionar el botón Guardar
Se guarda en la colección en MongoDB y se muestra en el componente datatable.
Last updated
Was this helpful?