在 JSF 中使用 Primefaces 和 Bootstrap

Posted 2023-02-23

【中文标题】在 JSF 中使用 Primefaces 和 Bootstrap

【英文标题】：Using Primefaces and Bootstrap in JSF

【发布时间】：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

【参考方案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 中提到的引导主题

要配置它，你可以关注这个*** 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>

【讨论】：

请将代码添加到您博客中的帖子中。谢谢！

并添加解释并添加如何不破坏样式：***.com/questions/28183661/…

这个“答案”是整个“问题”中非常非常小的一部分您只使用引导程序“resposinve grid”和模态组件。所有 PF 组件仍然看起来像 PF 而不是 Bootstrap，所以这不是在 JSF 中完全使用带有 PrimeFaces 的 Bootstrap

【参考方案7】：

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

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