Skip to main content

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

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