cocoon-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From Quoin Developers <quoin...@gmail.com>
Subject fi:styling/@in-place-tip
Date Sun, 06 Nov 2005 01:59:51 GMT
Motivation:

CForms user would like to display instructions or some other hint to
the end user in the text input widget itself (as opposed to a tool-tip
on-hover). This text should not be submitted, and if a user wants to
enter text into the input, the tip text should automatically disappear
so that the user does not have to manually delete it.

We implemented this for a couple of projects. Most recently Antonio
Gallardo provided some suggestions as to how we might best integrate
this into CForms, and here are the results which we would like to
contribute this back to the cocoon community. We're open to
suggestions, but we'd like to keep it simple. The only additional
thing might be to set a different class attribute value for the input
element when the tip is being displayed. In this way, the tip text
could be styled distinctly.

Regards,
Eric Meyer
Rus Pandey

Implementation:

Add an fi:styling/@in-place-tip to the form template. For example:

<ft:widget id="startDate">
    <fi:styling in-place-tip="mm/dd/yyyy"/>
</ft:widget>


Details:

The forms-field-styling.xsl for fi:field adds some javascript if there
is an fi:styling/@in-place-tip:

xmlns:stringescapeutils="org.apache.commons.lang.StringEscapeUtils"
...
<xsl:if test="fi:styling/@in-place-tip">
  <script type="text/javascript">
    <xsl:text>oacf_createInPlaceTip('</xsl:text>
    <xsl:value-of select="concat(@id, '-input')"/>
    <xsl:text>', '</xsl:text>
    <xsl:value-of
select="stringescapeutils:escapeJavaScript(fi:styling/@in-place-tip)
"/>
    <xsl:text>');</xsl:text>
  </script>
</xsl:if>


In forms-lib.js, some additional javascript code:
/**
* Functions to handle hints in text inputs:
* Remove the widget value if it is the default (tip).
* (oacf refers to org.apache.cocoon.forms)
*/
function oacf_removeDefaultValue(widget, defaultValue) {
    if (widget.value == defaultValue) {
        widget.value = "";
    }
}

/**
* If the widget does not have a value, set it do the default (tip) value.
*/
function oacf_setDefaultValue(widget, defaultValue) {
    if (widget.value == "") {
        widget.value = defaultValue;
    }
    widget.oacf_defaultValue = defaultValue;
}

/**
* Given a widget's id, and the desired in-place-tip  text, set up the
* onfocus, onblur and onsubmit behavior.
* It may also be desirable to change the class attribute of the widget
* when the tip is being displayed so that the tip may be styled differently.
*/
function oacf_createInPlaceTip(id, tipText) {
    var result = {};
    result.forms_id = id;
    result.element = document.getElementById(result.forms_id);

    result.element.onblur = function() { oacf_setDefaultValue(this, tipText); }
    result.element.onfocus = function() {
oacf_removeDefaultValue(this, tipText); }
    result.element.onblur();

    // add to onsubmit handlers
    result.forms_onsubmit = function() {
        this.element.onfocus();
    }
    forms_onsubmitHandlers.push(result);
    return result;
}

Mime
View raw message