Browse Prior Art Database

Client side interactive formatting for input fields in a Web application

IP.com Disclosure Number: IPCOM000021333D
Original Publication Date: 2004-Jan-14
Included in the Prior Art Database: 2004-Jan-14
Document File: 3 page(s) / 58K

Publishing Venue

IBM

Abstract

Disclosed is a method to format the data of an input field interactively on the client side of a Web application using JavaServer Pages (JSP) custom tag and JavaScript technologies.

This text was extracted from a PDF file.
This is the abbreviated version, containing approximately 49% of the total text.

Page 1 of 3

Client side interactive formatting for input fields in a Web application

This method allows a developer to associate a format to an input field in a JavaServer Pages (JSP), after end user enters data into the field, and upon leaving the field, the data is automatically changed to the desired format, and when control is back on the field, the data in the field is reverted to the original user entered value.

    Here is an example to demonstrate how this method behaves when using an iSeries edit word as its format, but this disclosed method is not limited to iSeries edit code or edit word formatting, it can be used by any types of data formatting and conversion, which requires the data to revert to its original state. In this example, an iSeries edit word "$ **DOLLARS& &CTS" is used, and if an end user types in "654.32" in the field, when the field lose focus, the field shows "$****654*DOLLARS 32 CTS", and when the field gains focus, the data in the field is changed back to "654.32". When the form is submitted, the data sent in a request is "654.32", and not the formatted value.

Here are the steps of the disclosed method.
1.) Create a JSP custom tag for a text entry input field. For example, <iwcl:WTextEntry name="name" initValue="0" format="$ **DOLLARS& &CTS"></iwcl:TextEntry>
2.) Create a JSP tag library for this custom tag. In the doStartTag method, perform the following algorithm: if textEntryComponent does not exists in the defined scope /* scope can be application, session, or page scope */

{

textEntry = new TextEntryComponent(); /* instantiate TextEntryComponent object */

textEntry.setName(<name>); /* Assign a name to the textEntry object, where <name> is the name given in the custom tag */

put textEntry in the defined scope;

if formatting is defined in the custom tag

{

/* make the textEntry object as a hidden widget */

textEntry.setHidden(true);

/* create another TextEntryComponent object which is visible, but with a different name */

displayTextEntry = new TextEntryComponent();

/* Assign a name to the visible object, and the name must be different from the name of the hidden object */

displayTextEntry.setName(_iwcld<name>);

put displayTextEntry in the defined scope;

/* displayTextEntry widget calls the JavaScript function, clientFormat when onBlur event occurs, such that the field value */

/* is formatted whenever it lose focus. */

displayTextEntry.setOnBlur(<clientFormat function>);

/* displayTextEntry widget calls the JavaScript function, setRawValue when

1

Page 2 of 3

onKeyUp event occurs, such that whenever a */

/* key is typed in the field, the value is stored in textEntry hidden widget. */

displayTextEntry.setOnKeyUp(<setRawValue function>);

/* displayTextEntry widget calls the JavaScript function, getRawValue when onFocus event occurs, such that whenever */ /* the field gains focus, the value in the field is set with the value in the textEntry hidden widget */ displayTextEntry.setOnFocus(<getRawValue function>);

}

if ther...