Tutorial web development (with JSF) II

This post is also available in Deutsch.

A first web application

Next, we will create a very basic web application. This will be done only so far as generated by NetBeans. No more function is added. Even then, this introduction shows some of the basics.

You may build up this app on your pc, or you simply follow this tutorial by its screenshots, depending on your preferred way to learn new technologies.

After starting NetBeans, choose a new project (menu file, new project or simply be pressing {Ctrl}+{Shift}+{n}). The dialog shown below appears. Please choose “Java Web” and then”Web Application”. The screens may look a bit different, depending on version, language and operating system.

Now click onto [Next]. In the following screen, please choose an appropriate project name. Here I used “JSFTutorial”. If you like to store your project in a different directory than default, change the “Project Location”. Then click [Next].

If you use NetBeans starting with version 6.9 in dstandard configuration, it offers you GlassFish Sever 3.0 oder newer during the next dialogue. If you use a prior version of NetBeans, please update [As of this translation, NB 7.1.2 is available]. All Java Enterprise examples in this tutorial are build upon JEE6. With the rise  of JEE7, which is expected in late 2012, this may change.

This dialog offers you the opportunity to select context and dependency injection (CDI). This enables “injecting” objects into your application. This might be done by a simple annotation. If you use CDI, this affects the usage of beans (named beans instead of managed beans) too. And the bean’s scope differs a bit. For the moment, we don’t use this great feature, but we will do so for bigger projects.

With Context Path you configure the relative path to invoke your app within the browser. It defaults to the project name and you can use it as is. If needed, this path may be changed later on.

As usual, continue with [Next].

In this dialog please choose the JavaServer Faces as your framework. Below, a tab control appears for a basic JSF configuration. If your server is JEE6 compliant, like GlassFish, it has JSF libraries already available. Thus, you may keep the default. If you use a different server, e.g. Apache Tomcat, you may have to provide the JSF libraries. In such a case you have to choose between registered (within NetBeans) libraries or you have to add your own.

Before closing this dialog, please choose the tab “Configuration” and change the URL pattern to “*.xhtml”. NetBeans here proposes “/faces/*”. This results in a bit longer path, showing everybody which framework you use. For the JSF functionalitiy itself it doesn’t matter. It’s your choice.

The preferred page language defaluts to “Facelets” . Alternaivily you may choose “JSP” (Java Server Pages). In both cases appropriate namespaces are needed and will be included by NetBeans, as well as tag libraries, which allow you to include special statements within your HTML page. These statements will be processed on server side before delivering the page to the browser.

JSP exists for a long term. And they had been standard for JSF till version 1.2. Because they had been developed independent (and before) JSF, they posesses a bit other lifecycle than JSF. Facelets have been especially developed for JSF. Since version 2, Facelets are part of the JSF standard specification and became the preferred page language.

Now you’ve choosen enough and end the dialog by [Finish].

NetBeans generates a complete runnable project and opens the first page, Index.xhtml in it’s code editor.

As distinguishable at the delaration, it is a XHTML page. In the opening HTML tag you’ll find the appropriate namespace and additional a namespace for jsf/html. Traditional the prefix “h” is used for this. You may recognize a first usage at the tags of head and body. Even though these tages are prefixed, after server side processiong you just find these prefixes (in browser, page source code) removed and the standard HTML tags being used. Nothing spectactular happend so far.

Take a look onto the project tree on the left side. NetBeans also generated som config files, which will be descriped later on. Furthermore, all needed libraries hvae been included. Shortly, everything you need to launch the project is available. Let’s start with {F6}.

The first start takes a bit more time: NetBeans starts the app server, deploys your application and then starts it too. Next project start (of the same NetBeans session) will be faster, because GlassFish is already started. In a productive environment, your server is usually up all time. How to deploy in such an environment, even though manually or scripted, will be described in a later part of this tutorial.

After strating the application, NetBeans launches the browser and display the page: Hello from Facelets.

A look onto the URL highlights that the browser requested the local server, and there, the path to JSFTutorial. Remember you? This is exactly the context path choosen within the wizzard on project setup.

A view to the page’s sourc code presents normal XHTML:

<?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">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Facelet Title</title>
    </head>
    <body>
      Hello from Facelets
    </body>
</html>

Comparing with the source within NetBeans, all the JSF/HTML specific namespaces disappeared, as well as the “h:” prefixes. This shows that thes server did some work in background: All specific tags became analyzed and replaced. In this simple project just by some HTML code.

It would be usefull to explain what happens on server side. But before that, in the next part an other application with some server side calculations to be displayed at the client side. It’s getting exiting next.

 

To web development content.

This entry was posted in NetBeans, Programming, Tutorial, Web development and tagged , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>