Upload
terry-ryan
View
2.614
Download
2
Tags:
Embed Size (px)
Citation preview
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– [email protected]– http://terrenceryan.com– Twitter: @tpryan