The Form component allows you to place all
the pieces of your form, in this case, TextAreas and TextInputs, onto one component and move them
around together. The Form component also does one more very neat thing: it adds a label next to the
component that you place on top of it. This saves time and keeps things aligned.
19. Drag a Form component onto the project and stretch it out to cover the area that you want in
your layout. Onto this component, add a TextInput (Figure 3-20).
Figure 3-20. Our form with a TextInput component
Notice that the TextInput automatically becomes aligned and gets a label next to it. The Form component
is meant for structured forms, and so follows tighter alignment rules.
20. Change the name of the label, either by double-clicking it or by changing the properties, to
Name:.
21. Bring in a second TextInput for the sender??™s e-mail address, and a TextArea for the body of the
e-mail (Figure 3-21).
22. Add two buttons to this form, one a Send button that would normally send the e-mail that is
written, and a back button to let the user get back to the first state.
This second button will be labeled Return to About Me. Now the form is complete. Make sure you place
the Send Email and Return to About Me buttons outside the form area or these buttons will get labels
and be aligned with the form elements??”that is not what we want. Your form should now look like
Figure 3-22.
We will be using the two buttons that we have created, the Send Email button in the base state and the
Return to About Me button in the ContactMe state to jump between states.
Pages:
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64