OnBlur event in PrimeView's TabView

1

Good evening. I need to capture the onblur event between tabs (tabviews) before the focus changes to the new tab.

The template will paint the new tab every time you select a new client

template.xhmlt

    <ui:composition template="./../template/plantilla.xhtml">
        <ui:define name="content">
            <p:tabView id="tabViewMain"                            
                       dynamic="true" 
                       cache="false" 
                       activeIndex="#{tabController.curTabIndex}">     

                <p:ajax event="tabClose" 
                        listener="#{tabController.onTabClose}"/>
                <p:ajax event="tabChange" 
                        listener="#{tabController.onTabChange}"/>
                <c:forEach items="#{tabController.listaIfacesTabs}" 
                           var="tab">
                    <p:tab id="#{tab.idTab}" 
                           title="#{tab.titulo}" 
                           closable="true">                            
                        <ui:include src="#{tab.ruta}"/>                          
                    </p:tab>
                </c:forEach>
            </p:tabView>
        </ui:define>
    </ui:composition>

In the "TabController" bean the OnChange event will get the ID of the current tab which in turn invokes a controller that will load the information in a new standard view for clients

TabController.java

     @Named
     @SessionScoped
     public class TabController implements Serializable {
        public void onTabChange(TabChangeEvent event) {
        TabView tv = (TabView) event.getTab().getParent();
        this.curTabIndex = tv.getChildren().indexOf(event.getTab());
        String idTab = tv.getChildren().get(this.curTabIndex).getId();
        this.loadTabIfacesClienteById(idTab);
        }
    }

If you set loadTabIfacesClientById (idTab) will load the information in a client view ClientController

   @Named
   @RequestScoped
   public class ClienteController implements Serializable {

   public void load(IfacesTab facesTab, List<IfacesCliente> listaIfacesClientes) {
    String idTab = facesTab.getIdTab();
    for (IfacesCliente c : listaIfacesClientes) {
        if (c.getIdTab().equals(idTab)) {
            this.cliente = c.getCliente();
            this.listaContactos = c.getListaContactos();
        }
      }
    }

   }

client.xhmtl

   <h:form>
    <p:dataTable value="#{tabController.listaClientes}" 
                 var="cliente"
                 widgetVar="dlgWidBuscarTodoCliente"
                 emptyMessage="No se encontro registros con el criterio"
                 paginator="true" 
                 rows="15" 
                 paginatorTemplate="{RowsPerPageDropdown} {FirstPageLink} 
                 {PreviousPageLink} {CurrentPageReport} {NextPageLink} {LastPageLink}" 
                 rowsPerPageTemplate="15,60,100">

        <f:facet name="header">
            <p:outputPanel style="text-align: right;">
                <h:outputText value="Buscar todos los campos:" />
                <p:inputText id="globalFilter" 
                             onkeyup="PF('dlgWidBuscarTodoCliente').filter()" 
                             style="width:150px;" 
                             placeholder="Escriba un criterio"/>
            </p:outputPanel>
        </f:facet>

        <p:column id="colClienteId" 
                  headerText="Id"
                  visible="true">     
            <h:outputText value="#{cliente.id}"/>
        </p:column>

        <p:column id="colClienteNombresCompletos" 
                  headerText="Nombres Completos" 
                  sortBy="#{cliente.nombresCompletos}" 
                  filterBy="#{cliente.nombresCompletos}" 
                  filterMatchMode="contains">     
            <h:outputText value="#{cliente.nombresCompletos}"
                          class="textBoxWidth100"/>
        </p:column>

        <p:column id="colClienteTipoIdentificacion" 
                  headerText="Tipo de Ident." 
                  sortBy="#{cliente.tipoIdentificacion}" 
                  filterBy="#{cliente.tipoIdentificacion}" 
                  filterMatchMode="in">    
            <f:facet name="filter">
                <p:selectCheckboxMenu label="Tipo de Ident." 
                                      onchange="PF('dlgWidBuscarTodoCliente').filter()" 
                                      panelStyle="width:125px" scrollHeight="150">
                    <f:selectItems value="#{globalController.comboClienteTiposIdent}" />
                </p:selectCheckboxMenu>
            </f:facet>
            <h:outputText value="#{globalController.getEtiquetaClienteTiposIdent(cliente.tipoIdentificacion)}"/>
        </p:column>

        <p:column id="colClienteIdentificacion" 
                  headerText="Identificacion" 
                  sortBy="#{cliente.identificacion}" 
                  filterBy="#{cliente.identificacion}" 
                  filterMatchMode="contains">     
            <h:outputText value="#{cliente.identificacion}"/>
        </p:column>

        <p:column id="colClienteTipoCliente" 
                  headerText="Tipo de Cliente" 
                  sortBy="#{cliente.tipoCliente}" 
                  filterBy="#{cliente.tipoCliente}" 
                  filterMatchMode="in">     
            <f:facet name="filter">
                <p:selectCheckboxMenu label="Tipo de Cliente" 
                                      onchange="PF('dlgWidBuscarTodoCliente').filter()" 
                                      panelStyle="width:125px" scrollHeight="150">
                    <f:selectItems value="#{globalController.comboClienteTipos}" />
                </p:selectCheckboxMenu>
            </f:facet>
            <h:outputText value="#{globalController.getEtiquetaClienteTipos(cliente.tipoCliente)}"/>
        </p:column>

        <p:column id="colClienteEstadoCivil" 
                  headerText="Estado Civil" 
                  sortBy="#{cliente.estadoCivil}" 
                  filterBy="#{cliente.estadoCivil}" 
                  filterMatchMode="in">   
            <f:facet name="filter">
                <p:selectCheckboxMenu label="Estado Civil" 
                                      onchange="PF('dlgWidBuscarTodoCliente').filter()" 
                                      panelStyle="width:125px" scrollHeight="150">
                    <f:selectItems value="#{globalController.comboClienteEstadosCivil}" />
                </p:selectCheckboxMenu>
            </f:facet>
            <h:outputText value="#{globalController.getEtiquetaClienteEstadosCivil(cliente.estadoCivil)}"/>
        </p:column>

        <p:column id="colClienteGenero" 
                  headerText="Genero" 
                  sortBy="#{cliente.genero}" 
                  filterBy="#{cliente.genero}" 
                  filterMatchMode="in">     
            <f:facet name="filter">
                <p:selectCheckboxMenu label="Genero" 
                                      onchange="PF('dlgWidBuscarTodoCliente').filter()" 
                                      panelStyle="width:125px" scrollHeight="150">
                    <f:selectItems value="#{globalController.comboClienteGeneros}" />
                </p:selectCheckboxMenu>
            </f:facet>
            <h:outputText value="#{globalController.getEtiquetaClienteGeneros(cliente.genero)}"/>
        </p:column>

        <p:column id="colClienteFecNacimiento" 
                  headerText="Fec. Nacimiento" 
                  sortBy="#{cliente.fechaNacimiento}" 
                  filterBy="#{cliente.fechaNacimiento}" 
                  filterMatchMode="contains">
            <h:outputText value="#{cliente.fechaNacimiento}">
                <f:convertDateTime pattern="dd/MM/yyyy" />
            </h:outputText>
        </p:column>

        <p:column id="colClienteFecCreacion" 
                  headerText="Fec. Creacion" 
                  sortBy="#{cliente.fechaCreacion}" 
                  filterBy="#{cliente.fechaCreacion}" 
                  filterMatchMode="contains">
            <h:outputText value="#{cliente.fechaCreacion}">
                <f:convertDateTime pattern="dd/MM/yyyy HH:mm:ss" />
            </h:outputText>
        </p:column>

        <p:column id="colClienteEditar">
            <p:commandButton 
                id="btnClienteEditar"
                value="Editar" 
                icon="ui-icon-carat-1-e"
                ajax="false"
                action="#{tabController.addTab(
                          '115', 
                          cliente.id,
                          cliente.nombresCompletos, 
                          'pages/cliente_workarea.xhtml'
                          )}" 
                >
            </p:commandButton>
        </p:column>

    </p:dataTable>
</h:form>

What I need is when the information is loaded in each view, if I want to change to another tab, the changes made in the current tab are stored in main TabController arrays, said improvement before I paint the new selected tab allows me to update information about the arrangements so if I go back to the same tab the information will be available.

More or less than avoiding leaving the tab if there are validation errors, but in this case if you change the tab to update it in an onblur or lostfoucus event

I appreciate your attention, they tell me if I made myself understood

Greetings

    
asked by Fernando Ortega 12.08.2017 в 02:30
source

0 answers