Quick Start: Form Layout

Overview

1. Use the Forms section of the Project Overview to create a new form component.
2. Provide a name for the form component and specify the component class it extends.
3. In the Design Context of the Form Editor, use the Component Tree to add layout and input components.
4. Highlight components in the Component Tree to view and edit their properties in the Component Editor.

Details

In this chapter, you will learn how to layout a form using the Component Tree and the Component Editor by assembling the components for a login screen. The desired visual layout can be seen in (Figure 1). The images used for this form are available here (logo) and here (button). You may use these images for purposes of completing this tutorial, or you are encouraged to use your own images.

Due to the extremely visual nature of this portion of the tutorial, it would become incredibly tedious to describe each interaction required to build the form. The sections below will have greater brevity than found in other parts of this tutorial, and will concentrate on explanation.

Creating a New Form Component

In the Project Overview page, find the Forms section. (Figure 2) Click the New Form Component... button to open the New Echo Form Component window. (Figure 3) The form should extend ContentPane and be named LoginScreen. Click Finish. You should now be presented with your form opened in the Design Context of the EchoStudio Form Editor. (Figure 4)

Adding the Outer Column

In the upper-left you will find the Component Tree. At this time, it should only contain a single node. Above and to the right of the tree is the Toolbox with buttons for the standard Echo components. Note that the Toolbox has multiple tabs containing different categories of components.

Click the node in the tree to highlight it. In the Toolbox, find the button for the Column component and click it. Highlight the newly added component in the tree. (Figure 5) Notice that the Component Editor in the bottom left has changed to reflect the currently highlighted component in the tree.

Populating the Outer Column

With the Column selected, add a Label to it. (Figure 6) This label will hold the company logo. Select the Label. Set its text property to an empty string. Click on its icon property to choose the image to be used. Click on the ... button to open the ImageReference Editor window. Click the Add Resource Image button to open another window. In that window, click the Browse button and use the file chooser to select your image file. Click OK to close the window and return to the ImageReference Editor. (Figure 7) Click OK to use the image as the component's icon.

Now select the Column again and add another Label to it. (Figure 9) This label will be the error message to be displayed when the user enters an invalid username or password. Set the Field Identifier to errorMessage and Field Visibility to Private. Set the font property to Bold and the foreground color property to red. Set the text property to Invalid user name or password. and the visible property to false. (Figure 9) Notice that when you set the component's visibilty to false, the component will no longer appear in the preview on the right.

Finally, add a Button to the Column. (Figure 10) This will be the login button used to request authentication from the server. Clear the text and set the icon image just like you did for the logo label, except use a button image this time.

Adding the Inner Grid

The outer container has now been assembled, you can now proceed to create the login/password input fields. These fields will be arranged using a Grid with four cells, arranged as in a 2x2 formation:

Select the Column, and add a Grid to it. The grid will initially appear below the login button. Press the up arrow button once with the grid selected to move it above the button (you can also drag/drop components within the hierarchy if preferred).

Populating the Inner Grid

Now, add these four components to the Grid in this order, a Label, a TextField, another Label, and finally a PasswordField. Set the text property of the first label to Username:, and the text of the second label to Password:. (Figure 11)

Tweaking the Layout

In its present state, the login/password fields and their associated labels "run together". This issue can be corrected by adding GridLayoutData properties to the labels with inset-margins on their right-hand sides to space them away from the text fields.