Динамически создайте элементы HTML и CSS

Question

У меня есть это приложение для веб-разработки на рынке, разработанное с использованием JSF наряду с JPA для хранения. Я решил использовать Zurb - Foundation 4 css front-end framework, чтобы он выглядел лучше. К сожалению, я все еще неопытный дизайнер. Мой вопрос: как динамически создавать элементы в HTML и CSS на основе полученных данных из единицы сохранения?

Чтобы уточнить это, я добавлю код относительно моего текущего кода xhtml и части Zurb - Foundation 4store template, с помощью которого я хотел бы динамически отображать результаты.

XHTML:

<div id="Wrapper"> 
     <div id="content"> 
    <h:form> 
     <h:dataTable var="_items" 
        value="#{itemManager.item}" 
        border="1" 
        binding="#{itemManager.table}"> 
     <h:column> 
      <f:facet name="header">Item</f:facet> 
      #{_item.name} 
     </h:column> 
     <h:column> 
      <f:facet name="header">Available Units</f:facet> 
      #{_item.stock} 
     </h:column> 
     <h:column> 
      <f:facet name="header">Price</f:facet> 
      #{_item.price} 
     </h:column> 
     <h:column> 
      <f:facet name="header">Select</f:facet> 
      <h:commandButton value="Select" 
          action="#{itemManager.selectItem}"/> 
     </h:column> 
     </h:dataTable> 
    </h:form> 

Zurb - Фонд 4:

<div class="large-8 columns"> 
      <div class="row"> 

      <div class="large-4 small-6 columns"> 
       <img src="http://placehold.it/1000x1000&text=Thumbnail"> 

       <div class="panel"> 
       <h5>Item Name</h5> 
       <h6 class="subheader">$000.00</h6> 
       </div> 
      </div> 

      <div class="large-4 small-6 columns"> 
       <img src="http://placehold.it/500x500&text=Thumbnail"> 

И так далее, вы знаете, как она заканчивается. В любом случае, поскольку вы можете видеть, что эти «панели» являются статическими, они добавляются один за другим. Как их можно динамически добавлять на основе полученных элементов?

Answer 1

Вы не можете использовать стандарт <h:dataTable>, если хотите, чтобы сгенерированный HTML выглядел следующим образом. Но вы можете добиться чего-то подобного, если используете <ui:repeat>, который просто перечислит список элементов без рендеринга. Таким образом вы можете самостоятельно отображать содержимое таблицы. Что-то вроде этого:

<div class="large-8 columns"> 

    <ui:repeat var="_items" value="#{itemManager.item}"> 

    <div class="row"> 

     <div class="large-4 small-6 columns"> 
     <img src="#{_item.image}"> 

     <div class="panel"> 
      <h5>#{_item.name}</h5> 
      <h6 class="subheader">#{_item.price}</h6> 
     </div> 
     </div>