Figure 3-11. Our personal page design with the ???Who he is??? panel added
The easiest way to bring the text into the panel is through a series of labels. The Label component can
be found in the Controls folder and is essentially a simple piece of text that you can put just about
anywhere.
12. Build the content of the panel by placing a label for each topic.
The automatic guidelines are very useful when doing a layout like this (Figure 3-12).
The topic titles, such as Name:, should be bolded, while the remaining text should have no bolding.
Once you have filled in all the text, you can change the size of the panel, as shown in Figure 3-13.
Figure 3-12. Automatic guidelines Figure 3-13. Resizing the panel
53
WORKING WITH STATES
13. Repeat the same process to create the other two panels on the right side (Figure 3-14).
Figure 3-14. The personal page with images and panels
The text below the images will change when the Send me an email button is clicked, but we??™ll build it
using the same techniques.
14. Bring in a TextArea component and fill it with either your bio or greeked text.
You can double-click on a TextArea component to enter text. At this point, also add a label and a button
above the text area, as shown in Figure 3-15.
54
CHAPTER 3
Figure 3-15. The personal page base state layout with content
The button should have the label Send me an email; it will be used to jump to the next state. The label
on the left should have the text About me and is there to make the layout look pretty.
Pages:
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62