View states allow you to create different
presentation layouts without having to create separate MXML documents and refresh the browsing
window. Changing the states makes some objects disappear and some appear as you need them. In
essence, this gives the illusion of multiple pages, but with simpler design and no page reloads.
Building a personal website
Let??™s illustrate by creating a personal page. The final product will look something like Figure 3-1 and
can be found at http://lordalex.org/flex4designers/Chapter%203/bin/PersonalWebsite.html.
Figure 3-1. The base state of the personal page
46
CHAPTER 3
This will be the base state of the project, or how it will look on initial load. Clicking the Send me an
email button will jump us to our second state, which contains a feedback form that can be used to
send Greg an e-mail, as shown in Figure 3-2.
Figure 3-2. ContactMe state of the personal page
This will be called the ContactMe state. As you can see, most of the content is the same and so will not
have to be reloaded. Instead, just the bio text becomes hidden and the e-mail form becomes visible. We
will not get into making the e-mail form functional, as it is not important for the purpose of this chapter.
47
WORKING WITH STATES
Setting up the project
We will be building this project from scratch.
1. Let??™s get moving on this example by starting a new project (Figure 3-3).
Figure 3-3. Select File ?¤ New ?¤ Flex Project.
2. Call the project personalPage and place it in the default Flex folder.
Pages:
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58