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.

PreviousController Web NextCapitulo 13 Couchbase

Last updated 6 years ago

Was this helpful?