February 16, 2019
Hot Topics:

Understanding Echo

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

Building Applications with Echo

An example application

You will build a simple Web application that asks for the user's name and, upon input, responds with a welcome message. This application's UI will consist of a screen (inside a browser window), which has following text "Please enter your name here", a textbox, and two buttons, "Submit" and "Clear" (one to submit the user name and other to clear the input). On entering a name in the textbox and clicking the "Submit" button, a message appears in the same screen, containing Hello followed by the user name. Call this application WelcomeDemo.

The application UI

To build the application's UI, Echo provides readymade Components. The most basic component is a Window, representing the client browser's window where the application UI is displayed. A Window may contain "panes", or separate areas inside a window. There are two types of panes available: ContentPane and ContainerPane. ContentPane may contain other user input or formatting components; for example, Label, TextField, Button, Grid, and so forth; whereas ContainerPane is used to further divide the pane area into separate panes and can only contain other ContentPane or ContainerPane components. This application will have a Window containing a ContentPane named inputPane. This inputPane will in turn contain the following components:

  • Two Label components; msgLabel for text asking for user input, and welcomeLabel to display a welcome message.
  • A TextField inputField for entering the user name.
  • Two Button components, submitButton and clearButton.
  • A Filler component used for creating blanks spaces and lines (used for formatting).

Listing 1 shows a skeleton of the application UI.

Listing 1: Skeleton of WelcomeDemoServlet.java

import nextapp.echo.Button;
import nextapp.echo.ContentPane;
import nextapp.echo.EchoInstance;
import nextapp.echo.Filler;
import nextapp.echo.Label;
import nextapp.echo.TextField;
import nextapp.echo.Window;

import nextapp.echoservlet.EchoServer;

public class WelcomeDemoServlet extends EchoServer {

   // Returns a new user-instance of the Echo application.
   public EchoInstance newInstance() {
      return new WelcomeDemo();

class WelcomeDemo extends EchoInstance {

   private Label msgLabel, welcomeLabel;
   private TextField entryField;
   private Button submitButton, clearButton;
   private ContentPane inputPane;

   // This init method is called when a user first visits the
   // application. It must return a Window object that will
   // occupy the contents of the user's open browser window.

   public Window init() {

      //Create a new window.
      Window window = new Window("Input Window");

      //Create a content pane to which components may be added
      inputPane = new ContentPane();

      //Add a contentpane to the window

      //Create a new label to display message
      msgLabel = new Label("Please enter your name here:");

      //Add the label to the contentpane

      //add 2 blank spaces

      //Create and add a textfield that's 10 characters long
      entryField = new TextField(10);

      //add 2 blank rows

      //Create a new submit button and add to contentpane
      submitButton = new Button("Submit");

      //add 2 blank spaces

      //Create a clear button and add to contentpane
      clearButton = new Button("Clear");

      //add 2 blank rows

      //Create and add an empty label, used to display a
      //welcome message on user input
      welcomeLabel = new Label();

      // Return the new window.
      return window;

   }    //end of init()

Because the Echo applications are actually Servlets, the application code consists of a servlet class called WelcomeDemoServlet. Each of these servlet classes (WelcomeDemoServlet here) must extend the EchoServer class of the Echo framework. EchoServer is responsible for providing implementation of javax.servlet.http.HttpServlet to the Echo application servlets. EchoServer takes care of all routine servlet tasks behind the scene, including handling incoming HTTP requests by feeding them to the Application Container.

The WelcomeDemoServlet simply provides an implementation of the inherited newInstance() method that is meant to return a new user instance of this application.

return new WelcomeDemo();

Next, the application class WelcomeDemo extends the EchoInstance class, and overrides the init() method it thus inherits. This init() method's job is to create an application UI and return a Window object that represents the initial state of the application UI in the client browser window.

Page 2 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