0

Estou criando um projeto comercial em JSF, e para iniciar o projeto comecei a criar o layout das paginas, para criar o projeto, estou fazendo por pedaços, e em cada pedaço do projeto estou criando pequenos projetos que iram fazer parte de um único projeto.

A parte que queria me deter é na pagina que irá fazer visualização dos produtos.

Gostaria que pudessem observar as com atenção a linha de código abaixo;

<table>
    <ui:repeat var="produto" value="#{pesquisaProdutoBean.produtosListados}" varStatus="status">

        <tr>
            <td> <h:graphicImage library="images" name="relogio.jpeg"/> </td>
            <td> descrição do relogio </td>
            <td> valor do relogio </td>
        </tr>

    </ui:repeat>
</table>

Ela está ficando assim;

inserir a descrição da imagem aqui

Pode-se observar que existe uma primeira coluna que contém a imagem e uma outra segunda coluna que contém a descrição, todas as paginas em JSF com tabelas são assim mesmo.

Observem esse outro exemplo;

Já nesse exemplo as coisas são bem diferentes, as imagem ficam em uma linha, a descrição fica em outra linha e os valores em outra linha.

Enquanto na primeira imagem os items são organizados em colunas, na segunda imagem são organizados em linhas.
Eu queria poder organizar minha tabela em linhas e não colunas, já fiz algumas tentativas mas não tive sucesso. Preciso saber como fazer isso.

inserir a descrição da imagem aqui

Eu coloquei meu XHTML assim;

<h:form>

                        <table>

                            <ui:repeat var="produto"
                                value="#{pesquisaProdutoBean.produtosListados}"
                                varStatus="status">

                                <div class="row">
                                    <div class="col-md-4">
                                        <h:graphicImage library="images" name="relogio.jpeg"
                                            id="imagemProduto" />
                                    </div>
                                    <div class="col-md-4">
                                        <div id="descProduto">RELÓGIO FOSSIL FCH2784N</div>
                                    </div>
                                    <div class="col-md-4">
                                        <div id="descValor">R$ 500,00</div>
                                    </div>

                                </div>

                            </ui:repeat>

                        </table>

                    </h:form>

CSS:

#descProduto{
    position:relative;
    margin-top:50px;
    text-align: left;
}
#descValor{
    position:relative;
    margin-top:50px;
    font-size:18px;
    text-align: left;
    font-style: italic;
}

Sendo que não era como eu queria;

inserir a descrição da imagem aqui

9
  • @ViniciusDutra Não adicione comentários como uma edição à pergunta. Se tiver uma dúvida ou necessitar esclarecimento do autor, utilize esta secção de comentários, pois é para isso que ela serve.
    – Chun
    Commented 8/12/2015 às 15:49
  • desculpe, não entendi o comentário.
    – user10264
    Commented 8/12/2015 às 15:53
  • o comentário era para o Vinicius, que tinha feito uma edição a sua pergunta com o comentário: Estou interessado em lhe ajudar, mas estou com dificuldades em entender sua dúvida. Seria possível tornar mais clara o que você tem atualmente e aonde você quer chegar?
    – Chun
    Commented 8/12/2015 às 16:01
  • explicando de forma prática eu queria saber como configurar o css para ficar como na segunda figura. dá uma olhada que acabei de atualizar minha postagem.
    – user10264
    Commented 8/12/2015 às 16:19
  • 1
    Verdade. Mas já transcrevi aquilo que ele tinha adicionado como edição, para comentário :)
    – Chun
    Commented 8/12/2015 às 17:12

1 Resposta 1

1

Fiz um teste com HTML+Bootstrap+AngularJS e deu certo, creio que também irá funcionar no JSF, tente fazer isso:

<h:form>
   <table>
      <div class="row">
         <ui:repeat var="produto"
            value="#{pesquisaProdutoBean.produtosListados}"
            varStatus="status">
            <div class="col-md-4">
               <h:graphicImage library="images" name="relogio.jpeg"
                  id="imagemProduto" />
            </div>
            </br>
            <div id="descProduto">RELÓGIO FOSSIL FCH2784N</div>
            </br>
            <div id="descValor">R$ 500,00</div>
         </ui:repeat>
      </div>
   </table>
</h:form>

Aqui está o exemplo: http://jsfiddle.net/sinkz/RkykR/1675/

É só aumentar o tamanho da janela do resultado que verás uma imagem do lado da outra.

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