Standard Button Component

See Also

You can drag the Standard JavaServer Faces Button component  from the Palette's Standard 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.

• This component is a JavaServer Faces reference implementation that cannot use themes. The Button component in the Basic category of the Palette does support themes and provides other features that improve ease of use.
   
  

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

• 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 id attribute. In the page bean, this property's value is the name of the HTMLCommandButton object.
     
    
  • value. 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 data provider 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.
     
    
  • image. The URL or file name for an image to be displayed instead of the standard button image. Click the ellipsis (...) button either to enter a URL or to navigate to the image file.
     
    If you navigate to a file, select the file and click OK. You see the image displayed on your button. The image file is copied to the project, and you can see it in the Projects window under project-name > Web Pages > resources.
    • If this property is specified, this <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 value property.
       
      
    
     
    
  
   
  
• Right-click the button and choose one of several actions:
  • Edit Event Handler. Code one of the following event handlers:
    • action. Indicates the name of the button method that is called when the user clicks the button. If you enter a method name that doesn't exist in the page bean, such as button1_action, the IDE adds it to the page bean for you and updates the value of the Application Action property to point to that method.
       
      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). You typically define this method by right-clicking the button in the Visual Designer and choosing Edit Event Handler > action. 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.
       
      
    • processAction. Opens the Java Editor with the cursor positioned in the button's processAction method so you can insert code that calls a method when the user clicks the button. The method must take an ActionEvent parameter and return void.
       
      
    
     
    
  • Bind to Data. Dynamically set the text that appears on the button. You can bind the component's value 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 value property to other objects or bean properties that update this component's properties automatically.
     
    
  
   
  

See Also

Working With Components

Component Tasks: Quick Reference

Component Web Tutorials

Data Source Web Tutorials

About the Palette