Valor dinâmico em componente html dentro de um <ui:repeat>

12 de abril de 2011 9 respostas

danilocmiranda 12 de abril de 2011

Olá pessoal!

Meu problema é simples. Tenho um banner dinâmico que exibe quatro fotos populadas pelo meu managed bean.
Este baner exibe uma foto grande e em embaixo quatro miniaturas (a miniatura da que esta sendo exibida e das outras 3), e nessas miniaturas podemos clicar para navegar entre as fotos.

Dentro do

das miniaturas temos um Link que aponta ara um atributo do Javascript e deve ficar assim:

<div>
									<a href="#1" class="cross-link active-thumb"><img
										src="../images/images_novidades/tempphoto-1thumb.jpg"
										class="nav-thumb" alt="temp-thumb" />Titulo da foto 1.</a>
								</div>
								<div>
									<a href="#2" class="cross-link"><img
										src="../images/images_novidades/tempphoto-2thumb.jpg"
										class="nav-thumb" alt="temp-thumb" />Titulo da foto 2</a>
								</div>
								<div>
									<a href="#3" class="cross-link"><img
										src="../images/images_novidades/tempphoto-3thumb.jpg"
										class="nav-thumb" alt="temp-thumb" />Titulo da foto 3</a>
								</div>
								<div>
									<a href="#4" class="cross-link"><img
										src="../images/images_novidades/tempphoto-4thumb.jpg"
										class="nav-thumb" alt="temp-thumb" />Titulo da foto 4</a>
								</div>

Finalmente pergunto:
Como vou incrementar o “href=#” dentro do <ui:repeat, já que só preciso colocar uma div e o reapeate se encarrega de criar as novas divs dependento de quantos ítens meu manageg ben passar??

Abraços,

9 Respostas

danilocmiranda 13 de abr. de 2011

Pensei em criar um pequeno List ou array mesmo contendo de 1 a 4 então chamo este array dentro do id da DIV para que cada DIV gerada pela repeat tenha o Id correto, o que acham?

danilocmiranda 13 de abr. de 2011

Alguém???

Alexandre_Saudate 14 de abr. de 2011

Na verdade, seria mais interessante se você criasse um objeto, mesmo, contendo um indice e o caminho da foto, algo assim.

Só uma sugestão, pra te ser bem sincero, nem entendí mto bem o problema… vc poderia explicar um pouco melhor?

[]´s

danilocmiranda 14 de abr. de 2011

Vamos ver se consigo explicar melhor.

Eu tenho este trecho dentro de um

<ui:repeat value="#{noticiaPB.lista}" var="news">  
                                <div id="main-photo-slider">  
                                    <div class="panelContainer">  
                                      
                                        <div class="panel" title="Panel 1">  
                                            <div class="wrapper">  
                                            <h:graphicImage value="#{news.foto}" alt="scotch egg" class="floatLeft"/>  
                                                <h1>  
                                                <h:outputText value="#{news.titulo}" />  
                                                </h1>  
  
                                                <p>  
                                                <h:outputText value="#{news.noticiaCurta}" />                                               
                                                </p>  
                                            </div>  
                                        </div>  
                                          
                                    </div>  
                                </div>  
  
                                <div id="movers-row">  
                                    <div>  
                                    <h:commandLink action="#" value="" class="cross-link active-thumb">  
                                    <h:graphicImage value="#{news.fotoCurta}" class="nav-thumb" alt="temp-thumb"/>  
                                    </h:commandLink>  
<!--                                     <a href="#1" class="cross-link active-thumb"><img-->  
<!--                                         src="images/images_novidades/tempphoto-1thumb.jpg"-->  
<!--                                         class="nav-thumb" alt="temp-thumb" />-->  
<!--                                         <h:outputText value="#{news.titulo}" />-->  
<!--                                         </a>-->  
                                    </div>  
                                      
                                </div>  
                                </ui:repeat>

O resultado htnk da div (

deve ser este

<div id="movers-row">  
                                <div>  
                                    <a href="#1" class="cross-link active-thumb"><img  
                                        src="../images/images_novidades/tempphoto-1thumb.jpg"  
                                        class="nav-thumb" alt="temp-thumb" />Samsung apresenta Galaxy  
                                        Tab.</a>  
                                </div>  
                                <div>  
                                    <a href="#2" class="cross-link"><img  
                                        src="../images/images_novidades/tempphoto-2thumb.jpg"  
                                        class="nav-thumb" alt="temp-thumb" />Samsung apresenta Galaxy  
                                        Tab.</a>  
                                </div>  
                                <div>  
                                    <a href="#3" class="cross-link"><img  
                                        src="../images/images_novidades/tempphoto-3thumb.jpg"  
                                        class="nav-thumb" alt="temp-thumb" />Samsung apresenta Galaxy  
                                        Tab.</a>  
                                </div>  
                                <div>  
                                    <a href="#4" class="cross-link"><img  
                                        src="../images/images_novidades/tempphoto-4thumb.jpg"  
                                        class="nav-thumb" alt="temp-thumb" />Samsung apresenta Galaxy  
                                        Tab.</a>  
                                </div>  
                            </div>

Como vou fazer para o href incrementar #1, #2, #3 e #4 a cada renderização do

Abraços

FelipeThi 14 de abr. de 2011

cara acho que você pode usar o varStatus do ui:repeat

eu nunca usei o ui:repeat mas no jstl tem um atributo que é varStatus ver ai como eu faria:

<table>  
<c:forEach var="i" begin="1" end="10" varStatus="status">
    <tr>
    <td>
    <a href="#${status.count}">Foto</a>
    </td>
    </tr>
</c:forEach>
</table>

Fiz assim e no meu funcinou isso com jstl…

eu verifiquei e no ui:repeat tem também o varStatus.

Dá uma testada

obs: se quiser testar a tag de jstl é:

xmlns:c="http://java.sun.com/jsp/jstl/core"

satangoss 14 de abr. de 2011

Ola Danilo agora intendi seu problema, sou o Ronaldo do Kurtphpr, pra você fazer o que quer crie um contador dentro do seu managed bean e use um a4j:suport para incrementar o valor dele toda vez que se clicar na imagem. E limpe esse contador toda vez que chamar a pagina com as imagens.

Alexandre_Saudate 14 de abr. de 2011

FelipeThi:
cara acho que você pode usar o varStatus do ui:repeat

eu nunca usei o ui:repeat mas no jstl tem um atributo que é varStatus ver ai como eu faria:
<table>  
<c:forEach var="i" begin="1" end="10" varStatus="status">
    <tr>
    <td>
    <a href="#${status.count}">Foto</a>
    </td>
    </tr>
</c:forEach>
</table>
Fiz assim e no meu funcinou isso com jstl…

eu verifiquei e no ui:repeat tem também o varStatus.

Dá uma testada

obs: se quiser testar a tag de jstl é:

xmlns:c="http://java.sun.com/jsp/jstl/core"

Então… isso é feio pra c*****, mas acho que é uma saída. Ou colocar a propriedade do indice no próprio objeto (o que, também, é muito feio).

[]'s

FelipeThi 14 de abr. de 2011

asaudate:
FelipeThi:
cara acho que você pode usar o varStatus do ui:repeat

eu nunca usei o ui:repeat mas no jstl tem um atributo que é varStatus ver ai como eu faria:
<table>  
<c:forEach var="i" begin="1" end="10" varStatus="status">
    <tr>
    <td>
    <a href="#${status.count}">Foto</a>
    </td>
    </tr>
</c:forEach>
</table>
Fiz assim e no meu funcinou isso com jstl…

eu verifiquei e no ui:repeat tem também o varStatus.

Dá uma testada

obs: se quiser testar a tag de jstl é:

xmlns:c="http://java.sun.com/jsp/jstl/core"
Então… isso é feio pra c*****, mas acho que é uma saída. Ou colocar a propriedade do indice no próprio objeto (o que, também, é muito feio).

[]'s

Existe algum problema em usar jstl nas páginas?

danilocmiranda 14 de abr. de 2011

Pessoal,

Criei um atributo no meu objeto, então como o meu ui:repeat recebe uma List eu consigo acessar o meu contador.

Agora o problema é que quando eu tento acessar o atributo contador que acabei de criar no Action do meu CommandLink!

Se o Action do CommandLink não aceita variáveis dos objetos oriundos do meu Managed Bean como vou incrementar o valor? Com Javascript?

Abraços

Criado 12 de abril de 2011

Ultima resposta 14 de abr. de 2011

Respostas 9

Participantes 4

9 Respostas

Topicos relacionados