今天，我们将研究Primefaces主题。
Primefaces与功能强大的ThemeRoller CSS框架集成在一起。
当前有30多种预先设计的Primefaces免费主题，您可以从Primefaces主题库中预览和下载。

Primefaces主题

本教程将为您提供有关如何应用Primefaces主题和创建自己的自定义primefaces主题的完整说明。

下面提供的示例考虑日历组件。
我们将在Primefaces主题示例中使用此示例，并在其上应用自定义主题。

应用Primefaces主题

在项目中应用primefaces主题非常容易。
只需按照以下步骤轻松应用主题即可。

• 访问Primefaces Maven存储库。

• 导航至您喜欢的主题，例如下面的aristo。

• 选择要下载的最新版本。

• 下载aristo-1.0.1.jar文件。

• 将下载的JAR附加到您的类路径中。
  可以通过使用Maven Dependencies来完成相同的下载，如下所示，我们将使用afterdark主题：

pom.xml

<!-- Primefaces Theme Library -->
<dependency>
	<groupId>org.primefaces.themes</groupId>
	<artifactId>afterdark</artifactId>
	<version>1.0.10</version>
</dependency>

• 在部署描述符(web.xml)上以主题名称为值定义THEME CONTEXT参数。

web.xml

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

• 无需在页面中添加任何样式文件，因为Primefaces会为您处理所有事情。

• 如果希望使主题动态化，请将EL表达式定义为参数值。

web.xml

<context-param>
	<param-name>primefaces.THEME</param-name>
	<param-value>#{calendarManagedBean.theme}</param-value>
</context-param>

下面查看使用Afterdark主题的运行示例。

并在下面查看使用闪电主题的运行示例。

等等。

创建一个新的Primefaces主题

如果您想创建自己的primefaces自定义主题而不是使用预定义主题，这也很容易，因为ThemeRoller提供了功能强大且易于使用的嵌入式视觉工具。

应用自己的自定义素面主题与应用预定义主题的方式相同。
但是，您需要将下载的主题文件从ThemeRoller迁移到Primefaces Theme基础架构。
要创建和应用您的自定义主题，您必须执行以下步骤：

• 使用ThemeRoller创建自己的主题。

• 一旦应用自定义主题，请在上方查看将在运行的应用程序内部使用的Calendar组件。
  出于示例目的，请单击链接以通过调整左窗格中的参数来生成与可修改主题相同的主题。

• 单击下载主题按钮，它将带您进入下载页面。

• 从版本选项中选择1.10.4以解决兼容性问题。

• 从组件选项中取消选择ToggleAll，以便您的主题仅包含外观样式。

• 在下载页面的底部，只需下载您的主题，如下所示。

• 创建符合Primefaces主题结构标准的文件夹结构。
  往下看：

• META-INF文件夹应包含资源，而资源又包含primefaces-yourtheme文件夹。
  在我们的案例中，我们将其命名为primefaces-theitroad。

• Primefaces-theitroad文件夹应包含您CSS和图像。

• 返回已下载的主题，将zip文件解压缩到您的办公桌上，然后导航到css文件夹并搜索jquery-ui-1.10.4.custom.css并将其重命名为theme.css。

• 打开您的theme.css文件，并将所有图像路径更改为url("#{resource [’primefaces-theitroad：images/{image}"]))，而不是url(" images/{image}")。
  下面看我们的theme.css文件片段的示例。

• 您已经注意到，所有图像的URL都被更改为与Faces资源对象结合使用。

• 将您的theme.css文件和图像文件复制到您的primefaces-yourtheme中，在我们的情况下，它们将位于" primefaces-theitroad"文件夹中。

• 使用jar -cvf yourTheme.jar PATH-INTO-YOUR-META-INF-FOLDER将主题打包到JAR文件中。
  在下面查看JAR。

• 将您的JAR导入到您的项目构建路径中，请记住，我们使用了前一段时间引入的Primefaces Calendar项目。
  在项目根目录下创建lib目录并将jar文件复制到其中的最简单方法。
  然后将jar文件添加到项目构建路径。

• 由于在构建项目时需要打包项目jar文件，因此需要在pom.xml文件中进行一些更改，以将theitroad.jar文件复制到WAR文件的WEB-INF/lib目录中。
  更改很容易，我们所需要做的就是添加一个配置，以将jar文件包含到" maven-war-plugin"插件的WEB-INF/lib目录中。
  我们最终的pom.xml文件如下所示。

• 通过更改primefacs.THEME参数来配置web.xml文件。

web.xml

<project xmlns="https://maven.apache.org/POM/4.0.0" xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="https://maven.apache.org/POM/4.0.0 https://maven.apache.org/maven-v4_0_0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<groupId>com.theitroad</groupId>
	<artifactId>Primefaces-Calendar-Sample</artifactId>
	<packaging>war</packaging>
	<version>0.0.1-SNAPSHOT</version>
	<name>Primefaces-Calendar-Sample</name>
	<url>https://maven.apache.org</url>
	<repositories>
		<repository>
			<id>prime-repo</id>
			<name>PrimeFaces Maven Repository</name>
			<url>https://repository.primefaces.org</url>
			<layout>default</layout>
		</repository>
	</repositories>
	<dependencies>
		<!-- Servlet -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>servlet-api</artifactId>
			<version>2.5</version>
			<scope>provided</scope>
		</dependency>
		<!-- Faces Implementation -->
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-impl</artifactId>
			<version>2.2.4</version>
		</dependency>
		<!-- Faces Library -->
		<dependency>
			<groupId>com.sun.faces</groupId>
			<artifactId>jsf-api</artifactId>
			<version>2.2.4</version>
		</dependency>
		<!-- Primefaces Version 5 -->
		<dependency>
			<groupId>org.primefaces</groupId>
			<artifactId>primefaces</artifactId>
			<version>5.0</version>
		</dependency>
		<!-- JSP Library -->
		<dependency>
			<groupId>javax.servlet.jsp</groupId>
			<artifactId>javax.servlet.jsp-api</artifactId>
			<version>2.3.1</version>
		</dependency>
		<!-- JSTL Library -->
		<dependency>
			<groupId>javax.servlet</groupId>
			<artifactId>jstl</artifactId>
			<version>1.1.2</version>
		</dependency>
		<!-- Primefaces Theme Library -->
		<dependency>
			<groupId>org.primefaces.themes</groupId>
			<artifactId>blitzer</artifactId>
			<version>1.0.10</version>
		</dependency>
	</dependencies>
	<build>
		<sourceDirectory>src/main/java</sourceDirectory>
		<plugins>
			<plugin>
				<artifactId>maven-war-plugin</artifactId>
				<version>2.3</version>
				<configuration>
					<warSourceDirectory>WebContent</warSourceDirectory>
					<failOnMissingWebXml>false</failOnMissingWebXml>
					<webResources>
						<resource>
							<directory>lib</directory>
							<includes>
								<include>**/*.jar</include>
							</includes>
							<targetPath>WEB-INF/lib</targetPath>
						</resource>
					</webResources>
				</configuration>
			</plugin>
			<plugin>
				<artifactId>maven-compiler-plugin</artifactId>
				<version>3.1</version>
				<configuration>
					<source>1.6</source>
					<target>1.6</target>
				</configuration>
			</plugin>
		</plugins>
	</build>

</project>

• 运行您的应用程序。

• 您已经注意到，日历组件使用了新的自定义主题。