About this series

Today all you need a is browser. Nearly all everday objects are based in the cloud. This has many advantages: The user is not forced to install any programms on his local PC. He can just visit a site and leave it at any time. In addition, he can always be sure to have the newest features available, because the client won’t need any updates. Last, but not least, there is one web based platform that will run independently of the operation system underneath.
This series will cover the configuration of an Java EE environment and provides a wide area of common use cases.

Video

[embedyt]https://www.youtube.com/watch?v=oPw9PkvRCc8[/embedyt]

 
 

Content

Our project contains three main file:

  • /WebContent/WEB-INF/glassfish-web.xhtml
  • /WebContent/WEB-INF/web.xml
  • /WebContent/index.xhtml

glassfish-web.xml

This is a glassfish specific file. In here you will define the default context root. The context root of an application can also be changed on the server when deploying the application. Here you can also define other application-wide settings like encoding or security role mappings.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE glassfish-web-app PUBLIC "-//GlassFish.org//DTD GlassFish Application Server 3.1 Servlet 3.0//EN" "http://glassfish.org/dtds/glassfish-web-app_3_0-1.dtd">
<glassfish-web-app>
    <context-root>/FirstApp</context-root>
</glassfish-web-app>

 

web.xml

Defining the namespaces:

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"	xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">

 
The display name is an optional part. It will be displayed as the application name by some application servers. However it will not affect the functionality of the application.

<display-name>FirstApp</display-name>

 
The welcome file list will state the entry points of the application. When the context root (e.g. localhodt:8080/FirstApp) is called the first welcome file will be shown. If it does not exist or can’t be accessed the next one will be taken.

<welcome-file-list>
        <welcome-file>index.xhtml</welcome-file>
</welcome-file-list>

 
In this part we define to use jsf. The server will load the Servlet on startup.

<servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
</servlet>

 
Here we define the JSF mapping. The most important part is the url pattern. It defines that we will use xhtml files. Only those files will be rendered by JSF. If those configurations are incorrect, JSF tags will not be converted into HTML.

<servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.xhtml</url-pattern>
</servlet-mapping>

 
Finaly close the xml file.

</web-app>

 

index.xhtml

The Header:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 
Here we define the namespaces that we use on the rest of the page. For the first tutorial part, it would be enough to just use xmlns:h=”http://java.sun.com/jsf/html” which provides the basic html components. Those three prefixes are the most common used namespaces that are shipped within jsf. Here you can also define additional namespaces for third party frameworks (such as Primefaces or ICEfaces).

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core">

 
JSF prodivdes his own <head> tag. Some Frameworks need the JSF Tag instead of the base html one, because the content of JSF tag can be manipulated and enhanced by third party tools.

<h:head>
	<title>Example Title</title>
</h:head>

 
JSF also provides a <body> tag. In here we added two components. The <h:outputText> will be renders as an <span> on the HTML output and just displays the text defined in the value attribute. The <h:inputText> will be renders as an <input> on the HTML output.

<h:body>
	<h:outputText value="Hello World" />
	<h:inputText/>
</h:body>

 
Don’t forget to close the page:

</html>

That’s all for the first part. You can find the complete source-code on GitHub: YouTubeEE #1

If you have any questions feel free to leave a comment.