DataTable JSF

Front-end
#1

Olá, pessoal! ^^"

Só avisando, estou usando icefaces, mas se alguém souber a resposta pra JSF também ajuda!

Estou desenvolvendo um projeto para a web, onde na página principal há uma tabela que puxa as últimas atividades do banco de dados…Até aí tudo bem. O problema, é que eu preciso que minha tabela tenha 3 colunas e 1 linha, sendo que ela sai na página com 3 linhas e uma coluna… Alguém sabe como resolver?

PS: a tabela…

<ice:form partialSubmit="true"> <ice:dataTable border="0" scrollable="true" scrollHeight="100px" width="680" id="tabela" columnWidths="150" style="left: 440px; top: 50px; border-color: #FFFFFF; border-bottom-color:white; border-left-color:white; border-right-color: #FFFFFF; border-top-color:white;" headerClasses="cabecalho" columnClasses="primeiro" var="item" value="#{UltimasAtividadesDAO.ultimasAtividades}"> <ice:column> <ice:outputLink hreflang="ultimasatividades.jspx"/> <ice:graphicImage style="border: 0;" value="#{item.imagem}" height="120" width="120"/><br/> <ice:commandLink action="#{UltimasAtividades.view}" > <ice:outputText value="#{item.titulo}"/> <f:param id="id" name="id" value="#{item.id}"/> </ice:commandLink> </ice:column> </ice:dataTable> </ice:form>

#2

opa …

vc esta usando somente um ice:column por isso esta saindo somente uma coluna!

faça assim

<ice:form partialSubmit="true">  
      <ice:dataTable border="0" scrollable="true" scrollHeight="100px" width="680" id="tabela" columnWidths="150" style="left: 440px; top: 50px; border-color: #FFFFFF; border-bottom-color:white; border-left-color:white; border-right-color: #FFFFFF; border-top-color:white;" headerClasses="cabecalho" columnClasses="primeiro" var="item" value="#{UltimasAtividadesDAO.ultimasAtividades}">  
                         <ice:column>  
                            <ice:outputLink hreflang="ultimasatividades.jspx"/>  
                        </ice:column>  

                         <ice:column>  
                            <ice:graphicImage style="border: 0;" value="#{item.imagem}" height="120" width="120"/><br/>  
                        </ice:column>  

                         <ice:column>  
                            <ice:commandLink action="#{UltimasAtividades.view}" >  
                               <ice:outputText value="#{item.titulo}"/>  
                               <f:param id="id" name="id" value="#{item.id}"/>  
                            </ice:commandLink>  
                        </ice:column>  

                     </ice:dataTable>  
                  </ice:form>

espero ter ajudado.
vlw

#3

Oh, cara…valeu, mas o problema, é que não é pra ficar separado… é pra ficar “imagem + titulo + descricao” na mesma coluna.

O que teria que variar são os conteúdos por coluna… deixa eu tentar explicar melhor. Isso que eu estou chamando, são atividades que vem de uma array…A idéia é que a 1ª coluna mostre o conteúdo da 1ª array, a 2ª coluna o contéudo da segunda array, e assim vai…

#4

Olá MelissaN.

Não entendi muito bem a sua dúvida. Tu quer facetar a sua tabela é isso?
Se for isso tu pode utilizar a tag <f:facet name=“header”> ou <f:facet name=“footer”> ai tu pode colocar dentro de cada coluna ou fazer um geral;

#5

Eu preciso, que fique assim:

Mas está ficando assim:

PS: só lembrando que o projeto está em fase de construção, por isso as imagens nada a ver…

#6

Ahhh sim, agora entendi, tu quer uma tabela horizontal!
É imprrescindivel a utilização do icefaces? Pois o tomahawak possui uma tag <t:dataList> que possui essa opção.
No IceFaces e Jsf eu desconheço tal função, então creio que tu devera fazer alguma “solução alternativa”.

Uma solução poderia ser, ao inves de tu usar o dataTable, voce criar uma tabela comum e fazer coluna referenciando a uma determinada variavel em um manegedBeam e que nessa variavel tu ira tratar a ultima atividade;
Ou algo mais ou menos assim

#7

Imprencindivel não é não…Mas como foi meu superior que pediu… Acaba sendo! XD
Por mim, usaria tabela normal, de html mesmo… Porque eu me dou bem com elas, arrumo fácil, fica tranquilo pra configurar, arrumar e talz… Mas disseram “Tenta usar IceFaces em tudo…” … .-.

Como é isso aí que você explicou embaixo?

#8

Opa cara,

Bom o lance é o seguinte … vc ja chegou a dar uma olhada no component showcase do icefaces ??

http://component-showcase.icefaces.org/component-showcase/showcase.iface

Tem esquema ai de panelSeries, ao inves de datatable…

da uma olhada qq duvida posta ai.

vlw

#9

Em richfaces para isso eu uso o rich:dataGrid, e nesse caso, eu colocaria com atributo ‘columns=“3”’, segue um exemplo do dataGrid:


	    <rich:dataGrid id="imagens" value="#{interface.editNews.imagens}" var="imagem" columns="3" elements="15" border="0" styleClass="semBorda">
	      <div style="width:180px; margin:2px 2px 2px 2px">
		    <a href="../imagens/#{imagem.publico.id}/#{imagem.endereco}" target="blank" >
		      <f:param value="#{imagem.id}" name="id" />   
		      <img src="../imagens/#{imagem.publico.id}/#{imagem.enderecoThumb}" width="120px"  style="border:none"/>
		    </a>
	        <br/>
	        <h:outputText value="Alternativo: "/><br id="br_#{imagem.id}"/>
	        <h:inputText value="#{imagem.descricao}" width="60px"/><br/>
	        <h:outputText value="Endereço: "/><br/>
	        <h:inputText value="#{interface.serverName}imagens/#{imagem.publico.id}/#{imagem.endereco}" width="60px" readonly="true"/><br/>
	        <h:outputText value="Endereço Miniatura: "/><br/>
	        <h:inputText value="#{interface.serverName}imagens/#{imagem.publico.id}/#{imagem.enderecoThumb}" width="60px" readonly="true"/><br/>
	        <h:outputText value="Ações: "/>
		    <h:commandLink action="#{interface.editImageNews}">   
		      <f:param value="#{imagem.id}" name="id" />   
		      <h:graphicImage id="gravar" alt="Gravar" url="../imagens/editar.png" style="border:none"></h:graphicImage>   
		    </h:commandLink>
		    <h:commandLink action="#{interface.deleteImageNews}">
		      <f:param value="#{imagem.id}" name="id" />      
		      <h:graphicImage id="del" alt="Excluir" url="../imagens/excluir.png" style="border:none"></h:graphicImage>   
		    </h:commandLink>
		  </div>
	    </rich:dataGrid>
        <rich:datascroller for="imagens" maxPages="20" id="ds1"/>

dei uma olhada breve no ices, parece que existe um ice:panelGrid, que é equivalente ao dataGrid do rich, mas não tenho certeza.

#10

Po, Gui… Até olhei… Mas eu estou fazendo curso Técnico em Informática… minha area, é desktop… Então eu fiquei assim… Bem perdida. o_O

Evefuji…Po, vou tentar cara…Mas será que isso também não vai dar o mesmo erro?

#11

como @evefuji disse

richfaces e simples fazer isso e fica um poco diferente por causa do design
aconselho a usar richfaces datagrid pois aumenta as colunas na horizontal e e bom coloca um datascrooler se houver mais de 5 colunas
qualqer coisa pergunta aqui que eu respondo

#12

[quote=MelissaN.]Po, Gui… Até olhei… Mas eu estou fazendo curso Técnico em Informática… minha area, é desktop… Então eu fiquei assim… Bem perdida. o_O

Evefuji…Po, vou tentar cara…Mas será que isso também não vai dar o mesmo erro?[/quote]Então Melissa, se vc reparar, tem um parâmetro columns=“3”, que indica que eu quero 3 colunas. Quando passar de 3 colunas, ele automaticamente passa a preencher com dados na primeira coluna na linha de baixo.

#13

Deu erro D:

Ele disse que: “Attribute value invalid for tag panelGrid according to TLD”

E agora? Comofaz? D:

<ice:form partialSubmit="true"> <ice:panelGrid border="0" columns="3" columnWidths="150" style="left: 40px; top: 50px; border-color: #FFFFFF; border-bottom-color:white; border-left-color:white; border-right-color: #FFFFFF; border-top-color:white;" headerClasses="cabecalho" columnClasses="primeiro" var="item" value="#{UltimasAtividadesDAO.ultimasAtividades[0]}"> <ice:column> <ice:graphicImage style="border: 0;" value="#{item.imagem}" height="120" width="120"/> <ice:commandLink action="#{UltimasAtividades.view}" > <ice:outputText value="#{item.titulo}"/> <f:param id="id" name="id" value="#{item.id}"/> </ice:commandLink> </ice:column> </ice:panelGrid> </ice:form>

#14