Join David Gassner for an in-depth discussion in this video Understanding inline CSS declarations, part of Flash Builder 4 and Flex 4 Essential Training.
The visual appearance of a Flex application is determined by a combination of vector graphics, bitmap graphics, and cascading style sheets or CSS. The Flex 4 SDK implements the cascading style sheet standard. Its implementation is neither a superset nor a subset of the CSS implementation in a web browser. It has certain things in common and certain things that are different. For the demonstrations in this chapter, I'll import a project from the Exercise Files. If you have access to the Exercise Files, you can import it yourself.
You'll find it in a folder called 10_CSS > begin and the name of the importable project is CSS.fxp. After importing the file, open the source folder, open the default package and open the file InlineCSS.mxml. Cascading style sheets are implemented internally different than actual properties. For example, the Label control has a property called text, but a number of styles such as fontFamily, fontWeight, Color, and so on that determines the appearance of the text.
One of the main differences between a style and a property is in how you can set it at runtime. For example, properties can be set using dot syntax whereas styles have to be set using an ActionScript method called setStyle. But when you declare a style inline in an MXML tag, it looks just like a property. For example, if I wanted to set the size of a Label control, I'd use a style called fontSize. The fontSize style must be set to a numeric value, which is the number of pixels.
As I've mentioned in other videos, font sizes in Flex are only measured in terms of pixels and never in terms of ems or any other unit of measurement. Here is another style that's available on all controls that display text. fontStyle takes a string. One of these two values, italic or normal. I'll set this first Label to a fontStyle of italic, and then run the application to show you the result. Here is the label that has a fontSize of 24 pixels and a fontStyle of italic.
Now to find out what styles are available on any particular control, look at the API documentation. I'll place the cursor inside the Label tag and then press Shift+F2. That will take me to the Help screen for this control. Remember that that's the same keyboard shortcut on both Mac and Windows. Now if for any reason that context- sensitive help doesn't work, you can click into the text box and type in the fully qualified name of the class you're interested in. In the API documentation screen for this component, click the Styles link.
Within the Styles section, you can either look at all styles that are applied for this component, including the styles that are natively set up on it super classes or you can hide the inherited styles and only look at the styles that are declared natively in this class. I'm going to look at all styles. I'll scroll down to the section that's start with the word font and show you that there is a style called fontFamily, another one called fontLookup, fontSize, fontStyle, fontWeight and so on. As I mentioned, certain styles accept strings but require particular values.
The fontStyle for example requires values of either NORMAL or ITALIC or you can always put in value of INHERIT. These enumerated values are frequently represented as constants in particular classes. For example, the possible values for the fontStyle are represented in a class called FontPosture. You can use these classes in MXML declarations in inline styles if you prefer. I'll switch back to Flash Builder, and I'm going to remove the word italic.
Then put in a binding expression. I'll start with a brace and type in the class name FontPosture, then a dot and then the constant name ITALIC. I'll close the expression and press Ctrl+S or Command+S on Mac to save the file, and you'll see an error occur. The message I'm interested in is "Access of undefined property FontPosture." Now the reason that's happening is because I'm referring to a class that has not been imported. Here is a very simple way to import the class without having to know ahead of time what its package is.
I'll place the cursor after the class name and press Control+Space. That's again the same keyboard shortcut on both Mac and Windows. It appears that nothing happened, but if I scroll up to the top of the application, I'll find a Flash Builder has added a new Script section and the required import statement for the FontPosture class. Now I'll scroll back to the code and once again save the file and now the error goes away, and the constant wrapped inside of binding expression works correctly.
I'll run the application to show you that the constant in fact does affect the appearance of the Label. Some developers prefer to use this style of coding instead of simple strings, because we you use a constant, for example by adding an s where it doesn't belong. When you save and try to rebuild the application, you'll get a compiler error such as this one, "Access of possibly undefined property ITALICs." So constants are available for styles that take strings in many cases, not all.
If you're not sure, look at the documentation. So inline style declarations are nothing more than MXML attributes that name the style and pass in a value. Different styles take different data types. The documentation will tell you what data type is appropriate for which style and sometimes you can use constants to pass in the value that you want.
- Understanding the history of Adobe Flex
- Installing the Flash Builder components
- Using Eclipse views and editors
- Programming with MXML and integrating MXML and ActionScript
- Debugging Flex applications
- Adding visual controls to a Flex application interface
- Displaying images and dynamic data
- Formatting with CSS
- Skinning Spark components with MXML graphics
- Creating data entry form components
- Integrating with Apache, PHP and MySQL
Skill Level Beginner
Q: After importing the Debugging.fxp file following the steps outlined in the “Importing and exporting projects as FXP files” video, several of the applications will not run.
When I attempt to debug or run the Variables.mxml or Watchpoints.mxml applications, I am unsuccessful. Pressing F11 to debug causes Flex to look for an application it CAN run, and runs that one. If I Right-Click one of the aforementioned applications and then click Run Application, an error appears that says “This file cannot be launched.”
What is causing this problem?
A: This is a common issue with Flash Builder. Before pressing F11 (or right-clicking and choosing Run Application), set the current MXML application file as the "default" by right-clicking it and choosing "Set as default application".
This should ensure that the application you want to preview opens in the browser when you press F11.
Q: When trying to specify the fontStyle as italic in both ways described in the first and second videos of the “Using Cascading Style Sheets (CSS)” chapter, only the literal string "italic" seems to work. If I use the constant for the same value like this:
I get a warning that reads:
"Design mode: Error during component layout. Choose Design > Refresh to refresh design mode."
Even if I try to refresh, design mode will not work until I change it back to the literal string. I made sure the import for this namespace was there by pressing Ctrl+spacebar, refreshed design mode several times, and even restarted Flash Builder. However, the only solution seems to be to use the literal. Is there a fix for this?
A: The use of constants and bindings in MXML style attributes results in unpredictable results in Design View, as evidenced by this error. Unfortunately, the best you can expect is that design view will render the presentation, but won't show the results of the style setting, because Design View isn't capable of evaluating MXML bindings without the benefit of Flash Player's runtime capabilities.
Q: Is Flash Builder compatible with Mac OS X 10.7 (Lion)?