PrimeFlex 未应用于 PrimeFaces

Question

我尝试为 PrimeFaces (10.0.0) 设置 PrimeFlex (3.0.1)。我使用 PrimeFlex repo. Also I followed the instructions given in PrimeFaces ShowCase and used a couple of flexbox options for a first test drive (as given in FlexBox showcase.

的 dist 文件夹中提供的 css 文件

因此，我检索到一个页面，该页面似乎未应用任何 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 开发人员工具的网络部分中显示的文件）但不知何故 found/processed 对于我的 webapp 来说它不是。

此外，我将 FLEX 激活添加到 web.xml 中但没有任何效果：

    <context-param>
        <param-name>primefaces.FLEX</param-name>
        <param-value>true</param-value>
    </context-param>

也尝试使用 PrimeFlex 的整个 dist 文件夹，也没有改变任何东西。与将 h:outputStylesheet 移动到不同的位置和部分相同。

Answer 1

PrimeFaces 10、11 及其展示柜仍在使用 PrimeFlex 2。类展示柜和文档在示例中使用的是 PrimeFlex 2。当前（2021 年 8 月）版本的 PrimeFlex 是 3。

如果您查看 PrimeFlex 2 到 3 迁移指南，您会注意到大多数（如果不是全部）类已经更改。例如 p-text-left 变成了 text-left.

我会使用 PrimeFlex 3（因为无论如何在某个时候都需要迁移），并且在您从展示中复制示例时，请将迁移指南放在手边。

请注意，PrimeFaces 12 将使用 PrimeFlex 3 而不是 2。请参阅此问题：

https://github.com/primefaces/primefaces/issues/7598

如果您已经有一个使用 PrimeFlex 2 构建的应用程序，请知道可以使用 PrimeFlex 2 到 3 的迁移工具：

https://github.com/primefaces/primefaces/tree/master/primefaces-cli

PrimeFlex 未应用于 PrimeFaces

PrimeFlex not applied on PrimeFaces

jsf

primefaces

primeflex