Dynamic Images

The "Dynamic Images" tutorial application demonstrates the capabilities of Echo's AwtImageReference object. AwtImageReference allows for the display of a java.awt.Image within an Echo application. In this example, an image of an initially solid black rectangle is displayed within a Button. Each time the button is clicked, a number of random hollow colored rectangles are drawn within the solid black rectangle.

If you have the Echo Tutorial Examples installed, you may run this example by visiting http://localhost:8080/EchoTutorial/dynamicimage. You must change the hostname and port number if your server is not running on localhost on port 8080.

import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
 
import nextapp.echo.AwtImageReference;
import nextapp.echo.Button;
import nextapp.echo.ContentPane;
import nextapp.echo.EchoInstance;
import nextapp.echo.Window;
import nextapp.echo.event.ActionEvent;
import nextapp.echo.event.ActionListener;

import nextapp.echoservlet.EchoServer;

public class DynamicImageServlet extends EchoServer {

    public EchoInstance newInstance() {
        return new DynamicImageDemo();
    }
}

class DynamicImageDemo extends EchoInstance 
implements ActionListener {

    private BufferedImage image;
    private Button button;
    
    // Every time the button is pressed, the 
    // actionPerformed() method draws ten randomly
    // positioned and sized rectangles in random
    // colors on the button's image.
    public void actionPerformed(ActionEvent e) {
        Graphics2D g = (Graphics2D) image.getGraphics();

        for (int index = 0; index < 10; ++index) {
            int x1 = (int) (500 * Math.random());
            int y1 = (int) (250 * Math.random());
            int x2 = (int) (500 * Math.random());
            int y2 = (int) (250 * Math.random());

            if (x2 < x1) {
                int swap = x1;
                x1 = x2;
                x2 = swap;
            }

            if (y2 < y1) {
                int swap = y1;
                y1 = y2;
                y2 = swap;
            }

            // Set the AWT Graphics drawing color to a 
            // random value.
            g.setColor(new java.awt.Color(
                    (int) (Math.random() * (1 < 24))));

            // Draw a hollow rectangle on the image.
            g.drawRect(x1, y1, x2 - x1, y2 - y1);
            
            // This call will cause the button to be redrawn
            // on the client browser.  This method must be
            // called in order for the browser to update
            // because no Echo components have been changed
            // in such a way that would warrant updating 
            // information on the client (only the image has
            // been altered.)
            button.update();
        }
    }

    public Window init() {
    
        Window window 
                = new Window("Dynamic Image Demonstration");
        
        ContentPane content = new ContentPane();
        
        window.setContent(content);
        
        // Create a new 500 by 250 pixel 
        // java.awt.BufferedImage.
        image = new BufferedImage(500, 250,
                BufferedImage.TYPE_3BYTE_BGR); 
                     
        // Create a new Button which contains the generated
        // image.  AwtImageReference implements the 
        // ImageReference interface.  This makes it possible
        // to use AwtImageReferences anywhere you've used
        // HttpImageReferences before.
        button = new Button(new AwtImageReference(image));

        button.addActionListener(this);
        
        content.add(button);
        
        return window;
    }
}