Skip to main content

HTML5 support in JSF 2.2 with Bean Validation 1.1 (JavaEE 7)

In this post i will show the HTML5 Support given by JSF 2.2, Which is part of Java EE 7 Spec. Also how to integrate the Bean Validation 1.1 feature with help of CDI (Contexts and Dependency Injection) 1.1 spec.

Before going the HTML5 support, my earlier posts on JSF, i used @ManagedBean annotation, because its part of Managed Bean Specification (Java EE 6). Another Reason i used Tomcat as a primary container, if i used Managed Bean Spec then its part of Mojjara implementation, so no need to add more CDI specific (Jboss Weld lib) lib to class-path.

But from Java EE 7 on-wards, JCP community expand the CDI capabilities and make CDI as important spec in Java EE 7 and Managed Bean spec is deprecated in favor of CDI . so they recommend to use CDI wherever its possible. so our future all post to target the CDI. next post i will show how add the CDI capability to tomcat container.



So as part of CDI we need to use @Named annotation. Its equal to @ManagedBean annotation, but its CDI Specific and all life cycle of the beans takes care by CDI container.

HTML5 

            HTML5 is future of web standard, its provide lots of capability to browser like Full multimedia (audio and video playback), access the local resources like camera, microphone, Geolocation.
for more information check these resources

HTML5 Form elements are part of this features. This feature enable to the website without any 3rd party JavaScript framework to get fields/widgets like date picker, color picker, Check the sample page here


HTML5 Support in JSF2.2

           In JSF 2.0/2.1, its not supporting HTML5 form elements, the reason is HTML render-kit, which is part of JSF Implementation is not aware the HTML 5 elements or attributes. so even we put these attributes like placeholder, type=date, these Render-kit it just ignore while generating the HTML for client request. In that case there is 3rd party plugin called OmniFaces provides the Render-kit to support the HTML5 in JSF 2.0/2.1.

In JSF 2.2 onward's, HTML5 support internally as part of the Framework. The big issue is HTML5 attributes are we can't count or categorized. for example any input tag we add the data-* as attribute like data-theme, data-highlight, etc..  so we need to do some way to classify these attribute. That way is called "Pass through".

For eample i want to add one HTML5 input tag like this

<input type="text" placeholder="Enter your Name" />

here i want to convert this tag to JSF tags, because i want to bind this tag to my backing bean then 

<h:inputText  p:placeholder="Enter your Name" />


here h: is prefix for normal HTML components, but p: is prefix for pass through.

 Like we can add the HTML5 Date picker componet

Original HTML5 Code : <input type="date" />

JSF2.2 Code : <h:inputText  p:type="date" />


Check the Video below, for more information and step - by step

Add Validation

       Now we got HTML5 Form elements in our projects, we need to validate what user entered, for this purpose either we used client side validation or server side validation.

Client side validation is faster and good. but if somebody disable the JavaScript and submit the form then big problem. so we need server side validation also important. In server side we manually validate these fields.

Java EE 7 gives updated Bean Validation 1.1 spec for this purpose. These Bean validations are declarative way we can specify and validate by the system. so its very cool feature.

For example i asked user name to client, now client entered some value, now i need to validate its should not be null and its satisfy my other requirements like at-least 5 char for name like this

so usually what we do we put if condition like this

these kind of statements needed for all fields. But if we using Bean Validation then its simple.

open the backing bean and mark the fields with constraint annotation

When the the form is submit, then CDI called the bean validation features in transparent manner. If any validation is failed then its add those messages into faces context. so we can see those messages in that page.


Bean Validation applicable not only bean fields, Its have capability to validate the method arguments and its return type. This is grate features of bean validation.

Now when we call this method through CDI, these validation are applied.

Twitter BootStrap Theme

        I make one small example of HTML5 support and Bean validation, i used some free template based on Twitter bootstrap.  these are the refernce


In last link we can learn the twitter bootstrap in depth.

Check the video for small demo code combine HTML5 Support + Bean Validation + Twitter Bootstrap Theme. (Watch it in HD mode)


Demo Code is available in my Github or u can download zip from here

Screen Cast :

Popular posts from this blog

Understanding Virtual Host Concept in Tomcat

Hi in this post we will see how to setup virtual host in Apache Tomcat server. Virtual Host is in-built feature that allows to deploy multiple website(domains) in single instance of tomcat server. The main benefit in this way is its cost effective. Scenario: I am going to deploy 3 website with following domain names in single tomcat http://www.ramki.com http://www.krishnan.com http://www.blog.ramki.com The following diagram is my outline. Outline structure of Virtual Host Concept in Tomcat Here my tomcat IP address 192.168.1.15. or any IP address allocated my ISP. but it should be public IP address. How all domain names are pointing to my Tomcat?                   When we purchase the domain name we need to update the our tomcat IP address to it. like or we can simulate same DNS Setup through hosts file in both Linux and Windows. In Linux tha file is located at /etc/hosts Now How Setup...

Docker : Tomcat Clustering with Load Balancer (Tomcat and Nginx)

In this post i will show Tomcat Clustering in Docker Container. In  my previous post i discussed how to achieve tomcat clustering with Nginx Front end . Its almost same scenario, but this time we will achieve via docker container. Docker Docker  is an  open-source  project that automates the deployment of  applications  inside  software containers , by providing an additional layer of abstraction and automation of  operating-system-level virtualization  on  Linux . [4]  Docker uses resource isolation features of the Linux kernel  such as  cgroups  and kernel  namespaces  to allow independent "containers" to run within a single Linux instance, avoiding the overhead of starting and maintaining  virtual machine   --Wikipedia

Virtual Host + Apache httpd server + Tomcat + mod_jk connector

In my last post ( Virtual Host in Tomcat ) we discussed about how setup the virtual host in Tomcat. Its cost effective technique because only one public IP is enough to host multiple domain. If we have big organization and each department want to host their website in locally in different machine. then how to achieve the virtual host concept?. In this post we will see the how we do this. Update :   I posted  Virtual Host + Nginx + Tomcat  Its easy to configure, compare to Apache httpd server Problem Scenario:         In big organization they have multiple department, each department want to host their website in different machine. so these websites are accessed locally with different local IP address. When we mapping to public address then we face the problem. We have two choice either purchase as many public address or Put one server front  and delegate these request. ...