Sizing and aligning visual parts
To clean up the appearance of your user interface, use the sizing and aligning tools from the tool bar on the Composition Editor. The tool bar provides several different tools for sizing and aligning parts. You'll learn a great deal about how to use them by experimenting with the different tools.
The following steps explain how to match the size of two parts, align the parts with other parts, and evenly distribute the parts within another part. You'll learn more about sizing and changing parts in Manipulating parts.
Sizing, aligning, and distributing parts
The order in which you size, align, and distribute the parts is not always important. Usually, you start with the upper left corner and work your way through all the parts in the window.
First, select the Window part and then drag one of the selection handles (located on each of the four corners of the window) of the window to make it narrower.
To size the List part so it matches the width of the Text part, do the following:
1. Select the List part.
2. Hold down the Ctrl key to select multiple items and select the Text part using mouse button 1.
3. Select the Match Width tool
from the tool bar.
from the tool bar.
Because the Text part was selected last, it becomes the primary selection for the match width operation. The width of the List part is changed to match the width of the Text part.
To size, align, and distribute the Add push button and the Remove push button, do the following:
1. Select the Add push button, hold down the Ctrl key and multiple-select the Remove push button using mouse button 1. Then, select the Match Width tool
from the tool bar.
from the tool bar.
2. Because the push buttons remain selected, you can now align their top edges by selecting the Align Top tool
from the tool bar.
from the tool bar.
3. Because the push buttons are still selected, you can evenly distribute the push buttons in the window by selecting the Distribute Horizontally tool
from the tool bar.
from the tool bar.
To align the left side of the Text, List, and Label parts, do the following:
1. Move the Label part for the Text part to the position you want it in the Window.
2. Select the Text and List parts and their associated Label parts, making sure to select the Label of the Text part last.
3. By selecting the Label part last, it will be given primary selection for the alignment operation.
4. Select the Align Left tool
.
.
You have now completely finished the user interface of your To-Do List application. Next, you'll add a nonvisual part, which stores the data for the application.
Last modified date: 06/18/2018