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.
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);
}
}
DateChooser
has many methods to modify its font, colors and
many other properties that affect how it looks. Refer to the EchoPointNG
documentation for more information.
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.
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);
}
}