With the introduction of Flex 4's Spark architecture, Flex component skinning has never been easier. With this new skinning approach, the art of CSS styling components appears to have been left in the shadows of Flex development. Many of the Flex 4 version of components no longer provide the same level of CSS support as their Halo equivalent. However, Flex 4 has not abandoned CSS styling and it has even been enhanced with the Flex 4 SDK to allow for new ways to provide styling for components. In this session, we will walk through the CSS features of Flex, what is new with Flex 4, and how we can take advantage of CSS to help provide robust styling support for our components and more specifically our skins. Let's rediscover Flex styling together!

1. Don’t Just Skin It. Style It! James Polancowww.developmentarc.comFlash Camp Brasil2011

2. Who am I? James Polanco Web Application ArchitectFlex, Flash, AIR, Ajax... Getting into Scala and Lift Co-founder of DevelopmentArcconsulting and development firm focusing on web applications Author for Adobe Press“Adobe Flash Platform Start to Finish: Working Collaboratively using Adobe Creative Suite 5” Twitter & Website@jamespolancowww.developmentarc.com

3. What is this session about? Styling a Flex application has many different approachesCSS, MXML properties, Programmatic Skins, 3rd Party libraries (ex: Degrafa) Flex 3 (Halo) vs. Flex 4 (Spark) Each Component set (Halo & Spark) has similar and different features to support styling of your Flex components. Flex 4 (Spark) is changing how we work Changes in the Flex 4 (Spark) component architecture is changing how applications are styled.

4. Style Support in Flex : Flex 3 (Halo) CSS in Flex 3 Benefits Setting look and feel based on style declarations An extensive set of styles are built into Flex 3 components ex: Button has color, borderColor, backgroundColor, etc... Limitations Only able to change settings that are exposed to the CSS Style system

5. Style Support in Flex : Flex 3 (Halo) Programmatic Skins in Flex 3 Benefits Full Control over all aspects of the design Creating backgrounds that can show different component layouts, and add animations… Limitations Requires extensive ActionScript and understanding of the component architecture to implement Any design changes must be implemented via code (unless the code implements Flex’s style system) Programmatic skins are only defining the background of the component, you can not draw on top of content nor modify children without creating risky direct parent reference

6. Style Support in Flex : Flex 4 (Spark) CSS in Flex 4 Benefits Setting look and feel based on style declarations Improved CSS declaration support and advanced language features Style names are propagated from the component to the skin Limitations Styles have less support in Flex 4 components ex: Button has color but does not support borderColor, backgroundColor, etc…

7. Style Support in Flex : Flex 4 (Spark) New Skin Architecture in Flex 4 Benefits Replaces Programmatic skin with MXML based skinning system Rapidly create and change skins as need Separates logic from layout You can easily manipulate the components children parts and styles, unlike programmatic skins in Flex 3 Limitations Can require development for each layout / design CSS support within a skin requires extra development

8. Understanding Spark (Flex 4) Brief look at the new Flex 4 (Spark) Architecture Creates a separation of layout from logic A Spark component is made up of two parts: the Skin (look & feel) and the backing Component (logic) Allows the look and feel of a component to be changed at runtime Skins are assigned via CSS (skinClass) and can be changed at any time.

9. Understanding Spark (Flex 4) Brief look at the new Flex 4 (Spark) Architecture

10. CSS in Flex 4 CSS support still exists in Flex 4 (Spark) components New properties have been created for general themes, such as contentBackgroundColor It’s not as supported as Flex 3 but... Many of the previous Flex 3 CSS properties on the new Flex 4 versions of the components do not exist (yet...) Flex 4 has more CSS features! Many new advanced CSS features, such as ID and pseudo selectors (we will examine this in depth later)

11. CSS in Flex: What are styles? What are styles? Settings of a component that enable the ability to change the look and feel of a component dynamically For example, setting the font color on a button <s:Button color="#FF0000" />

12. CSS in Flex: Setting Styles Four ways we can set styles in Flex ActionScript setting styles directly in our code MXML setting properties on our MXML components <Style> Blocks defining a style block in our MXML file External Style Sheets linking to external CSS files to define our styles

13. CSS in Flex: Setting Styles, ActionScript myButton.setStyle("color", 0xFF0000); Styles are not properties of components This means we can’t do things like: myButton.color = 0xFFFF00 Flex provides a Style Manager The Style Manager handles complex style inheritance and other properties of CSS for us To set a style we use the setStyle() method Because styles aren’t properties and are handled by the Style Manager we use the setStyle() method, whose job is to work with the Style Manager to handle all the complex reltionships

14. CSS in Flex: Setting Styles, MXML <s:Button id="myButton" color="#FF0000" /> Styles are exposed as properties in MXML MXML treats styles as properties of our components MXML hides the fact that styles are not properties on a component MXML and the compiler handle converting our style “properties” into setStyle() commands at compile time

15. CSS in Flex: Setting Styles, <Style> Block <fx:Style>.myStyle { color: #FF0000; } </fx:Style> <s:Button id=“myButton” styleName=“myStyle”/> A local style definition is created in the MXML and linked through CSS binding techniques We can create local style definitions and then apply them to our components (more to come...)

16. CSS in Flex: External Stylesheets <fx:Stylesrc=“/assets/css/myStylesheet.css” /> <s:Button id=“myButton” styleName=“myStyle”/> Externally referenced style definitions are linked into our MXML and are applied Similar to our local style definition, we can link to external CSS files which are applied

17. CSS in Flex: Selectors What is a Selector? Defines how a style is applied and in what context There are four selector types in Flex Type Selector Class Selector ID Selector Pseudo Selector

18. CSS in Flex: Type Selectors What is a Type Selector? Defines global styles for any “type” of component that is created, such as a Button, ComboBox, List, etc... /* All Buttons in our application have their font color set to red: */ Button { color: #FF0000;}

19. CSS in Flex: Class Selectors What is a Class Selector? Defines styles that must be explicitly referenced by the component using the “styleName” property: ex: <s:ButtonstyleName="myStyle" /> /* Only components that reference this style has their font color set to red: */ .myStyle { color: #FF0000;}

20. CSS in Flex: ID Selectors What is an ID Selector? Components with the explicit ID apply these styles (new in Flex 4) ex: <s:Button id=“myButton” /> /* Only components that have id=“myButton” has their font color set to red: */ #myButton { color: #FF0000;}

21. CSS in Flex: Pseudo Selectors What is a Pseudo Selector? Pseudo selectors work in conjunction with other selectors (Type, ID, Class) Allows us to changes style based on the current state the component is in (such as a button’s up, over, down & disabled states) The component must support the state to apply the style, stateGroups are not supported /* Change the color based on state: */ Button:up { color: #FF0000;} Button:down { color: #00FF00;}

22. CSS in Flex: Namespaces What is a Namespace? Namespaces are new in Flex 4 and now required for any CSS declarations Allow us to support type selectors When we say “Button” do we mean Halo or Spark buttons? @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; s|Button { color: #FF0000; }

23. CSS in Flex: Chaining Selectors We can now chain selectors Chaining allows us to share properties across different style types s|Button, .blueText, #myLabel { color: #0000FF; }

24. CSS in Flex: Dependent Selectors We can define dependent selectors With a dependent selectors we can apply styles to elements based on their parents, the space between the selectors informs the CSS engine that the style should be applied based on the parent/child relationship s|HGroups|Button { color: #0000FF; } <s:HGroup> <s:Button id=“myButton” /> </s:HGroup>

25. CSS in Flex: Linking Selectors We can link type, class and id selectors to identify elements By linking type, class and id selectors together we can explicitly define what and when an element should have a style applied. The style is linked when there is NO space between the selectors S|Button#myButton.labelText { color: #0000FF; } <s:Button id=“myButton” styleName=“labelText” />

26. CSS in Flex: Cascading Cascading is the C in CSS CSS’ (Cascading Style Sheets) power is the ability to define styles and have them apply down the parent/child hierarchy automatically How does it work? Inheritable Styles: If the parent has a style set (such as color) and the child supports the style, then the child’s style is set to the parents value. Inheritance is defined via the [Style] metadata Non-Inheriting Styles: If the parent has the style set and the child supports the style, the value is NOT passed on Global Styles: Flex supports the global tag, which applies this style to EVERYTHING in the application

27. CSS in Flex: Cascading Chain of Command Understanding the priority order of what style overrides the cascading parents value OR the style definition location is very important Global > Type > Class > ID > local > setStyle() setStyle() overrides a local definition, a local definition overrides an ID definition, an ID definition overrides a Class definition, a Class definition overrides a Type definition and a Type definition overrides a global definition.

28. Supporting CSS in Flex How do we leverage it in our own components? We can support CSS in our custom components by using a combination of Metadata, ActionScript and the new Flex 4 Skin architecture ActionScript Methods Flex provides multiple methods for creating, managing and accessing styles Metadata Metadata allows us to define what styles our components support, how they cascade, their type and their default values Flex 4 Skins & FXG Flex 4 changes where we manage our styles and also supports a new way to apply and visualize our UI with these style settings

29. Supporting CSS in Flex: Methods setStyle() The setStyle() method allows us to define a style directly to our component. We pass in a style name and the style value: setStyle("color", 0xFF0000); getStyle() The getStyle method allows us to determine what the current value for the style is: varourColor:Number = getStyle("color"); styleChanged() The styleChanged() method is called on our component whenever a defined style is updated. updateDisplayList() The updateDisplayList() method is where we should do all our style calculations and application to our content.

30. Supporting CSS in Flex: Metadata Metadata informs the compiler and tools (like Flash Builder) what styles are supported Metadata is how MXML can show a style as a property. Without metadata the compiler would not recognize the style property and throw an error at compile time. Styles can still be used without metadata We can still use the ActionScript methods, such as set and get style, even if the metadata isn’t defined. Metadata is defined on the component (ActionScript) class and not a Skin (Flex 4+) The metadata is assigned to the base component and not to a skin, for a component to fully support in MXML it has to be defined on the class: [Style(name="errorColor", type="uint", format="Color", inherit="yes")]

31. Flex 4: Styling With Skins Creating MXML Skins Flex 4 supports creating new looks for components using the skinning architecture. Similar to Programmatic skins, but easier to create and you can use MXML to define them. Setting Skins Skins are attached to a component using the skinClass style property, they can be defined in CSS using the ClassReference wrapper. skinClass: ClassReference(”com.example.package.skin.SkinFile"); Swapping Skins Because skins are defined via styles we can change them at any time by either referencing a new style declaration or by using setStyle().

32. Flex 4: CSS in Skins Override updateDisplayList() In the Skin class we can override the updateDisplayList() method and then use getStyle() to retrieve the property values defined for the style. Update the skin with the style values Once the values have been pulled from getStyle() we can then apply the values to the parts of the skin that the styles correspond to. Expose style via Metadata on the base component To support style properties in MXML for our skins, the host component the skin is attached to should declare the styles using metadata.

33. Flex 4: Skin States & CSS States allow the skin to update the look of the UI Skin States defined in the host component allow our skins to change the look and feel based on user interaction. Think Button and the up, over, down, and disabled state. Using CSS pseudo selectors enables us to change the style on state changes When we define pseudo selectors ( .myStyle:up{} ) the getStyle() method will return the updated value in the updateDisplayList() method when our states change. This allows us to easily define and support CSS state changes in our skins.

34. CSS in Skins: Using FXG FXG is Adobe’s new declarative graphics language FXG allows us to create vector based assets in MXML <s:Rect top="0" left="0" right="0" bottom="0"> <s:fill><s:SolidColor id="bgColor" color="#CDCDCD"/></s:fill> </s:Rect> Modify FXG properties to enable CSS customizable skins When the state changes we can reference and then update the FXG bgColor.color = getStyle("backgroundColor");

35. Wrapping it up... Flex 4 is adding a lot of styling opportunity Advanced CSS functionality and the new skinning architecture is allowing for easier customization of your application. CSS is currently less prevalent in the current component set The current Spark components are at 100% parity yet, but more default CSS support is being added in Flex 4.5. Create styles for your own application Using customer CSS in both your components and skins allows for rapid changes and flexibility to your applications look and feel.

36. Thank you... Any Questions? Any questions? Ask them if you got them... James Polanco Twitter: @jamespolanco Email: info@developmentarc.com Website: http://www.developmentarc.com