flex mobile skinning workshop

Download Flex Mobile Skinning Workshop

If you can't read please download the document

Upload: terry-ryan

Post on 16-Apr-2017

4.527 views

Category:

Technology


0 download

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