Showing posts with label html5. Show all posts
Showing posts with label html5. Show all posts

Saturday, March 19, 2016

HTML5 tags for Stripes

Introduction

In a previous article, we explained how to implement HTML 5 tags for Struts v.1 framework. We won't explain in this article the new attributes that came with HTML 5. For this, please refer to the Struts article, linked above. As Stripes is another framework I use on side projects, let's see now how to implement the same features, extending existing Stripes existing tags!

Stripes tag implementation


As we investigated about the best implementation for the new tags in Stripes source code, I noticed all tags extend an abstract HtmlTagSupport class. This class contains an attributes field, which simply is a Map containing attributes names and values of the current tag :



The idea for the implementation will be quite simple : our new classes will "only" have to add new attributes to this existing Map!

To keep example simple, we will only extend one tag (text), and add three attributes for each (required, pattern, and placeholder). What we do here is just add getters and setters for the attributes, and in these, we set/get the values from the attributes Map :

Once done, we must declare the new classes to a .tld file. As our class extends existing tag, the tag declaration will be copied from existing Stripes tld file, with our new attributes listed at the end of the file :

See the result in action :

If you have any questions regarding this article, please send them in the comment box below!

Wednesday, October 28, 2015

HTML5 form tags with Struts

Introduction

Struts v1 is quite an old release, and by the time it was released, new HTML 5 tags were not introduced yet. We'll see in this article how it is possible to generate some HTML 5 form tags using Struts, instead of using plain HTML in source JSPs. We won't cover all possible tags, but we'll give some hints to successfully do the work. For these examples, we'll use Struts v1.2.9.

 

What needs to be added

If we have a look at W3C documentation regarding HTML 5 form tags, we can notice a bunch of new attributes for input tags. For these examples, we'll only work with placeholder, autocomplete, autofocus, pattern, and required. The idea here is to create subclasses of existing tags classes, where the subclass will handle additional attributes. We'll then see how to wire new attributes to existing HTML tag generation.

 

Existing tag generation

For this, we'll have to take a look at Struts tags source code, we can see that the function called renderInputElement() is actually generating the tag :
The abstract function prepareOtherAttributes(StringBuffer handlers) is very interesting here, because we'll use it as a hook to add our new HTML 5 specific attributes to tags.

 

Text tag

We will subclass existing TextTag class, add new fields for each attribute we want to handle, getters/setters for these, and implement abstract method prepareOtherAttributes() to generate actual HTML code from new attributes :


Password tag

Password tag and text tags are almost identical, the only difference being the value of the type attribute. What we'll do here is just subclass our new Html5TextTag class, and set the type field to password. If we look above in BaseFieldTag extract, we can see that the type field is used to generate the type HTML attribute.That's it, we're done!


Email tag

Email input tag is a new type of input, introduced in HTML 5. It makes it possible to validate an email before the form is actually submitted. Like the password tag described above, the attributes are similar to the text tag. We'll handle it the same way we did for password tag :

Done!

Wiring changes to JSP

What is required now is pretty standard. We'll add a new tag library descriptor file to reference our new tags. The boring part here is that we have to declare, in addition to our new attributes, all existing attributes from subclassed tags... Anyway, example TLD can be found here.
In JSP, we just need to reference our new TLD file. I used html5: prefix here :

That's it! Now, you have fully functionnal HTML 5 tags, generated using Struts v1 framework :


We only took a few new attributes into account here, and it is possible to add new ones like we did here.