即使是现在我在我的项目中使用了JSF + Primefaces,这给了我许多新的组件(从primefaces)到工作。
但我的新客户需要管理员面板的良好布局(响应+清洁+美观)。在qazxsw poi中搜索我发现了许多很棒的布局,但几乎所有东西都是用于引导程序。
所以,我的疑问是:我可以继续使用primefaces(利用强大的组件)并使用布局进行引导程序吗?有一些限制吗?
我建议使用BootsFaces以及PrimeFaces的Bootstrap主题(请参阅http://themeforest.net/)。 BootsFaces减少了编写Bootstrap页面所需的样板代码。此外,它提供了几个小部件,这些小部件比PrimeFaces对应的更适合Bootstrap页面。我们将BootsFaces设计为PrimeFaces的插件,因此您可以安全地将两者结合使用。
我已经开始了一个名为http://showcase.bootsfaces.net/integration/PrimeFaces.jsf的项目。它将Primefaces和Bootstrap集成到一个名为admin的新主题中。这个主题将一些bootstrap样式集成到primefaces组件中,如面板,按钮,消息,数据表,选项卡视图等。它还带来了一个基于着名的AdminFaces bootstrap管理模板的模板。
你可以在这里看看展示:Admin LTE
该项目处于早期开发阶段(例如:仅提供快照),因此任何反馈或贡献都非常受欢迎。 版本1.0.0发布,请参阅https://adminfaces.github.io/admin-showcase/的详细信息。
Primefaces和Bootstrap很难一起工作。 Bootstrap定义了一堆在html中使用的css类(如navbar)。但是,primefaces通过使用自己的css类(如ui-menubar)来渲染组件。
虽然Primefaces提供了一个bootstrap主题,但主题只是使得primefaces组件看起来像bootstrap看起来像一种感觉。但是这些组件仍然通过使用primefaces css类而不是bootstrap css类来呈现。
您可以在以引导程序为主题的Portal中使用primefaces。你只需要小心设置百分比大小(使用StackOverflow discussion而不是%
)
在大多数情况下,你应该有你的组件,例如px
,大小= 100%
p:panelGrid
我已经成功地将Primefaces 4.0驱动的portlet与liferay 6.2(它具有响应主题)集成在一起,并且它工作得很好,反应灵敏,整洁。
你会遇到一些问题,包括溢出的对话框和滚动条,它们通常受固定像素大小的限制,但它完全可以。
您可能还想检查primefaces <!-- If the screen is too narrow to hold both columns they will be aligned verically -->
<p:panelGrid columns="2" style="width:100%;">
<!-- Left Align -->
<p:panelGrid columns="1" style="width:85%; text-align:left;">
...
</p:panelGrid>
<!-- Right Align ( Controls )-->
<p:panelGrid columns="1" style="width:15%; text-align:right; float:right;">
...
</p:panelGrid>
</p:panelGrid>
很长一段时间我搜索了我的项目信息,以整合PrimeFaces + JSF和bootstrap,有几个人说这是不可能的,但我认为那不是真的,我鼓励大家这样做。
你需要(modal.js)Grid CSS
http://getbootstrap.com/javascript/#modals
我们的表格将是
private String saludo ="";
public void mensajito(){
saludo = "Saludos bitacorawil!!!" + new Date();
}
public String getSaludo() {
return saludo;
}
public void setSaludo(String saludo) {
this.saludo = saludo;
}
我刚刚测试过bootfaces,但是当我在平板电脑和手机中打开页面时,字体非常小。我认为,IMO并没有为真正的“响应式网页设计”做好准备,可能我必须手动使用bootstrap ..
但是“手动使用bootstrap”是一项额外的工作,从使用JavaBeans到RestFul服务,并添加额外的安全层......为一个漂亮的响应式GUI提供了相当多的工作!