Customizing the Look of Mobile FlexTerry Ryan Adobe Developer Evangelist

• Design Considerations• CSS vs Skinning• Introduction to Skinning• Conclusions

Agenda

DESIGN CONSIDERATIONS

Work with a

designer

Start as High Resolution as possible

640x920

Scale Down

Deal with DPI

• Custom graphics look like crap if you design for too small a screen.

• But smaller DPI devices are usually less powerful meaning pushing around larger images is ineffiecient

Dealing with PSD’s

• Get PSD• Pull into to

Fireworks• Use Fireworks to

export pngs and jpgs.

SKIN VS CSS

• Font Changes– Family– Color– Size

• Flex UI Changes– Color– Flex CSS Properties

CSS

• Changing Behavior• Radical change in look and feel• Implementation of custom graphics

Skinning

CONCEPTS

Performance is key

ActionScript Components Perform Best

Almost all of your skins will

be ActionScript

Skins

• As much font selection as possible• Class specifications

What I use CSS for

Why?

setStyle is relatively expensive

SKIN LIFECYCLE

• Constructor– Very beginning– No Children available– Good for manipulating “this” and setting variables

• onChildrenCreate– After everything is done setting up– Good for set once display properties

• layoutContents– After any thing that requires a redistribution of

elements– Good for reacting to location and content changes

Important Methods

Final Thought Before we get

into Components

I break every best practice

CLASSES YOU NEED TO KNOW

• Lightweight• Can be Styled• Can used for editable and static text• It can’t be used in MXML markup

though

StylableTextField

• Lightweight image component• Doesn’t have ability to load dynamic

content… yet.• This is fine, skin assets should be

embedded • Fast performing

BitmapImage

• Like a Group, but you can skin it.

SkinableComponent

• High performance renderer• Handles a lot of cases.• Can be extended.

IconItemRenderer

WORKING WITH COMPONENTS

Starting

Finishing

APPLICATION

Compare

Skinning Application

s|ViewNavigatorApplication{skinClass: ClassReference("skins.AppSkin");

}

Assigning a Skin in CSS

• Prevents you from cluttering up Flex with presentational information

Why

switch (applicationDPI){

case 320:{

break;}case 240:{

break;}default:{

break;}

}

Dealing with DPI

WORKING WITH FONTS

• There are 2 font rendering engines in Flash

• This means 2 ways of embedding fonts– TLF– NonTLF

• Most Mobile components use NonTLF• Label uses TLF

Font Recap

• You have to embed both TLF and NonTLF fonts

• You can do this with Metadata• I’ve never done it that way• Because Flash Professional makes

this very easy

Consequence

Embedding fonts with Flash Professional

BUTTON

Compare

Skinning Button

CONCLUSIONS

BEAUTYWhy care?

Why care about beauty?

Beauty is the difference between

Apps people have to use Apps people want to use

Beauty is the difference between

Apps people have to use Apps people want to use

Finicky

• Do as much in css as possible• Drop to skins• Remove the background• Slap in graphics• Account for DPI• Account for redraws

Typical Process

• Deep Dive Into Flex Mobile Item Renderers– http://www.slideshare.net/JasonHanson/deep-dive

-into-flex-mobile-item-renderers-7501594

• Jason San Jose– http://www.adobe.com/devnet/flex/articles/mobile

-skinning-part1.html

– http://www.adobe.com/devnet/flex/articles/mobile-skinning-part2.html

– http://www.adobe.com/devnet/flex/articles/mobile-skinning-part3.html

• Holly Schinsky– http://devgirl.org/2011/05/09/styling-the-flex-4-5-

mobile-application-tabs-and-actionbar/

Good resources

Follow up?• Feel free to contact me– terry.ryan@adobe.com– http://terrenceryan.com– Twitter: @tpryan