Customizing the Look of Mobile Flex
-
Upload
terry-ryan -
Category
Technology
-
view
2.616 -
download
2
Transcript of Customizing the Look of Mobile Flex
![Page 1: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/1.jpg)
Customizing the Look of Mobile FlexTerry Ryan Adobe Developer Evangelist
![Page 2: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/2.jpg)
• Design Considerations• CSS vs Skinning• Introduction to Skinning• Conclusions
Agenda
![Page 3: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/3.jpg)
DESIGN CONSIDERATIONS
![Page 4: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/4.jpg)
Work with a
designer
![Page 5: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/5.jpg)
Start as High Resolution as possible
640x920
![Page 6: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/6.jpg)
Scale Down
![Page 7: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/7.jpg)
Deal 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
![Page 8: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/8.jpg)
Dealing with PSD’s
• Get PSD• Pull into to
Fireworks• Use Fireworks to
export pngs and jpgs.
![Page 9: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/9.jpg)
SKIN VS CSS
![Page 10: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/10.jpg)
• Font Changes– Family– Color– Size
• Flex UI Changes– Color– Flex CSS Properties
CSS
![Page 11: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/11.jpg)
• Changing Behavior• Radical change in look and feel• Implementation of custom graphics
Skinning
![Page 12: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/12.jpg)
CONCEPTS
![Page 13: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/13.jpg)
Performance is key
![Page 14: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/14.jpg)
ActionScript Components Perform Best
![Page 15: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/15.jpg)
Almost all of your skins will
be ActionScript
Skins
![Page 16: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/16.jpg)
• As much font selection as possible• Class specifications
What I use CSS for
![Page 17: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/17.jpg)
Why?
![Page 18: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/18.jpg)
setStyle is relatively expensive
![Page 19: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/19.jpg)
SKIN LIFECYCLE
![Page 20: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/20.jpg)
• 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
Important Methods
![Page 21: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/21.jpg)
Final Thought Before we get
into Components
![Page 22: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/22.jpg)
I break every best practice
![Page 23: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/23.jpg)
CLASSES YOU NEED TO KNOW
![Page 24: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/24.jpg)
• Lightweight• Can be Styled• Can used for editable and static text• It can’t be used in MXML markup
though
StylableTextField
![Page 25: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/25.jpg)
• Lightweight image component• Doesn’t have ability to load dynamic
content… yet.• This is fine, skin assets should be
embedded • Fast performing
BitmapImage
![Page 26: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/26.jpg)
• Like a Group, but you can skin it.
SkinableComponent
![Page 27: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/27.jpg)
• High performance renderer• Handles a lot of cases.• Can be extended.
IconItemRenderer
![Page 28: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/28.jpg)
WORKING WITH COMPONENTS
![Page 29: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/29.jpg)
Starting
![Page 30: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/30.jpg)
Finishing
![Page 31: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/31.jpg)
APPLICATION
![Page 32: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/32.jpg)
Compare
![Page 33: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/33.jpg)
Skinning Application
![Page 34: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/34.jpg)
s|ViewNavigatorApplication{skinClass: ClassReference("skins.AppSkin");
}
Assigning a Skin in CSS
![Page 35: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/35.jpg)
• Prevents you from cluttering up Flex with presentational information
Why
![Page 36: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/36.jpg)
switch (applicationDPI){
case 320:{
break;}case 240:{
break;}default:{
break;}
}
Dealing with DPI
![Page 37: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/37.jpg)
WORKING WITH FONTS
![Page 38: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/38.jpg)
• 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
Font Recap
![Page 39: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/39.jpg)
• 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
Consequence
![Page 40: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/40.jpg)
Embedding fonts with Flash Professional
![Page 41: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/41.jpg)
BUTTON
![Page 42: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/42.jpg)
Compare
![Page 43: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/43.jpg)
Skinning Button
![Page 44: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/44.jpg)
CONCLUSIONS
![Page 45: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/45.jpg)
BEAUTYWhy care?
![Page 46: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/46.jpg)
Why care about beauty?
![Page 47: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/47.jpg)
Beauty is the difference between
Apps people have to use Apps people want to use
![Page 48: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/48.jpg)
Beauty is the difference between
Apps people have to use Apps people want to use
![Page 49: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/49.jpg)
Finicky
![Page 50: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/50.jpg)
• Do as much in css as possible• Drop to skins• Remove the background• Slap in graphics• Account for DPI• Account for redraws
Typical Process
![Page 51: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/51.jpg)
• 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/
Good resources
![Page 52: Customizing the Look of Mobile Flex](https://reader035.fdocuments.net/reader035/viewer/2022062704/555c2748d8b42a0b418b4d9c/html5/thumbnails/52.jpg)
Follow up?• Feel free to contact me– [email protected]– http://terrenceryan.com– Twitter: @tpryan