Limpiando componentes de entrada JSF (Clear Input Components JSF)

Estoy trabajando en un proyecto web con JSF 2.0 y PrimeFaces 2.2.1 sobre Glassfish 3.1.2 y se me presentaba el siguiente problema:

Los campos de entrada de un formulario no se limpian.

En los formularios al enviarlos y haber un error en los datos tenemos dos opciones el corregir los datos y volver a enviarlos o cerrar el formulario. Cuando esto último pasa, suponí­a que bastaba con reiniciar el objeto bean e invocar la actualización de elemento via ajax, para que los campos de entrada del formulario volvieran a mostrarse con su valor predeterminado, sin embargo eso no pasaba.

Observen la secuencia de imágenes que ayudan a explicar el problema.

En esta primera imagen pueden ver el formulario con sus valores predeterminados.

Limpiar Componentes Imagen No. 1

Limpiar Componentes Imagen No. 1

En la siguiente imagen les muestro el error y como se ve la imagen.

Limpiar Compnentes Imagen No. 2

Limpiar Compnentes Imagen No. 2

En este momento cierro la ventana y en el método asociado al botón de cerrar incializó el objeto que esta en el manage bean correspondiente con valores de todo el formulario, sin embargo al volver a invocar al formulario en modo crear, la ventana se muestra como en la siguiente imagen:

Limpiar Componentes Imagen No. 3

Limpiar Componentes Imagen No. 3

Este es el código de mi formulario:

           <h:form id="formUsuario">
                    <p:fieldset legend="#{captionsResource.caption_user}"
                                rendered="#{usuariosMB.modeAction == 'Create'}">
                        <h:panelGrid style="width: 100%;" columns="2" columnClasses="labelColumn,inputColumn">
                            <h:outputLabel value="#{usuariosCaptions.nombre}*:" styleClass="etiqueta" for="inputName"/>
                            <p:inputText id="inputName" label="#{usuariosCaptions.nombre}"
                                         value="#{usuariosMB.selectedUsuarioCMP.nombre}"
                                         required="true"
                                         style="width: 50em" title="#{usuariosCaptions.title_nombre}"/>
                            <h:outputLabel value=""/>
                            <p:message for="inputName"/>
                            <h:outputLabel value="#{captionsResource.caption_user_account}*:" styleClass="etiqueta"  for="inputAccount"/>
                            <p:inputText id ="inputAccount" required="true" label="#{captionsResource.caption_user_account}"
                                         value="#{usuariosMB.selectedUsuarioCMP.clave}" style="width:12em" title="#{usuariosCaptions.title_user_account}"/>
                            <h:outputLabel value=""/>
                            <p:message for="inputAccount"/>
                            <h:outputLabel value="#{captionsResource.caption_password}*:" styleClass="etiqueta" for="inputNewPassword"/>
                            <p:password id="inputNewPassword" value="#{usuariosMB.password}" required="true"
                                        feedback="true" minLength="6" label="#{captionsResource.caption_password}"
                                        promptLabel="#{captionsResource.caption_password_request}" weakLabel="#{captionsResource.caption_password_wake}"
                                        goodLabel="#{captionsResource.caption_password_good}"
                                        strongLabel="#{captionsResource.caption_password_strong}"
                                        inline="true" style="width:12em"
                                        title="#{captionsResource.caption_password}"/>
                            <h:outputLabel value=""/>
                            <p:message for="inputNewPassword"/>
                            <h:outputLabel value="#{captionsResource.caption_password_confirm}*:" styleClass="etiqueta" for="inputConfirmPassword"/>
                            <p:password id="inputConfirmPassword" value="#{usuariosMB.passwordConfirmado}" required="true"
                                        feedback="false" minLength="6" label="#{captionsResource.caption_password_confirm}" style="width:12em"
                                        title="#{captionsResource.caption_password_confirm}"/>
                            <h:outputLabel value=""/>
                            <p:message for="inputConfirmPassword"/>
                            <h:outputLabel value="#{captionsResource.caption_company}*:" styleClass="etiqueta" for="inputEmpresa"/>
                            <h:selectOneMenu id="inputSelectEmpresa" label="#{captionsResource.caption_company}:"
                                             value="#{usuariosMB.selectedIdEmpresa}"
                                             required="true"
                                             title="#{captionsResource.caption_company_asociate}" >
                                <f:selectItems value="#{empresaMB.opcionesEmpresas}"/>
                            </h:selectOneMenu>
                            <h:outputLabel value=""/>
                            <p:message for="inputSelectEmpresa"/>
                        </h:panelGrid>
                        <p:panel styleClass="ui-widget-header actionsButtonsRight">                         
                            <p:commandButton value="#{captionsResource.caption_create}" actionListener="#{usuariosMB.create}"
                                             rendered="#{usuariosMB.modeAction eq 'Create'}" update="formUsuario #{updates}"
                                             image="ui-icon ui-icon-disk" oncomplete="document.getElementById('formUsuario:inputName').focus();"/>
                        </p:panel>
                    </p:fieldset>
                </h:form>

El método que utilizó para la inicialización del objeto en el bean es:

private void initialStatus() {
      this.selectedUsuarioCMP = new UsuarioCMP();
      this.password = null;
      this.passwordConfirmado = null;
      this.selectedIdEmpresa = null;
      setModeAction(INITIAL_MODE);
 }

Para poder resolver esto busqué en el internet y encontré el siguiente link –Clear Input Components– que me ayudo a resolver mi problema.

Después de leer y comprenderlo hice el siguiente método que asocie al actionListener de mi botón de cerrar ventana.

     public void closeFrmUsuario(CloseEvent event) {
        FacesContext facesContext = FacesContext.getCurrentInstance();
        UIViewRoot uiViewRoot = facesContext.getViewRoot();
        HtmlInputText inputText = null;        
        inputText = (HtmlInputText) uiViewRoot.findComponent("formUsuario:inputName");
        inputText.setValue(null);
        inputText.setSubmittedValue(null);
        inputText.setLocalValueSet(false);
        inputText = (HtmlInputText) uiViewRoot.findComponent("formUsuario:inputAccount");
        inputText.setValue(null);
        inputText.setSubmittedValue(null);
        inputText.setLocalValueSet(false);
        inputText = (HtmlInputText) uiViewRoot.findComponent("formUsuario:inputNewPassword");
        inputText.setValue(null);
        inputText.setSubmittedValue(null);
        inputText.setLocalValueSet(false);
        inputText = (HtmlInputText) uiViewRoot.findComponent("formUsuario:inputConfirmPassword");
        inputText.setValue(null);
        inputText.setSubmittedValue(null);
        inputText.setLocalValueSet(false);
        inputText = (HtmlInputText) uiViewRoot.findComponent("formUsuario:inputConfirmPassword");
        inputText.setValue(null);
        inputText.setSubmittedValue(null);
        inputText.setLocalValueSet(false);
        UISelectOne inputSelectOne = null;
        inputSelectOne = (UISelectOne) uiViewRoot.findComponent("formUsuario:inputSelectEmpresa");
        inputSelectOne.setValue(null);
        inputSelectOne.setSubmittedValue(null);
        inputSelectOne.setLocalValueSet(false);
        initialStatus();
    }

Ahora ya funciona de forma correcta. Sin embargo pienso en todos métodos que tendrémos que implementar para resolver todos los casos.

Pero existe una forma más simple de resolver el problema y es usando la siguiente función:

  
public void refresh() {
    FacesContext context = FacesContext.getCurrentInstance();
    Application application = context.getApplication();
    ViewHandler viewHandler = application.getViewHandler();
    UIViewRoot viewRoot = viewHandler.createView(context, context
     .getViewRoot().getViewId());
    context.setViewRoot(viewRoot);
    context.renderResponse(); 
 }

Esta función hace que el árbol de vista actual sea desechado y creado uno nuevo. Los nuevos componentes, por supuesto, entonces no tienen valores presentados, y así recuperar sus valores mostrados a través de sus enlaces de valor en el bean.


All comments of post - "Limpiando componentes de entrada JSF (Clear Input Components JSF)":

:Haha! I'am the first! Yeh~

Thank you!

*

Add a Comment / Trackback url

Comment begin from here or jump up!