Echo2: Building a web application without web skills…without web skills…

Echo2… oh no, naf! (not another framework). I just want java, not some tricky framework I have to learn into depth before being productive. Ok, then you’re up to Echo2!

Building a complete interactive web application with partial page refreshing (AJAX) without knowledge of AJAX and even without knowledge of (X)HTML, Javascript, JSP, TLD, XSLT. That can’t be possible or can we do this? Yes we can!

How can we develop web pages without developing web pages? It’s quite easyy. We just use java classes that resemble a GUI component and let Echo2 render it to the browser. We only have to deal with java classes which resemble GUI compoonents, like Window, Button, Textfield, etc. Hey, that sounds familiair, isn’t it? Yes, it looks like awt and indeed lots of Echo2 components also exist in the awt package.

However we still needsa kind of starting point. In Echo2 this is the abstract java class ApplicationInstance. For each user an instance of this class will be created. As long as the webuser does not exit (or the session times out) this instance is available. For web developers, you can see this as the user session context (Echo2 stores this instance in the user session).

We need to extend this class to create our own ApplicationInstance class bij implementing the init method that returns an Echo2 Window with the content we want:

package myworld;

import nextapp.echo2.app.ApplicationInstance;
import nextapp.echo2.app.Label;
import nextapp.echo2.app.Window;

public class MyApplication extends ApplicationInstance {

    private Window window;

    public Window init() {
        window = new Window();
        window.setTitle("Echo2 Hello World");
        return window;
    }
}

We have to create a new instance of this class by extending the Echo2 WebContainerServlet and implement the newApplicationInstance method:

package myworld;

import nextapp.echo2.app.ApplicationInstance;
import nextapp.echo2.webcontainer.WebContainerServlet;
import myworld.MyApplication;
 
   public class MyServlet extends WebContainerServlet {

      public ApplicationInstance newApplicationInstance() {
          return new MyApplication();
    }
}

By creating a url mapping in the web.xml to this servlet, our hello world Echo2 application is finished:

<web-app>
  <display-name>HelloWorld</display-name>

  <servlet id='my-servlet'>
    <servlet-name>myServlet</servlet-name>
    <servlet-class>myworld.MyServlet</servlet-class>
  </servlet>
  

  <servlet-mapping id='my-servlet-mapping'>
    <servlet-name>myServlet</servlet-name>
    <url-pattern>/app</url-pattern>
  </servlet-mapping>
  
</web-app>

You now only need to include a few Echo2 jar libraries in the webproject to make it work (something has to do the real tough work):

• Echo2_WebRender.jar
• Echo2_WebContainer.jar
• Echo2_App.jar
• servlet.jar
• echopointng-2.1rc5-1.3.jar (optional, containing some more extended gui components).

Our application currently only returns an empty screen, so let’s extend it with some great functionality: Use case “Say Hello”.

To do this we have to add content to the window, so we create a subclass of the ContentPane class. Because I assume you all can read basic java, I’m not gonna explain the java in detail.

package myworld;

import nextapp.echo2.app.Button;
import nextapp.echo2.app.Column;
import nextapp.echo2.app.ContentPane;
import nextapp.echo2.app.Label;
import nextapp.echo2.app.Row;
import nextapp.echo2.app.TextField;
import nextapp.echo2.app.event.ActionEvent;
import nextapp.echo2.app.event.ActionListener;
import echopointng.PushButton;

public class MyPane extends ContentPane implements ActionListener {

    private TextField txtName;
    private Label lblHello;
    private Button btnHello;

    public MyPane() {
        super();

        Column column = new Column();
        add(column);
        Row row = new Row();
        txtName = new TextField();
        btnHello = new PushButton("Say hello");
        btnHello.setActionCommand("sayHello");
        btnHello.addActionListener(this);
        row.add(txtName);
        row.add(btnHello);
        column.add(row);
        lblHello = new Label("hoi");
        column.add(lblHello);
    }

    public void actionPerformed(ActionEvent ae) {
        if (ae.getActionCommand().equals("sayHello")) {
            lblHello.setText("Hello " + txtName.getText());
        }
    }
}

We should not forget to add this content to our window in the init method of the MyApplication class:

    public Window init() {
        window = new Window();
        window.setTitle("Echo2 Hello World");
        window.setContent(new MyPane());
        return window;
    }

To be continued with your own bells and whistles.
 

A tutorial is available at the Echo2 website: http://echo.nextapp.com/site/echo2/doc/tutorial

I also found a nice comparison of Echo2 (thin client) with the Google Web Toolkit (fat client): http://www.theserverside.com/news/thread.tss

And as a final note. Echo2 also provides a drawing Eclipse plug-in for creating the GUI of your content pages. With the plug-in you can graphically create your screen. Under the hood it stores your GUI in a xml file and it creates the java code in a predefined method (initComponents) in your class. You can call this method in the contructor of your class to create the screen.