Vistas de página en total

miércoles, 10 de diciembre de 2014

Intregacion de Message, Growl y Tooltip de Primefaces a nuestro formulario

Es este post modificaremos nuestro formulario para que pueda verse profesionalmente asi que le haremos algunos cambios y modificaciones.

Generaremos un Message para que muestre la información de error a lado de nuestros campos de entrada, un Growl que mostrara el error y que con el parámetro sticky en falso para que al final de cierto tiempo desaparezca de nuestra pantalla y finalmente un Tooltip que nos puede servir de ayuda a la hora de no saber que información o como poner cierta información en un campo de texto y los parámetros que usamos son showEvent en true que se refiere a que se mostrara cuando usemos el focus y el hideEven en blur quiere decir que al quitar el focus desaparecerá y finalmente mostrare otra forma de limpiar el formulario desde nuestro managedBean y no usando el js que implementamos anteriormente.

El managedBean queda de la siguiente forma:

public void registerUser() throws Exception {
        /*haremos la validacion de que el password sea el mismo a la hora de confirmarlo con una condicional podremos realizarlo*/
        if(!login.getPass().equals(confirPassword)){
            /*leer el contexto como msj y poder lanzarlo a la vista FacesMessage(FacesMessage.tipo de msj, titulo, msj)*/
            FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_ERROR, "Error", "Error de coincidencia de Password"));
            return;
        }
        /*se agregar a la variable pass de la clase login el pass encriptado*/
        login.setPass(Encrypting.encrypting(login.getPass()));
        usersDAO daoUsers = new usersDAO();
        daoUsers.registerUsers(this.user);
        loginDAO daoLogin = new loginDAO();
        daoLogin.registerLogin(login);
        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Exito", "Datos insertados Exitosamente"));
        //esta forma limpiamos el formulario sin usar el js
        user = new Usuarios();
        user.setIdusuarios(null);
        login = new Login();
        login.setIdlogin(null);
    }


Y el formulario con todo lo explicado en el principio de este post queda de la siguiente forma:

<h:form id="frmRegisterUser">
                    <p:growl id="msjgral" showDetail="true" sticky="false"/>
                    <h:panelGrid columns="3">
                        <p:outputLabel value="Nombre" for="txtName"/>
                        <p:inputText id="txtName" label="Nombre(s)" placeholder="Nombre(s)" value="#{managedBeanUser.getUser().nombres}">
                            <f:validator validatorId="ValidateEmptyFields"/>
                        </p:inputText>
                        <p:message for="txtName"/>
                        <p:outputLabel value="Apellido Paterno" for="txtAp"/>
                        <p:inputText id="txtAp" label="Apellido Paterno" placeholder="Apellido Paterno" value="#{managedBeanUser.getUser().ap}">
                            <f:validator validatorId="ValidateEmptyFields"/>
                        </p:inputText>
                        <p:message for="txtAp"/>
                        <p:outputLabel value="Apellido Materno" for="txtAm"/>
                        <p:inputText id="txtAm" label="Apellido Materno" placeholder="Apellido Materno" value="#{managedBeanUser.getUser().am}">
                            <f:validator validatorId="ValidateEmptyFields"/>
                        </p:inputText>
                        <p:message for="txtAm"/>
                        <p:outputLabel value="Usuario" for="txtUser"/>
                        <p:inputText id="txtUser" label="Usuario" placeholder="Usuario" value="#{managedBeanUser.getLogin().user}">
                            <f:validator validatorId="ValidateEmptyFields"/>
                        </p:inputText>
                        <p:message for="txtUser"/>
                        <p:outputLabel value="Contraseña" for="txtPass"/>
                        <p:password id="txtPass" label="Contraseña" placeholder="Contraseña" value="#{managedBeanUser.getLogin().pass}">
                            <f:validator validatorId="ValidateEmptyFields"/>
                        </p:password>
                        <p:message for="txtPass"/>
                        <p:outputLabel value="Confirmar Contraseña" for="txtPassConfirm"/>
                        <p:password id="txtPassConfirm" label="Confirmar Contraseña" placeholder="Confirmar Contraseña" value="#{managedBeanUser.confirPassword}">
                            <f:validator validatorId="ValidateEmptyFields"/>
                        </p:password>
                        <h:panelGroup></h:panelGroup>
                        <p:outputLabel value="E-Mail" for="txtEmail"/>
                        <p:inputText id="txtEmail" label="E-Mail" placeholder="Email del Usuario"  title="Ejem: username@dominio.com" value="#{managedBeanUser.getUser().email}" size="39">
                            <f:validator validatorId="ValidateEmptyFields"/>
                            <f:validator validatorId="ValidateEmail"/>
                        </p:inputText>
                        <h:panelGroup>
                            <p:tooltip for="txtEmail" showEvent="focus" hideEvent="blur"/>
                            <p:message for="txtEmail"/>
                        </h:panelGroup>
                        <p:outputLabel value="Direccion" for="txtDireccion"/>
                        <p:inputText id="txtDireccion" label="Direccion" placeholder="Direccion del Usuario" value="#{managedBeanUser.getUser().direccion}" size="49"/>
                        <h:panelGroup></h:panelGroup>
                        <p:outputLabel value="Fecha de nacimiento" for="txtCalendar"/>
                        <p:calendar id="txtCalendar" label="Fecha de nacimiento" title="Ejem: dd/mm/yyyy" showOn="button" placeholder="Fecha de Nacimiento" pattern="dd/mm/yyyy" required="true" value="#{managedBeanUser.getUser().fechaNacimiento}"/>
                        <p:message for="txtCalendar"/>
                        <h:outputLabel value="Sexo" for="radSex"/>
                        <p:selectOneRadio id="radSex" label="Sexo" value="#{managedBeanUser.getUser().sexo}">
                            <f:selectItem itemLabel="Hombre" itemValue="H"/>
                            <f:selectItem itemLabel="Mujer" itemValue="M"/>
                        </p:selectOneRadio>
                        <h:panelGroup></h:panelGroup>
                        <h:panelGroup></h:panelGroup>
                        <p:commandButton id="btn1" value="Registrar" actionListener="#{managedBeanUser.registerUser()}" update="frmRegisterUser"/>
                    </h:panelGrid>
                </h:form>

Aqui la muestra de los message y el growl en error:



Aqui la muestra del Tooltip:



Y final mente el growl a la hora de insertar y como el formulario queda vació:



No hay comentarios:

Publicar un comentario