Christophe Herreman

Note: These are some notes from the Multi-Mania 2007 conference. I wrote them down while watching the sessions so there might be some typos and the sentences may be in telegram style.

Joey Lott: Stylizing Flex Applications

Joey gives an overview of the different possibilities of working with css in Flex (inline style, external css, runtime css, …).

Now gives a demo of styling a simple Flex application with inline styles. He created label and is applying a fontSize and a color attribute.

He’s changing the application to use internal css definitions. Talks about css class selectors. U can use “pt” or “px” in flex, but it will be disregarded, so you can leave it out.

.exampleStyle {
fontSize: 75;
color: #FF9900;
}

The properties that are defined inline overwrite the selector properties.

Now talks about TypeSelectors

Button {
text-decoration: underline;
}

This style will now be applied to all Button instances.

Inline styles require camelcase css properties. Otherwise you can use hyphens as well. (fontSize and font-size).

Now talks about embedding fonts.

@font-face {
font-family: CustomFont;
src: url(“C:/Windows/Font/gothic.ttf”);
}

Does this work with open type fonts as well? Will ask later. (answer: Joey never tried. I did and it doesn’t seem to work)

.myStyle {
font-family: CustomFont;
}

Joey talks about external css styles.

This will be done at compile time, not runtime! Flex 2.0.1 adds runtime CSS support.

Adds a creationComplete handler called “start” to the demo application.

private function start():void {
StyleManager.loadStyleDecorations(“style.swf”); // not style.css
}

You need to compile the css into a swf. This can be done by right-clicking a css and choosing the “compile to swf” option.

Now talks about skinning. 2 ways to do so: Graphical(png,jpg,swf,svg,…) and Programmatic (AS3).

Button {
upSkin: Embed(“buttonUp.png”);
overSkin: Embed(“buttonOver.png”);
downSkin: Embed(“buttonDown.png”);
}

Button {
upSkin: Embed(source=”buttonSkins.swf”, symbol=”ButtonUp”);
}

Now talks about scale9 to control the stretching of the component skins. Demos it with a png background for a VBox.

scaleGridTop, scaleGridRight, … used on the Embed statement.

5 Minutes left, starts talking about programmatic skinning. It’s a bit harder the graphical skinning, but you have more control. Shows how to apply a skin to a tooltip.

ToolTip {
border-skin: ClassReference(“com.domain.ToolTipSkin”);
}

ToolTipSkin extends ProgrammaticSkin
override the method updateDisplayList()

That’s it! He gives away some books and a Lynda.com training dvd. Nice talk Joey, thank you!

Related links: http://www.person13.com/

---

Add to Bloglines - Digg This! - del.icio.us - Stumble It! - Twit This! - Technorati links - Share on Facebook - Feedburner