Vistas de página en total

jueves, 11 de diciembre de 2014

Ver detalle del usuario en un dialogo de primefaces

En algunos caso el cliente quera ver la informacion del usuario y que mejor aprovechando nuestra tabla creada en el post anterior asi que para esto agregaremos mas funciones al dataTable de acuerdo las explicare.

Agregamos esta funcion rowsPerPageTemplate que sirve para decidir de cuantas filas queremos que se vean los registros ejemplo "5, 10, 15, 20" aqui decimos que podemos elejir que se muestren 5 por cada pagina o 10, etc,

En la funcion selection pondremos en bean de seleccion donde esta manipulado nuestro pojo que en este caso es nuestro managedBean que hemos trabajado usando el objeto del pojo

En la selectionMode aqui decimos el modo de seleccion puede ser uno solo o varios en este caso queremos saber de un usuario que seleccionemos

Y finalmente en rowKey en esta parte pondremos el identificado por cada usuario el cual es el id del usuario, en nuestra tabla agreamos un boton para realizar el evento de ver los datos del usuario process aqui va el id de la tabla a utilizar update aqui pondremos el id del formulario y el  id del panel que vamos a crear y debe quedar como la siguiente sintaxis update=":idform:idpanel"  oncomplete ira el nombre del dialogo a completa para que se muestre.

En el dialogo hay otras funciones que son widgetVar es el nombre del dialogo o la variable que lo identificara y que se pondra en la opcion oncomplete antes mensionada,  el showEffect y hideEffect son los efectos que tendra el dialogo

Bueno aqui dejo el codigo

            <h2>Lista de usuarios</h2>
                <h:form id="formListAll">
                    <p:growl id="msjgral" showDetail="true" sticky="false" />
                    <p:dataTable id="tableListAll" var="item" value="#{managedBeanUser.all}" paginator="true" rows="5" rowsPerPageTemplate="10, 20, 30, 40, 50, 60, 70, 80, 90, 100"
                                 selection="#{managedBeanUser.user}" selectionMode="single" rowKey="#{item.idusuarios}">
                        <f:facet name="header">
                            Lista de Usuarios
                        </f:facet>
                        <p:column headerText="Nombre">
                            <h:outputText value="#{item.nombres}"/>
                        </p:column>
                        <p:column headerText="Apellido Materno">
                            <h:outputText value="#{item.ap}"/>
                        </p:column>
                        <p:column headerText="Apellido Paterno">
                            <h:outputText value="#{item.am}"/>
                        </p:column>
                        <p:column headerText="E-mail">
                            <h:outputText value="#{item.email}"/>
                        </p:column>
                        <f:facet name="footer">
                            <p:commandButton process="tableListAll" update=":formListAll:usersDetail" icon="ui-icon-search" value="Ver" oncomplete="PF('ty').show()" />
                        </f:facet>
                    </p:dataTable>
                   
                    <p:dialog header="Informacion de Usuario" widgetVar="ty" modal="true" showEffect="explode" hideEffect="explode" resizable="false">
                        <p:outputPanel id="usersDetail" style="text-align:center;">
                            <h:panelGrid  columns="2">
                                <p:outputLabel value="Nombre"/>
                                <h:outputText value="#{managedBeanUser.user.nombres}" />
                                <p:outputLabel value="Apellido Paterno"/>
                                <h:outputText value="#{managedBeanUser.user.ap}" />
                                <p:outputLabel value="Apellido Materno"/>
                                <h:outputText value="#{managedBeanUser.user.am}" />
                                <p:outputLabel value="Email"/>
                                <h:outputText value="#{managedBeanUser.user.email}" />
                                <p:outputLabel value="Direccion"/>
                                <h:outputText value="#{managedBeanUser.user.direccion}" />
                            </h:panelGrid>
                        </p:outputPanel>
                    </p:dialog>
                </h:form>


Y en pantalla quedaria asi;



No hay comentarios:

Publicar un comentario