Hard Code

Posts

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

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

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: 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" ...

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

Load your Spring beans as plug-ins

There are different ways of loading Spring beans in a web application – viz using the dispatcher servlet or the context loader listener. A more modular and flexible approach (which also allows you to minimize coupling and dependencies in your applications) is to load the barebones of your application with the core context loaders and load the rest of your beans in a pluggable way. For example you may be interested in loading your page controllers, business tier and data access code as three separate modules. Off course you can do this and then use import in a main spring config file or a comma separate list in your web.xml where you configure the spring bean definition xmls. But what if you just wanted to drop in a jar with Spring beans and be sure they will be loaded and registered in the container. This also eases the pain of swapping an implementation. The goal is to put all your Spring beans in a particular layer, package it as a jar with one or more configuration file(with one fol...

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

Part V : A Simple and Smart Result Mapper

The examples so far only deal with single table. But it is very much possible to join multiple tables and still use this mapper. As an example consider three entities as shown below: T_REPOSITORY REPOSITORY_ID int REPOSITORY_NAME varchar CONNECTOR_ID int T_CONNECTOR CONNECTOR_ID int CONNECTOR_NAME varchar URL varchar OWNER_ID int T_OWNER OWNER_ID int OWNER_NAME varchar OWNER_KEY varchar The relationship is clear - a repository has a connector and a connector has a owner. So how can you populate a Repository object containing a Connector Object which in turn has an Owner object. This is just simple. Execute this query. SELECT r.repository_id "repositoryId", r.repository_name "repositoryName", c.connector_id "connector.connectorId", c.connector_name "connector.connectorName", c.url "connector.url", o.owner_id "connector.owner.ownerId", o.owner_name "connector.owner.ownerName...