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.
for more information check these resources
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
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.
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
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- http://getbootstrap.com/
- http://bootswatch.com/
- http://bootsnipp.com/
- http://www.creativitytuts.org/index.php/tutorialcontroller/listVideos/PL7029EEFC21D2DC58
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