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.

Video

This section of the tutorial involves significant visual interaction with EchoStudio. You are highly encouraged to view the video walkthrough to observe the techniques described in this section.

Due to the length of the video, it has been split into two parts for ease of viewing.

• Part 1 (966k, 1:36)
• Part 2 (1.2M, 1:42)

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. You are encouraged to review the video for this chapter, above, to learn how the interactions are performed.

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 Grid

In the upper-left you will find the Component Tree. At this time, it should only contain a single node. Then, to the left of the tree is the Toolbox with buttons for the standard Echo components.

Click the node in the tree to highlight it. In the Toolbox, find the button for the Grid 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. In the Component Editor, find the columns property and set it to 1.

With the Grid still highlighted, find the Grid$Cell button in the Toolbox and click it four times. (Figure 6)

Populating the Outer Grid

Select the top cell in the grid and add a Label to it. (Figure 7) 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 8) Click OK to use the image as the component's icon.

Now select the second cell in the grid and add a 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 10) Notice that when to set the component's visibilty to false, the component will no longer appear in the preview on the right.

In the last cell, add a Button. (Figure 11) This will be the login button to submit the form. 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

In the third cell, above the login button, place another Grid with 2 columns. (Figure 12) To the new grid, add four Grid$Cells. (Figure 13) Since this grid has two columns, the four cells will be arranged as in a 2x2 formation:

Populating the Inner Grid

In the first cell of the new Grid, place a Label with the text of Username:. Include a space after the colon. In the third cell, Grid, place a Label with the text of Password:. Include a space after the colon. (Figure 14)

In the second cell of the new Grid, place a TextField. In the fourth cell, place a PasswordField. (Figure 15)

Tweaking the Layout

For each cell of the inner grid, set the verticalAlignment property to Center. For each cell of the outer grid, set the horizontalAlignment property to Center.

Centering the Form on the Screen

If you would like the form to be centered on the screen, continue with the steps below. These steps are skipped in the video.

1. Add another Grid to the ContentPane.
2. Tell the new Grid to fill the screen by setting its height and width properties to 100 and its heightUnits and widthUnits properties to Percent.
3. Add a single Grid$Cell to the new Grid.
4. Set the cell's horizontalAlignment and verticalAlignment properties to Center.
5. Drag and drop the original Grid into the cell you just created.