Styling Semantic Components

From TechWiki

Semantic components are standard Flash objects (movies) and therefore can be styled and modified as with any other Flash component.

Contents 1 General Resources 2 General Approach 3 Overview of MXML 3.1 Some Basic Tutorials 4 Property Inheritance 5 Styling HTML 6 Some Styling Tips

General Resources

• http://livedocs.adobe.com/flex/3/html/
• MX Controls References: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/mx/controls/package-detail.html
• General Flash training, based on Flash Builder: http://www.adobe.com/devnet/flex/videotraining.html

General Approach

As with any general application language, there are an infinite number of ways to build Flash applications. Since this is just a basic guide, we will stick with approaches suitable for only simple applications or modifications.

The standard components of a Flash application are represented by configurations and settings (*.xml), ActionScript files (for business logic and events handling, see *.as), applications and user interface components (*.mxml), and optional style sheets (*.css, but a restricted subset) images and data. ActionScript (or, indeed, many scripts such as HTML or PHP) can also be embedded in script sections in MXML files.

Since most UI and app-level changes occur in the MXML files, we will concentrate on those for these styling instructions.

Overview of MXML

MXML is obviously an XML-based syntax. This guide assumes a basic familiarity with that syntax.

MXML objects are applications, containers or controls, and may have properties, events or bindings. Each object has a specified set of behaviors and properties; these are inherited from their parents. Component properites are set in a very similar manner to what is familiar with CSS or HTML. A given object may use its specifically identified properties, or those of its parental objects.

Some Basic Tutorials

• http://code.google.com/apis/maps/documentation/flash/tutorial-flex.html
• http://blog.dclick.com.br/wp-content/uploads/adobe-flex-coding-guidelines-v12-english.pdf

Property Inheritance

All sComponents inherit property specifications from their parent objects. These inheritance paths are shown below for the various sComponents, with the object providing the richest set of available properties shown in Bold. For the standard Flash controls, the normal root parent is UIComponent. For standard Flash containers, the normal root parent is Container.

• sBarChart --> Canvas --> org.axiis.charts.axis
  • Imports:
    • AxiisSprite
    • Application
• sControl --> Box --> Container
  • Imports:
    • ComboBox
    • Text
    • Application
• sDashboard --> VBox --> Box --> Container
  • Imports:
    • Canvas
    • Application
• sGenericBox --> VBox --> Box --> Container
  • Imports:
    • HBox
    • Text
    • Application
• sHBox --> HBox --> Box --> [1]
• sImage --> Image
• sLinearChart --> Canvas --> org.axiis.charts.axis
  • Imports:
    • AxiisSprite
    • Application
• sMap --> Canvas --> com.flextoolbox.controls http://github.com/sunlightlabs/clearmaps/
  • Imports:
    • ClearMap.Feature
    • ClearMap.Layer
    • Application
• sPieChart --> Canvas --> org.axiis.charts.axis
  • Imports:
    • AxiisSprite
    • Application
• sRelationBrowser --> Canvas --> stefaner
  • Imports:
    • HBox
    • Label
    • TextArea
    • Text
    • Application
• sStory --> Canvas
  • Imports:
    • Application
• sText --> Text --> Label

Styling HTML

Flash only has limited support for styling HTML within a htmlText area. You can do fonts, classes, and underlines for links and hovers. There are a couple of useful tutorials, with the latter being somewhat better. There is also an example in the Adobe Flex 3 help guide; make sure to scroll to the comments.

Some Styling Tips

• Applications have a gradient background; to create a solid background, look for code such as this:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:components="components.*"
  xmlns:semanticComponents="com.sd.semantic.components.*" layout="vertical" 
  creationComplete="init()" currentState="searchState" backgroundColor="#FFFFFF"
  backgroundGradientColors="[#FFFFFF, #FFFFFF]"

• Spaces are handled strangely when using the htmlText area control; use the condenseWhite="true" property
• To style labels differently than bound data values, use a construct such as the HBox component:

<semantic:sHBox paddingLeft="7" height="16" semanticDataProvider="{data.semanticDataProvider}">
  <semantic:sHBox>
    <mx:Label text="Last updated:" fontWeight="bold" width="90" textAlign="right" />
    <semantic:sText text="cosmo_updateDate" semanticDataProvider="{data.semanticDataProvider}"/>	
  </semantic:sHBox>
</semantic:sHBox>

• Only a subset of HTML is available to htmlText; see http://www.republicofcode.com/tutorials/flash/css/.