Adobe Flex 4 Training from the Source Volume 1 phần 9 ppsx

ptg 385 Applying Styles Tip: It is also possible to set styles on individual instances in ActionScript using the setStyle() method. For example, the same style could have been applied with this code: idOfControl.setStyle(“selectionColor”,0xEA800C); idOfControl.setStyle(“rollOverColor”,0xAAAAAA); NoTe: When using setStyle(), colors are prefixed with 0x, which is the ECMAScript standard prefix for hexadecimal numbers. When applying a style in an attribute or <mx:Style> tag (as you will soon see), you can use a pound sign ( #) instead of 0x. When set through ActionScript, numeric values (even those that are hexadecimal) do not have quotes around them. Although setStyle() is useful for times when styles need to change at runtime, use it sparingly. setStyle() causes many of the visible portions of an application to refresh, so it is a processor- intensive operation. Understanding Style Inheritance As you look at the ASDoc for various components, you can see that each style has a yes or no property for something called CSS inheritance. For example, in this gure you see that a few styles of the DropDownList control— selectionColor and rolloverColor—do allow CSS inheritance, whereas cornerRadius does not. What this means is that if a parent container of a DropDownList control has a value for selectionColor and the DropDownList control itself does not, the container’s value will be used. However, because cornerRadius does not support inheritance, even if a parent container had a value set for cornerRadius, the DropDownList control would use the default value because it does not inherit this value. From the Library of Wow! eBook Download from www.eBookTM.com ptg 386 LESSON : Customizing a Flex Application with Styles Setting Styles with the <fx:Style> Tag Many of you may have been exposed to CSS before when building web pages. You can also use many of the same CSS styles in your Flex applications. One way to do this is to add an <fx:Style> tag pair to the Application MXML document; you can write standard CSS style declarations between the open and close tags. Standard CSS tends to have style properties whose names are all lowercase and uses hyphens as a separator between words: background-color : #FFFFFF; In the previous exercise, you used multiword styles by declaring them with camel case syntax; that is, the style declaration started with a lowercase letter and each subsequent word started with an uppercase letter, with no spaces or hyphens used: <s:DropDownList rollOverColor=”#AAAAAA”/> e reason for the dierence is that a hyphen is not a valid character for an XML attribute, and MXML tags are all XML tags. To work around this, when you set style names via attri- butes, set them with the ActionScript equivalent of the style name. So, for example, you use backgroundColor instead of background-color. e lowercase hyphened versions of style properties are available only for properties that exist within traditional CSS. Any styles created specically for Flex (such as rollOverColor) are available only in camel case. When you specify a style within an <fx:Style> tag, you can use either syntax, and Flex will apply it properly. <fx:Style> .custom DropDo w n{ selection-color: #AAAAAA; } </fx:Style> or <fx:Style> .custom DropDo w n{ selectionColor: #AAAAAA; } </fx:Style> Flex supports several ways to assign multiple styles at one time via CSS. ese include class selectors, type (sometimes called element) selectors, descendant selectors, pseudo-selectors, and ID selectors. From the Library of Wow! eBook Download from www.eBookTM.com ptg 387 Applying Styles Class Selectors A class selector denes a set of style properties as a single style class, which can then be applied to one or more components through the use of the component’s styleName property. <fx:Style> .custom DropDo w n { rollOverColor: #AAAAAA; selectionColor: #EA800C; } </fx:Style> <s:DropDownList styleName=”customDropDown”/> Here, the DropDownList control is using the customDropDown style class, which sets both the text rollOverColor and the selectionColor. You can use the styleName property to assign more than one style at a time to an instance by separating the style classes with a space: <fx:Style> .custom DropDo w n { rollOverColor: #AAAAAA; selectionColor: #EA800C; } .blueStyle { color: blue; } </fx:Style> <s:DropDownList styleName=”customDropDown blueStyle”/> In this case, the DropDownList control is using the customDropDown style class and the blueStyle style class, which sets the rollOverColor, selectionColor, and color of the text. Type Selectors A type selector enables you to specify a set of styles that will be applied to all instances of a type of component. In HTML applications, you can do this to dene the look of an <H1> tag for your site. e same basic syntactic structure works to dene a set of styles to be applied to all instances of a type of Flex control. roughout this book you have worked frequently with namespaces. Flex uses namespaces as a means of clarication. is clarication allows you to specify the type of label you want, as in <s:Label/>, or perhaps which custom component you meant when indicating <views:ShoppingView/>. In ActionScript, you can have multiple classes with the same name but not in the same namespace. So, you could have a Test class in your views package and your components package, but you could not have two Test classes in the views package. Namespaces allow you to be specic about the component you intend to address and ensure that the Flex compiler doesn’t need to guess your intent. From the Library of Wow! eBook Download from www.eBookTM.com ptg 388 LESSON : Customizing a Flex Application with Styles e same concept is used when styling in CSS: <fx:Style> @namespace s “library://ns.adobe.com/flex/spark”; @namespace mx “library://ns.adobe.com/flex/mx”; s|DropDownList { selectionColor: #EA800C; cornerRadius:5; } </fx:Style> <s:DropDownList id=”stateProvenceCombo”/> <s:DropDownList id=”countryCombo”/> In this example, the cornerRadius and selectionColor style properties are being applied to all DropDownList control instances in the Spark (s) namespace. Tip: The terms type and class selector might seem counterintuitive if you haven’t previously worked with CSS. These terms come from CSS standards, not from Adobe or Flex. The confusion is that a type selector is what you would use to affect all instances of an ActionScript class; a class selector has no relation to any ActionScript class, but instead defines a style class that can be used on several elements. In this exercise, you will build a class selector and apply it to an <mx:Form> tag in CreditCardInfo.mxml. Not only will this showcase the use of a class selector, but you will also see style inheritance in use as the style will be inherited by all the DropDownList controls in that form. 1 Open FlexGrocer.mxml. 2 Just aer the closing </fx:Script> tag, add a new <fx:Style> tag pair. When you add this tag, Flash Builder’s code completion will take over and add a namespace for every namespace presently dened in the application. Your Style tag should look like the following: <fx:Style> @namespace s “library://ns.adobe.com/flex/spark”; @namespace mx “library://ns.adobe.com/flex/mx”; @namespace views “views.*”; @namespace services “services.*”; @namespace cart “cart.*”; </fx:Style> Yo u n o w h a v e a n <fx:Style> block, in which you can create type or class selectors. From the Library of Wow! eBook Download from www.eBookTM.com ptg 389 Applying Styles 3 Inside the <fx:Style> block, create a class selector called customDropDown that species a selectionColor of #EA800C and a rollOverColor of #AAAAAA. <fx:Style> @namespace s “library://ns.adobe.com/flex/spark”; @namespace mx “library://ns.adobe.com/flex/mx”; @namespace views “views.*”; @namespace services “services.*”; @namespace cart “cart.*”; .custom Dro pD own{ selectionColor:#EA800C; rollOverColor:#AAAAAA; } </fx:Style> As with traditional CSS, but unlike style properties set as attributes, no quotes are used around the values of the style properties. 4 Open CreditCardInfo.mxml. 5 Remove the rollOverColor and selectionColor attributes of the DropDownList control. Instead, specify a styleName of customDropDown as an attribute on that ComboBox control: <s:DropDownList selectedItem="@{orderInfo.cardType}" requireSelection="true" styleName="customDropDown"> 6 Save both CreditCardInfo.mxml and FlexGrocer.mxml, and then run the application. e DropDownList instances in the Checkout section should behave exactly as they did before. e Credit Card Type will have custom colors, whereas the other two show the default colors. 7 Cut styleName=”customDropDown” from the DropDownList and instead paste it as an attribute of the <mx:Form> tag: <mx:Form styleName="customDropDown"> Because the form contains three DropDownList controls, applying these inheriting styles to the form will aect all the DropDownList controls within the form. 8 Save and run the application. Ver if y that the styl e i s n ow appl ie d t o a ll th re e Drop Down Li st cont ro ls i n t he form. From the Library of Wow! eBook Download from www.eBookTM.com ptg 390 LESSON : Customizing a Flex Application with Styles Setting Styles with CSS Files Yo u c a n u s e a n <fx:Style> tag to either dene a block of styles inline on the MXML docu- ment, as you did in the previous exercise, or use its source attribute to specify an external CSS le to be compiled into the application. <fx:Style source=”path/to/file.css”/> One great advantage of using an external le is that you can share CSS les between multiple Flex applications, or even between Flex and HTML applications. is is possible because CSS parsers in both Flex and HTML are smart enough to ignore any declarations they don’t under- stand. So even if Flex supports only a subset of standard CSS, and in fact creates a number of its own custom declarations, neither your HTML nor your Flex applications will be hurt by declarations they cannot understand. In this exercise, you will create a CSS le and begin to style the FlexGrocer application. 1 Right-click the assets package of the Package Explorer. Choose New > File. From the Library of Wow! eBook Download from www.eBookTM.com ptg 391 Applying Styles 2 Enter defaultStore.css as the name in the New File dialog box and click Finish. Flash Builder creates a new, completely blank le for your customization. 3 Open FlexGrocer.mxml, nd your <fx:Style> tag, and cut everything between the open- ing and closing tags. Paste this content into defaultStore.css. Your CSS le should have the following information: @namespace s “library://ns.adobe.com/flex/spark”; @namespace mx “library://ns.adobe.com/flex/mx”; @namespace views “views.*”; @namespace services “services.*”; @namespace cart “cart.*”; .custom DropDo w n{ selectionColor:#EA800C; rollOverColor:#AAAAAA; } From the Library of Wow! eBook Download from www.eBookTM.com ptg 392 LESSON : Customizing a Flex Application with Styles Save this le. You might notice that the Outline view of Flash Builder understands CSS les as well as MXML and ActionScript. As your CSS becomes more complicated, the Outline view can be a great way to navigate through the le. As a best practice, all styles for the application are dened in a single style sheet. is way, if you want to change the look and feel of the application at a later time, you don’t need to dig through the code to nd all the places where styles were applied; instead, you can restyle the application by changing only one le. 4 Return to FlexGrocer.mxml and nd the <fx:Style> tag again. Convert the style tag from a tag pair to a single self-closing tag. Add a source attribute to the tag and sets its value to assets/defaultStore.css. <fx:Style source="assets/defaultStore.css"/> FlexGrocer will now use the external CSS le found in the assets directory for its style information. 5 Save FlexGrocer.mxml and run the application. If all went as expected, the application will run and your DropDownList instances will still have custom coloring in the CreditCardInfo form. Adding More Styling to the Application Yo u w i l l n o w h a v e t h e o p p o r t u n i t y t o w o r k w i t h s o m e o f t h e o t h e r C S S s e l e c t o r s t o a p p l y styles to your application and components. 1 Open the defaultStore.css le you worked on in the previous exercise. 2 Just above the selector for the customDropDown, you will embed a font for your FlexGrocer application using the CSS syntax. Do this by adding the following code: @font-face { src: url(“assets/fonts/SaccoVanzetti.ttf”); From the Library of Wow! eBook Download from www.eBookTM.com ptg 393 Applying Styles fontFamily: SaccoVanzetti; } is code embeds the SaccoVanzetti font found in your assets folder. It associates that font with the fontFamily SaccoVanzetti, which you will use to refer to this font elsewhere. Embedding a font means the font is literally included in your application. is ensures that a user will be able to display the font exactly as you intended it to be seen—but it comes with a price. Just like embedding images or other assets, each time you embed a font, your application le size becomes larger. e SaccoVanzetti font is part of the Open Font Library, which shares fonts under a Creative Commons License. Find more information about this font at http://openfontlibrary.org/media/les/Daniel_J/381. Although the font will now be included in your application, you have not specied where to use it. 3 Add a new type selector for the Application in the Spark namespace and specify that the Application class use the SaccoVanzetti font family. s|Application { fontFamily: SaccoVanzetti; } is small bit of code has several important concepts. First, you are indicating that you want to style the Application class in the Spark namespace. How do you know that? ere are a few steps to unwinding this mystery. First, notice that in your CSS le that there is a declaration on top for the Spark namespace. is line says you are going to use the letter s to represent the namespace found at the longer URL: @namespace s “library://ns.adobe.com/flex/spark”; When you specify s|Ap plication in your CSS le, you are clarifying that you mean the Application class found in the namespace represented by the letter s. If you were to look in your FlexGrocer application le, you would see a similar namespace declaration in the root tag: xmlns:s=”library://ns.adobe.com/flex/spark” e dierence in syntax is due to a dierence in language. e @namespace declaration is how CSS denes namespaces. e xmlns declaration is how XML denes a namespace. e advantage of a standards-based language like Flex is a common set of ideas and From the Library of Wow! eBook Download from www.eBookTM.com ptg 394 LESSON : Customizing a Flex Application with Styles languages that can be used between the web and your applications. e disadvantage of using all these standards is that, if you did not come from a background that uses all these discrete syntax elements, you sometimes need to learn several ways to say the same thing at the same time. Ultimately, both namespaces are a way of referring to the same set of components. Because your FlexGrocer application begins with an <s:Application> tag, the small snip- pet of code that you added to your CSS le eectively indicates that you want to use this font for your main application. Further, because the fontFamily is generally an inheriting style, by setting this style on your main application, you ensure that the same font will be used by all the controls in your project. 4 Right-click the FlexGrocer project and choose Properties. From the le side of the menu that appears in the dialog box, choose Flex Compiler. en under Compiler Options, select the check box Use Flash Text Engine in MX components. From the Library of Wow! eBook Download from www.eBookTM.com [...]... right= 17 1” As the FlexGrocer button is now much larger than it was, the List component doesn’t fit properly in the screen, so the category list will be constrained to stay 17 1 pixels from the right edge of the screen 10 To prevent the category list from overlapping the logo if the browser is resized too small, set minWidth= 10 24 in the top Application tag This block defines a Rectangle that will fill the component, except for 1 pixel on each of the four sides Download from www.eBookTM.com From the Library of Wow! eBook 41 4 LESSON 17 : Customizing a Flex Application with Skins 3 Add a tag pair to specify the fill property of the rectangle ... skin-class:ClassReference(‘skins.FlexGrocerButtonSkin’); color: #11 11b9; corner-radius:5; } Download from www.eBookTM.com From the Library of Wow! eBook Creating a Skin for the Application 41 9 Save the CSS file and run the application You should find the new look and feel in use throughout the application for buttons that don’t already have their styles set more explicitly Creating a Skin for the Application As you... Download from www.eBookTM.com From the Library of Wow! eBook 41 8 LESSON 17 : Customizing a Flex Application with Skins As those rectangles are no longer in existence, you need to remove any references to them in the code The ButtonSkin is now complete; next you will apply the skin to all Spark Buttons by using the CSS file 14 Save and close FlexGrocerButtonSkin, and then open defaultStore.css from the assets... of the components is separated from the look of the component In this lesson, you will learn how to adjust the look of the components through the use of skins In this exercise you will create a skin for the FlexGrocer button on the homepage Up to this point, this button has simply had the text FlexGrocer on it You will now modify the skin so it will display the FlexGrocer logo instead 1 Open your FlexGrocer... Download from www.eBookTM.com From the Library of Wow! eBook 41 6 LESSON 17 : Customizing a Flex Application with Skins 8 Name the skin FlexGrocerButtonSkin, specify spark.components.Button as the Host component, and create it as a copy of spark.skins.spark.ButtonSkin 9 In FlexGrocerButtonSkin.mxml, scroll down to the s:Rect tag with the id of fill Find the first GradientEntry in the LinearGradient Change the. .. their graphics as FXG, so you can use them directly in your Flex application The reality is you can do exactly the same thing with both FXG and the Flash Drawing API Consider the following, which draws a similar red box with a blue border twice: first with FXG and then with the AS3 Drawing API Download from www.eBookTM.com From the Library of Wow! eBook The Relationship between Skins and States 41 1. .. and States 41 7 10 Delete the next five rectangles The design for the application’s buttons do not require a lowlight, highlight, or highlight stroke 11 The next Rect down has an id of border Remove the child tags for the stroke from the Rect, and replace it with an instance of the SolidColorStroke class Specify a color of the SolidColorStroke to be mint green (#8eb3 94 ) with an alpha of 1 and a disabled... don’t see the code-hinting, press Ctrl-Spacebar while your cursor is between the open and closing quotes of the attribute.) Choose the Create Skin option Download from www.eBookTM.com From the Library of Wow! eBook 42 0 LESSON 17 : Customizing a Flex Application with Skins 2 In the New MXML Skin dialog box, specify skins as the package, FlexGrocerApplicationSkin as the Name, and FlexGrocer as the Host... id="drawingGroup" x= "10 0" y="260"/> In this example, two states are defined: a normal and an over state The state is switched as you move the mouse over or off the rectangle The fill and stroke of the rectangle are defined to Download from www.eBookTM.com From the Library of Wow! eBook The Relationship between Skins and States 41 3 change in the over state This is how Flex achieves the different . ensure that the same font will be used by all the controls in your project. 4 Right-click the FlexGrocer project and choose Properties. From the le side of the menu that appears in the dialog. apply the color style to any control with an id of myLabel. 1 Open the defaultStore.css le. From the Library of Wow! eBook Download from www.eBookTM.com ptg 399 Applying Styles 2 Just under the. the application, which loads a dierent style sheet depending on the domain from which the application has been loaded. From the Library of Wow! eBook Download from www.eBookTM.com ptg 40 1 Changing