Quick Start: Responding to Events

Overview

1. Switch the Component Editor to the Component Events Page.
2. Using the Component Tree, highlight the form's input components (for example, text fields) and use the events page to define PropertyChangeEvent callback methods in the form class.
3. Highlight the form's action-producing components (for example, buttons) in the Component Tree and use the events page to define ActionEvent callback methods in the form class.
4. Switch to the Source Context.
5. Create instance variables for all of the inputs and update the property change callbacks to set them appropriately.
6. Update the action callbacks to use the instance variables, call the business logic, and update the form or spawn events as appropriate.

Video

View the short video walkthrough (887k, 1:42) to observe the techniques described in this section.

Details

Take a moment to use what you have learned so far to create another form component. The new form component will be the screen loaded when the user successfully authenticates herself. Name the form component PortalScreen. To keep things simple, the screen can simply contain a Label with the text My Magnificant Portal Screen. Alternatively, you can make the screen as intricate as you'd like.

Use the EchoStudio Project Overview to open the LoginScreen by double-clicking on the form component's name in the Forms section. (Figure 1) Find the Component Editor in the bottom-left where you edited component properties in previous chapters. Notice the tabs above the component editor and click the Events tab. (Figure 2)

In the Component Tree in the upper-left, select the form's TextField. The Component Editor changes to reflect the events spawned by the currently selected component -- just as it did for properties. (Figure 3) The groups represent each event class fired by the component. Each group contains the methods of the listener class for that event in the left column. In the right column, you define a method in your form component to be called when the corresponding listener method is invoked. For the TextField, click on the PropertyChange event's propertyChange delegate method name in the right column. With that highlighted, hit [Tab] to move to the right column and enter setUsername. (Figure 4)

For the PasswordField, set the PropertyChange event's propertyChange delegate method to setPassword. For the login Button, set the Action event's actionPerformed delegate method to attemptLogin. (Figure 5)

Next, find the tabs in the bottom-left of the Form Editor and click the Source tab. (Figure 6) You are now in the Source Context of the Form Editor. From this screen you can alter the source code of your form components. Add the String instance variables username and password to the LoginScreen. (Figure 7)

Find the setUsername() method that EchoStudio created for you and change its contents to:

this.username = (String) e.getNewValue();

Find the setPassword() method and change its contents to:

this.password = (String) e.getNewValue();

Change the attemptLogin() method to validate the username and password. If valid, set the contents of the window to the PortalScreen. Otherwise, make the errorMessage component visible. The code is shown below:

boolean valid = false;

valid = (this.username.equals("admin") &&
            this.password.equals("password"));

if (valid) {
  Window win = (Window) getParent();
  win.setContent(new PortalScreen());
} else {
  this.errorMessage.setVisible(true);
}

With these updates, you should have a file similar to one shown in (Figure 8). Save the file, then launch the application and test your screen using the technique described at the end of the previous chapter. Try using invalid user names and passwords, then try the correct login and password. Remember to terminate your application when you are done testing it.