From the course: Learning Java Enterprise Edition

JSF introduction - Java EE Tutorial

From the course: Learning Java Enterprise Edition

Start my 1-month free trial

JSF introduction

“

- [Instructor] In this video we're going to start by looking at JSF 2.0 and how it fits into the Java EE code system. When building web application we provide the end user with a way to interact with our application and this is what JSF gives us. I will introduce you to the MVC design pattern and how to use it and you will discover the facelets view language and how it is used. How data and events are bound to the context and how this is achieved via expression language. I will explain how AJAX is natively supported and just how plugable the ecosystem is by looking at alternative templating frameworks such as prime faces. Now remember that earlier I talked about the different layers of a typical monolithic application. Well the layer we're going to talk about now is the presentation layer. The presentation layer is responsible for what your visitors will see when they visit your website. This is the way users interact with your site and should be as user friendly as possible. Fortunately this is not too difficult to achieve with the help of JAVA EE API/JSF. This API includes many conveniences that allow a developer to deliver a high quality user experience out of the box and with very little design knowledge. Okay, so let's get started. We're going to start with a look at the model view controller design pattern, otherwise known as just MVC. MVC is an architectural design pattern for implementing user interfaces that divide the web application into three logical connected parts. It does this in order to separate the internal representation of data from the manner in which that data is presented. JSF is really an MVC framework in the classical sense where the view is built using facelets declaration language and the model is represented by the CDI managed beans and the controller is taken care of by the JSF engine itself. Later on we will be looking a little deeper at CDI managed beams and the role they play. Facelets is the view declaration language used to build JSF views and reusable composite components. A view is typically constructed as an XHDML page by combining composite components expressing language and tab libraries. We won't go into a great deal of detail with regard to tag libraries or the construction of composite components. These topics are beyond the scope of this course. Nevertheless we will be look at how the expression language is used to bind CDI beans and to replace values in a view with data from the internal layers of an application. Composite components are reusable snippets of code that behave in a given way such as an input field that accepts a users entry. They have validators, listeners and other elements attached to them to provide more useful and interactive functionality. However, facelets are not the only templating language we have in our token, in quite there's quite a busy community around third party component libraries. Pluggable libraries such as PrimeFaces Apache MyFaces and ICEFaces all provide composite components that add substantial functionality to a view that enhances a user's experience. In fact, we will be using PrimeFaces components in the application and we will see examples of this later on in the course. Navigation is made symple by Facelets. You can pass just the view name to the action of a component and the GSF engine takes care of locating and rendering the view. Here is an actual code snippet from the cargo track application where you can see that the admin dashboard template is passed to the action attribute of the council button. This is the template that will be rendered when the button is clicked. The modal part is taken care of by CDI beans and the way they are bound to the viewer is via direct expression language. Both the binding of data and events is done this way. And we will be seeing plenty of examples of this later on. Here you can seen a example of data binding. What we are doing is binding the name field of an account CDI bean to the context of the page. When it is rendered, the value of the name field will be rendered in the view and displayed on the screen to the end user. AJAX is fully supported out of the box by the built in javascript resource library. The f ajax tag adds ajax functionality to any ui component without additional coding. This code snippet shows ajax triggered for a mouse click event on the submit button. Now, let's move on to the facelets declaration language itself. The language syntax is based around the concept of tags where each tag represents some functionality and by using these tags together you construct your views. The first tags we meet are HTML tags, that represent HTML elements. These are really just syntactic sugar over HTML tags such as input radio button etc. It provides some cross browser compatibility. You're not required to use them, so you can just use the normal HTML tags if you prefer. An important feature of the facelets language is the ability to create templates for usability and repeatability. We'll provide you with a selection of tags that allow this to be done in quite a logical fashion such as the repeat tag that repeats a section of code and the define tag that starts a composite definition. At the heart of facelet tags are the core tags. These add more functionality through converters, action listeners, validators and much more. This is where you'll find functionality such as AJAX, language resource bundles and so on. Now we come to the concept of a scope. The scope of a bean determines its lifecycle. The scope also determines which clients refer to which instance of the bean. By default, beans are given the scope of dependent. An instance of a dependent bean is never shared between different clients, it is instantiated when the object it belongs to is created and destroyed when the object it belongs to is destroyed. In Java EE seven new scopes were introduced namely ViewScope, FlowScope and FlowDefinition. Briefly ViewScope beans share the same lifecycle as a view which initially referenced them. This is particularly useful for views that make use of AJAX. FlowScoped and Flow Definition are used with facelets flow which connect logically related pages together and allow the beans lifecycle to be defined for that collection of views. There are more scopes than those discussed here and we will visit them when we discuss CDI later on in the course. Let's go back to the cargo tracker website and see some JSF in action.

Contents