This chapter is from the book
This chapter is from the book
This chapter is from the book
Styling in Design View
You don't always have to assign styling properties to components directly in the Source View of Flex Builder. In Design View, you can access all the style properties for any component in the Flex Properties panel (Window > Flex Properties). With the Flex Properties panel visible, you can select any component to access visual selectors for the styles of that component. Figure 4-6 shows what the Flex Properties panel looks like when selecting a Button in Design View. You can also access other style properties in this same panel, as shown in Figure 4-7.
)
Figure 4-6 Styles for a button within the Flex Properties panel
)
Figure 4-7 Accessing other style properties via the Flex Properties panel
Whenever you make changes to the styling of a component using the Flex Properties panel, the styles will be created inline of the component's MXML. However, you can easily convert your inline styling to CSS to use throughout your application. In Flex Builder, this is really easy to do by following these steps:
- Once you have created styling for a particular component, select that component and, in the Flex Properties panel, click the Convert to CSS button as shown in Figure 4-8.
Figure 4-8 The Convert to CSS button
- When you click the Convert to CSS button, the New Style Rule window appears (see Figure 4-9). If you don't have a CSS file already created, you can click the New button to create one to hold your new style.
Figure 4-9 The New Style Rule window
- With your CSS file specified, you can select to apply the styling globally, as a type selector, to a specific component, or to a component using a style name. You can refer to the "Understanding CSS Selectors" section in this chapter for more information on the differences between these options. After selecting your desired option, click OK.
- When you click OK, the appropriate CSS is written to the specified CSS file and you are taken into CSS Design View where you have additional options to customize your components using a more visual tool set.
)
)