Создать собственную тему в PrimeFaces

PrimeFaces использует платформу jQuery ThemeRoller и поставляется с 30 предварительно определенными темами. Перед созданием Пользовательская тема.

В этом уроке мы покажем вам, как создать собственную тему и применить ее в PrimeFaces.

1. ThemeRoller CSS Framework

Посетите jQuery ThemeRoller , поиграйте со значением, чтобы настроить тему, и нажмите «Загрузить».

jquery themeroller

На странице загрузки выберите « Отменить выбор всех компонентов » и нажмите кнопку загрузки.

2. Переименовать в theme.css

Файл, который вы скачали с ThemeRoller, будет содержать папки css, development-bundle и js. Перейдите в папку css, переименуйте jquery-ui- {version} .custom.css в` theme.css`.

P.S Должно быть theme.css , другого имени нет .

3. Изменить путь к изображению

Это утомительный и скучный путь, отредактируйте файл «theme.css», замените все существующие стандартные пути изображений CSS на пути загрузки ресурсов JSF.

Например, изменить из этого:

url(images/ui-bg__highlight-soft__75__cccccc__1x100.png)

к этому :

url("#{resource['primefaces-mytheme:images/ui-bg__highlight-soft__75__cccccc__1x100.png']}")

Вот что я делал, редактировал theme.css в файловом редакторе, использовал опцию search и replace all .

Сначала замени это

url(images

к этому

url("#{resource['primefaces-mytheme:images

Во-вторых, замените это:

.png

к этому

.png']}"

4. Джар Это

Ваша новая тема должна соответствовать следующей структуре папок:

- jar
  - META-INF
    - resources
      - primefaces-yourtheme
        - theme.css
        - images

Настройте папку, чтобы создать указанную выше структуру папок, всего несколько копий и вставку. Затем перейдите на один уровень выше папки « META-INT » и введите команду jar -cvf yourtheme.jar , чтобы создать файл` yourtheme.jar`.

$ jar -cvf yourtheme.jar .

Список содержимого созданного файла JAR.

$ jar -tf yourtheme.jar
META-INF/META-INF/MANIFEST.MF
.DS__Store
META-INF/resources/META-INF/resources/primefaces-yourtheme/META-INF/resources/primefaces-yourtheme/.DS__Store
META-INF/resources/primefaces-yourtheme/images/META-INF/resources/primefaces-yourtheme/images/ui-bg__flat__0__aaaaaa__40x100.png//..image files
META-INF/resources/primefaces-yourtheme/theme.css

5. Баночка на пути к классам

Скопируйте выше «yourtheme.jar» в classpath проекта.

6. web.xml

В web.xml поместите это:

   <context-param>
        <param-name>primefaces.THEME</param-name>
        <param-value>yourtheme</param-value>
  </context-param>

Готово. Новая пользовательская тема создается и применяется в вашем проекте PrimeFaces.

Альтернативный путь

Выше приведено упоминание в PrimeFaces руководстве пользователя , лично мне не нравится процесс Jar, который довольно проблематичен, вместо этого вы можете скопировать весь «Primefaces-yourtheme» »И поместите его прямо в папку ресурсов JSF.

создать пользовательскую тему в простом виде

Оно работает!

TOC