Enhance Your Echo2 Application with EchoPointNG Components

EchoPointNG Components

EchoPointNG contains a large number of additional components for use with Echo2 applications. In this article we will discuse the DateChooser, the DateField, the TabbedPane, and the menu component.

DateChooser Component

The DateChooser component displays a calendar on the browser, allowing the user to pick a date by selecting values from it.  Using a DateChooser in your code is very simple. Here is some sample code fragment that will display a DateChooser on the browser:

public class DateChooserDemo extends ContentPane
{
  public DateChooserDemo()
  {
    DateChooser dateChooser = new DateChooser();
 
    add(dateChooser);
  }
}

DateField Component

The DateField component displays a text field with an icon to display a calendar component for the user to pick a date. It is similar to the numerous JavaScript based calendar components found in many web sites.

The code to add a DateField to an Echo2 application is similar to the code to add a DateChooser. The DateField class contains many methods to control the date format and its appearance. Consult the EchoPointNG documentation for details.

TabbedPane Component

The TabbedPane component is a welcome addition to the standard Echo2 components. It creates a set of tabs containing panes where other containers can be added. It is backed by a TabModel interface, which is where the number of tabs and the content of each tab is set. EchoPointNG includes a DefaultTabModel class that implements the TabModel interface, it is the simplest way to populate an instance of TabbedPane. The following code fragment demonstrates how to create and populate a TabbedPane:

public class TabbedPaneDemo extends ContentPane
{
  public TabbedPaneDemo()
  {
    TabbedPane tabbedPane = new TabbedPane();
    DefaultTabModel defaultTabModel = new DefaultTabModel();
 
    defaultTabModel.addTab("Tab 1", new Label("This is the first tab."));
    defaultTabModel.addTab("Tab 2", new Label("This is the second tab."));
    tabbedPane.setModel(defaultTabModel);

    add(tabbedPane);
  }
}