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

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

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

How to Stand up a Spring Cloud Config Server?

Setup and Configure Spring Cloud Config Server Project Spring Cloud Config Server is just another Spring Boot application. It provides several infrastructure micro services to centralize access to configuration information backed by a version controlled (well at least in the case of default GIT storage) repository. Step 1 - Create a Spring Boot project in STS with the dependencies shown in Figure 2. Figure 1 - Creating Spring Boot project to setup Spring Cloud Config Server Figure 2 - Spring Cloud Config Server dependencies Click on 'Finish' to complete the creation of the Spring Boot project in STS. The build.gradle file is shown in listing below. There is only one dependency to the Spring Cloud Config Server. Also Spring Cloud release train 'Dalston.SR1'. Step 2 - Annotate the class containing main method The next step is to annotate the ConfigServerInfraApplication class with  @EnableConfigServer That's all is needed on the Java si
1 comment
Read more