Tutorial Web Development (with JSF)

This introduction to my tutorial “Web Development (with JSF)” gives you an overview abaut the planned extent. I will provide the tutorial according to my respective temporal possibilities. Hence, changes in extent and content are expressly possible.

Web development – this is first of all a very unconcrete concept which can enclose everything what has to act with the Internet, from an easy HTML page up to a complicated application. In this tutorial this concept refers quite specifically to the development of applications which are usable via browser with the further undermentioned technologies. Therefore it becomes clear that it concerns not static Internet pages, but full applications which are hosted on a server and are available at any place, free Internet access provided. This might be for example, a member’s management, an information system, a communication platform or other.

To realize such an application a whole bundle of different technologies is necessary. On the one hand, the browsers need the representable web pages which are provided by a server. To the other a computer language is necessary. However,not simply a locally running program is created, but a web application.   This usually requires an appropriate platform or Framework. Server-sided the developer must not invent the wheel completely anew. Thus as running environment in the following an application server is used. And what is an application without data storage? Thus a persistence layer as well as a data base system are required. A web application communicates with the user by means of forms and dialogs. The validation of inputs is to take place so fast that the user can work liquid, without having to wait for lengthy reactions of the server. Therefore a part of the application, like input validation, is shifted to the client.

In this tutorial the web development with these technologies takes place:

  • HTML (hypertext Markup LANGUAGE) with CSS (Cascading Style Sheets) to the representation in the browser
  • Java as server-sideprogramming language
  • JavaServer Faces 2,0 as webframework
  • Apache HTTP server
  • Java EE 6 compliant application server
  • Java Persistence API (JPA) 2.0
  • SQL data base (JavaDB, MySQL, PostgreSQL)
  • NoSQL data base (CouchDB)
  • JavaScript for client side programming
  • AJAX as technology to update a page partly
  • XML transformation for producing pdf contents
  • Web services for the solution of special problems

In a tutorial naturally practical examples, screenshots etc. may not be missing. While the technologies mentioned can be used by means of different development environments, is, in order not to blow up the extend of this tutorial, the restriction on a certain environment necessarily. Here NetBeans was selected, since this environment offers all necessary technologies “out of the box” without further configuration. In the introduction example however is shown, how this can take place alternatively by means of Eclipse. As far as you would like to work not with NetBeans, you may transfer the further development accordingly to Eclipse or another development environment of your choice. Similarly this is valid also for the application server. NetBeans comes along with GlassFish 3.x, which can be used without further configuration, manualy deployment etc.. It is however shown, how you install the application detached by NetBeans on this server. Accordingly you can use every other JEE6 comliant server. And for most parts of this tutorial you may use a servlet container like Tomcat 7.x.

Structure of the tutorial

This series of articles is a tutorial. This doesn’t mean that you get presented only simply a set of Screenshots with little explaining textof which you must understand the whole practically. Rather this denotes, you receive information from the practice. With so much Screenshots that you can understand the whole purely mental. It is not necessary that you sit down equal before your computer and strike into the keys. Who would like, may do this naturally also.   A detailed explanation follows the screenshots and listings in each case. Tutorial stands here here for outgoing from the practical example. In this respect it differs from classical books which explain everything and intersperse only a few examples. This tutorial is more concrete, without omitting however the theoretical foundation.

Besides, it goes off quite gently. In the first example it is shown how you create a web application and start it. In the beginning only the generated code is used for it and is launched out of the developing environment. Then you get to know, how you make the application available on an application server – detached from the development environment. Afterwards, this first example is re-implemented by using the Eclipse IDE. In the later process of the tutorials this is left to the interested reader.

Only bit by bit own code is added to the application. An easy calculator originates for some basic arithmetical operations. Even though this example is still quite simple, it already shows server-sided programming, input validation and integration of cascading stylesheets. Some theoretical foundation belongs to that example as well as a quick look to JSF lifecycle. Further applications show the usage of JSF templates, by means of which you can create a (optical) frame for your application.

The member’s management of an association is the first bigger application. It should be accessible only to a certain group of peaple. Besides, is distinguished between persons who may browse a part of the data and those who can select and edit all data. Here thus persistence and authentication are requested.

The second larger application represents an invoicing. In the case study invoices should be able to be edited and printed at the customer’s location. The documents are generated server-sided as a PDF, so that they can be send to any local printer. This example assumes the application server is located in a DMZ (demilitarized zone). However, the data base should be installed not at such an exposed place, but be in the local area network.Furthermore direct access to the data base is forbidden within that DMZ . Hence, the access occurs indirectly by means of an other application server which is addressed via web services.

As bridge to other web technologies it is shown later on, how these web services can be addressed by a Dot.NET application. Further the alternative data storage is represented by means of CouchDB.

Although this tutorial especially concerns web applications, an essential component of Internet offers is pure information: Static or dynamically generated contents are displayed. This performs a HTTP (or simply Web) server usually better than an application server. And in such a way you learn the use of the application server behind a HTTP server. Besides, the HTTP server accepts the inquiries from the web, and then decides whether it simply delivers contents or  or forwards however the request to the application.

Even if this tutorial starts a small example, it primarily addresses persons who already have programming knowledge in Java. Indeed, HTML and CSS belong in the repertoire of every web developer, but just with the entrance in this area some  Java developer may  not have suitable knowledge. Hence, you find some accompanying information in compact form  as well as links on deepening information.

The main focus of this tutorial is on the development of applications, not on the installation of the environment. Hence, the practical part also does not start with vast installation instructions.

Best of all you can understand of this tutorial by means of NetBeans. You find this  development environment under http://netbeans.org/downloads/index.html.  Select there either the package “Java EE” or ” All” and install this according to instructions. Prerequsite  is an installed Java JDK. If you do not have installed this yet, then you find a suitable link in the download area of NetBeans.


To web development content.