[javasf] Alterar cor de fundo de datatable

[Marcio Eduardo]

Olá pessoal, preciso de ajuda e/ou conselho, por favor.

Tenho uma página onde tenho um rich:dataTable, ao clicar em uma linha, esta altere de cor de fundo e envie para o managedBean o dado, pois preciso colocar em outro formulário.
Fiz de modo improvisado com JQuery do richfaces, no entanto, na minha opinião está muito gambiarrístico para JSF, gostaria de fazer de modo que o JSF controle isso.

 <rich:dataTable value="#{os.listaClientes}" id="resModal"   rows="7" binding="#{os.tabela}"
                                            onRowClick="retirar('.cor3');trocar(this); atualizarEntidadeModal('#{item.RECNO}');return false;" columnClasses="cod, pessoa, nome, cpf, rs, nf,rg, insce, tele, telecel"
                                            onRowMouseOver="over(this);return false;" onRowMouseOut="out(this);return false;"
                                            rowClasses="cor1,cor2" var="item" style="width: 1510px;">

.. colunas ...
agora a forma q tá funcionando
agora a form
<h:form id="formModal">
                        <h:commandButton value="Limpar"  image="/resources/imagens/eraser.png" style="width: 32px; height: 32px;" id="btModalLimpar"/>
                        <rich:spacer width="10px" />
                        <a4j:commandButton value="Selecionar" image="/resources/imagens/7171_64x64.png" action="#{os.atualizarCliente}"
                                           style="width: 32px; height: 32px;" id="btModalSelecionar"
                                           reRender="outputPanelTabOs" oncomplete="#{rich:component('showModalCliente')}.hide(); return false;">
                            <!--<f:setPropertyActionListener target="#{os.cliente.recno}" value="j$('formModal:recno').val();" />-->
                        </a4j:commandButton>
                        <rich:spacer width="10px" />
                        <h:commandButton value="Fechar" onclick="#{rich:component('showModalCliente')}.hide(); return false;"
                                         image="/resources/imagens/7143_64x64.png" style="width: 32px; height: 32px;" type="button" id="btModalFechar"/>
                        <rich:toolTip for="btModalLimpar" value="Limpar" />
                        <rich:toolTip for="btModalSelecionar" value="Selecionar item"/>
                        <rich:toolTip for="btModalFechar" value="Fechar" />
                        <h:inputText value="#{os.os.cliente.recno}" id="idClienteModal" styleClass="unicoCampoComIsso" style="display: none; visibility: hidden; width: 1px; height: 1px;"/>

                    </h:form>

form com os botões.

JQuery que criei. Ele vai setar o valor da linha nesse inputText abaixo dos botões, que estarão ocultos por causa do style. O jquery fica assim


function atualizarEntidadeModal(id){
    var s1 = "#formModal\\:idClienteModal";
    try {
        s1 = eval("#formModal\\:idClienteModal");
    } catch(e){

    }
    jQuery(s1).val(id);
}
Esse é o do efeito para alterar a cor de fundo.
 <rich:jQuery name="over" timing="onJScall" query="addClass('active-row')" />
        <rich:jQuery name="out" timing="onJScall" query="removeClass('active-row')" />
        <rich:jQuery name="trocar" timing="onJScall" query="addClass('cor3')" />
        <rich:jQuery name="retirar" timing="onJScall" query="removeClass('cor3')" />

Tentei isso abaixo, mas claro que carrego esse abaixo e mudo o nome de jquery de cima para evitar conflitos. Acontece que depois que envia os dados para o servidor, ele retira a cor de fundo selecionada.

  <a4j:form id="forma4j" ajaxSubmit="true" >
        <a4j:jsFunction   name="atualizarEntidadeModal" >
            <a4j:actionparam name="param1" assignTo="#{os.cliente.recno}" />
        </a4j:jsFunction>
    </a4j:form>

Procurei na documentação modos de fazer um binding do rich:dataTable e alterar a cor de fundo no managedBean, mas no entanto foi infrutífero.

Pensei em algo como: <rich:colunm rendered="condição 1" style="cor de fundo selecionada" > e <rich:colunm rendered="condição 2" >

Por favor, alguém pode me dar outras alternativas!

Agradeço a atenção de todos, Márcio Eduardo.

--
Você recebeu essa mensagem por que é membro do "JavaSF: JavaServer Faces Group" em http://groups.google.com/group/javasf
Para postar no grupo envie para jav...@googlegroups.com

[Euclides Filizola]

Não sei se eu entendi sua pergunta, mas você poderia colocar assim:

<rich:dataTable id="tabela" style="cursor:pointer;" value=""  onRowMouseOver="this.style.backgroundColor='#C9FDC1'"
                onRowMouseOut="this.style.backgroundColor='#{a4jSkin.tableBackgroundColor}'" cellpadding="0" cellspacing="0" rows="10" >
                <f:facet name="header" >
               

OU seja, dentro do seu datatable, colocar um javascript: onRowMouseOver= "this.style.backgroundColor= "#C9FDC1"

 .... onde #C9FDC1, é a cor que irá ficar o fundo da linha da sua datatable assim que a pessoa colocar o mouse em cima da linha.

[Marcio Eduardo]

isso já fiz com o rich:jQuery, o detalhe está em enviar o dado para o managedBean, no requisito, tenho que:

1) ao clicar na linha esta altere de cor. 
Feito assim <rich:datatable ... 

onRowMouseOver="over(this);return false;" onRowMouseOut="out(this);return false;"

...

 <rich:jQuery name="over" timing="onJScall" query="addClass('active-row')" />
        <rich:jQuery name="out" timing="onJScall" query="removeClass('active-row')" />
        <rich:jQuery name="trocar" timing="onJScall" query="addClass('cor3')" />
        <rich:jQuery name="retirar" timing="onJScall" query="removeClass('cor3')" />

2) enviar o objeto daquela linha para o managebBean, por isso var="item", e por isso onRowClick="retirar('.cor3');trocar(this); atualizarEntidadeModal('#{item.RECNO}');return false;", para enviar a ID de meu objeto da linha. Só que:

quando uso o a4j:jsFunction não fica a cor de fundo. E com o script

function atualizarEntidadeModal(id){
    var s1 = "#formModal\\:idClienteModal";
    try {
        s1 = eval("#formModal\\:idClienteModal");
    } catch(e){

    }
    jQuery(s1).val(id);
}

O arquiteto e eu achamos que é muita gambiarra e ainda, depender de javascript é um retrocesso, já que com o JSF posso controlar estados no managedBean. E ainda não encontramos como pegar a linha clicada pelo o binding no managedBean.

[thiago moraes]

Use o a4j:support no evento onselectionchange da tabela para atualizar seu managed bean via ajax.

2010/5/5 Marcio Eduardo <marcio...@gmail.com>

--
Thiago Alves de Moraes
thiag...@gmail.com

[Marcio Eduardo]

@Thiago, detalhe por favor. como?, dentro do datatable, assim:
<rich:dataTable ...
<a4j:support event=onselectchange ... />
</rich:datatable>

[Marcio Eduardo]

Eu e o arquiteto quebramos a cabeça e conseguimos, a idéia dele foi a salvadora do arquiteto.

no rich:dataTable

 <rich:dataTable value="#{os.listaClientes}" id="resModal"   rows="7" binding="#{os.tabela}"
                              

              onRowClick="retirar('.cor3');trocar(this); atualizarEntidadeModal('#{item.RECNO}');" columnClasses="cod, pessoa, nome, cpf, rs, nf,rg, insce, tele, telecel"

                                            onRowMouseOver="over(this);return false;" onRowMouseOut="out(this);return false;"
                                            rowClasses="cor1,cor2" var="item" style="width: 1510px;">

e nas colunas
<rich:colunm rendered="#{os.cliente.RECNO eq item.RECNO}">

<rich:colunm style="cor3" rendered="#{!(os.cliente.RECNO eq item.RECNO)}">

e na função

<a4j:function name="atualizarEntidade">
<a4j:actionparam assignTo="#{os.cliente.RECNO}" name="param1" />
</a4j:jsFunction>