flex mobile skinning workshop
TRANSCRIPT
PowerPoint Presentation
Deep Dive into Mobile Flex SkinningTerry Ryan Adobe Developer Evangelist
Who are You?
Introduction to SkinningConceptsSkinning ComponentsConclusionsAgenda
Not a hands on workshop
Why?
Lots and lots of little details
https://github.com/tpryan/SkinExampleComplete, no shortcutshttps://github.com/tpryan/SkinExampleExerciseFinished version of class exercise but incomplete due to shortcutshttps://github.com/tpryan/SkinExampleStarted Starting point for class Content
Be like a crazy HTML standards facist
No presentation in markup
Starting
Finishing
Why Skin
Font ChangesFamilyColorSizeFlex UI ChangesColorFlex CSS PropertiesCSS
Changing BehaviorRadical change in look and feelImplementation of custom graphicsSkinning
Classes you need to Know
LightweightCan be StyledCan used for editable and static textIt cant be used in MXML markup thoughStylableTextField
Lightweight image componentDoesnt have ability to load dynamic content yet.This is fine, skin assets should be embedded Fast performingBitmapImage
Like a Group, but you can skin it.SkinableComponent
High performance rendererHandles a lot of cases.Can be extended.IconItemRenderer
Concepts
Performance is key
ActionScript Components Perform Best
Almost all of your skins will be ActionScript Skins
CSS
As much font selection as possibleClass specificationsWhat I use CSS for
Why?
setStyle is relatively expensive
Skin Lifecycle
ConstructorVery beginningNo Children availableGood for manipulating this and setting variablesonChildrenCreateAfter everything is done setting upGood for set once display propertieslayoutContentsAfter any thing that requires a redistribution of elementsGood for reacting to location and content changesImportant Methods
Final Thought Before we get into Components
I will break every best practice I just mentioned in this class
Working with Components
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
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
Why
Label
You cannot skin a label
Custom Component
A label-like
Compare
Skinning Custom Component
override protected function drawBackground(unscaledWidth:Number, unscaledHeight:Number):void{}Removing the Background
Almost all components have a background that will look dumb once you start adding custom ui.
Why
Working with Fonts
There are 2 font rendering engines in FlashThis means 2 ways of embedding fontsTLFNonTLF Most Mobile components use NonTLFLabel uses TLFFont Recap
You have to embed both TLF and NonTLF fontsYou can do this with MetadataIve never done it that wayBecause Flash Professional makes this very easy
Consequence
Embedding fonts with Flash Professional
Button
Compare
Skinning Button
override protected function getBorderClassForCurrentState():Class{if (currentState == "down"){labelDisplay.setStyle("color",0xFFFFFF);return downBorderSkin;}else{labelDisplay.setStyle("color",0x48250A);return upBorderSkin;}}Replacing the Border
View
Compare
Skinning View
override protected function childrenCreated():void{super.childrenCreated();this.actionBar.height = 0;}Hide ActionBar
ItemRenderer
Compare
Working with an Iterator
override protected function layoutContents(unscaledWidth:Number, unscaledHeight:Number):void{super.layoutContents(unscaledWidth, unscaledHeight);}Deal with layout
Text Area
Compare
Skinning Text Area
Conclusions
Remove the backgroundSlap in graphicsAccount for DPIAccount for redrawsTypical Process
Deep Dive Into Flex Mobile Item Renderershttp://www.slideshare.net/JasonHanson/deep-dive-into-flex-mobile-item-renderers-7501594Jason San Josehttp://www.adobe.com/devnet/flex/articles/mobile-skinning-part1.htmlhttp://www.adobe.com/devnet/flex/articles/mobile-skinning-part2.htmlhttp://www.adobe.com/devnet/flex/articles/mobile-skinning-part3.html Good resources
Follow up?Feel free to contact [email protected]://terrenceryan.comTwitter: @tpryan
69