Skip to main content

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

Labels:

Comments

Post a Comment

Popular posts from this blog

Part 3 - Integrating Tiles, Thymeleaf and Spring MVC 3

In this post I will demonstrate how to integrate Apache Tiles with Thymeleaf. This is very simple. The first step is to include the tiles and thymeleaf-tiles extension dependencies. I will include them in the pom.xml. Note we wil lbe using Tiles 2.2.2 Listing 1 - parent/pom.xml --- thymeleaf-tiles and tiles dependencies <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <!-- Tiles --> <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-core</artifactId> <version>${tiles.version}</version> <scope>compile</scope> </dependency> <dependency> <groupId>org.apache.tiles</groupId> <artifactId>tiles-template</artifactId> <version>${tiles.version}</version> <scope>compile</s...
5 comments
Read more

CKEDITOR 3.x - Simplest Ajax Submit Plugin

  I have assumed that you have downloaded and got started with CKEDITOR. Step 1 – The html file is shown below: <html> <head> <title>Writer</title> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <script type="text/javascript" src="ckeditor/ckeditor.js"></script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <style> .cke_contents { height: 400px !important; } </style> </head> <body> <form action="sample_posteddata.php" method="post"> <textarea id="editor" > </textarea> <script type="text/javascript"> //<![CDATA[ CKEDITOR.replace( 'editor', { fullPage : true, uiColor : '#9AB8F3', toolbar : 'MyToolbar' }); //]]> </script> </form> </body> </html> Note that the jquery js...
3 comments
Read more

Getting started with Prime faces 2

Prime faces is an amazing JSF framework from Cagatay Civici ( http://cagataycivici.wordpress.com/ ). Its wonderful because it is easy to use, minimal dependencies, has probably the widest set of controls among all JSF frameworks, easy to integrate with Spring (including Spring Security) , Java EE EJBs, and last but not the least mobile UI support. So I decided to give Prime faces a try, before selecting it to use in my projects. Step 1 – Create Maven 2 project As a first step to integrating Prime faces, create a Maven 2 project in Eclipse. You will need to select ‘maven-archetype-webapp’. Step 2 – Add repositories and dependencies in pom.xml I will be using Prime faces 2 with JSF 2 on Tomcat 6. Since the dependencies for Prime Faces and JSF 2 (JSF 2.0.3 is required) are available on different repositories, I will add them to my pom file first. The listing below shows my pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/X...
2 comments
Read more