Saturday, September 25, 2010

Adding color to Prime Faces

In my last post you have seen a command button. This command button uses the default Prime faces skin and is shown in grey. Let me now make things a bit colorful, by showing how to use the skins provided by Prime faces. Prime faces skins are all based on Jquery themeroller CSS framework. I am interested in cupertino font and I will download the same from - http://www.primefaces.org/themes/cupertino.zip. You can download lots of other ready made themes from - http://www.primefaces.org/themes.html.

In later posts I will show how to create, install and use custom theme or skin. Once downloaded unzip the theme to webapps/themes folder. This is shown in the figure below:

Blog - 2

Prime faces theme consists of a skin.css file and a set of images placed in images folder. Now modify your web.xml to tell Prime faces that it should no longer use the default theme sam. Here is the modified web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" >


<context-param>
<param-name>primefaces.skin</param-name>
<param-value>none</param-value>
</context-param>


<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>*.jsf</url-pattern>
</servlet-mapping>


</web-app>

Finally add the css in your JSF source using the link tag as shown in the listing (home.xhtml) below:

<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.prime.com.tr/ui">

<f:view contentType="text/html">

<h:head>
<title>PrimeFaces - ShowCase</title>

<link type="text/css" rel="stylesheet" href="#{request.contextPath}/themes/cupertino/skin.css" />


</h:head>

<h:body>
<h:form>
<p:commandButton value="Ajax Submit" />
</h:form>



</h:body>



</f:view>
</html>


Now just like in the previous post, build and deploy the application on tomcat and browse to the following URL - http://localhost:8080/hermesconsole/home.jsf. You will see the bluish button as shown in the figure below.


Blog - 3

No comments:

Post a Comment