JetCracker

Life-time learner's blog

Tag Archives: JSF

JSF Helper Class

When creating web-sites with JSF you often use the same patterns of code. Here are the examples:

// add faces message to Faces Context
FacesContext ctx = FacesContext.getCurrentInstance();
ctx.addMessage(null, new FacesMessage(FacesMessage.FacesMesssage.SEVERITY_INFO,
                                     "Login successful.", "Welcome! You are now signed in."));
// redirect
FacesContext ctx = FacesContext.getCurrentInstance();
NavigationHandler handler = ctx.getApplication().getNavigationHandler();
handler.handleNavigation(ctx, null, "home");
// obtain http session
FacesContext ctx = FacesContext.getCurrentInstance();
HttpServletRequest request = (HttpServletRequest) ctx.getExternalContext().getRequest();
HttpSession session = (HttpSession) request.getSession(true);

This leads to repeating the code and also makes it more difficult to write the tests to the code.
I think it is a good idea to create a helper-class which will do all these operations with faces context under the hood and provide very simple and useful API. Read more of this post

[Java Web] [QapTcha] How to add captcha to JSF page

If you want to have prevent spam in your website, you probably need to use captcha.

CAPTCHA (play /ˈkæp.tʃə/) is a type of challenge-response test used in computing as an attempt to ensure that the response is generated by a human being. The process usually involves a computer asking a user to complete a simple test which the computer is able to grade. (Wikipedia)

Early CAPTCHAs such as these, generated by the...

You can see the examples of captchas on the pictures. Captcha is intended to protect the web site from spam, and it helps to avoid “unwanted” registrations, block robots. But it can also deter some “proper” users. As for me, I hate recognizing captchas!

What we need is a simple and user-friendly mechanism to detect robot. Fortunately there are plenty of different solutions for captchas on the internet!

Take a look at QapTcha – a simple, easy-to-use and intuitive captcha system. It needs human action instead of to read a hard text and it is a very lightweight jQuery plugin.

QapTcha Demo Screenshot

All you need is to drag the button from one side to another, and that makes it perfect for mobile devices.

Here I will show you an example of how we can embed this captcha into JSF web-application.

Read more of this post

[JSF 2] [Overriding Renderer] How to add custom attributes to component

I’ve been working with JSF for almost a year, and sometimes standard components are not enough for rendering rich  HTML5  pages.

For example, if we need to have a placeholder attribute on a particular HTML5 input element, we just write:

<input type="text" name="login" value="" placeholder="User name"/>

Unfortunately, standard JSF 2 library’s component InputText was designed for HTML4 and doesn’t support attribute ‘placeholder’ (as well as other non-standard attributes, such as ‘autofocus’, ‘autocomplete’). So, the following code won’t work because the ‘placeholder’ attribute will be ignored by standard JSF TextRenderer.

<h:inputText value="#{loginBean.login}" placeholder="User name"/>

What if we really need to have placeholder in our input components? One solution would be using third-party libraries, such as PrimeFaces, or RichFaces. The provide placeholder (they call it ‘Water Mark’) and a lot of other features out of the box.

This solution has its drawbacks. Third-party libraries (like PrimeFaces) are quite difficult to cusomize, for the one thing. Besides, they have got their own issues and may not work as we expect. Also, sometimes in some projects we are not able to use these libraries.

We used PrimeFaces 3.1.1 library in our project Reshaka.Ru, and the library really disappointed me. File Upload component doesn’t work properly, dialogs are incorrectly rendered in most browsers. There are many bugs, and it seems to me that PrimeFaces team is not going to fix them. That’s why in our future projects, I won’t use it.

Let’s get back to the main point. 🙂 In order to add custom attribute, we can override standart JSF component Renderer.

Read more of this post

JSF: How to create a chat with ajax

Howdy!

In our JSF project, which I am currently working on, there was a problem to create a chat in order to enable users to communicate. Today I’ll show you how to create a simple chat using JSF, PrimeFaces and ajax.

Main Idea

The idea is quite simple. Somewhere on the server (e.g. in the database) there are messages. On your web-page there is a message box in which all chat messages are displayed. Each second the web-page requests the server for new messages, and if there are any, adds them into message box.

Problems

  1. We have to ask server for new messages every second by invoking JSF managed bean’s method. How?
  2. Managed bean (server side) has to return new messages to the web-page. How?
  3. After page is loaded (ready) the message box should be updated and contain all recent chat messaged. How?

Solutions

As it was said above, I am describing a solution for PrimeFaces library. But if you don’t (or unable to) use it, there might be a similar solution. See specifications of your particular library.

The first problem is very simple to solve. In PrimeFaces, there are different (at least two) components for invoking JSF managed bean’s method from the web page. You can use, for example, Poll component. But here I will use RemoteCommand. To solve the second problem we will use call-back parameters (the mechanism of passing data from the server to the client’s web-page). In my implementation we won’t need to solve the last problem. It will be solved automatically.

Let’s get the ball rolling!

Read more of this post