Echo2: Turn Java into AJAX Without Touching JavaScript or JSP : Page 3

Building the Sample Application

Building a very simple Echo2 web application from scratch should complete your understanding of the framework. To begin, you must create the following two Java classes, from which other Java class must extend:

• ApplicationInstance: This class represents a user state throughout the application. Each user gets his or her own instance of ApplicationInstance, and Echo2 maintains the application instances per user in the HTTP session.
• WebContainerServlet: This class handles the HTTP requests and creates new application instances as needed.

In addition to these, you can create different content pane and component instances, use different layout options, register events, and implement ActionListeners to develop a functional web application.

The sample application provides a menu for viewing existing items and then adding items to a database. The existing items will be displayed in a table format with the item name and price. The add item screen will display the existing items, present a modal window to add a new item name and price, and then dynamically update the list of existing items without refreshing the whole page.

1. Main Screen: Begin by building a main screen to add to the browser window. The main screen will be divided vertically into two parts, menu and content, by using a split pane. Listing 1 shows the code for the main screen.
2. Menu Screen: Next, create a separate menu screen that will hold the menu items and allow the user to view existing items and to add new items. Listing 2 shows the code for the menu screen.
3. Item Screen: Next comes the item screen, which will handle the display of items. It will use a table to display the item data. Listing 3 shows the code for the item screen.
4. SampleAppInstance: Extend the ApplicationInstance class to create your own class for the application. Set the main screen as the default screen for the application:

   
   
   
   
   
   public class SampleAppInstance extends ApplicationInstance {
   
        ContentPane parentContentPane = null;
   
        public Window init() { 
             //the default browser window
             Window window = new Window();
             window.setBackground(Color.BLACK);
   
             //create main screen
             parentContentPane = new MainScreen();
   
             //set it as default screen
             window.setContent(parentContentPane);
   
             return window;
        }     
   
   }
   

Figure 1. Diagram of the Completed Echo2 Web Application: This is a diagram of a simple Echo2 web application.

5. SampleServlet: Now extend the WebContainerServlet class and create a new instance of SampleAppInstance that creates and returns a new application instance for every new user:

   
   public class SampleServlet extends WebContainerServlet{
   
       public ApplicationInstance newApplicationInstance() {
   
           //return a new application instance
           return new SampleAppInstance();
    
       }
   
   }
   

Figure 1 shows a diagram of the completed application.

More to Learn

You should now have a better understanding of the power and simplicity of Echo2 for Java developers. It's worthwhile exploring some more advanced areas such as styling and HTML template techniques. These techniques use HTML and CSS to create a custom look and feel. You can then use Echo2 components in specific areas of your templates. Happy exploring!

Previous Page