This chapter is from the book
This chapter is from the book
This chapter is from the book
CSS Design View
One of the new features of Flex Builder 3 is CSS Design View, which allows you to visually edit styles within a CSS file. In this view, you are presented with the various component parts that can be styled, as well as any available states. You can also do things like zoom in and out for pixel perfect accuracy, pan around using the Hand tool, or add and remove styles. Figure 4-10 is a snapshot of CSS Design View for the CSS of the styling of a button.
)
Figure 4-10 CSS Design View of a styled button
In CSS Design View, you can also easily assign other visual parameters like icons, fonts, and skins for your components. Refer to Chapters 5 or 9 for more information on using those features of CSS Design View.
In CSS Design View, you can also easily navigate between different styles. You can do this by selecting a style from the Style Combo Box. You can also move throughout the CSS code structure of your CSS file using the Outline panel (see Figure 4-11) when in CSS Source View, which you can access by selecting Window > Outline. Clicking on any of the properties in the Outline structure jumps you to the corresponding CSS code.
)
Figure 4-11 CSS Outline View with button styling and embedded font
Working in CSS Design View is a quick and easy way to get instant feedback on the look of a styled component. It's great for quick prototyping and rapid development. However, you may find it helpful to become familiar with working in the CSS Source View for code formatting and taking advantage of some of the tips discussed in this chapter.