如何在JSF中以水平方向显示数据作为Asp.Net中的转发器？

Question

我在JSF中看到了datatable组件，它通常逐行呈现为表。但是，如果我想要显示不是垂直方向但水平方式的东西，我该怎么办？说，假设我想制作相册，所以我需要能够以列格式显示数据库表行。

Answer 1

利用另一个基于UIData的组件，您可以完全控制输出，例如Facelets' ui:repeat，Tomahawk's t:dataList或{{3 }} RichFaces'或rich:dataList。

E.g。

<ul>
    <ui:repeat items="#{bean.photos}" var="photo">
        <li><img src="#{photo.url}" alt="#{photo.title}" /></li>
    </ui:repeat>
</ul>

与例如

结合使用

li { 
    display: inline;
    list-style-type: none;
}

t:dataList和rich:dataList可以为您呈现<ul>和<li>。您只需打印<img>（或h:graphicImage，如果您愿意）并应用CSS。

更新：作为奖励，因为横向滚动页面通常对用户体验不利，你想把它变成旋转木马。只需按如下方式设置<ul>元素的样式：

ul {
    width: 500px; /* Just pick whatever width it needs to be. */
    white-space: nowrap;
    overflow-x: scroll;
    overflow-y: none;
}