This document outlines a presentation on skinning mobile Flex applications. It introduces skinning concepts and components like StylableTextField, BitmapImage, and SkinableComponent. It discusses performance considerations and using CSS for font styling. Key aspects of the skin lifecycle are described. Examples are provided for skinning an application, custom components, buttons, views, and item renderers. The document concludes with typical skinning processes and resources for further information.

1. Deep Dive into
Mobile Flex
Skinning

2. Who are You?

3. Agenda
• Introduction to Skinning
• Concepts
• Skinning Components
• Conclusions

4. Not a hands on
workshop

5. Why?

6. Lots and lots of
little details

7. Content
• https://github.com/tpryan/SkinExample
– Complete, no shortcuts
• https://github.com/tpryan/SkinExampleExercise
– Finished version of class exercise but incomplete due
to shortcuts
• https://github.com/tpryan/SkinExampleStarted
– Starting point for class

8. Be like a crazy
HTML standards
facist

9. No presentation
in markup

10. Starting

11. Finishing

12. WHY SKIN

13. CSS
• Font Changes
– Family
– Color
– Size
• Flex UI Changes
– Color
– Flex CSS Properties

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

15. CLASSES YOU NEED TO
KNOW

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

17. BitmapImage
• Lightweight image component
• Doesn’t have ability to load dynamic
content… yet.
• This is fine, skin assets should be
embedded
• Fast performing

18. SkinableComponent
• Like a Group, but you can skin it.

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

20. CONCEPTS

21. Performance is
key

22. ActionScript
Components
Perform Best

23. Almost all of
your skins will
be ActionScript
Skins

24. CSS

25. What I use CSS for
• As much font selection as possible
• Class specifications

26. Why?

27. setStyle is
relatively
expensive

28. SKIN LIFECYCLE

29. Important Methods
• 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

30. Final Thought
Before we get
into
Components

31. I will break every
best practice I
just mentioned
in this class

32. WORKING WITH
COMPONENTS

33. APPLICATION

34. Compare

35. Skinning Application

36. Assigning a Skin in CSS
s|ViewNavigatorApplication{
skinClass: ClassReference("skins.AppSkin");
}

37. Why
• Prevents you from cluttering up Flex with
presentational information

38. Dealing with DPI
switch (applicationDPI)
{
case 320:
{
break;
}
case 240:
{
break;
}
default:
{
break;
}
}

39. Why
• 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

40. LABEL

41. You cannot
skin a label

42. CUSTOM COMPONENT

43. Compare

44. Skinning Custom
Component

45. Removing the
Background
override protected function drawBackground(
unscaledWidth:Number, unscaledHeight:Number):void{
}

46. Why
• Almost all components have a background
that will look dumb once you start adding
custom ui.

47. WORKING WITH FONTS

48. Font Recap
• 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

49. Consequence
• 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

50. Embedding fonts with
Flash Professional

51. BUTTON

52. Compare

53. Skinning Button

54. Replacing the Border
override protected function getBorderClassForCurrentState():Class
{
if (currentState == "down"){
labelDisplay.setStyle("color",0xFFFFFF);
return downBorderSkin;
}
else{
labelDisplay.setStyle("color",0x48250A);
return upBorderSkin;
}
}

55. VIEW

56. Compare

57. Skinning View

58. Hide ActionBar
override protected function childrenCreated():void{
super.childrenCreated();
this.actionBar.height = 0;
}

59. ITEMRENDERER

60. Compare

61. Working with an
Iterator

62. Deal with layout
override protected function
layoutContents(unscaledWidth:Number, unscaledHeight:Numbe
r):void{
super.layoutContents(unscaledWidth, unscaledHeight);
}

63. TEXT AREA

64. Compare

65. Skinning Text Area

66. CONCLUSIONS

67. Typical Process
• Remove the background
• Slap in graphics
• Account for DPI
• Account for redraws

68. Good resources
• 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/mo
bile-skinning-part1.html
– http://www.adobe.com/devnet/flex/articles/mo
bile-skinning-part2.html
– http://www.adobe.com/devnet/flex/articles/mo

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