Adobe Flex Don't Style It, Skin it!

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

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

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 workChanges in the Flex 4 (Spark) component architecture is changing how applications are styled.

Style Support in Flex : Flex 3 (Halo)CSS in Flex 3BenefitsSetting look and feel based on style declarationsAn extensive set of styles are built into Flex 3 componentsex: Button has color, borderColor, backgroundColor, etc...LimitationsOnly able to change settings that are exposed to the CSS Style system

Style Support in Flex : Flex 3 (Halo)Programmatic Skins in Flex 3Benefits Full Control over all aspects of the design Creating backgrounds that can show different component layouts, and add animations…LimitationsRequires 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

Style Support in Flex : Flex 4 (Spark)CSS in Flex 4Benefits 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…

Style Support in Flex : Flex 4 (Spark)New Skin Architecture in Flex 4BenefitsReplaces 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 3Limitations Can require development for each layout / design CSS support within a skin requires extra development

Understanding Spark (Flex 4)Brief look at the new Flex 4 (Spark) ArchitectureCreates a separation of layout from logicA 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 runtimeSkins are assigned via CSS (skinClass) and can be changed at any time.

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

CSS in Flex 4CSS support still exists in Flex 4 (Spark) componentsNew properties have been created for general themes, such as contentBackgroundColorIt’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)

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 dynamicallyFor example, setting the font color on a button<s:Button color="#FF0000" />

CSS in Flex: Setting StylesFour ways we can set styles in FlexActionScriptsetting styles directly in our codeMXMLsetting properties on our MXML components<Style> Blocksdefining a style block in our MXML fileExternal Style Sheetslinking to external CSS files to define our styles

CSS in Flex: Setting Styles, ActionScriptmyButton.setStyle("color", 0xFF0000);Styles are not properties of componentsThis means we can’t do things like: myButton.color = 0xFFFF00Flex provides a Style ManagerThe Style Manager handles complex style inheritance and other properties of CSS for usTo set a style we use the setStyle() methodBecause 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

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 componentsMXML hides the fact that styles are not properties on a componentMXML and the compiler handle converting our style “properties” into setStyle() commands at compile time

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...)

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 appliedSimilar to our local style definition, we can link to external CSS files which are applied

CSS in Flex: SelectorsWhat is a Selector?Defines how a style is applied and in what contextThere are four selector types in FlexType SelectorClass SelectorID SelectorPseudo Selector

CSS in Flex: Type SelectorsWhat 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;}

CSS in Flex: Class SelectorsWhat 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;}

CSS in Flex: ID SelectorsWhat 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;}

CSS in Flex: Pseudo SelectorsWhat 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;}

CSS in Flex: NamespacesWhat 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;}

CSS in Flex: Chaining SelectorsWe can now chain selectorsChaining allows us to share properties across different style typess|Button, .blueText, #myLabel { color: #0000FF;}

CSS in Flex: Dependent SelectorsWe can define dependent selectorsWith 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 relationships|HGroups|Button { color: #0000FF;}<s:HGroup> <s:Button id=“myButton” /></s:HGroup>

CSS in Flex: Linking SelectorsWe can link type, class and id selectors to identify elementsBy 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 selectorsS|Button#myButton.labelText { color: #0000FF;}<s:Button id=“myButton” styleName=“labelText” />

CSS in Flex: CascadingCascading is the C in CSSCSS’ (Cascading Style Sheets) power is the ability to define styles and have them apply down the parent/child hierarchy automaticallyHow 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] metadataNon-Inheriting Styles: If the parent has the style set and the child supports the style, the value is NOT passed onGlobal Styles: Flex supports the global tag, which applies this style to EVERYTHING in the application

CSS in Flex: CascadingChain of CommandUnderstanding the priority order of what style overrides the cascading parents value OR the style definition location is very importantGlobal > 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.

Supporting CSS in FlexHow 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 architectureActionScript MethodsFlex provides multiple methods for creating, managing and accessing stylesMetadataMetadata allows us to define what styles our components support, how they cascade, their type and their default values Flex 4 Skins & FXGFlex 4 changes where we manage our styles and also supports a new way to apply and visualize our UI with these style settings

Supporting CSS in Flex: MethodssetStyle()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.

Supporting CSS in Flex: MetadataMetadata informs the compiler and tools (like Flash Builder) what styles are supportedMetadata 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 metadataWe 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")]

Flex 4: Styling With SkinsCreating 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().

Flex 4: CSS in SkinsOverride 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 componentTo support style properties in MXML for our skins, the host component the skin is attached to should declare the styles using metadata.

Flex 4: Skin States & CSSStates 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 changesWhen 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.

CSS in Skins: Using FXGFXG is Adobe’s new declarative graphics languageFXG 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 skinsWhen the state changes we can reference and then update the FXGbgColor.color = getStyle("backgroundColor");

Wrapping it up...Flex 4 is adding a lot of styling opportunityAdvanced 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.

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

Adobe Flex Don't Style It, Skin it!

More Related Content

What's hot

Viewers also liked

Similar to Adobe Flex Don't Style It, Skin it!

Recently uploaded

Adobe Flex Don't Style It, Skin it!