Text Entry Web component

Use the Text Entry Web component when you would like the user to provide text entry such as for their name or address. A text entry Web component allows a user to enter an arbitrary text value; whereas, Web components such as Combo box or Check box ensure that only certain values can be submitted. A text entry Web component can also be used to display output. For example, if you would like a user to be able to edit a text value that has been sent to their browser as output.

Tip: You can drag and drop an iSeries database or display file field from the Remote System Explorer's iSeries Field Table view to a JSP file in Page Designer. This creates an iSeries Text Entry Web component. The field name and data attributes for the new Text Entry Web component are inherited from the selected field.

General tab (iwcl:WTextEntry)

Name
Enter a unique identifier for the iSeries Web component. Do not use blanks or hyphens in a name. See Rules for iSeries Web component names and values.
Input type
Available options are Text, Password, and Hidden.
Text
Indicates that the contents of the Web component are displayed.
Password
Indicates that the contents of the Web component are protected and converted to asterisks.
Hidden
Indicates that the contents of the Web component are hidden.
Size
Specify the visible width of the Web component on the page in number of characters. It is not the number of characters that you can enter in the field, which can be specified in Length.
Initial state
Select Disabled, Read-only, or both.
Disabled
Indicates that the Web component is not available for use.
Read-only
Indicates that the Web component is not enabled for user input.
Orientation
Select the value to indicate the direction of the text and the alignment of the Web component on the page. The possible values are Default, Right-to-left, or Left-to-right.

Default specifies that the text direction and the alignment of the Web component on the page are inherited from the containing element. For example, if the Web component is inserted in a form, and the form's orientation is specified as Right-to-left, then the orientation for the Web component is also Right-to-left. The default is Left-to-right.

Right-to-left specifies that the text direction is right-to-left, and that the Web component is right-aligned on the page. This value overrides the inherited value.

Note: If you use Right-to-left when Edit code or Edit word formatting is specified for the component, the formatted number will not be displayed properly. To display it properly, specify right horizontal alignment in Text layout for the inline style.

Left-to-right specifies that the text direction is left-to-right, and that the Web component is left-aligned on the page. This value overrides the inherited value.

Initial value
Enter the text that initially appears in the Web component.
See Text string substitution for iSeries Web component labels for information about externalizing text strings for text substitution purposes.
Tool tip
Enter the description to be displayed when the mouse pointer is on the Web component.
See Text string substitution for iSeries Web component labels for information about externalizing text strings for text substitution purposes.
Access key
Specify a character to be associated with a shortcut key that a user selects to bring focus to the Web component.
Tab index
Enter a number for the tab order of the Web component that is created. For example, a value of 1 means that this Web component is the first object to receive focus in the tab sequence.
Label
Enter a caption for the Web component.
See Text string substitution for iSeries Web component labels for information about externalizing text strings for text substitution purposes.
Label position
Specify the position of the caption by selecting either Left or Top.
Left
places the caption to the left of the Web component when the orientation is specified as Left-to-right. If the orientation is Right-to-left, the caption is placed to the right of the Web component.
Top
Places the caption above the Web component.

Data tab

Define data attributes
Select this option to explicitly define the data type and attributes.
Type
Select Character or Numeric data type for the entry field. If Numeric is selected, the Define button for formatting is enabled.
Length
Specify the data length that is sent to the iSeries program or returned from the iSeries program.
Decimal places
Specify the number of decimal positions for the Numeric data type.
Get data attribute from iSeries database
Select this option to enable the Get button.
Get
This button enables you to navigate to the database reference on an iSeries server, and retrieve the data attributes for the specified data type, data length, decimal places, edit code, or edit word and edit parameter. When the field attributes are retrieved, the Synchronize button is enabled.
Synchronize
This button is enabled when the field attributes have been retrieved from the database reference on the iSeries host. If any changes are made to the data attributes on the host, clicking Synchronize automatically refreshes the Attributes view with the changes.
Get locale-sensitive values from:
Indicates how the value for the decimal symbol is retrieved. The options are:
host system values
By default the value for the decimal symbol is retrieved from the host job DecimalFormat.
client locale values
The value of the decimal symbol is determined by the locale of the Web browser at run time.
user defined values
Specify the value that you want to use as the decimal symbol in the Decimal symbol field. The default value of the decimal symbol is retrieved from the locale of the client system at design time.
Formatting
When data type is specified as Numeric, the Define button for formatting is enabled. Select Define to open the Define Formatting window, where:
None
Select this setting to indicate that no formatting is required.
Edit code
Select an edit code from the list to apply to the numeric data. The letter or number indicates that editing should be done according to a defined pattern before a field is displayed.
Parameter
Select None to indicate no additional option for the edit code. Select asterisk to indicate that leading asterisks should be used. Select currency to have the floating currency symbol appear to the left of the first significant digit.
Sample
When the Edit code radio button is selected, the effect of the edit code and the parameter selected is shown in the Positive Value, Negative Value, and Zero Value fields in the sample area.
Edit word
Specify the editing pattern for numeric data. You can specify:
  • Blank spaces
  • Commas and decimal points, and their position
  • Suppression of unwanted zeros
  • Leading asterisks
  • The currency symbol, and its position
  • Addition of constant characters
  • Output of the negative sign, or CR, as a negative indicator.
Get locale-sensitive values from:
Indicates how the decimal symbol, currency symbol, thousands separator, and data separator are applied when you select Edit code or Edit word.
  • When you select host system values on the Data tab, the values for the decimal symbol, the thousands separator, and the date separator are retrieved from the host job. The value for the currency symbol is retrieved from the host system value QCURSYM.
  • When you select client locale values, the values for the decimal symbol, the currency symbol, the thousands separator, and the date separator are retrieved from the locale of the Web browser at run time.
  • When you select user defined values, the values shown for the decimal symbol, the currency symbol, the thousands separator, and the date separator can be changed. The default values for the decimal symbol, the currency symbol, the thousands separator are retrieved from the locale of the client system at design time. The default value for the date separator is "/"
Validator type
Determines the conditions under which the value entered in the text entry field is validated. If the value entered does not satisfy those conditions, a message is displayed when the field loses focus.

The available values for client-side validation are None, Comparison, or Range.

None
Indicates that no validation is performed.

If either Comparison or Range is selected, the Define button is enabled.

When Comparison is selected, the Define button opens the Comparison Validation window, where:

Comparison type
Select one of the available comparison types: None, equal to, not equal to, less than, not less than, greater than, not greater than, less than or equal to, or greater than or equal to.
Comparison value
Enter a value that is to be used in the comparison between the value entered in the field and the specified comparison type.

See Text string substitution for iSeries Web component labels for information about externalizing text strings for text substitution purposes.

When Range is selected, the Define button opens the Range Validation window where:

Minimum value
Enter a value to be used as a minimum for the range against which the entered value is validated.

See Text string substitution for iSeries Web component labels for information about externalizing text strings for text substitution purposes.

Maximum value
Enter a value to be used as a maximum for the range against which the entered value is validated.

See Text string substitution for iSeries Web component labels for information about externalizing text strings for text substitution purposes.

You can externalize the comparison value, minimum value, and maximum value in a properties file to support different languages. For example, a numeric value in English is "123.45," and will be "123,45" in French, due to the different locale value for the decimal point. Therefore, values for validation may vary for different languages. You can specify these values in the properties file.

Events tab

Events
Choose any of the events in the list and use the JavaScript language to code an action for that event in the Script field. For example, if you select OnBlur , you might code the script alert("not applicable");. For a brief description of the events that apply to this Web component, see Web component events.

Styles tab

The Styles tab contains inline style options for the iSeries Web component.
Inline Style
Select the Fonts, Font styles, Background Color, and Text layout buttons to open the respective style definition windows. Use each window to select the options that you want to apply to the iSeries Web component.

Additional information about validation

Validation is performed automatically when a user enters data in the text entry field and then moves the focus elsewhere on the page.

For numeric data type, validation is performed as follows:
  • The data is checked to ensure that it is valid numeric data.
  • The length of the data entered by the user is checked to ensure that it does not exceed the length defined in the data length attribute.
  • The length of the decimal places in the data is checked to ensure that it does not exceed the length specified in the decimal places attribute.
  • A check is done to see if comparison or range validation has been specified. If it has been specified, then that validation is also performed.
For character data type, validation is performed as follows:
  • The length of the data entered by the user is checked to ensure that it does not exceed the length defined in the data length attribute.
  • A check is done to see if comparison or range validation has been specified. If it has been specified, then that validation is also performed.

For any validation errors, an error message is displayed. The messages are stored in the messages.js file in the Web project. Message text can be changed by editing the messages.js file. For national language purposes, the message text can be translated.

Additional information about formatting

Formatting of data is performed automatically if an initial value has been defined in the attribute view of the Web component, or if data is assigned to the Web component at run time by the host program, or the data entered by the user at run time. The formatting is performed by the tag library at run time and before it is displayed in the field.

For data entered by the user in the browser, formatting is performed when focus is no longer on the field. If the user clicks on the field again, then the field displays the data as it appeared when it was originally entered.