Session: Customizing Flex Applicatons: Styling, Skinning, and Beyond
o Skinning and Embedded Fonts are good to use, but have little documentation on them
o Customize components using type selectors (Panel, Button)
o Refine components with StyleNames (Dialogue Box TitleBar and OK Button)
o Classes are skins, collections of skins are themes
o Theme colors override class colors
o Define "Look and Feel" and "App-specific" styles
o Global and @font-face = app wide font styles
o Only 1 ".elementName" name allowed, first half of named ignored, i.e. defining body.type and table.type in the same CSS will result in the body.type being ignored and table.type taking precedence for all .type elements; It's better ensure all element names are unique
o Long CSS files can hit 32K file limit max size, no error will be given
o Each embedded font adds 30KB to your file
o Embedded fonts are required for Alpha effects
o There are two font managers to try if one doesn't work:
§ BatikFontManager
§ JREFont Manager
o .htmltext is not embedded font friendly
o No background gradients
o Button border set at 3
o Graphical Theme – Artwork based
o Create FLAs and export to .swc for Flex
o Graphical – Flash MovieClips
§ In Flash fla, create a main symbol and name it for exporting
· i.e. TomSkin
§ Then place all "state" symbols in main symbol
· i.e. TomSkinButtonUp, TomSkinButtonDown
§ Export fla contents to an swc file
· i.e. TomSkin.swc
§ Then put this code in your Flex app
· <mx:Script> [Embed(source="TomSkin.swc" symbol="TomSkin")]</mx:Script>
o Programmatic – ActionScript Classes
§ Your class must extend RectBorder class
· class TomSkin extends RectBorder
§ Your class must then override drawBorder() function
· function drawBorder()
§ Then put this code in you Flex app
· <mx:Script> static var skinToUse:TomSkin;
o lets CSS control button "Properties" not normally controlled by CSS
o i.e. Width, Height, etc.
o http://www.allurent.com/joeb/max2005 - Presentation PP and code samples – very worth the time to explore
-Tom
The Halo theme is now a separate SWC that you can apply (to get that old-school Flex look). Might be a good place to start looking at what goes into themes. I haven't looked at it myself yet, since some of the theme implementation details are still up in the air.matt hornflex docs
From: [email protected] [mailto: [email protected]] On Behalf Of Tariq Ahmed
Sent: Friday, December 09, 2005 12:47 PM
To: [email protected]
Subject: Re: [flexcoders] Themes (was TemplateMonster.com)
On the topic of themes... I never really looked into themes since that wasn't a priority. But was thinking it'd be great to start making an open library of themes for Flex2.
Has anyone produced graphical skins or an entire theme that includes skins for Flex2?
Has the process changed from 1.5 to 2? In 1.5 from my understanding you basically modified HaloTheme.fla and exported it to a swc. I was reading in 2.0 that you use compc to accomplish it, unfortunately page 567 of the app dev guide has been completed yet which covers 9 slicing.
Thx!
John C. Bland II wrote:That's an interesting comment. Is that where the majority of templates are done, honestly?
Guess it boils down to, you get what you pay for (regardless of who develops it).
On 12/8/05, Robert Thompson <[EMAIL PROTECTED] > wrote:That's because these are primarily Macintosh developers from England.
--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com
SPONSORED LINKS
Web site design development Computer software development Software design and development Macromedia flex Software development best practice
YAHOO! GROUPS LINKS
- Visit your group "flexcoders" on the web.
- To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
- Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service.
--
Flexcoders Mailing List
FAQ: http://groups.yahoo.com/group/flexcoders/files/flexcodersFAQ.txt
Search Archives: http://www.mail-archive.com/flexcoders%40yahoogroups.com
| Web site design development | Computer software development | Software design and development |
| Macromedia flex | Software development best practice |
YAHOO! GROUPS LINKS
- Visit your group "flexcoders" on the web.
- To unsubscribe from this group, send an email to:
[EMAIL PROTECTED]
- Your use of Yahoo! Groups is subject to the Yahoo! Terms of Service.
