在PrimeFaces中创建自定义主题

PrimeFaces使用的jQuery的ThemeRoller框架，它与30多个预定义的主题，请访问所有可用的主题 ，之前创建一个自定义的主题。

在本教程中，我们将向您展示如何创建自定义主题并将其应用于PrimeFaces。

1. ThemeRoller CSS框架

访问jQuery ThemeRoller ，在值旁边进行自定义，然后单击下载。

在下载页面上，选择“ 取消选择所有组件 ”，然后单击下载

2.重命名为theme.css

您从ThemeRoller下载的文件将包含css，development-bundle和js文件夹。 转到css文件夹，将jquery-ui-{version}.custom.css重命名为theme.css 。

PS必须是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 ，使用搜索并替换所有选项。

首先，替换这个

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. Classpath上的Jar

复制“ yourtheme.jar ”上方的项目类路径。

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资源文件夹。

有用！

参考文献

1. PrimeFaces用户指南
2. PrimeFaces可用主题
3. jQuery ThemeRoller CSS框架
4. Java Jar示例

标签： primefaces 主题

翻译自: https://mkyong.com/jsf2/primefaces/create-a-custom-theme-in-primefaces/