Event Handling

Echo is an Event-driven framework for building Web applications. An Echo application is notified about the actions of a user through events. Objects that need to be made aware of any given type of user action will implement event-listening interfaces specific to that type of user input. The object must then be registered as a listener with the object that produces the events. When an event-producing object receives user input, it will create an event which describes the input and send it to each registered listener. It will do this by calling a method that was defined in the listener interface.

A Button is a Component that produces events when it is clicked. In Echo, buttons are identical in concept to the buttons that one would see in a desktop application dialog box, such as "OK" and "Cancel&quot. Buttons in Echo are also roughly equivalent to hyperlinks in traditional Web applications. Buttons will be discussed in greater detail in a later chapter of the tutorial.

If an object needs to know when a particular Button is clicked, it does the following:

• Implements the ActionListener interface.
• Registers itself with the button by passing itself to the button's addActionListener() method.

The ActionListener interface requires that an implementing class provide an actionPerformed() method. The actionPerformed() methods of registered listeners will be called when the button is clicked. The actionPerformed() method receives an event as a parameter: an ActionEvent that describes the event that occurred. The ActionEvent contains information about which button was clicked.

This example program creates a window that has three buttons in it, labeled "Red", "Green", and "Blue". When a button is clicked, it changes the background color of the window.

import nextapp.echo.Button;
import nextapp.echo.Color;
import nextapp.echo.ContentPane;
import nextapp.echo.EchoInstance;
import nextapp.echo.Label;
import nextapp.echo.Window;
import nextapp.echo.event.ActionEvent;
import nextapp.echo.event.ActionListener;
import nextapp.echoservlet.EchoServer;

public class ButtonDemoServlet extends EchoServer {

    public EchoInstance newInstance() {
        return new ButtonDemo();
    }
}

// Note that ButtonDemo implements the interface 
// ActionListener.
class ButtonDemo extends EchoInstance 
implements ActionListener {

    private Button redButton;
    private Button greenButton;
    private Button blueButton;
        
    private ContentPane content;
    
    // The actionPerformed method is required by the 
    // interface ActionListener.  In this case, the three
    // buttons register this class as an ActionListener.
    // This method will be called when any of the buttons
    // is clicked.  An ActionEvent will be passed in that
    // describes the action, and will contain information 
    // as to which object (button) created the event (was 
    // pressed).
    public void actionPerformed(ActionEvent e) {
    
        if (e.getSource() == redButton) {
            content.setBackground(Color.RED);
        } else if (e.getSource() == greenButton) {
            content.setBackground(Color.GREEN);
        } else if (e.getSource() == blueButton) {
            content.setBackground(Color.BLUE);
        }
    }

    public Window init() {

        // The constructor for Window can specify a title.
        Window window = new Window("Button Demo");
        
        content = new ContentPane();
        
        window.setContent(content);

        Label label = new Label(
                "Click on a button to change the background"
                + " color of this window:");
        content.add(label);
 
        // Create the red button with the text "Red" as its 
        // label.
        redButton = new Button("Red");
        
        // Adds an action listener to the button, this 
        // object.  The button will call the 
        // actionPerformed() method of an action listener
        // when it is clicked.
        redButton.addActionListener(this);
        
        // Set the red button's background to be red.
        redButton.setBackground(Color.RED);
        
        // Add the red button to the content pane.
        content.add(redButton);

        // and so on...
        greenButton = new Button("Green");
        greenButton.addActionListener(this);
        greenButton.setBackground(Color.GREEN);
        content.add(greenButton);

        blueButton = new Button("Blue");
        blueButton.addActionListener(this);
        blueButton.setBackground(Color.BLUE);
        content.add(blueButton);
 
        return window;
    }
}

The Color Object

Another new Echo object, Color, is introduced in this tutorial example. As its name would indicate, the Color object is used to represent a particular color. The foreground and background colors of any Component may be set by passing a Color object to its setForeground() and setBackground() methods. In this example, the background of each button is set to the color named in its label. The Color class has several predefined constants for commonly used colors, as are used in this case

If you have the Echo Tutorial Examples installed, you may run this example by visiting http://localhost:8080/EchoTutorial/buttondemo. You must change the hostname and port number if your server is not running on localhost on port 8080.