A transition is added to the Accordion by default
to give a better effect.
Adding content
You can drop components directly onto the content area of each pane. Using the Form component as
the container in each pane helps us quickly create the layout for this example.
14. Select Step 1 ??“ Basic Info to show the content area for the first pane.
15. Drag a FormHeading component onto this area. Notice that regardless of where in the area you
place it, the component moves to the top left. This is an example of the layout help that a Form
component gives us.
16. For the Label of this FormHeading, type Who are ya. For best practice, for the ID, type WhoAreYa
(Figure 11-14).
17. Drag a TextInput component below the FormHeading. Notice that, because we are laying this
content onto a Form component, the TextInput is automatically placed inside a FormItem. This
gives our TextInput a label along the left and helps with layout. For the Label of the FormItem,
enter Handle: and for the ID, type Handle (Figure 11-15).
226
CHAPTER 11
Figure 11-14. Pane with Form heading
Figure 11-15. FormItem with TextInput added
18. Repeat step 17 to create a FormItem and TextInput for the user??™s Real Name.
227
CREATING FORMS: THE ???WILL FLEX FOR FOOD??? REGISTRATION PAGE
Adding combo boxes
In the same way that it worked with the TextInput component, adding a ComboBox to the form creates
a label next to it. This is because the ComboBox gets placed into a FormItem.
19. Repeat steps 15, 16, and 17 with the FormHeadings and ComboBoxes to create the layout shown
in Figure 11-16.
Pages:
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161