Our final CSS file
Figure 3-34. The styling
CSS for our panel with
substyles in Flex Builder
65
WORKING WITH STATES
33. In the Source view of our project, add the code in Figure 3-36.
Figure 3-36. This code associates the MXML with the CSS.
Let??™s jump back to the Design view so that we can tell Flex which panel we want to associate with each
piece of CSS. In the Design view if you look at the properties of the panel, you will see that the Style
pulldown menu contains the names that we gave to our CSS (Figure 3-37).
Figure 3-37. Our CSS styles are available in the
pulldown menu.
34. Select the correct CSS style for each of the panels and you will find that you can set different
styles for different panels.
Figure 3-38 shows one of the panels with the rightPanel style applied and the second without it. You
can see that the color is the same on both??”we set the color in the Universal panel style we created.
However, the other aspects of the panel (namely, the sharp corners, font, and lack of drop shadow)
are specified by the rightPanel CSS.
66
CHAPTER 3
Figure 3-38. Panels with two different styles
The same process applies if you want to have different styles for your other components. The label
About Me changed through its properties to fit in with the CSS styling.
35. Change the properties of the About Me label to match Figure 3-39.
Figure 3-39. About Me label properties
67
WORKING WITH STATES
36. With this complete, run your project and see how the different styling affects each set of Panel
components??”the project should look like Figure 3-40.
Pages:
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68