本文共 10171 字,大约阅读时间需要 33 分钟。
primefaces
Today we will look into Primefaces Themes. Primefaces is integrated with powerful ThemeRoller CSS framework. Currently there are 30+ pre-designed Primefaces free that you can preview and download from Primefaces theme gallery.
今天,我们将研究Primefaces主题。 Primefaces与功能强大的ThemeRoller CSS框架集成在一起。 当前有30多个预先设计的Primefaces免费 ,您可以从Primefaces主题库中预览和下载。
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 component. We will use this for our Primefaces theme example and apply custom theme on it.
下面提供的示例考虑组件。 我们将在Primefaces主题示例中使用此示例,并在其上应用自定义主题。
Applying a primefaces theme in your project is very easy. Just follow below steps to apply a theme easily.
在项目中应用primefaces主题非常容易。 只需按照以下步骤轻松应用主题即可。
pom.xml
pom.xml
org.primefaces.themes afterdark 1.0.10
web.xml
web.xml
primefaces.THEME afterdark
web.xml
web.xml
primefaces.THEME #{calendarManagedBean.theme}
Look below at the running sample that uses the Afterdark theme.
下面查看使用Afterdark主题的运行示例。
And look below at the running sample that uses blitzer theme.
并在下面查看使用blitzer主题的运行示例。
等等。
If you’d like to create your own primefaces custom theme instead of using the pre-defined ones, that is easy as well because provides a powerful and easy to use inline visual tool.
如果您想创建自己的primefaces自定义主题而不是使用预定义主题,这也很容易,因为提供了功能强大且易于使用的内联可视化工具。
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基础结构。 要创建和应用您的自定义主题,您必须执行以下步骤:
primefaces-journaldev
folder. 将您的theme.css文件和图像文件复制到您的primefaces-yourtheme中,在我们的情况下,它们将位于primefaces-journaldev
文件夹中。 lib
directory at the project root and copy the jar file into it. Then add the jar file to the project build path. 将JAR导入到项目构建路径中,请记住,我们已经使用了一段时间前引入的项目。 在项目根目录下创建lib
目录并将jar文件复制到其中的最简单方法。 然后将jar文件添加到项目构建路径。 maven-war-plugin
plugin. Our final pom.xml file looks like below.pom.xml
由于在构建项目时需要打包项目jar文件,因此需要在pom.xml文件中进行一些更改,以将journaldev.jar文件复制到WAR文件的WEB-INF / lib目录中。 更改很容易,我们所需要做的就是添加一个配置,以将jar文件包含到4.0.0 com.journaldev Primefaces-Calendar-Sample war 0.0.1-SNAPSHOT Primefaces-Calendar-Sample https://maven.apache.org prime-repo PrimeFaces Maven Repository https://repository.primefaces.org default javax.servlet servlet-api 2.5 provided com.sun.faces jsf-impl 2.2.4 com.sun.faces jsf-api 2.2.4 org.primefaces primefaces 5.0 javax.servlet.jsp javax.servlet.jsp-api 2.3.1 javax.servlet jstl 1.1.2 org.primefaces.themes blitzer 1.0.10 src/main/java maven-war-plugin 2.3 WebContent false lib **/*.jar WEB-INF/lib maven-compiler-plugin 3.1
maven-war-plugin
插件的WEB-INF / lib目录中。 我们最终的pom.xml文件如下所示。 pom.xml
web.xml
web.xml
Faces Servlet javax.faces.webapp.FacesServlet 1 Faces Servlet /faces/* Faces Servlet *.xhtml State saving method: 'client' or 'server' (=default). See JSF Specification 2.5.2 javax.faces.STATE_SAVING_METHOD client primefaces.THEME journaldev com.sun.faces.config.ConfigureListener
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为您提供了一种定义新主题或为您的应用程序使用预定义主题的绝佳方法。 本教程旨在向您解释如何创建自己的自定义主题。 从下面的链接下载示例项目。
翻译自:
primefaces
转载地址:http://ltlzd.baihongyu.com/