Your First Application in 20 Minutes › Introducing the Panel Designer › Defining a Multi-line Edit Control

Defining a Multi-line Edit Control

In this set of steps, you modify the panel displayed by Project.Edit so that it displays more than one line of text, and so that it does not run off the edge of the dialog.

To modify Project.Edit.Panel:

1. Arrange the Panel Designer windows so that they do not overlap, and you can work with the contents of each.

   You must select an element on a panel to make a change to it. To select only the element, and not the region it is in, you use the Panel Palette.

2. If it is not already expanded, expand Panel to display the regions on the Edit panel.
3. Expand the DetailP region, and then expand the Project Description field.

   

4. Select the Edit control.

   The values in the Property Sheet indicate the properties you can change for the edit box. Also, notice in the Design Window that only the edit box next to the label Project Description is selected.

5. In the Design Window, drag the edit control below the label, so that its left edge lines up more or less with the j in the word Project. Do not be concerned that it covers up the Project Start Date field—this is fixed later.

   In the Property Sheet, the Position (Col, Row) property changes as you move the element. If you want to make fine tuning changes, you can specify the exact pixel location in the Property Sheet.

   The field still extends past the right edge of the panel.

6. In the Property Sheet, click the Size (Col, Row) property.
7. In the edit area at the top of the Property Sheet, change the value to 200, 20, and then click the check mark button.

   

   The edit control resizes so that it fits within the panel, and the beveled box that surrounds the fields resizes so that it is just slightly wider than the fields.

   

8. Now, drag the handle on the bottom center of the edit box to make the box taller. Make it about three times as tall.

   The panel should look something like this:

   

   You have repositioned and resized the Project Description edit box. Next, you set two properties that enable end users to enter more than one line of text in the edit box.

9. In the Property Sheet, double‑click the Multiline property to change its value from No to Yes.
10. Select the Scrolling property in the Property Sheet.

    Note: If the Scrolling property is not available, make sure that the value of the Multiline property changed from No to Yes.

    Notice that the input area at the top of the Property Sheet changed so that you can select a value from a list, but you cannot type in a value.

11. Select Vertical from the list.

    Setting the Scrolling property to Vertical causes the text in the multi-line edit box to wrap to the next line when the cursor reaches the right edge. If you did not set this option, text would continue on the first line off the edge of the field, rather than wrapping to the next.

    When you changed the size and shape of the Project Description edit box, it covered both the Project Start Date and the Project End date fields. Next, you move those two fields down.

12. In the Panel Palette, select the Project Start Date field in the DetailP region (without expanding it).

    

13. Holding the CTRL key down, select the Project End Date field. This selects both of the fields (you can see this in the Design Window).
14. In the Design Window, drag the fields so that they are below the bottom of the Project Description multi-line edit box.

    In the Design Window, you can see that the beveled box around the fields resizes to fit around all of the fields: