primefaces

Today we will look into Primefaces Themes. Primefaces is integrated with powerful ThemeRoller CSS framework. Currently there are 30+ pre-designed Primefaces free themes that you can preview and download from Primefaces theme gallery.

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

Primefaces主题 (Primefaces Themes)

This tutorial will provide you complete explanation of how you can apply a Primefaces theme and create your own custom primefaces theme.

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

The samples provided below consider the Calendar component. We will use this for our Primefaces theme example and apply custom theme on it.

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

应用Primefaces主题 (Applying Primefaces Theme)

Applying a primefaces theme in your project is very easy. Just follow below steps to apply a theme easily.

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

1. Visit Primefaces Maven repository.访问Primefaces Maven存储库 。
2. Navigate into your preferred theme, like aristo below.导航到您喜欢的主题，例如下面的aristo。
3. Select the version last version to be downloaded.选择要下载的最新版本。
4. Download the aristo-1.0.1.jar file.下载aristo-1.0.1.jar文件。
5. Append the downloaded JAR into your classpath. The same downloading can be done through using of Maven Dependencies like below we will use afterdark theme:将下载的JAR附加到您的类路径中。 可以通过使用Maven Dependencies来完成相同的下载，如下所示，我们将使用afterdark主题：

6. pom.xml

   pom.xml

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

7. Define THEME CONTEXT parameter at your deployment descriptor (web.xml) with theme name as a value.在部署描述符（ web.xml ）上以主题名称为值定义THEME CONTEXT参数。

8. web.xml

   web.xml

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

9. No need for adding any of styles files into your pages, cause Primefaces will handle everything for you.无需在页面中添加任何样式文件，因为Primefaces会为您处理所有事情。
10. In case you would like make the theme dynamic, define an EL expression as the param value.如果您想使主题动态化，请将EL表达式定义为参数值。

11. web.xml

    web.xml

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

Look below at the running sample that uses the Afterdark theme.

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

And look below at the running sample that uses blitzer theme.

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

And so on.

等等。

创建一个新的Primefaces主题 (Creating a New Primefaces Theme)

If you’d like to create your own primefaces custom theme instead of using the pre-defined ones, that is easy as well because ThemeRoller provides a powerful and easy to use inline visual tool.

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

Applying your own custom primefaces theme is the same way as applying a pre-defined theme. However you need to migrate the downloaded theme files from ThemeRoller to Primefaces Theme infrastructure. For creating and applying your custom theme, you have to follow the below steps:

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

1. Using ThemeRoller for creating your own theme.使用ThemeRoller创建自己的主题。
2. Look above at the Calendar component that will be used inside the running application once your custom theme has applied. For sample purpose click on the link for generating the same theme as it’s modifiable by tuning the arguments at the left pane.当您应用自定义主题后，在上方查看将在运行的应用程序中使用的Calendar组件。 出于示例目的，单击链接以通过调整左窗格中的参数来生成与可修改主题相同的主题。
3. Click on the download theme button that will direct you into download page.单击下载主题按钮，它将带您进入下载页面。
4. From the version option select 1.10.4 for compatibility issue.从版本选项中选择1.10.4以解决兼容性问题。
5. From components option deselect ToggleAll so that your theme only includes skinning styles.从组件选项中取消选择ToggleAll，以便您的主题仅包含外观样式。
6. At the bottom of the download page, just download your theme would look like below.在下载页面的底部，只需下载您的主题，如下所示。
7. Create a structure of folders that comply with the Primefaces theme structure standard. Look below:创建符合Primefaces主题结构标准的文件夹结构。 往下看：
8. META-INF folder should contain resources which in turn contains primefaces-yourtheme folder. In our case we’ve named primefaces-journaldev.META-INF文件夹应包含资源，而资源又包含primefaces-yourtheme文件夹。 在我们的例子中，我们将其命名为primefaces-journaldev 。
9. Primefaces-journaldev folder should contains your css and images.Primefaces-journaldev文件夹应包含您CSS和图像。
10. Return back into downloaded theme, extract the zip file into your desk and navigate into css folder and search for jquery-ui-1.10.4.custom.css and rename it to be theme.css.返回已下载的主题，将zip文件解压缩到您的办公桌上并导航到css文件夹，然后搜索jquery-ui-1.10.4.custom.css 并将其重命名为theme.css 。
11. Open your theme.css file and change all the images paths to be url(“#{resource[‘primefaces-journaldev:images/{image}’]”) rather than url(“images/{image}”). Look below at a sample of fragments of our theme.css file.打开您的theme.css文件，并将所有图像路径更改为 url（“＃{resource ['primefaces-journaldev：images / {image}']”））而不是url（“ images / {image}”）。 在下面查看我们theme.css文件的片段示例。
12. As you’ve noticed, all of images urls are changed to be used in conjunction with Faces resource object.您已经注意到，所有图像url都已更改为与Faces资源对象结合使用 。
13. Copy your theme.css file and images file into your primefaces-yourtheme, in our case they will be located inside primefaces-journaldev folder.将您的theme.css文件和图像文件复制到您的primefaces-yourtheme中，在我们的情况下，它们将位于primefaces-journaldev文件夹中。
14. Package your theme into JAR file using jar -cvf yourTheme.jar PATH-INTO-YOUR-META-INF-FOLDER. Look JAR below.使用jar -cvf yourTheme.jar PATH-INTO-YOUR-META-INF-FOLDER将主题打包到JAR文件中。 在下面查看JAR。
15. Import your JAR into your project build path, remember that we’ve used the Primefaces Calendar project that was introduced some time ago. Easiest way to create a lib directory at the project root and copy the jar file into it. Then add the jar file to the project build path.将JAR导入到项目构建路径中，请记住，我们已经使用了一段时间前引入的Primefaces Calendar项目。 在项目根目录下创建lib目录并将jar文件复制到其中的最简单方法。 然后将jar文件添加到项目构建路径。
16. Since we need to package the project jar file when we build the project, we need to make some changes in the pom.xml file to copy the journaldev.jar file to WEB-INF/lib directory of the WAR file. The changes are easy, all we need is to add a configuration to include the jar file to WEB-INF/lib directory for maven-war-plugin plugin. Our final pom.xml file looks like below.

    pom.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.journaldev</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>

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

    pom.xml

17. Configure your web.xml file by changing the primefacs.THEME param.通过更改primefacs.THEME参数来配置web.xml文件。

18. web.xml

    web.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <web-app xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"xmlns="https://java.sun.com/xml/ns/javaee" xmlns:web="https://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"xsi:schemaLocation="https://java.sun.com/xml/ns/javaeehttps://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"id="WebApp_ID" version="2.5" metadata-complete="true"><servlet><servlet-name>Faces Servlet</servlet-name><servlet-class>javax.faces.webapp.FacesServlet</servlet-class><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>Faces Servlet</servlet-name><url-pattern>/faces/*</url-pattern></servlet-mapping><servlet-mapping><servlet-name>Faces Servlet</servlet-name><url-pattern>*.xhtml</url-pattern></servlet-mapping><context-param><description>State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2</description><param-name>javax.faces.STATE_SAVING_METHOD</param-name><param-value>client</param-value></context-param><context-param><param-name>primefaces.THEME</param-name><param-value>journaldev</param-value></context-param><listener><listener-class>com.sun.faces.config.ConfigureListener</listener-class></listener>
    </web-app>

19. Running your application.运行您的应用程序。
20. As you’ve noticed, the calendar component has used the new custom theme.如您所见，日历组件使用了新的自定义主题。

Primefaces主题示例摘要 (Primefaces Themes Example Summary)

Changing primefaces themes maybe the most adhoc work that can be achieved arbitrarily. Primefaces provides you the excellent way to define a new theme or use a pre-defined theme for your application. This tutorial intended to explain you how can create your own custom theme. Download the sample project from below link.

更改primefaces主题可能是可以任意完成的最临时的工作。 Primefaces为您提供了一种定义新主题或为您的应用程序使用预定义主题的绝佳方法。 本教程旨在向您解释如何创建自己的自定义主题。 从下面的链接下载示例项目。

翻译自: https://www.journaldev.com/3362/primefaces-themes

primefaces