Daniel R.

Rough Draft of Notes

Joey Lott The Morphic Group

Main application to be styled is just using standard components. VBox, List,

Inline attribute on List: backgroundColor
This isn't preferred since you have no centralized location of what your style information is.

Adding . Type selector and Class selector.

<mx:Style>
List {
    backgroundColor: #0000FF;
}
</mx:Style>

Applies to all components. Another List in the program would also get it. To have more control you can use a style selector. Need to set it via styleName on a target component.

.exampleStyleSelector {
    backgroundColor: #0000FF;
}

Why do this. Can reuse selector on any other component while keeping the style information centralized. Camel case for style names or hyphenation. Inline styles must use camel case but CSS information can use either.

Moving selector into external styles.css file via:

<mx:Style source="styles.css"/>

Application {
    background-color: #000000;
}

Precedence of style application: Type selector applied first, then class selector, lastly inline style attribute.

What to style items in the List. Going to use an item renderer. Like Cell renderer in Flash. Using another MXML component to show the list item. Gets passed a data property which contains the list item.

<mx:HBox>
<mx:Image source="{data.image}"/>
<mx:Text text="{data.title}"/>
</mx:HBox>

Add itemRenderer="com.example.DataRenderer" to List we want to render items of. Always need to use full class name can't use class name only even if imported.

Style scrollbars with a type selector. It is using custom images for arrows.

ScrollBar {
    up-arrow-up-skin: Embed('images/scrollArrowUp.png');
}

Embedding fonts can use url or local directive can be used to reference font file.

@font-face {
    src: url("Verdana.ttf");
    font-family: Morphic;
}

Styling some of the other components. Some type selectors can reference other class selector names.

TabNavigator {
    tab-style-name: tabButtons
}
.tabButtons {}

VBox with nested image. Using scale 9 to control embedded image.

.framedImage {
    background-image: Embed('image.png', scaleGridTop=30, scaleGridBottom=59, scaleGridLeft=30, scaleGridRight=59);
}

Programmatic skinning. Consider a general style that you want to have many variations of. Graphic assets would require unique file for each variation and increase file size. A programmatic skin let's you do it in code instead.

public class ButtonSkin extends ProgrammaticSkin {
    // key method to override
    override protected function updateDisplayList(...);
    if (getStyle("backgroundColor") != null) {
        //pikcup value
    }
    // name property of programmatic skin
    if (name == "upSkin") {
        //skin specific style
    }
}

// in css
Button {
    upSkin: ClassReference("com.example.ButtonSkin");
}

Customizing the preloader. Make sure you only use ActionScript stuff, nothing from Flex framework since they won't be available yet.

public class CustomDownloadProgress extends DownloadProgressBar {
    override public function set preloader(value:Sprite):void {
        // progress and init_complete events
    }
    // dispatch complete event when done and application should start
}

<mx:Application preloader="com.example.CustomDownloadProgress"/>

scale9.com for premade styles