The trick is to pull out the CSS styling piece by piece instead of all at once.
26. Start by creating a new CSS file called style inside the project as shown in Figure 3-26.
Figure 3-26. Creating a new CSS file
61
WORKING WITH STATES
We will still use Flex Style Explorer to get the bulk of the CSS, but we??™ll modify some of it to make our
panels have different styles.
27. Open the Flex Style Explorer and select the Panel component (Figure 3-27).
Figure 3-27. Using the Style Explorer to create styling CSS for our panel
28. For the Panel component, set the border color to a lighter color, for example, #fce6b9. Notice
that as soon as you do that, the color of the border changes and the CSS for that change
appears in the CSS panel in the Style Explorer (Figure 3-28).
Figure 3-28. Color change in the Style Explorer
62
CHAPTER 3
29. Copy and paste this CSS straight from here into the CSS file in the Flex project (Figure 3-29).
Figure 3-29. Paste the CSS from the panel
into the CSS file in the Flex project.
30. Continue to make the changes with the Style Explorer that you want to see on the main Panel
component (Figure 3-30). Then copy and paste the CSS that is generated into your CSS file.
Figure 3-30. Modifying our panel component in the Style Explorer
You should end up with a CSS file that looks like Figure 3-31.
Figure 3-31. Pasting the styling CSS from the Style
Explorer into our CSS file in Flex Builder
We want to make this CSS file have multiple styles for different panels.
Pages:
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66