PrimeFlex не применяется на PrimeFaces

avatar
Greenfly77
8 августа 2021 в 16:07
1417
1
2

Я попытался настроить PrimeFlex (3.0.1) для PrimeFaces (10.0.0). Я использовал файлы css из папки dist репозитория PrimeFlex. Также я следовал инструкциям, приведенным в 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), но почему-то он не найден/не обработан для моего веб-приложения.

Кроме того, я безрезультатно добавил активацию FLEX в web.xml:

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

Также пробовал использовать всю папку dist PrimeFlex, тоже ничего не меняет. То же самое с перемещением h:outputStylesheet в разные позиции и разделы.

Источник
Jasper de Vries
8 августа 2021 в 17:00
1

Вы используете классы PrimeFlex 2 и загрузили 3. primefaces.org/primeflex/migration

Greenfly77
8 августа 2021 в 21:06
0

Хороший комментарий, хотел бы принять его как правильный ответ. Это точно была моя ошибка. К сожалению, я следил за предоставленными примерами на PrimeFaces ShowCase, которые не ссылались на версию PrimeFlex, но ссылались на нее и предоставляли устаревшие примеры. Уже начал задаваться вопросом, что я не мог найти все классы, но пока не думал в версии и миграции.

Ответы (1)

avatar
Jasper de Vries
9 августа 2021 в 06:43
2

PrimeFaces 10, 11 и их витрины по-прежнему используют PrimeFlex 2. Витрина и документация используют в примерах классы PrimeFlex 2. Текущая (август 2021 г.) версия PrimeFlex — 3.

Если вы посмотрите руководство по переходу с PrimeFlex 2 на 3, вы заметите, что большинство (если не все) классов изменились. Например, p-text-left стало text-left.

Я бы использовал PrimeFlex 3 (поскольку миграция все равно потребуется в какой-то момент) и держал бы под рукой руководство по миграции, когда вы копируете примеры из витрины.

Обратите внимание, что PrimeFaces 12 будет использовать PrimeFlex 3 вместо 2. См. эту проблему:

Если у вас уже есть приложение, созданное с использованием PrimeFlex 2, знайте, что доступно средство миграции с PrimeFlex 2 на 3: