O’Reilly Programming Flex 2 phần 8 potx

Using Styles | 317 pixels or points, though the result will always be the same regardless of what unit of measurement is specified (or if none is specified). This allows you to use the same stylesheets for your Flex applications that you might use with HTML applications. The following example sets the font-size property of a class selector to 15px, which is interpreted simply as 15 by Flex: .example { font-size: 15px } The Flex Style Explorer allows you to see what styles are available for Flex components, and you can adjust those settings in real time and see the generated CSS to create the style settings. You can view the Flex Style Explorer at http://www.adobe.com/go/flex_styles_explorer_app. Instance Styles Instance styles are the styles set for a specific component instance. You can set instance styles using MXML or ActionScript. Setting instance styles using MXML is often referred to as setting an inline style because you simply set the value for an attribute in the component tag. Here’s an example of a button component for which we’re setting the color style: <mx:Button label="Example" color="red" /> You can set many inline styles at the same time. Here’s the same button with addi- tional styles set inline: <mx:Button label="Example" color="red" borderColor="yellow" cornerRadius="10" fontStyle="italic" /> You can also set styles on an instance using ActionScript via the setStyle( ) method. The setStyle( ) method is defined by UIComponent, which means that you can call the method for all (visual) Flex components. The setStyle( ) method requires two parameters: the name of the style property as a string (e.g., color) and the value for the property. Here’s an example that sets a button component’s color style: button.setStyle("color", "red"); If you want to set many styles for a component, you need to call setStyle( ) for each style. Here’s an example that sets many styles for one component: button.setStyle("color", "red"); button.setStyle("borderColor", "yellow"); button.setStyle("cornerRadius", 10); button.setStyle("fontStyle", "italic"); If you apply styles using setStyle( ), you can change styles at runtime. That means you can use setStyle( ) to change a style even if it was set inline. Example 14-1 sets the color style both inline and with ActionScript. Because setStyle( ) is called after the inline style was applied, the button label appears in red rather than green. 318 | Chapter 14: Customizing Application Appearance If you want to retrieve the style value for a specific instance, you can use the getStyle( ) method. The getStyle( ) method requires a parameter specifying the name of the style. The method then returns the current value of the style. The follow- ing example retrieves the color style value for the button and displays it: <mx:Button id="button" label="Example" color="red" /> <mx:TextInput text="{button.getStyle('color').toString(16)}" /> Using CSS You can use CSS to define styles for components. Although you can use CSS that gets loaded at runtime, this section deals only with CSS that is compiled into the Flex application. (We’ll look at runtime CSS in the “Runtime CSS section, later in this chapter.) CSS is a standard way to apply styles across platforms, languages, and frameworks. The syntax of CSS in Flex is identical to the syntax of CSS as it is used by HTML. For example, here’s a sample class selector for a Flex application written in CSS: .example { color: red; } Note that even though the syntax of CSS in Flex is identical to that used by HTML, not all the style properties available in HTML are also available in Flex. When you define CSS for Flex applications, you have two basic options: external stylesheets and local style definitions. In both cases, the CSS is compiled into the Flex application, so they are functionally identical. However, there are advantages to each. External stylesheets enable you to more cleanly distinguish between layout (MXML) and style definitions (external CSS document). Additionally, when you use external stylesheets you can define the styles in one location but use them in many MXML documents without having to redefine them. On the other hand, local style Example 14-1. Setting a style with setStyle( ) <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initializeHandler(event)"> <mx:Script> <![CDATA[ private function initializeHandler(event:Event):void { button.setStyle("color", "red"); } ]]> </mx:Script> <mx:Button id="button" label="Example" color="green" /> </mx:Application> Using Styles | 319 definitions are more convenient when you intend to use the style or styles in just one MXML file. An external stylesheet is a text file that you compile into a Flex application by using the source attribute of a Style MXML tag. The following code is an example of a Style tag that compiles in an external stylesheet defined in styles.css. The styles defined in the external document are then available within the MXML document within which the Style tag appears. <mx:Style source="styles.css" /> If you want to define local style selector definitions, you can simply place the CSS between opening and closing Style tags, as in the following example: <mx:Style> .example { color: red; } </mx:Style> Whether you’re using external stylesheets or local style definitions, you can define the same sorts of style selectors: class selectors and type selectors. Class selector names always start with a dot ( .), as in the preceding example. A selector can define one or more styles. The preceding example defines just one style for the selector. The following example defines two styles for the selector: .example { color: red; font-style: italic; } When you want to apply a class selector to a component, you must set the styleName property of the component. The styleName value should be the name of the class selector without the initial dot. The following example sets the styleName property of a button to the example style selector: <mx:Button label="Example" styleName="example" /> If you want to set the styleName property of a component using ActionScript, use the standard dot syntax, as follows: button.styleName="example"; The other type of selector is called a type selector, and it automatically applies to all components of the type that match the name of the selector. For example, you can define a type selector called Button, and it automatically gets applied to all buttons: Button { color: red; } 320 | Chapter 14: Customizing Application Appearance Type selectors always take precedence over class selectors. Example 14-2 defines a type selector and a class selector. In this case, the font style is italic because the type selector sets it. However, because the class selector defines the color as green, the button label is green rather than red. Neither local style definitions nor external stylesheets take precedence inherently. If you use both in one document, you will see that the order in which they appear in the document is what determines which takes precedence. Let’s look at a complete example that illustrates this. Here’s styles.css, an external stylesheet document. It contains just one style definition, a class selector called example: .example { color: red; font-style: italic; } Example 14-3 is the MXML document that both uses this external stylesheet and has a local style definition for the same class selector. In this case, the button has a green and italicized label because the local style definition takes precedence over the exter- nal stylesheet, only because it appears after the external stylesheet include in the code. Example 14-2. Selector precedence <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Style> Button { color: red; font-style: italic; } .example { color: green; } </mx:Style> <mx:Button label="Example" styleName="example" /> </mx:Application> Example 14-3. Order of style tags affects styles (part 1) <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Style source="styles.css" /> <mx:Style> .example { color: green; } </mx:Style> <mx:Button label="Example" styleName="example" /> </mx:Application> Using Styles | 321 Yet, if you reverse the order of the two Style tags, as in Example 14-4, you’ll see that the button label is now red. Style Properties In Flex, all style property names must be capable of being treated as variables. For this reason, it’s necessary that all style property names follow the naming rules for variables, meaning they must consist of alphabetical and numeric characters. Nota- bly, variable names cannot contain hyphens. However, traditional CSS style prop- erty names use hyphens (e.g., font-family), and for this reason, Flex supports both hyphenated and camel-case style property names in CSS. (Flex converts hyphenated style property names to the camel-case equivalent behind the scenes.) For example, if you want to set the font name, you can use the style property font-family or fontFamily when using CSS. However, you cannot use hyphenated style properties in ActionScript using setStyle( ) or with inline styles. Using StyleManager Behind the scenes, Flex converts all CSS to ActionScript instructions that are man- aged by a class called mx.managers.StyleManager. In most cases, it is not necessary to work directly with the StyleManager class. However, in the event that you want to have greater runtime control over styles applied as either class selectors or type selec- tors, you’ll need to work with StyleManager. The StyleManager class allows you to access and configure existing selectors that were created via CSS, and it allows you to add new selectors programmatically. To access an existing selector, use the static method called getStyleDeclaration( ). The method requires a string parameter specifying the name of the selector. The name of the selector should include the initial dot for class selectors. The method returns an mx.styles.CSSStyleDeclaration object representing the selector: var selector:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".exampleSelector"); Example 14-4. Order of style tags affects styles (part 2) <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Style> .example { color: green; } </mx:Style> <mx:Style source="styles.css" /> <mx:Button label="Example" styleName="example" /> </mx:Application> 322 | Chapter 14: Customizing Application Appearance If you try to access a selector that does not exist, the Flex application throws a runtime error. You can use the setStyle( ) method for a CSSStyleDeclaration object to edit the styles for that object. The setStyle( ) method for CSSStyleDeclaration is identical to the method of the same name for UIComponent. You pass it the name of the style and the new value, as in the following example: selector.setStyle("color", "red"); If you want to add a new selector at runtime that wasn’t defined at compile time, you can do so by constructing a new CSSStyleDeclaration object and then adding it to the StyleManager using the setStyleDeclaration( ) method. The setStyleDeclaration( ) method allows you to specify the name of the selector (speci- fying null causes the StyleManager to use the name of the selector from the CSSStyleDeclaration object), the CSSStyleDeclaration object, and a Boolean value indicating whether to immediately update the styles for affected components: var selector:CSSStyleDeclaration = new CSSStyleDeclaration(".newSelector"); StyleManager.setStyleDeclaration(null, selector, true); Setting a style declaration is a computationally expensive operation. If you are going to set more than one style declaration at a time, it is best to set the third parameter of the setStyleDeclaration( ) method to false for all but the last method call: StyleManager.setStyleDeclaration(".newSelector1", selector1, false); StyleManager.setStyleDeclaration(".newSelector2", selector2, false); StyleManager.setStyleDeclaration(".newSelector3", selector3, false); StyleManager.setStyleDeclaration(".newSelector4", selector4, true); You should be careful when using setStyleDeclaration( ) that you don’t mistakenly overwrite an existing selector. Most component types already have type selectors defined in the defaults.css document (found in the default theme used by Flex, as dis- cussed in the discussion of themes, later in this chapter) that is compiled into Flex applications by default. That means that even if you didn’t define a Button type selec- tor, your Flex application is probably using one that it compiled in from defaults.css. Thus, if you replace the Button type selector with a call to setStyleDeclaration( ), you will lose all the style settings that buttons have by default if you haven’t explicitly given values to those styles in your new selector. The better option in most cases is to get a reference to the existing CSSStyleDefinition object and edit the style values for that object using setStyle( ). Using Styles | 323 Global Styles You can apply global styles using the global selector. You can set the global selector in external stylesheets, local style definitions, or using StyleManager. Global styles always have the lowest precedence, which means that a global style is applied only if it’s not overridden by a higher-priority setting such as a type selector, a class selec- tor, or an instance style. Example 14-5 uses a global selector along with a class selec- tor. In this example, the first button is green and italic, and the second button uses just the global style settings. Reviewing Style Precedence Style precedence can be a little confusing at first because there are simply so many ways to set styles. For that reason, we’ll now summarize the precedence. From high- est precedence to lowest, here’s the list: 1. Instance style set with setStyle( ) 2. Inline style 3. Class selector set with StyleManager 4. Class selector set in stylesheet 5. Type selector set with StyleManager 6. Type selector set stylesheet 7. Global styles Working with Fonts When you want to customize the font used by components within your Flex applica- tion, you’ll need to know the specifics of how to work with font outlines. The first important thing to understand in regard to this topic is how Flex differentiates Example 14-5. Using a global selector with a class selector <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Style> global { color: red; font-style: italic; } .example { color: green } </mx:Style> <mx:Button label="Example 1" styleName="example" /> <mx:Button label="Example 2" /> </mx:Application> 324 | Chapter 14: Customizing Application Appearance between types of fonts. In terms of how Flex deals with fonts, there are three types of fonts: System fonts These are the fonts that are installed on the user’s system. Just as an HTML page can display text using a font installed on the user’s system, so too can Flex applications. Device fonts There are three device fonts: _sans, _serif, and _typewriter, which resolve to the most similar system font on the user’s computer. Embedded fonts Flex applications allow you to embed font outlines within the .swf file, so you can guarantee that all users will see the same font even if they don’t have it installed on their system. System fonts When you use system fonts, you add no additional file size to the Flex application by embedding fonts. You can specify system fonts simply by specifying the name of the system font to use for the fontFamily (or font-family) style, as in this example: font-family: Verdana; The problem with system fonts is that the user must have the font. Otherwise, the text will render using the default system font. For this reason, it’s usually a good idea to specify system fonts as a fallback list. You can specify the value for font-family as a comma-delimited list of font names. The Flex application tries to use the first font on the list, and if it cannot find that system font, it uses the next font on the list: font-family: Verdana, Arial, Helvetica; Device fonts Device fonts are not specific fonts, but rather names of font categories. Flex recog- nizes three device fonts: _sans, _serif, and _typewriter. These device fonts resolve to a system font that is in a general font category. For example, _sans usually resolves to Arial or Helvetica, _serif usually resolves to Times New Roman, and _typewriter usually resolves to Courier or Courier New. Using device fonts is a way to virtually guarantee that the text will appear in a general style (i.e., sans-serif, serif, or mono- type). When you use a device font name in CSS, you must enclose the value in quota- tion marks: font-family: "_sans"; Often when you use system fonts, it is advisable to add a device font as the last font in the fallback list, as in the following example: font-family: Verdana, Arial, Helvetica, "_sans"; Using Styles | 325 Embedded fonts Although there are use cases for system fonts and device fonts, the fonts most fre- quently used in Flex applications are embedded fonts. Embedded fonts compile the font outlines into the .swf, guaranteeing that all users will see the text in the same font. The potential downside of embedded fonts is that they increase the size of the .swf file. However, considering that Flex applications are rich Internet applications, the actual file size increase for an embedded font is usually unsubstantial. The exception to that would be the use of extended characters and multibyte fonts, for use with languages such as Japanese and Chinese. Yet even in some of those cases, the file size increase can sometimes be mitigated by embedding only the outlines for the fonts required by the application. There are other reasons to embed fonts aside from just wanting to guarantee consis- tent fonts for all users. Embedded fonts solve a few problems with system fonts. Sys- tem fonts in Flex applications cannot be rotated, nor can you adjust the alpha of system fonts. If you attempt to rotate system fonts, the text disappears. If you attempt to adjust the alpha of a system font, you will not see an effect. However, if you embed the font, you can both rotate the text and adjust the alpha. Furthermore, system fonts are not antialiased; when you increase the size of system fonts, the alias- ing is more apparent, and it will look like the text has jagged edges. Embedded fonts are anti-aliased, meaning they look better at larger sizes. (Note that this is a double- edged sword because antialiased text is less legible at smaller font sizes. We’ll look at the solution to this in the “Using FlashType” section, later in this chapter.) There are a handful of ways to embed fonts. First we’ll look at how to embed fonts when you have the font file (a .ttf file). You can embed these fonts using the Embed metadata tag within ActionScript. To embed the font this way, use the source attribute to specify the path to the .ttf file and the fontName attribute to specify the name of the font because you will want to reference it throughout your applica- tion. In order for the metadata tag to work, you must place it just before a variable declaration of type Class. You will not need to use the variable at all, but the com- piler requires this. Here’s an example that embeds a font called Century Gothic from the .ttf file using the fontName of gothicCentury: [Embed(source="C:\\WINDOWS\\Fonts\\GOTHIC.ttf", fontName="gothicCentury")] private var _centuryGothic:Class; Once you’ve embedded the font, you can use the fontName value to reference it just as you would any other font, as shown in Example 14-6. Example 14-6. Embedding a font using the Embed metadata tag <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Style> global { fontFamily: gothicCentury; } 326 | Chapter 14: Customizing Application Appearance When you embed a font, only one set of the font outlines is embedded. In Example 14-6, only the standard font outlines are embedded, not the bold or italic outlines. In Example 14-7, you can clearly see the effects of this when you try to add a button instance to the preceding example. Because buttons default to using the bold version of a font, Example 14-7 uses the Century Gothic font for the text area, but it uses the default system font for the but- ton label. In order to fix this, we must also embed the bold font outlines for the same font using the same fontName value. However, this time we need to set the fontWeight attribute to bold; see Example 14-8. (If you want to embed the italicized font out- lines, you should set fontStyle to italic.) </mx:Style> <mx:Script> <![CDATA[ [Embed(source="C:\\WINDOWS\\Fonts\\GOTHIC.ttf", fontName="gothicCentury")] private var _centuryGothic:Class; ]]> </mx:Script> <mx:TextArea text="Example Text" /> </mx:Application> Example 14-7. Missing font outlines cause default fonts to appear <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Style> global { fontFamily: gothicCentury; } </mx:Style> <mx:Script> <![CDATA[ [Embed(source="C:\\WINDOWS\\Fonts\\GOTHIC.ttf", fontName="gothicCentury")] private var _centuryGothic:Class; ]]> </mx:Script> <mx:TextArea text="Example Text" /> <mx:Button label="Example" /> </mx:Application> Example 14-8. Embedding standard and bold font outlines <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Style> Example 14-6. Embedding a font using the Embed metadata tag (continued) [...]... in Example 14 -21 Example 14 -21 Using a programmatic skin class using CSS Button { upSkin: ClassReference("com.oreilly.programmingflex.styles.ButtonSkin"); overSkin: ClassReference("com.oreilly.programmingflex.styles.ButtonSkin"); downSkin: ClassReference("com.oreilly.programmingflex.styles.ButtonSkin");... encoding="utf -8" ?> Using setStyle( ), you should simply pass a reference to the class as the second parameter, as in Example 14 -20 Example... file Using FlashType In Flex 2. 0.1 and higher, it is possible to leverage greater control over embedded fonts using something called FlashType In the initial version of Flex 2, it was necessary to use Flash authoring to export swf files with embedded fonts that you could then embed into your Flex 2 applications to have greater control over the text However, the Flex compilers in 2. 0.1 and higher are capable... label="Example" /> 2 Navigate to the themes directory, and copy Smoke.css and smoke_bg.jpg 3 Paste the copies of the Smoke theme files in the new Flex project 4 In the new Flex project, create a new file called smoke_config.xml, and add the code in Example 14- 32 to the file Example 14- 32 smoke_config.xml smoke_theme.swc... ClassReference("com.oreilly.programmingflex.styles.ButtonSkin"); overSkin: ClassReference("com.oreilly.programmingflex.styles.ButtonSkin"); downSkin: ClassReference("com.oreilly.programmingflex.styles.ButtonSkin"); backgroundColor: red; } Skinning Application Backgrounds Almost universally, you’ll want to customize the background of your Flex application... assign the class name to the preloader property of the Application tag for the project, as in Example 14 - 28 Example 14 - 28 Setting thepreloader for an application 18) 3 38 | Chapter 14: Customizing Application Appearance Example 14- 18 Using a programmatic skin class > 8 & 0xFF) * percent; var blue: Number = (color & 0xFF) * percent; return red Button {... Embedding a skin with Scale-9 VBox { backgroundImage: Embed("vbox_background.png", scaleGridTop="5", scaleGridLeft="5", scaleGridBottom= "29 ", scaleGridRight= "29 "); backgroundSize: "100%"; } With the preceding code, the image no... skin without Scale-9 VBox { backgroundImage: Embed("vbox_background.png"); backgroundSize: "100%"; } Figure 14 -2 shows the distortion caused by the preceding code Figure 14 -2 Distorted version of image Example 14-16 is the same . url("C:\WINDOWS\Fonts\GOTHICB.ttf"); Example 14 -8. Embedding standard and bold font outlines (continued) 3 28 | Chapter 14: Customizing Application Appearance Flex allows you to embed a font in a different. file. Using FlashType In Flex 2. 0.1 and higher, it is possible to leverage greater control over embedded fonts using something called FlashType. In the initial version of Flex 2, it was neces- sary. embedded fonts that you could then embed into your Flex 2 applications to have greater control over the text. How- ever, the Flex compilers in 2. 0.1 and higher are capable of compiling with FlashType enabled,