Introduction To Echo

Quick Introduction To Echo

A Java Thin Client Framework

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) source and binaries are here. (7.15 MB)

Links

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