Struts 2 and html5 input tags

[Nancy C Johnson]

How would I code <input type=email into Struts sytnax? I don't see anything but S:textfield
Thank You

Nancy Johnson

[Manjesh Patil]

Struts2 as of now does not seems to be supporting HTML5. you have to use s:textfield only.
here is the list of HTML elelments that struts2 tags can render....


http://struts.apache.org/2.0.6/docs/ui-tag-reference.html



regards
Manjesh

[Nancy C Johnson]

Thank you. Do you think Struts 2 will begin to support HTML5 tags in the near future?

Thank you.

Nancy Johnson

[Manjesh Patil]

I wish some plugin would come up though I do not see any roadmap for struts2 on their official site.

[Marc Bouvier]

You can make your own taglib extending textfield. and using a different template which only aim is to replace

<input type="text"

by

<input type="date"

If you need more attributes (date range ...) you may need to add them in the tld descriptor and in the component class.

In your own tld file (here WEB-INF/tlds/mytld.tld) :
<tag> <description><![CDATA[Render an HTML input field of type date]]></description> <name>datefield</name> <tag-class>my.own.package.taglib.DateFieldTag</tag-class> <body-content>JSP</body-content> <attribute> <description><![CDATA[Set the html accesskey attribute on rendered html element]]></description> <name>accesskey</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[The css class to use for element]]></description> <name>cssClass</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[The css error class to use for element]]></description> <name>cssErrorClass</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[The css error style definitions for element to use]]></description> <name>cssErrorStyle</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[The css style definitions for element to use]]></description> <name>cssStyle</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Set the html disabled attribute on rendered html element]]></description> <name>disabled</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[HTML id attribute]]></description> <name>id</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Use JavaScript to generate tooltips]]></description> <name>javascriptTooltip</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Set the key (name, value, label) for this particular component]]></description> <name>key</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Label expression used for rendering an element specific label]]></description> <name>label</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[String that will be appended to the label]]></description> <name>labelSeparator</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Define label position of form element (top/left)]]></description> <name>labelposition</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Deprecated. Use maxlength instead.]]></description> <name>maxLength</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[HTML maxlength attribute]]></description> <name>maxlength</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[The name to set for element]]></description> <name>name</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[ Set the html onblur attribute on rendered html element]]></description> <name>onblur</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Set the html onchange attribute on rendered html element]]></description> <name>onchange</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Set the html onclick attribute on rendered html element]]></description> <name>onclick</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Set the html ondblclick attribute on rendered html element]]></description> <name>ondblclick</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Set the html onfocus attribute on rendered html element]]></description> <name>onfocus</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Set the html onkeydown attribute on rendered html element]]></description> <name>onkeydown</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Set the html onkeypress attribute on rendered html element]]></description> <name>onkeypress</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Set the html onkeyup attribute on rendered html element]]></description> <name>onkeyup</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Set the html onmousedown attribute on rendered html element]]></description> <name>onmousedown</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Set the html onmousemove attribute on rendered html element]]></description> <name>onmousemove</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Set the html onmouseout attribute on rendered html element]]></description> <name>onmouseout</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Set the html onmouseover attribute on rendered html element]]></description> <name>onmouseover</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Set the html onmouseup attribute on rendered html element]]></description> <name>onmouseup</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Set the html onselect attribute on rendered html element]]></description> <name>onselect</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Whether the input is readonly]]></description> <name>readonly</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[If set to true, the rendered element will indicate that input is required]]></description> <name>required</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Define required position of required form element (left|right)]]></description> <name>requiredposition</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[HTML size attribute]]></description> <name>size</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Set the html tabindex attribute on rendered html element]]></description> <name>tabindex</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[The template (other than default) to use for rendering the element]]></description> <name>template</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[The template directory.]]></description> <name>templateDir</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[The theme (other than default) to use for rendering the element]]></description> <name>theme</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Set the html title attribute on rendered html element]]></description> <name>title</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Set the tooltip of this particular component]]></description> <name>tooltip</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Deprecated. Use individual tooltip configuration attributes instead.]]></description> <name>tooltipConfig</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[CSS class applied to JavaScrip tooltips]]></description> <name>tooltipCssClass</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Delay in milliseconds, before showing JavaScript tooltips ]]></description> <name>tooltipDelay</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Icon path used for image that will have the tooltip]]></description> <name>tooltipIconPath</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <attribute> <description><![CDATA[Preset the value of input element.]]></description> <name>value</name> <required>false</required> <rtexprvalue>false</rtexprvalue> </attribute> <dynamic-attributes>true</dynamic-attributes> </tag>

Tag class : DateFieldTag, we just extend Struts2 TextFieldTag and use our own component DateField instead of TextField

package my.own.package.taglib;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.components.Component;
import org.apache.struts2.views.jsp.ui.TextFieldTag;

import com.opensymphony.xwork2.util.ValueStack;

public class DateFieldTag extends TextFieldTag {

    /** Attribut serialVersionUID */
    private static final long serialVersionUID = -4667933740411112200L;

    //we now return our own component : DateField
    public Component getBean(ValueStack stack, HttpServletRequest req, HttpServletResponse res) {
        return new DateField(stack, req, res);
    }

}

Component class : We extend Struts2 TextField component and make it use our own template (datefield) which will find datefield.ftl template

package my.own.package.taglib;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.components.TextField;
import org.apache.struts2.views.annotations.StrutsTag;

import com.opensymphony.xwork2.util.ValueStack;

@StrutsTag(
        name = "dateField",
        tldTagClass = "my.own.package.taglib.DateFieldTag",
        description = "Render an HTML input field of type text",
        allowDynamicAttributes = true)
public class DateField extends TextField {

    /**
     * The name of the default template for the TextFieldTag
     */
    final public static String TEMPLATE = "datefield";

    public DateField(ValueStack stack, HttpServletRequest request, HttpServletResponse response) {
        super(stack, request, response);
    }

    protected String getDefaultTemplate() {
        return TEMPLATE;
    }

}

Do not forget to create a template for your taglib (here simple/datefield.ftl)
<input type="date"<#rt/> name="${parameters.name?default("")?html}"<#rt/> <#if parameters.get("size")??> size="${parameters.get("size")?html}"<#rt/> </#if> <#if parameters.maxlength??> maxlength="${parameters.maxlength?html}"<#rt/> </#if> <#if parameters.nameValue??> value="${parameters.nameValue?html}"<#rt/> </#if> <#if parameters.disabled?default(false)> disabled="disabled"<#rt/> </#if> <#if parameters.readonly?default(false)> readonly="readonly"<#rt/> </#if> <#if parameters.tabindex??> tabindex="${parameters.tabindex?html}"<#rt/> </#if> <#if parameters.id??> id="${parameters.id?html}"<#rt/> </#if> <#include "/${parameters.templateDir}/simple/css.ftl" /> <#if parameters.title??> title="${parameters.title?html}"<#rt/> </#if> <#include "/${parameters.templateDir}/simple/scripting-events.ftl" /> <#include "/${parameters.templateDir}/simple/common-attributes.ftl" /> <#include "/${parameters.templateDir}/simple/dynamic-attributes.ftl" /> />



Then you will have to include your tld in your web.xml file

<jsp-config> <taglib-uri>MyTld</taglib-uri> <taglib-location>/WEB-INF/tlds/mytld.tld</taglib-location> </taglib> </jsp-config>


And use it in your JSP page

<%@taglib uri="MyTld" prefix="t"%> <t:datefield name="test"></t:datefield>