Button Component

See Also | Tutorials

You can drag a Button component  from the Palette's Basic category to the Visual Designer to create a button that the user can click to perform an action like submitting or resetting a form.

When the web page is generated, the Button becomes an HTML <input type="type"> element for which the type value can be submit or reset.

After dragging the button to the Visual Designer, you can:

• Type in a new label for the button. Typing a new label sets the text property.
   
  
• Select the button and either drag it to another location on the page or resize it by dragging its selection handles.
   
  
• Select the button and edit its properties in the Button's Properties window. Some typical properties you might set are:
  • id. The name of the button. 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 Button object.
     
    
  • text. The text that appears on the button, also known as its label. You can set the default value as text, and you can bind the value to a database table if you want the displayed button name updated dynamically.
     
    
  • alt. The alternate text for the button graphic, text that describes the graphic element in the HTML page, is readable by screen readers, and displays when the user has display of images turned off in the web browser.
     
    
  • mini. Makes the button and its label smaller than the standard size button.
     
    
  • primary. Changes the appearance of the button to make it stand out in a group of buttons.
     
    
  • imageURL. The URL or file name for an image to be displayed in lieu of the standard button image and button text. Click the ellipsis (...) button either to enter a URL or to navigate to the image file.
     
    If necessary, you can add an image file to your list of resources in the property editor by choosing Add File. After selecting a file, you see the image displayed on your button. You can see and images you add to your list of resources in the Projects window under project-name > Web Pages > resources.
    • If this property is specified, the rendered HTML <input> element's type is image and the button is a submit button that uses the specified image.
       
      
    • If this property is not specified, the button looks like a standard button, with the type specified in the Button Type property and the button's label (displayed text) specified in the text property.
       
      
    
     
    
  
   
  
• Right-click the button and choose one of several actions:
  • Edit action Event Handler. Code the action event handler, the button method that is called when the user clicks the button.
     
    If all you want to do is have the button display another page when the user clicks it, you do not need an action method. The easiest thing to do is open the page in the Navigation Editor, click the page and then click the button, and then drag to the page you want the button to open. See Setting Static Navigation for more information.
     
    If you want the button to be able to determine which page to open based on certain conditions, then you need an action method. The action method typically processes button clicks and returns a string indicating the name of a page navigation case (the page in your application to display next). The default name for the method is button-id_action, where button-id is the value of the button's id property. For more information, see Setting Dynamic Navigation.
     
    
  • Bind to Data. Dynamically set the text that appears on the button. You can bind the component's text property to an object or a data provider, 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