3.5 hours lab on building custom skins for Flex Mobile.

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