0

Bom estou comecando agora a desenvolver com o JSF e estou com uma duvida de como fazer para o meu metodo editar receba o objeto certo do radio button , do jeito que esta implementado ele sempre pega o primeiro da table e nao o que esta selecionado pelo radio, o que eu deixei de ver ?

JSF

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
    <link rel="stylesheet" href="#{resource['css:materialize.min.css']}" type="text/css"/>
    <link rel="stylesheet" href="#{resource['css:style.css']}" type="text/css"/>
    <title>Usuários</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</h:head>
<style>
    .fixed-action-btn.horizontal ul {
        top: 47%;
    }

</style>
<h:body>
    <script type="text/javascript" src="#{resource['js:jquery-3.2.1.min.js']}"/>
    <script type="text/javascript" src="#{resource['js:materialize.min.js']}"/>
    <script type="text/javascript" src="#{resource['js:scripts.js']}"/>
    <nav>
        <div class="nav-wrapper indigo lighten-1">
            <h:graphicImage value="#{resource['imagens:logo_white.png']}" class="brand-logo center"/>
            <ul id="nav-mobile" class="left">
                <li>  <a id="menu" href="#">
                        <i class="material-icons">menu</i>
                    </a>   
                </li>
            </ul>
            <ul id="nav-mobile" class="right hide-on-small-only">


                <li>  <a id="menu" href="#">Settings</a>   
                </li>
            </ul>

        </div>
    </nav>


    <h:messages />
    <div class="divDados  grey lighten-4">

        <div class="divCima indigo lighten-2">

            <div class="fixed-action-btn horizontal click-to-toggle right ">
                <a class="btn-floating  indigo lighten-1 z-depth-3">
                    <i class="material-icons">menu</i>
                </a>
                <ul>
                    <li><a class="btn-floating purple darken-4 z-depth-3"  href="../index.jsf"><i class="material-icons">home</i></a></li>
                    <li><a class="btn-floating red darken-1 z-depth-3"><i class="material-icons">delete</i></a></li>
                    <li><h:form>
                            <h:commandLink id="menu" styleClass="btn-floating yellow darken-1 z-depth-3" action="#{BeanUsers.editar()}">
                                <i class="material-icons">mode_edit</i>
                                <f:setPropertyActionListener target="#{BeanUsers.selectedItem}"
                                                             value="#{usuario}" />
                            </h:commandLink>
                        </h:form></li>
                    <li><h:form>
                            <h:commandLink id="menu" styleClass="btn-floating green darken-1 z-depth-3" action="#{BeanUsers.cadastrar}">
                                <i class="material-icons">add</i>
                            </h:commandLink>
                        </h:form></li>
                </ul>
            </div>
            <h4 class="white-text" style="text-align: center">Usuários</h4>
        </div>
        <div class=" dadosListar container"> 

            <h:form>

                <h:dataTable binding="#{BeanUsers.dataTable}" value="#{BeanUsers.listar()}" var="usuario" rules="row" cellpadding="5" styleClass="bordered striped" >
                    <f:facet name="header">Selecionar</f:facet>

                    <h:column>
                        <h:selectOneRadio value="#{BeanUsers.usuario}"  valueChangeListener="#{BeanUsers.setSelectedItem}" onclick="selectOneRadio(this)">
                            <f:selectItem    itemValue="#{usuario}"  />
                        </h:selectOneRadio>
                    </h:column>
                    <h:column>

                    </h:column>
                    <h:column>
                        <f:facet name="header">Ativo</f:facet>
                            #{usuario.ativo}

                    </h:column> 
                    <h:column>
                        <f:facet name="header">Nome</f:facet>
                            #{usuario.nome}
                    </h:column> 
                    <h:column>
                        <f:facet name="header">Cargo</f:facet>
                            #{usuario.office}
                    </h:column> 

                    <h:column>
                        <f:facet name="header">Telefone</f:facet>
                            #{usuario.celular}
                    </h:column> 

                    <h:column>
                        <f:facet name="header">E-mail</f:facet>
                            #{usuario.email}
                    </h:column> 

                </h:dataTable>

            </h:form>
        </div>
        #{usuario.id}
        <div class="divBaixo indigo lighten-2"></div>
    </div>
</h:body>

BEAN

@ManagedBean(name = "BeanUsers")
@RequestScoped
public class BeanUsers {

    private Users usuario = new Users();
    private String confirmarSenha;
    private List<Users> lista;
    private HtmlDataTable dataTable;

    public List<Users> listar() {
        if (this.lista == null) {
            UsersBO usersBO = new UsersBO();
            this.lista = usersBO.listar();
        }

        return this.lista;
    }

    public String users() {

        return "/publico/users";
    }

    public String cadastrar() {
        this.usuario = new Users();
        this.usuario.setAtivo(true);
        return "/publico/cadUsers";
    }

    public String salvar() {
        FacesContext context = FacesContext.getCurrentInstance();

        String senha = this.usuario.getSenha();
        if (!senha.equals(this.confirmarSenha)) {
            FacesMessage facesMessage = new FacesMessage("A senha nao foi confirmada corretamente");
            context.addMessage(null, facesMessage);
            return null;
        }

        UsersBO usersBO = new UsersBO();
        usersBO.salvar(this.usuario);

        return "/publico/users";
    }

    public Users getUsuario() {
        return usuario;
    }

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

    public String getConfirmarSenha() {
        return confirmarSenha;
    }

    public void setConfirmarSenha(String confirmarSenha) {
        this.confirmarSenha = confirmarSenha;
    }

    public String editar() {

       this.usuario = usuario.getSelectedItem();
        this.confirmarSenha = this.usuario.getSenha();

        return "/publico/cadUsers";
    }

    public void setSelectedItem(ValueChangeEvent event) {

        usuario = (Users) dataTable.getRowData();

    }

    public void getSelectedItem() {

        ArrayList<Users> selectedDataList = new ArrayList<Users>();
        selectedDataList.add(usuario);


    }

    ;



         public HtmlDataTable getDataTable() {
        return dataTable;
    }

    public void setDataTable(HtmlDataTable dataTable) {
        this.dataTable = dataTable;
    }
}

JS

function selectOneRadio(radio) {
var id = radio.name.substring(radio.name.lastIndexOf(':'));
var el = radio.form.elements;
for (var i = 0; i < el.length; i++) {
    if (el[i].name.substring(el[i].name.lastIndexOf(':')) == id) {
        el[i].checked = false;
    }
}
radio.checked = true;
}
1
  • Não entendi a parte do JS. Se é radio button, todos deveriam ter o mesmo nome e apenas 1 deveria estar selecionado. Pra que serve então essa função selectOneRadio(radio)?
    – Sam
    26/01/2018 às 5:36

2 Respostas 2

0
+100

Um detalhe importante no seu DataTable e no selectOneRadio, é que da forma que foi codificado, será gerado um radio para cada linha da tabela, assim sendo, isto não impede que o usuário selecione mais de um registro, mas parece que a sua função javascript selectOneRadio tem o objetivo de "corrigir" esta situação, mas isto ficou meio que, me perdoe a expressão, uma gambiarra danada.

Talvez fosse melhor reavaliar esta abordagem, não sei quais as tecnologias usadas em seu projeto, mas o PrimeFaces possui um DataTable com seleção radio, que serviria como uma luva para o seu caso, você pode ver o exemplo aqui.

Um problema grave gerado por essa abordagem, é que o selectOneRadio esta linkado com o atributo usuario de seu Bean, mas como mencionado acima, para cada linha da tabela será gerado um radio, e no fim todos os radios gerados estão linkados ao mesmo atributo usuario de seu Bean, consegue ver o problema? Por exemplo, vamos supor que em seu Bean exista um atributo String chamado teste, e que você linkou este atributo a dois inputText na mesma página, qual dos valores preenchidos pelo usuário (o valor do primeiro ou do segundo inputText) que será repassado para o atributo teste no back end(Bean)?? Percebeu que os valores que você vai receber no back end podem apresentar um comportamento inesperado?

Mas supondo que você não queira ou não possa usar PrimeFaces, e não deseja mudar a abordagem, eu sugiro usar ajax de forma explícita, e passar a o valor do var do dataTable para o listener do ajax, o porém dessa abordagem, é a necessidade de um conversor, e ainda temos a situação discutida no parágrafo anterior para ser resolvida, mas seguindo em frente, seria algo mais ou menos assim:

Conversor

import javax.faces.bean.ApplicationScoped;
import javax.faces.bean.ManagedBean;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
import javax.faces.convert.FacesConverter;
import org.apache.commons.lang3.StringUtils;
    @FacesConverter(value = "ConversorUsers")
    @ManagedBean(eager = true)
    @ApplicationScoped
    public class ConversorUsers implements Converter {

        @Override
        public Object getAsObject(FacesContext fc, UIComponent uic, String value) {
            if (StringUtils.isNotBlank(value)) {
                return (Users) uic.getAttributes().get(value);
            }
            return null;
        }

        @Override
        public String getAsString(FacesContext fc, UIComponent uic, Object o) {
            if (o instanceof Users) {
                Users entidade = (Users) o;
                if (entidade instanceof Users && entidade.getId() != null) {
                    uic.getAttributes().put(entidade.getId().toString(), entidade);
                   return entidade.getId().toString();
                }
            }
            return "";
        }    
    }

Para mais detalhes sobre conversores recomendo estes links:
AlgaWorks
MkYoung
TutorialsPoint

XHTML

<h:column>
  <h:selectOneRadio value="#{BeanUsers.usuario}"  converter="ConversorUsers" onclick="selectOneRadio(this)">
    <f:selectItem    itemValue="#{usuario}"  />
    <f:ajax event="change" listener="#{BeanUsers.setSelectedItem(usuario)}" />
  </h:selectOneRadio>

Foi adicionado o atributo converter no radio, com o nome especificado na anotação @FacesConverter da respectiva classe. No listener do ajax você pode passar a variável usuario(o var do dataTable) direto como argumento para o método setSelectedItem, e o atributo valuechangelistener do radio foi removido.

Bean

Só estou postando as alterações.

private Users usuario = new Users();
 //adicionando um novo atributo usuarip
 private Users usuarioSelecionado = new Users();
//modificando o metodo para receber um Usuario
 public void setSelectedItem(Users u) {    
    usuarioSelecionado  = u;    
 }

Perceba que o atributo usuarioSelecionado não é referenciado no xhtml, assim garantimos que ele terá sempre o valor que for atribuído pelo método setSelectedItem, que por sua vez, obtém um usuario do radio/dataTabel. Se na página houvesse apenas um radio, você poderia linkar usuarioSelecionado direto com o value do selectOneRadio, mas como este último foi gerado várias vezes, usei essa abordagem para evitar o problema descrito no terceiro parágrafo.

Lembrando, (sim eu sei que estou sendo repetitivo) que seria extremamente recomendável rever a abordagem desta tela/página da sua aplicação, devido aos problemas citados anteriormente.

1
  • Ok, muito boa sua abordagem vou testar a solucao que voce passou e ver se o primeFaces pode ser ultilizado na aplicacao sem maiores problemas. 26/01/2018 às 16:21
-1

Exemplo funcional:

public void setSelectedItem(ValueChangeEvent event) {
     FacesContext context = FacesContext.getCurrentInstance();
     selectedItem = context.getApplication().evaluateExpressionGet(context, "#{usuario}", User.class);
}
1
  • a solucao apresentada não resolve. 22/01/2018 às 17:34

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .