1. Customizing the
Look of Mobile
Flex

2. Agenda
• Design Considerations
• CSS vs Skinning
• Introduction to Skinning
• Conclusions

3. DESIGN CONSIDERATIONS

4. Work with
a designer

5. 640x920
Start as
High
Resolution
as possible

6. Scale Down

7. • Custom graphics
look like crap if you
design for too small
a screen.
• But smaller DPI
Deal with devices are usually
less powerful
DPI meaning pushing
around larger
images is
ineffiecient

8. • Get PSD
• Pull into to
Fireworks
• Use Fireworks to
export pngs and
Dealing with jpgs.
PSD’s

9. SKIN VS CSS

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

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

12. CONCEPTS

13. Performance is
key

14. ActionScript
Components
Perform Best

15. Almost all of
your skins will
be ActionScript
Skins

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

17. Why?

18. setStyle is
relatively
expensive

19. SKIN LIFECYCLE

20. 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

21. Final Thought
Before we get
into
Components

22. I break every
best practice

23. CLASSES YOU NEED TO
KNOW

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

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

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

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

28. WORKING WITH
COMPONENTS

29. Starting

30. Finishing

31. APPLICATION

32. Compare

33. Skinning Application

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

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

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

37. WORKING WITH FONTS

38. 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

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

40. Embedding fonts with
Flash Professional

41. BUTTON

42. Compare

43. Skinning Button

44. CONCLUSIONS

45. BEAUTY

46. Why care about
beauty?

47. Beauty is the difference
between
Apps people have to use Apps people want to use

48. Beauty is the difference
between
Apps people have to use Apps people want to use

49. Finicky

50. Typical Process
• Do as much in css as possible
• Drop to skins
• Remove the background
• Slap in graphics
• Account for DPI
• Account for redraws

51. 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/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/

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