Text Field Component

See Also | Tutorials

You can drag the Text Field component  from the Palette to the Visual Designer to provide a text input field where users can type or paste single lines of text. The HTML equivalent for this component is <input type ="text">.

After dragging the component to the Visual Designer, you can do a number of things with it:

• Change the displayed text of the component by selecting the the component and typing the new text. Press Enter to save the text in the component's text property. You can also bind this property to an object or a field of a database table that can display a value and receive the text typed in by the user.
   
  
• Edit the component's properties in the Text Field property sheet. Some typical properties you might set are:
  • id. The name of the Text Field component. In the JSP file, this name is the value of the component's id attribute. In the page bean, this property's value is the name of the TextField object.
     
    
  • text. The text that the user enters. This text is sent to the server when the page is submitted. You can also specify a value to be displayed initially for this property, or you can click the ellipsis button and bind the property to a database table or object, so that the property's value can be set and picked up dynamically.
     
    
  • label. Descriptive text that displays to the left of the field.
    • Note: The label property is not as flexible as the Label component. You can use the Label component if you want more control over aspects of the label's appearance, such as positioning of the label relative to the component.
    
     
    
  • columns. The width in characters of the text field. If the user types more characters than will fit, the field scrolls horizontally.
     
    
  
   
  
• Right-click the component and choose one of the following pop-up menu items:
  • Edit Text. Type in text that will appear by default when the component is displayed. When you press Enter or click outside the component, the text property is updated with this text.
     
    
  • Edit Label. Type in text for a label that will appear next to the component. Press enter to update the label property with this text.
    • Note: The label property is not as flexible as the Label component. You can use the Label component if you want more control over the label's appearance, such as positioning of the label relative to the component.
    
     
    
  • Edit Event Handler. Write code for one of the following event handlers.
    • validate. Opens the Java Editor with the cursor positioned in the component's validate method so you can insert code to validate the value of the component.
       
      
    • processValueChange. Opens the Java Editor with the cursor positioned in the component's processValueChange method so you can insert code that executes when the value of this component changes (for example, the user changes the value of another component that is controlling the value of this component)
       
      
    
     
    
  • Set Initial Focus. Gives this component focus when the user opens the page, and provides an edit cursor in the field.
     
    
  • Auto-submit on Change. Causes the form to be automatically submitted if the value of the component changes. Sets the component's JavaScript onclick property to common_timeoutSubmitForm(this.form, 'component-id');. At runtime, this code causes the form to be automatically submitted if the user changes the component value. Once the form is submitted, conversion and validation occur on the server and any value change listener methods execute, and then the page is redisplayed.
     
    A component configured to Auto-submit on Change can use virtual forms to limit the input fields that are processed when the form is submitted. If the auto-submit component is defined to submit a virtual form, only the participants in that virtual form will be processed when the auto-submit occurs.
     
    
  • Bind to Data. Opens a dialog box that enables you to bind the component's text property to a data provider or an object, as described in the topic Bind to Data Dialog Box.
     
    
  • Property Bindings. Opens a dialog box that enables you to bind properties of the component in addition to the text property to other objects or bean properties that update this component's properties automatically.
     
    
  • Configure Virtual Forms. Enables you to add the component to a virtual form.
     
    
  
   
  

See Also

Binding Component Properties

Working With Components

Component Tasks: Quick Reference

Component Web Tutorials

Data Source Web Tutorials

About the Palette

Tutorials

Delving Into Components Tutorial

Using Virtual Forms