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 simple. We just use java classes that resemble a GUI component and let Echo2 render it to the browser.  We just have to deal with java classes like Window, Button, Textfield, etc. Hey, sounds like awt. Yep, lots of Echo2 components do also exist in the awt package.

How ever we still needs a kind of starting point. In Echo2 this is the abstract java class ApplicationInstance. For each user an instance will be created of this class. As long as the webuser does not exit (or 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 a 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 refer to this class in the Echo2 WebContainderServlet bij extending this servlet and implementing 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();
    }
}

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

<?xml version="1.0" encoding="UTF-8"?>
<web-app>

    <display-name>HelloWorld</display-name>
   
    <servlet id="servlet-es-primary">
      <servlet-name>myServlet</servlet-name>
      <servlet-class>myworld.MyServlet</servlet-class>
    </servlet>

    <servlet-mapping id="servlet-mapping-es-primary">
      <servlet-name>myServlet</servlet-name>
      <url-pattern>/app</url-pattern>
    </servlet-mapping>

</web-app>

 

Oh no, of course we still need to include a few Echo2 jar libraries in our project (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).

 

Now lets extend our application returning empty screen with some great functionality: Use case "Say Hello".

To do this we have to add content to the window, so we create our own ContentPane class. Because I assume you all can read some 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.
 

Some more information (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 Google Web Toolkit (fat client) over here: 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. The plug-in stores your GUI in a xml file and creates the java code in a predefined method (initComponents) in your class.