2

我尝试为 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到不同的位置和部分相同。

4

1 回答 1

1

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 迁移工具：

于 2021-08-09T06:43:03.703 回答