更改primefaces theme
2016-05-18 17:49
267 查看
PrimeFaces is using jQuery ThemeRoller CSS theme framework, and come with 30+ pre-designed themes that you can download and apply in seconds. In this tutorial, we will show you how to change a theme n PriceFaces.
There are two ways to change a theme :
Using Maven to download and apply.
Download manually and apply.
In this case, we will show you how to change a default theme (aristo) to glass-x theme.
File : pom.xml
Markup
Theme version?
Visit this PrimeFaces repository directly, check the theme folder to know which one is the latest.
File : web.xml
Markup
Run it, the theme color will be changed, and looking inside the source code, it point to glass-x now.
Markup
File : web.xml
Markup
File : web.xml
Markup
P.S Reference – PrimeFaces user guide
jQuery Theme Roller
PrimeFaces User Guide
There are two ways to change a theme :
Using Maven to download and apply.
Download manually and apply.
1. Maven Download
For Maven user, visit this PrimeFaces available theme, select a theme and remember the theme, defined in Maven and configure theweb.xml.
In this case, we will show you how to change a default theme (aristo) to glass-x theme.
File : pom.xml
Markup
//... <repositories> <repository> <id>prime-repo</id> <name>Prime Repo</name> <url>http://repository.primefaces.org</url> </repository> </repositories> <dependencies> <dependency> <groupId>org.primefaces.themes</groupId> <artifactId>glass-x</artifactId> <version>1.0.6</version> </dependency> <dependencies>
Theme version?
Visit this PrimeFaces repository directly, check the theme folder to know which one is the latest.
File : web.xml
Markup
//... <context-param> <param-name>primefaces.THEME</param-name> <param-value>glass-x</param-value> </context-param>
Run it, the theme color will be changed, and looking inside the source code, it point to glass-x now.
Markup
<!-- html source code --> <link type="text/css" rel="stylesheet" href="/project/faces/javax.faces.resource/theme.css?ln=primefaces-glass-x" />
2. Download Manually
For non-Maven user, just visit the PrimeFaces’s repository and download the theme jar manually, and put it in your project classpath, and configure theweb.xml.
File : web.xml
Markup
//... <context-param> <param-name>primefaces.THEME</param-name> <param-value>glass-x</param-value> </context-param>
Change Theme Dynamic
A nice trip to use EL expression to apply a theme dynamically. See following code snippet :File : web.xml
Markup
<context-param> <param-name>primefaces.THEME</param-name> <param-value>#{loggedInUser.preferences.theme}</param-value> </context-param>
P.S Reference – PrimeFaces user guide
http://primefaces.org/themes
References
PrimeFaces Available ThemesjQuery Theme Roller
PrimeFaces User Guide
相关文章推荐
- 英语单词
- calcHist函数
- 线段_线段树
- 树状数组
- C++协程(1):协程原理及实现方式概述
- BZOJ 1305 [CQOI2009]dance跳舞
- 用Category方式给UITapGestureRecognizer添加Tag属性
- html表格的例子
- HBase预分区region自定义算法
- python 正则表达式(regular)
- 美团、点评、猫眼App下拉加载效果的源码分享
- wildfly jboss deploy 报 拒绝访问
- OpenGl 4.x for Mac开发环境配置
- 如何用studio将一个Android工程转成一个jar文件
- lua 的坑
- 第一阶段总结
- 大神博客
- 封装对NPOIExcel的操作,方便的设置导出Excel的样式
- document.getElementById().submit is not a function
- Java clone