Jsf + Primefaces响应式设计

Question

我已经开始为我的网站开发JSF + Primefaces最新版本,这有点可能,我可以使我的设计响应这些技术.我不想使用Primefaces mobile或者我不想为相同的功能创建两个不同的页面

Answer 1

PrimeFaces 6.x具有响应式设计更新,包括响应式网格.

网格不是JSF组件,它是一个带有ui-grid类的简单div .

3列布局示例:

<div class="ui-grid">
   <div class="ui-grid-col-4">Col1</div>
   <div class="ui-grid-col-4">Col2</div>
   <div class="ui-grid-col-4">Col2</div>
 </div>

在实际情况下,只有网格的场景不会满足要求,因此您通常应该使用一些框架,如bootstrap或foundation.

两个框架都提供CSS/Javascript规则,它们可以轻松应用于JSF组件,例如,如果您有一个按钮:

<h:commandButton styleClass="btn" value="Button">
</h:commandButton>

btn是一个bootstrap CSS类.

您可能会遇到一些不接受此类样式的组件,如Primefaces表,在这些情况下,您应该编写自己的CSS媒体查询/Javascript以保持响应性.

看更多

• JSF和Twitter Bootstrap集成