jsf - PrimeFlex 不适用于 PrimeFaces
问题描述
我尝试为 PrimeFaces (10.0.0) 设置 PrimeFlex (3.0.1)。我使用了PrimeFlex repo的 dist 文件夹中提供的 css 文件。此外,我遵循 PrimeFaces ShowCase 中给出的说明,并在第一次试驾时使用了几个 flexbox 选项(如FlexBox 展示中给出的。
结果,我检索到一个似乎没有应用任何 PrimeFlex 类的页面。但为什么?
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>PrimeFlex in Action</title>
<h:outputStylesheet name="css/primeflex.css" />
</h:head>
<h:body>
Hello from PrimeFlex
<h2>Direction</h2>
<div class="p-d-flex p-flex-column p-flex-md-row">
<div class="p-mb-2 p-mr-2">Item 1</div>
<div class="p-mb-2 p-mr-2">Item 2</div>
<div class="p-mb-2 p-mr-2">Item 3</div>
</div>
<h2>Flex Container</h2>
<div class="p-d-flex">Flex Container</div>
<div class="p-d-inline-flex">Inline Flex Container</div>
<h2>Responsive</h2>
Row direction for larger screens and column for smaller.
<div class="p-d-flex p-flex-column p-flex-md-row card">
<div class="p-mb-2 p-mr-2">Item 1</div>
<div class="p-mb-2 p-mr-2">Item 2</div>
<div class="p-mb-2 p-mr-2">Item 3</div>
</div>
</h:body>
</html>
似乎检索到了 css 文件(查看 Chrome 开发人员工具的网络部分中显示的文件),但不知何故找不到/处理我的 web 应用程序。
另外,我在 web.xml 中添加了 FLEX 激活,但没有任何效果:
<context-param>
<param-name>primefaces.FLEX</param-name>
<param-value>true</param-value>
</context-param>
也试过使用 PrimeFlex 的整个 dist 文件夹,也没有任何改变。与移动h:outputStylesheet
到不同的位置和部分相同。
解决方案
PrimeFaces 10 及其展示是在 PrimeFlex 2 时编写的。展示和文档在示例中使用的类是 PrimeFlex 2 的类。PrimeFlex 的当前(2021 年 8 月)版本是 3。
如果您查看 PrimeFlex 2 到 3 迁移指南,您会注意到大多数(如果不是全部)类都发生了变化。例如p-text-left
变成text-left
.
我会使用 PrimeFlex 3(因为无论如何在某些时候都需要迁移)并在您从展示中复制示例时将迁移指南放在手边。
请注意,PrimeFaces 12 将(很可能)使用 PrimeFlex 3 而不是 2。请参阅此问题:
如果您已经有一个使用 PrimeFlex 2 构建的应用程序,请知道可以使用 PrimeFlex 2 到 3 迁移工具:
推荐阅读
- python - 如何使用 python pandas 找到丢失的索引?
- excel - 如何进行差距分析以确定连续数字列中的缺失数字?
- angular - combineLatest 仅针对第一个事件触发
- mysql - 如何使用 mysql 函数从 varchar 数据类型中获取整数?
- python - 检查两个对象在python中是否具有相同的属性
- windows - 在文件更改时运行 Windows 批处理脚本
- javascript - JavaScript:多个过滤器链与复杂条件
- c# - 如何同时使用 FindByNameAsync 和 FindByIdAsync 检查用户
- c - 在 x264 中正确使用 `nalu_process` 回调
- taskscheduler - 任务计划程序下一次运行时间为空