Quick Introduction To Echo
A Java Thin Client Framework

By:  Abdul Habra
Email: ahabra@yahoo.com
URL www.tek271.com
Version: 1.1
Date:  2005.05.19

Note: The material here was used in a presentation about Echo for the Cincinnati Java User Group on 2005.05.16.

Echo For Managers

  1. A Java framework for creating web-based applications.
  2. Works with browsers supporting JavaScript >= 1.3, e.g. IE, FireFox, Netscape, ...
  3. No client side binaries, ActiveX, Plugins, ...
  4. No server side special server. A program is deployed as a servlet to a servlet container e.g. Tomcat.
  5. Open source with LGPL and Mozilla Public License. Support available for $.
  6. Released in 2003.
  7. Currently on version 1.1.4, with version 2.0 in Alpha.

 

Echo For Geeks

  1. The front end is written completely in Java; as a programmer you do not write HTML, JavaScript, JSP, XML, XSL, CRAP, ...
  2. Echo provides a component library similar to Swing for writing the front end.
  3. At run-time, the components generate the appropriate HTML and JavaScript for the browser.
  4. An Eclipse plugin is available for GUI design but it costs $350/License.
  5. You need to import and deploy two jar files with total size about 360KB.
  6. Works with JDK 1.2 and higher, Servlet Specs 2.2 or higher.
  7. Main developer Tod Liebeck.
  8. If you are familiar with Swing, you need 10 to 20 hours to become productive.
  9. Good introduction tutorial and JavaDocs, but no good documents on how to write big apps. However, it is not hard to figure out.
  10. Version 2 will use AJAX (Asynchronous JavaScript and XML). Updating a component on the page instead of whole page. Google map and GMail use AJAX.

An example application written with Echo 1.1.4 is at www.tek271.com/docdb.
The source code and the binaries of the project are here. (7.15 MB)

 

Links

  1. Distributed by www.nextapp.com
  2. Main Page: www.nextapp.com/products/echo
  3. Tutorial: www.nextapp.com/products/echo/doc/tutorial/
  4. EchoPoint, a library of Echo web components: echopoint.sourceforge.net

 

Test Code

package com.tek271.test;

import nextapp.echo.*;
import nextapp.echo.event.*;
import nextapp.echoservlet.EchoServer;

public class HelloServlet extends EchoServer {
  // EchoServer extends javax.servlet.http.HttpServlet

  public EchoInstance newInstance() {
    //return new HelloWorld();

    //***** Demo step 5: buttons and handlers
    return new ButtonsTest();
  }

  class HelloWorld extends EchoInstance {

    // Declare the init() method which is abstract in EchoInstance
    public Window init() {
      Window w= new Window("Hello World title");
      ContentPane contentPane= new ContentPane();
      w.setContent(contentPane);

      Label lbl= new Label("Hello World");
      contentPane.add(lbl);


      // ***** Demo step 1: font and color
      lbl.setFont( new Font(Font.VERDANA, Font.BOLD, 16) );
      lbl.setForeground(Color.BLUE);

      // ***** Demo step 2: image
      HttpImageReference img= new HttpImageReference("file://C:/util/graphics/animated/horse.gif");
      lbl.setIcon(img);

      // ***** Demo step 3: text field
      contentPane.add( Filler.createVerticalStrut(20) );   // make vertical space
      TextField tf= new TextField("default value");
      contentPane.add(tf);

      // ***** Demo step 4: style
      Style style= new Style();
      style.setAttribute(TextField.STYLE_BACKGROUND, Color.YELLOW);
      style.setAttribute(TextField.STYLE_FOREGROUND, Color.BLUE );
      style.setAttribute(TextField.STYLE_FONT, new Font(Font.ARIAL, Font.BOLD, 14) );
      style.setAttribute(TextField.STYLE_BORDER_SIZE, 4);
      style.setAttribute(TextField.STYLE_BORDER_COLOR, Color.RED);
      style.setImmutable();   // throw exception if style changed

      tf.applyStyle(style);   // apply style on text field

      return w;
    }
  }  // class HelloWorld

  class ButtonsTest extends EchoInstance implements ActionListener {
    private Button pRed, pGreen, pBlue, pWhite;
    private ContentPane pContent;

    public void actionPerformed(ActionEvent e) {
      Object src= e.getSource();
      if (src == pRed) pContent.setBackground(Color.RED);
      else if (src == pGreen)  pContent.setBackground(Color.GREEN);
      else if (src == pBlue)   pContent.setBackground(Color.BLUE);
      else if (src == pWhite) pContent.setBackground(Color.WHITE);
    }  // actoinPerformed();

    public Window init() {
      Window window=new Window("Button Demo");
      pContent=new ContentPane();
      window.setContent(pContent);
      Label label=new Label("Click on a button to change the background:");
      pContent.add(label);
      pRed= createButton("Red", Color.RED);
      pGreen= createButton("Green", Color.GREEN);
      pBlue= createButton("Blue", Color.BLUE);
      pWhite= createButton("White", Color.WHITE);

      return window;
    }

    private Button createButton(String aCaption, Color aBackground) {
      Button r= new Button(aCaption);
      r.setBackground(aBackground);
      r.addActionListener(ButtonsTest.this);
      r.setToolTipText("Change the background color to " + aCaption);
      pContent.add(r);
      return r;
    }

  } // class ButtonsTest

}  // class HelloServlet
 

 

Page Last Updated May 11, 2005.