February 22, 2019
Hot Topics:

Understanding Echo

  • May 22, 2006
  • By Mugdha Vairagade
  • Send Email »
  • More Articles »

Adding event-handling capabilities

To make an Echo application event-driven, the application class must implement the Echo framework's ActionListener interface, just as Java SWING does. Also, the application class (WelcomeDemo here) must register itself as an event-listener with every UI component that generates events of interest in response to user action. This is achieved by passing an instance of the application class as an argument to the addActionListener() method of the desired components. Listing 2 shows a code snippet highlighting the modifications made to add event-handling functionality.

Listing 2: Adding event-handling code to WelcomeDemoServlet.java

import nextapp.echo.Button;

// more code....

import nextapp.echo.event.ActionListener;
import nextapp.echo.event.ActionEvent;

// more code here....

class WelcomeDemo extends EchoInstance implements ActionListener {

   private Label msgLabel, welcomeLabel;

   // more code here....

   private String input;

   public void actionPerformed(ActionEvent e) {

      if (e.getActionCommand().equals("submit name")) {
         try {

            // Using getText() method of TextField component
            // to receive user input
            input = entryField.getText();

         } catch (NullPointerException ex) {
            welcomeLabel.setText("You did not enter anything.");
         }     //end try-catch block

         //The welcomeLabel displays Hello
         //followed by user name
         welcomeLabel.setText("Hello " + input);
      }    //end if
      else if (e.getActionCommand().equals("clear name")) {
         entryField.setText("");    //Clear the text field


   }    //end actionperformed()

   public Window init() {

      //more code....

      submitButton = new Button("Submit");
      submitButton.setActionCommand("submit name");

      //more code here....

      clearButton = new Button("Clear");
      clearButton.setActionCommand("clear name");

      //more code here ....

      return window;

Because in this application the submitButton and clearButton are the only UI components that generate events of interest (events of user input submission and clearing user input), the WelcomeDemo object registers itself as an event-listener with both of them using their addActionListener() method.

Also, both of these components use their setActionCommand() method to define commands to perform desired actions. This allows developers to define their own command strings ("submit name", "clear name") corresponding to the events generated by components, making event-handling code easy to understand and maintain.

The events generated by the UI components are processed by the actionPerformed() method inherited by the event-listener class WelcomeDemo from the ActionListener interface, and duly implemented. This method receives information about generated events through the ActionEvent object passed to it as argument. This method contains instructions on what action to perform when a certain event occurs (or alternatively, which corresponding command is executed). Thus, appropriate actions are performed on occurrence of matching events or commands.

Here, user input is easily accessible through the getText() method of the entryField UI component. Because Application Container takes care of all the underlying work regarding user input processing behind the scenes, developers can directly access the user input through methods of corresponding UI components. Also in response to the user input made, desired changes in any UI component can be affected in a similar fashion.

input = entryField.getText();
//... ...
welcomeLabel.setText("Hello " + input);
//... ... ...

The complete source code of this Echo application can be downloaded from here.

The result

When compiled and deployed on a servlet container server, this Echo application WelcomeDemo will look something like this in a client browser:

Figure 1: UI of WelcomeDemo in client browser

Here, the actual rendering of the UI is automatically being taken care of by the Application Container. Figures 2 and 3 show user input and resulting changes on input submission (by clicking the Submit button) respectively.

Figure 2: User input in the UI of WelcomeDemo

Figure 3: Changes in UI in response to input submission


Echo is a useful Java-based, Open Source framework that saves coding efforts on part of developers, while providing the end user a rich-client like experience from Echo-based Web applications. The Echo framework automates most Web development tasks, including HTTP request parsing and rendering complex HTML-JavaScript based browser representation of the OOP-based UI model, thus saving valuable development time and reducing code size along with developmental cost. Echo also provides the basic building blocks for UI development.

About the Author

Mugdha Vairagade is a senior IT consultant and author. Her major tech portals include developer.com, IBM developerWorks, CNET Networks, Slashdot; many eZines regularly publish her work. Her expertise and interests include Java, Linux, XML, and Open Source projects.

Page 3 of 3

Comment and Contribute


(Maximum characters: 1200). You have characters left.



Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date