JSF
我有这个JPA
用于存储的市场 Java Web 应用程序。我决定使用Zurb - Foundation 4
css 前端框架让它看起来更好。不幸的是,我仍然是一个缺乏经验的前端设计师。我的问题是:如何根据从持久性单元中检索到的数据在 HTML 和 CSS 中动态创建项目?
为了澄清这一点,我将添加一些关于我当前xhtml
代码和部分Zurb - Foundation 4
商店模板的代码,我想用它们动态显示结果。
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">
等等,你知道它是如何结束的。无论如何,正如您所看到的,这些“面板”是静态的,它们是一一添加的。如何根据检索到的项目动态添加它们?