rocky的空间

应用程序向导

In the previous four modules, you learned to create, debug and deploy a Flex application. In this module, you'll learn how to change the appearance of the application using styling and skinning. With styling, you set component styles inline in MXML or preferably in a style sheet, using selectors. Each component has a limited number of styles defined for it. If you want to change the appearance of a component more drastically than possible with component styles, you need to create or edit the associated component skin, the file specifying what the component should look like. By following the steps below, you'll learn to create a style sheet and to find style rules that you apply to your application. You'll start by creating a style sheet and defining global styles for the application. To do this, you'll need to be in design view, and then select the appearance panel. With the appearance panel selected, you can make changes to the global application styles, such as the font, the text size and then colors used in the application. You'll need to make changes to the chrome color, the selection color, the rollover color and the focus color for the application. Whilst you've been making changes to the global application styles, Flash Builder has created a new TestDrive.css file and referenced it from your application MXML file. You should open up the TestDrive.css file in the Package Explorer to see the code that Flash Builder has written for you. In addition to specifying global application styles, you can also define styles for types of component or individual instances of a component. In this application, we want to change the value for the corner radius of all the buttons. To do this, you'll return to design view and select a button on the design surface. With the button selected, you'll use the properties view to specify the corner radius value. This change will only affect the currently selected button. You'll then need to use the convert to CSS button and in the dialog, select the selector type and specific component. With this applied, Flash Builder will create a new style property in the CSS file that specifies the corner radius for all buttons in the application. Back in design view, you can see the change has been made, and all buttons now have a corner radius of the value 5. To specify additional style properties for the button component, you'll return to the CSS file and make changes to the CSS selector for the button. Here you'll specify the font weight and also the color of the text for the button. After making changes in the CSS file for your application, you'll need to save the file before the changes will show up in Flash Builder's design view. You've now seen how to define global and type CSS styles for your application. By completing the tutorial, you'll also learn about class, pseudo and ID selectors that you can apply to components. In the next tutorial, you'll learn how to change the appearance of a component more drastically by extending a default component skin and adding additional components to it.

hefengrock 发布在 翻译例文  |  发布时间: 01:13PM Sep 01, 2010  |  评论[1]