在 JSF 中使用 Primefaces 和 Bootstrap答案

【问题标题】：Using Primefaces and Bootstrap in JSF在 JSF 中使用 Primefaces 和 Bootstrap
【发布时间】：2015-02-11 11:40:54
【问题描述】：

即使现在我在我的项目中使用了 JSF+Primefaces，这给了我很多新的组件（来自 primefaces）来工作。

但是我的新客户需要一个好的管理员面板布局（响应式 + 干净 + 美丽）。在http://themeforest.net/ 中搜索，我发现了很多很棒的布局，但几乎所有内容都是为了引导。

所以，我的疑问是：我可以继续使用 primefaces（利用强大的组件）并使用引导布局吗？有什么限制吗？

【问题讨论】：

也许你可以使用blog.hatemalimam.com/jsf-and-twitter-bootstrap-integration
但是如果我使用这个 twitter-bootstrap-integration 我可以继续使用 primefaces 吗？
以防万一有人读到这个两年前的帖子：我看不出它不应该与 PrimeFaces 一起使用的任何理由。但是，作为 BootsFaces 提交者，我仍然建议使用 BootsFaces 和 PrimeFaces :)。
嗨，Icefaces + Bootfaces 怎么样？
您可以使用 BootsFaces：showcase.bootsfaces.net

标签： twitter-bootstrap jsf jsf-2 primefaces

【解决方案1】：

我建议将 BootsFaces 与 PrimeFaces 的 Bootstrap 主题一起使用（请参阅 http://showcase.bootsfaces.net/integration/PrimeFaces.jsf）。 BootsFaces 减少了编写 Bootstrap 页面所需的样板代码。另外，它提供了几个小部件，它们比 PrimeFaces 更适合 Bootstrap 页面。我们将 BootsFaces 设计为 PrimeFaces 的插件，因此您可以安全地同时使用两者。

【讨论】：

我认为链接已失效。集成现在是展示的一部分：showcase.bootsfaces.net/integration/PrimeFaces.jsf
Primefaces Bootstrap 主题是否仍然适用？该主题的维护者不再存在，最后一次提交是 3 年前
我建议您在 PrimeFaces 问题跟踪器上打开一个问题。我想这个主题是由 Cagatay 自己维护的。无论如何，打开一个问题应该很快就能解决问题。
@StephanRauh 你知道最近有什么方法可以在 PrimeFaces 中尊重 Bootstrap / BootsFaces 主题吗？当您将 PF 数据表与深色 BF 主题混淆时，事情会变得非常混乱......（为恢复这个旧线程道歉）

【解决方案2】：

我已经启动了一个名为AdminFaces 的项目。它将 Primefaces 和 Bootstrap 集成到一个名为 admin 的新主题中。这个主题将一些引导样式集成到 primefaces 组件中，如面板、按钮、消息、数据表、选项卡视图等。它还带来了一个基于著名的Admin LTE bootstrap admin 模板的模板。

您可以在这里查看展示：https://adminfaces.github.io/admin-showcase/

~~该项目处于早期开发阶段（例如：只有快照可用），因此非常欢迎任何反馈或贡献。~~ 版本 1.0.0 已发布，请参阅project blog here 的详细信息。

【讨论】：

【解决方案3】：

Primefaces 和 Bootstrap 很难协同工作。 Bootstrap 定义了一堆用于 html 的 css 类（如导航栏）。但是 primefaces 使用自己的 css 类（如 ui-menubar）来渲染组件。

虽然 Primefaces 提供了一个引导主题，但该主题只是让 primefaces 组件看起来像引导程序的外观。但是这些组件仍然是通过使用 primefaces css 类而不是引导 css 类来呈现的。

【讨论】：

【解决方案4】：

Primefaces 已经有 Primefaces Themes Page 中提到的引导主题

要配置它，你可以关注这个StackOverflow discussion

很高兴能提供帮助。

【讨论】：

它基于一个非常旧版本的引导程序，集成很好，如果你想匹配引导程序类，你可以扩展 primefaces 的渲染器并将从 jQuery UI 获取输出的类更改为引导模板。

【解决方案5】：

您可以在引导主题的 Portal 中使用 primefaces。你只需要小心设置百分比大小（使用% 而不是px）

在大多数情况下，您应该拥有自己的组件，例如 p:panelGrid，大小 = 100%

<!-- 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 4.0 驱动的 portlet 与 liferay 6.2（它有一个响应式主题）集成在一起，它运行良好，响应迅速且整洁。

你会在这里和那里遇到一些溢出的对话框和滚动条的麻烦，这些通常受限于固定的像素大小，但它是完全可行的。

您可能还想检查 primefaces Grid CSS

【讨论】：

【解决方案6】：

找了好久我的项目资料整合PrimeFaces + JSF和bootstrap，有人说不可能，但我觉得不太对，鼓励大家去做。

你需要 (modal.js)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;
}

我们的表格将是

<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:h="http://java.sun.com/jsf/html"
 xmlns:f="http://java.sun.com/jsf/core" xmlns:p="http://primefaces.org/ui" template="/WEB-INF/template.xhtml">
 <ui:define name="head">
  <h:outputScript name="bootstrap/js/modal.js" />
 </ui:define>

 <ui:define name="implementation">
  <h:form id="form">
   <p:messages id="messages" closable="true" autoUpdate="true" />
   <div class="panel panel-default">
    <div class="panel-heading">
     <i class="fa fa-angle-right"></i> Criterios de búsqueda
    </div>
    <div class="panel-body">
     <div class="row">
      <div class="form-group has-success col-md-4">
       <p:commandButton value="Generar Saludo modal con JSF" oncomplete="$('#myModal').modal('show');" title="Ver campos" 
        actionListener="#{backbeanController.mensajito}">
       </p:commandButton>
      </div>
     </div>
    </div>
   </div>

   <p:outputPanel autoUpdate="true">
    <div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal" class="modal fade">
     <div class="modal-dialog">
      <div class="modal-content">
       <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Cerrar</button>
        <h4 class="modal-title">Datos Registro</h4>
       </div>
       <div class="modal-body">
        <h:panelGrid columns="2">
         <h:outputLabel value="Mensaje:" />
         <h:outputText value="#{backbeanController.saludo}" />
        </h:panelGrid>
       </div>

       <div class="modal-footer centered">
        <button data-dismiss="modal" class="btn" type="button">Cerrar</button>
       </div>
      </div>
     </div>
    </div>
   </p:outputPanel>
  </h:form>
 </ui:define>
</ui:composition>

【讨论】：

请将代码添加到您博客中的帖子中。谢谢！
并添加解释并添加如何不破坏样式：stackoverflow.com/questions/28183661/…
这个“答案”是整个“问题”中非常非常小的一部分您只使用引导程序“resposinve grid”和模态组件。所有 PF 组件仍然看起来像 PF 而不是 Bootstrap，所以这不是在 JSF 中完全使用带有 PrimeFaces 的 Bootstrap

【解决方案7】：

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

但是“手动使用引导程序”是从使用 JavaBeans 更改为 RestFul 服务并添加额外的安全层的额外工作......对于一个漂亮的响应式 GUI 来说，工作量相当大！

【讨论】：