Send selected record from a p:datatable to the form, jsf primefaces

Question

Hi, I’m new here, and I’m migrating from Struts 1 to JSF.

I am developing in JSF a user registration screen. I would like it when I select a record from p:dataTable, the data from that selected record were for the form fields.

I’ve done it with Trouts, but using JSF primefaces I don’t know how to do it.

Page code:

<h:body>
   <h:form>
        <p:messages id="messages" showDetail="true"  autoUpdate="true" closable="true" />
        <p:panelGrid columns="2"  style="horizontal-align:center">
              <p:outputLabel for="id" value="ID:" />
              <p:spinner id="id" value="#{UsuarioMB.usuario.id}" />  
              <p:outputLabel for="nome" value="Nome:" />
              <p:inputText id="nome" value="#{UsuarioMB.usuario.nome}" />    
              <p:outputLabel for="senha" value="Senha:" />
              <p:inputText id="senha" value="#{UsuarioMB.usuario.senha}" />  
              <p:outputLabel for="descricao" value="Descrição:" />
              <p:inputTextarea id="descricao"
                   value="#{UsuarioMB.usuario.descricao}" /> 
            <p:outputLabel for="dataCadastro" value="DataCadastro:" />
             <p:calendar value="#{UsuarioMB.usuario.dataCadastro}" locale="pt_BR"
            id="dataCadastro" showButtonPanel="true">
            <f:convertDateTime pattern="dd/MM/yyyy" />
        </p:calendar>
            <p:commandButton  value="Cadastrar" icon="ui-icon-star"  action= "#{UsuarioMB.cadastraUsuario}"   update="tabela,messages,@form"   >
               </p:commandButton> 
                <p:commandButton  value="Consultar" icon="ui-icon-star"  action= "#{UsuarioMB.consultar}"   update="tabela,messages"   >
                </p:commandButton> 
                <p:commandButton  value="Limpar" icon="ui-icon-star" action= "#{UsuarioMB.limpar}"  update="tabela"  type="reset"    >
               </p:commandButton> 
        </p:panelGrid> 
  <p:dataTable id="tabela" var="usuario" value="#{UsuarioMB.lista}"
    paginator="true" rows="50" emptyMessage="Não há registros na lista"
    paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
    rowsPerPageTemplate="10,15,25,50,100">
    <f:facet name="header">Lista de usuários</f:facet>
    <p:column headerText="ID" style="width: 10%;"
        sortBy="#{usuario.id}">
        <h:outputText value="#{usuario.id}"    /> 
    </p:column>
    <p:column headerText="Nome" style="width: 25%;" sortBy="#{usuario.nome}">   <h:outputText value="#{usuario.nome}" />
    </p:column>
    <p:column headerText="Descrição" style="width: 25%;" sortBy="#{usuario.descricao}">
        <h:outputText value="#{usuario.descricao}" /></p:column>
    <p:column headerText="Data de Cadastro" style="width: 25%;" sortBy="#{usuario.dataCadastro}">
        <h:outputText value="#{usuario.dataCadastro}" />
    </p:column>
</p:dataTable>
   </h:form>

 <h:body>
       <h:form>
            <p:messages id="messages" showDetail="true"  autoUpdate="true" closable="true" />
            <p:panelGrid columns="2"  style="horizontal-align:center">
                  <p:outputLabel for="id" value="ID:" />
                  <p:spinner id="id" value="#{UsuarioMB.usuario.id}" />  
                  <p:outputLabel for="nome" value="Nome:" />
                  <p:inputText id="nome" value="#{UsuarioMB.usuario.nome}" />    
                  <p:outputLabel for="senha" value="Senha:" />
                  <p:inputText id="senha" value="#{UsuarioMB.usuario.senha}" />  
                  <p:outputLabel for="descricao" value="Descrição:" />
                  <p:inputTextarea id="descricao"
                       value="#{UsuarioMB.usuario.descricao}" /> 
                <p:outputLabel for="dataCadastro" value="DataCadastro:" />
                 <p:calendar value="#{UsuarioMB.usuario.dataCadastro}" locale="pt_BR"
                id="dataCadastro" showButtonPanel="true">
                <f:convertDateTime pattern="dd/MM/yyyy" />
            </p:calendar>
                <p:commandButton  value="Cadastrar" icon="ui-icon-star"  action= "#{UsuarioMB.cadastraUsuario}"   update="tabela,messages,@form"   >
                   </p:commandButton> 
                    <p:commandButton  value="Consultar" icon="ui-icon-star"  action= "#{UsuarioMB.consultar}"   update="tabela,messages"   >
                    </p:commandButton> 
                    <p:commandButton  value="Limpar" icon="ui-icon-star" action= "#{UsuarioMB.limpar}"  update="tabela"  type="reset"    >
                   </p:commandButton> 
            </p:panelGrid> 
      <p:dataTable id="tabela" var="usuario" value="#{UsuarioMB.lista}"
        paginator="true" rows="50" emptyMessage="Não há registros na lista"
        paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
        rowsPerPageTemplate="10,15,25,50,100">
        <f:facet name="header">Lista de usuários</f:facet>
        <p:column headerText="ID" style="width: 10%;"
            sortBy="#{usuario.id}">
            <h:outputText value="#{usuario.id}"    /> 
        </p:column>
        <p:column headerText="Nome" style="width: 25%;" sortBy="#{usuario.nome}">   <h:outputText value="#{usuario.nome}" />
        </p:column>
        <p:column headerText="Descrição" style="width: 25%;" sortBy="#{usuario.descricao}">
            <h:outputText value="#{usuario.descricao}" /></p:column>
        <p:column headerText="Data de Cadastro" style="width: 25%;" sortBy="#{usuario.dataCadastro}">
            <h:outputText value="#{usuario.dataCadastro}" />
        </p:column>
    </p:dataTable>
       </h:form>
  </h:body>

Thanks, guys

Answer 1

You have to add rowKey, Selection and selectionMode parameters to the datatable. Inside it you have to pass an ajax rowSelect event.

<p:ajax event="rowSelect" update="frmUsuario" onstart="#{UsuarioMB.atualizarFormulario}"/>

Within the refresh functionFormulario you update the bean variables through the userSelected you pass by Selection in the datatable.

Answer 2

Solved. I got people, follow the solution

<p:dataTable id="userTabela" var="usuario" value="#{UsuarioMB.lista}"
		paginator="true" rows="10" emptyMessage="Não há registros na lista"
		paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
		rowsPerPageTemplate="10,15,25,50,100"  rowKey="#{usuario.id}" selection="#{usuario}" selectionMode="single" >	
		<f:facet name="header">Lista de usuários</f:facet>	
	 	    <p:ajax event="rowSelect" listener="#{UsuarioMB.onRowSelect}" update=":formUser" />
<!--.... resto dos campos !-->

código JAva
 public void onRowSelect(SelectEvent event) {
    	 Usuario us = (Usuario) event.getObject();
    	 setUsuario(us); 
     }

  public void setUsuario(Usuario usuario) { 
    	 this.usuario = usuario;
     }

I appreciate the tips and patience of all.