Sunday, September 26, 2010

Removing the border from header layout unit

As you have seen the layout contains layout units. You can put any element inside a layout unit. Now there is a border for each layout unit. For our online store, I do not want the border and the header title. In order to remove the border, you will need to override the CSS style and to remove the header just remove the header attribute (header="TOP") from the layout unit tag. This is shown in listing 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>Simple Store - Home</title>

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

<style>

.ui-layout-unit-top .ui-layout-bd {
border: 0;
}

</style>


</h:head>

<h:body>


<p:layout fullPage="true">
<p:layoutUnit position="top" height="80">
<h:outputText value="Top content." />
</p:layoutUnit>
<p:layoutUnit position="bottom" header="BOTTOM" height="100">
<h:outputText value="Bottom content." />
</p:layoutUnit>
<p:layoutUnit position="left" header="LEFT" width="300">
<h:outputText value="Left content" />
</p:layoutUnit>
<p:layoutUnit position="right" header="RIGHT" width="200">
<h:outputText value="Right Content" />
</p:layoutUnit>
<p:layoutUnit position="center" header="CENTER">
<h:outputText value="Center Content" />
</p:layoutUnit>
</p:layout>



</h:body>



</f:view>
</html>



The result is shown in figure below

Creating the layout

Any web site has a layout. Layouts can be created with HTML tables, divs and with CSS with Javascript tricks. Prime Faces provides out of the box support for border layout. A border layout typically has 5 parts as shown below

TOP / HEADER
LEFT CENTER RIGHT
BOTTOM / FOOTER

This border layout works well for most websites. Prime faces border layout can be either applied to a full page or a specific element. It can respond to expand, collapse, close and resize events of each layout unit with ajax listeners. Let us create a full page layout for a simple shopping cart application similar to OSCOMMERCE - http://demo.oscommerce.com/

The listing below shows the modified home.xhtml code.

Listing 1 – home.xhtml

<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>Simple Store - Home</title>

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




</h:head>

<h:body>


<p:layout fullPage="true">
<p:layoutUnit position="top" header="TOP" height="80">
<h:outputText value="Top content." />
</p:layoutUnit>
<p:layoutUnit position="bottom" header="BOTTOM" height="100">
<h:outputText value="Bottom content." />
</p:layoutUnit>
<p:layoutUnit position="left" header="LEFT" width="300">
<h:outputText value="Left content" />
</p:layoutUnit>
<p:layoutUnit position="right" header="RIGHT" width="200">
<h:outputText value="Right Content" />
</p:layoutUnit>
<p:layoutUnit position="center" header="CENTER">
<h:outputText value="Center Content" />
</p:layoutUnit>
</p:layout>



</h:body>



</f:view>
</html>



You can now see the home page layout as shown in figure below:


Blog - 4

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

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/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>net.breezeware</groupId>
<artifactId>hermesconsole</artifactId>
<packaging>war</packaging>
<version>0.0.1-SNAPSHOT</version>
<name>hermesconsole Maven Webapp</name>
<url>http://maven.apache.org</url>
<dependencies>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<version>4.8.1</version>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.primefaces</groupId>
<artifactId>primefaces</artifactId>
<version>2.2.M1</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>2.0.3</version>
</dependency>
<dependency>
<groupId>com.sun.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>2.0.3</version>
</dependency>
</dependencies>


<repositories>
<repository>
<id>prime-repo</id>
<name>Prime Technology Maven Repository</name>
<url>http://repository.prime.com.tr/</url>
</repository>
<repository>
<id>maven2-repository.dev.java.net</id>
<name>Java.net Repository for Maven</name>
<url>http://download.java.net/maven/2/</url>
</repository>

</repositories>


<build>
<finalName>hermesconsole</finalName>
</build>
</project>



Step 3 – Change web.xml


Add the JSF faces servlet in the web.xml file.

<?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>



Step 4 – Add a simple xhtml file – home.xhtml


Now let us see Prime faces in action, by adding a simple JSF snippet with 1 control from this library.

<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>Hermes Console - Trying PrimeFaces</title>



</h:head>

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



</h:body>



</f:view>
</html>

Step 5 – Build and deloy


Now that we are done, the next step is to build and create the war file and deploy it in Tomcat 6. Then point your browser to - http://localhost:8080/hermesconsole/home.jsf


You will see the following command button on your browser:


Blog - 1