Making template using CSS, Facelets, HTML and JSF 2.2 – Java Development tutorial

Java Development is pretty easy for developers, what’s not is designing a website. It is somewhat true that Java developers are not efficient in visual designing and they end up the task by finding out popular Java Development portals. A software developer creates hypertext and codes to run the website designed by designers and make the website purposeful. In This article, Aegis Java professionals will provide tutorial with Java Development community and worldwide developers to make template with CSS, Facelets, HTML and JSF 2.2.

Facelets- The template engine

Template is a key to handle a modern organization website. There are numerous sources for designing great templates such as Freemaker, Mustache, or Velocity. However, if you are adhering to a Java EE based approach to design template using JavaServer Faces (JSF), Facelts will going to be your template engine.

For starting the Java development project, you need to put a template together. Likewise you may need to put a basic HTML page consists of numerous page components including footer, header, navigation pane and content window.

Page templates using HTML and CSS

There are basically two ways to design a template- one is a bad, and other is good. The bad way is using HTML tables, laying out footers and headers and other essential components using colspan and rowspan elements. It’s not a crime if you have used HTML tables in past. Many tools and technologies are still using HTML tables to layout the content. If you are a user of WebSphere Portal 6.1, it’s normal to use HTML table. However, if you use Circa 2002, you need to move on from that conventional tool to stylesheets and DIV elements.

The below image depicts a simple page layout including all key elements:

CSS based layouts are magical! The key attributes used by developer for laying out the HTML page include width, height and float that conclude interaction between different DIV elements.

The stylesheet

Float:left setting- allow to sit side by side Clear:both- ensure the position of footer