在JSF中使用Primefaces和Bootstrap

问题描述 投票:18回答:7

即使是现在我在我的项目中使用了JSF + Primefaces,这给了我许多新的组件(从primefaces)到工作。

但我的新客户需要管理员面板的良好布局(响应+清洁+美观)。在qazxsw poi中搜索我发现了许多很棒的布局,但几乎所有东西都是用于引导程序。

所以,我的疑问是:我可以继续使用primefaces(利用强大的组件)并使用布局进行引导程序吗?有一些限制吗?

twitter-bootstrap jsf jsf-2 primefaces
7个回答
11
投票

我建议使用BootsFaces以及PrimeFaces的Bootstrap主题(请参阅http://themeforest.net/)。 BootsFaces减少了编写Bootstrap页面所需的样板代码。此外,它提供了几个小部件,这些小部件比PrimeFaces对应的更适合Bootstrap页面。我们将BootsFaces设计为PrimeFaces的插件,因此您可以安全地将两者结合使用。


9
投票

我已经开始了一个名为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/的详细信息。


8
投票

Primefaces和Bootstrap很难一起工作。 Bootstrap定义了一堆在html中使用的css类(如navbar)。但是,primefaces通过使用自己的css类(如ui-menubar)来渲染组件。

虽然Primefaces提供了一个bootstrap主题,但主题只是使得primefaces组件看起来像bootstrap看起来像一种感觉。但是这些组件仍然通过使用primefaces css类而不是bootstrap css类来呈现。


2
投票

Primefaces已经有了project blog here中提到的bootstrap主题

要配置它,您可以关注此Primefaces Themes Page

很高兴能提供帮助。


0
投票

您可以在以引导程序为主题的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>


-2
投票

很长一段时间我搜索了我的项目信息,以整合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;
}

-2
投票

我刚刚测试过bootfaces,但是当我在平板电脑和手机中打开页面时,字体非常小。我认为,IMO并没有为真正的“响应式网页设计”做好准备,可能我必须手动使用bootstrap ..

但是“手动使用bootstrap”是一项额外的工作,从使用JavaBeans到RestFul服务,并添加额外的安全层......为一个漂亮的响应式GUI提供了相当多的工作!

© www.soinside.com 2019 - 2024. All rights reserved.