HTML5, CSS3, WebServlet 3.0, CDI and JBossAS 7

Still reading?
Good, many will simply run away after passing their eyes through so many acronyms.

Anyway, what is all this stuff that I’m talking about?
If you ever heard of Web 2.0, then you’ll most probably know what I’m talking about. If you didn’t, then you might want to read the Wikipedia definition of it:

The term Web 2.0 is associated with web applications that facilitate participatory information sharing, interoperability, user-centered design, and collaboration on the World Wide Web.

Basically, for all this to happen the Web technologies that we use through out the Internet will have to include a whole new set of tools or frameworks that will enable developers to create and users to enjoy the great new features described in the Web 2.0 definition.

On the browser side, two of these major tools are HTML5 and CSS3.

HTML5 is the latest reincarnation of the already famous HTML standard as defined by the W3 Consortium. In short, HTML5 brings a new set of tags and APIs that will enable developers and web page artist to create richer web pages.

CSS3 is also the latest specification of the CSS standard. CSS3 is HTML5 and web artists best friend. CSS3 provides properties groups through modules that allow developers and web artist to highly customize the look-and-feel of HTML5 tags. In short, CSS3 is the main clothing shop for HTML5 tags. An HTML5 page without CSS is a boring, black-and-white and flat web page that will not attract many users to it.

On the Java server side end, WebServlet 3.0, CDI and JBoss AS 7 are some of the new tools.

JBoss AS 7 is an Open Source Application Server where developers and web artists can deploy their Web based applications (AKA Web App).

WebServlet 3.0 is the part in the J2EE specification that is responsible to bridge a web request with the web app request handler.

CDI is a new specification for Context and Dependency Injection based on Google Guice, Spring Framework and Seam. Basically, it makes developers live easier by allowing to easily inject different types of resources in the web app.

How do these technologies play together? Well, the following Web App example shows a simple web page that can apply different CSS3 skins on user request.

From left to right, the first image shows the HTML5 without any CSS file being loaded. The Second applies some font properties and the third uses some to the latest CSS3 capabilities (e.g. shadowing and rotation). A sample HTML5 video tag that starts playing on mouse over is also shown.

This simple application is presented in two formats, one that simply uses the Servlet to render the web page and another that uses a JSP (Java Server Pages) to render the web page. The second is nicer since it separates the web page from the controller Servlet (MVC design pattern).

SkinnerServlet.java
The SkinnerServlet is the entry point for this web application. This is a very simple example that returns the HTML page that will be rendered by the requesting web browser. The returned page is always the same with one single change, the CSS referenced from it. When rendered the user will be able to choose which CSS to use by submitting a new request back to the server with the selected CSS option. In turn, the server will then create a new page with the selected CSS file reference.

package org.riaconnection.skinner.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.inject.Inject;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.riaconnection.skinner.service.SkinnerService;

/**
 * <p>
 * Servlet that accept HTTP GET and PUT requests for 
 * http://{server_host_or_ip}/skinner/skinit
 * </p>
 * 
 * @author Bruno Santos
 * 
 */
@SuppressWarnings("serial")
@WebServlet("/skinit")
public class SkinnerServlet extends HttpServlet {

   static String PAGE_DOCTYPE = "<!DOCTYPE html>";

   static String PAGE_MESSAGE = "<h1>I'm a huge header</h1>" +
		   						"<h2>I'm a big header</h2>" +
		   						"<h3>I'm a header</h3>" + 
		   						"<h4>I'm a super fun header</h4>";
   static String PAGE_VIDEO = 
		   "<video id=\"movies\" onmouseover=\"this.play()\" onmouseout=\"this.pause()\" autobuffer=\"true\" width=\"400px\" height=\"300px\">" +
		   "    <source src=\"streams/Intermission-Walk-in.ogv\" type='video/ogg; codecs=\"theora, vorbis\"'>" +
		   "    <source src=\"streams/Intermission-Walk-in_512kb.mp4\" type='video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"'>" +
		   "</video>";
   
   static String PAGE_FORM = "<form action=\"/skinner/skinit\" method=\"post\">" +  
		   					 "    <input type=\"radio\" name=\"radiobutton\" value=\"noCSS\">No CSS" +  
		   					 "    <input type=\"radio\" name=\"radiobutton\" value=\"simpleCSS\">Simple CSS3" +
		   					 "    <input type=\"radio\" name=\"radiobutton\" value=\"funCSS\">Fun CSS3" +  
		   					 "    <input type=\"submit\" name=\"Update\" value=\"Update\">" +  
		   					 "</form>";
   
   static String PAGE_FOOTER = "</body></html>";

   @Inject
   SkinnerService skinnerService;

   @Override
   protected void
   doGet(HttpServletRequest req, HttpServletResponse resp)
   throws ServletException, IOException {
	  resp.setContentType("text/html");
	  
      PrintWriter writer = resp.getWriter();
      writer.println(PAGE_DOCTYPE);
      writer.println("<html><head>");
      String cssFile = skinnerService.checkSkin(req.getParameter("radiobutton"));
      if (!cssFile.isEmpty())
    	  writer.println("<link rel=\"stylesheet\" href=\"styles/" + cssFile + "\"/>");
      writer.println("</head><body>");
      writer.println(PAGE_MESSAGE);
      writer.println(PAGE_VIDEO);
      writer.println(PAGE_FORM);
      writer.println(PAGE_FOOTER);
      writer.close();
   }
   
   @Override  
   public void 
   doPost(HttpServletRequest request,HttpServletResponse response)
   throws ServletException ,IOException{  
       doGet(request,response);  
   }
}

SkinnerService.java
The SkinnerService is just a example that demonstrates how CDI is used. In this case, the service is being used to return the necessary HTML tag that references the to the appropriate CSS file.

package org.riaconnection.skinner.service;

/**
 * A simple CDI service that return the selected CSS file to be used
 * 
 * @author Bruno Santos
 * 
 */
public class SkinnerService {

   public String checkSkin(String selectedSkin) {
	   if (selectedSkin != null) {
		   if (selectedSkin.equals("simpleCSS")) {
			   return "simple.css";
		   } else if (selectedSkin.equals("funCSS")) {
			   return "fun.css";
		   } else {
			   return "";
		   }
	   }
	   return "";
   }
}

A Servlet with Request Dispatcher to a JSP page is also available.

SkinnerJSPServlet.java

package org.riaconnection.skinner.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.inject.Inject;
import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.riaconnection.skinner.service.SkinnerService;

/**
 * <p>
 * Servlet that accept HTTP GET and PUT requests for 
 * http://{server_host_or_ip}/skinner/skinit
 * </p>
 * 
 * @author Bruno Santos
 * 
 */
@SuppressWarnings("serial")
@WebServlet("/skinit/jsp")
public class SkinnerJSPServlet extends HttpServlet {

   @Inject
   SkinnerService skinnerService;

   @Override
   protected void
   doGet(HttpServletRequest req, HttpServletResponse resp)
   throws ServletException, IOException {
	  String cssFile = skinnerService.checkSkin(req.getParameter("radiobutton"));
	  if (!cssFile.isEmpty())
		  req.setAttribute("selected.css.file", cssFile);
	  RequestDispatcher disp = getServletContext().getRequestDispatcher("/skinit.jsp");
	  disp.forward(req, resp);
   }
   
   @Override  
   public void 
   doPost(HttpServletRequest request,HttpServletResponse response)
   throws ServletException ,IOException{  
       doGet(request,response);  
   }
}

skinit.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
	<head>
		<%	
			String cssFile = (String) request.getAttribute("selected.css.file");
			if (cssFile != null) out.println("<link rel=\"stylesheet\" href=\"/skinner/styles/" + cssFile + "\"/>");
		%>
	</head>
	<body>
		<h1>I'm a huge header</h1>
		<h2>I'm a big header</h2>
		<h3>I'm a header</h3>
		<h4>I'm a super fun header</h4>
		
		<video id="movies" onmouseover="this.play()" onmouseout="this.pause()" autobuffer="true" width="400px" height="300px">
			<source src="/skinner/streams/Intermission-Walk-in.ogv" type='video/ogg; codecs="theora, vorbis"'/>
			<source src="/skinner/streams/Intermission-Walk-in_512kb.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'/>
		</video>
		
		<form action="/skinner/skinit/jsp" method="post">
			<input type="radio" name="radiobutton" value="noCSS">No CSS</input>
			<input type="radio" name="radiobutton" value="simpleCSS">Simple CSS3</input>
			<input type="radio" name="radiobutton" value="funCSS">Fun CSS3</input>  
			<input type="submit" name="Update" value="Update"/> 
		</form>
	</body>
</html>

The sample and ready to deploy WAR file can be downloaded from here (sources are included).

Once downloaded, rename it to skinner.war.7z and use 7Zip to extract it.

In JBoss AS 7, all you have to do is to place the extracted directory in
jboss-as-web-7.0.0.Final\standalone\deployments and execute jboss-as-web-7.0.0.Final\bin\standalone.bat to start the server.

To test the Servlet sample, point your browser to:
http://localhost:8080/skinner/skinit
To test the JSP and Servlet sample, point your browser to:
http://localhost:8080/skinner/skinit/jsp

Advertisements

About CrazyPenguin

Software Engineer
This entry was posted in CSS3, HTML5, J2EE, JBoss. Bookmark the permalink.

One Response to HTML5, CSS3, WebServlet 3.0, CDI and JBossAS 7

  1. lan ckv says:

    not yet tested but seem usefull for me, thanks.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s