jump to navigation

How to skin a Flex combobox with Flash skins August 29, 2010

Posted by Tournas Dimitrios in Flex.
trackback

If You want to use a SWF file with a set of own symbols in order to customize Flex Combobox states.Use the upSkin, overSkin, downSkin, and disabledSkin style properties of the ComboBox class to apply custom symbols to any combobox. These attributes can be set directly on a ComboBox instance or as part of a CSS style definition.

The first thing to do is create a file in Flash and ComboBoxSkins.swf within it to create 4 symbols of type MovieClip with different states of the ComboBox. These symbols should be named: ComboBox_upSkin, ComboBox_downSkin, ComboBox_overSkin, ComboBox_disabledSkin .

If we want to put the CSS inline style do the following:

< ? x m l version=”1.0″ encoding=”utf-8″?>
<m x: A pplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
 <m x: C omboBox x=”196″ y=”135″
 upSkin=”@Embed(source=’ComboBoxSkins.swf’, symbol=’ComboBox_upSkin’)”
 overSkin=”@Embed(source=’ComboBoxSkins.swf’, symbol=’ComboBox_overSkin’)”
 downSkin=”@Embed(source=’ComboBoxSkins.swf’, symbol=’ComboBox_downSkin’)”
 disabledSkin=”@Embed(source=’ComboBoxSkins.swf’, symbol=’ComboBox_disabledSkin’)”>
 <!– PUT HERE THE OPTIONS OF COMBOBOX –>
 </m x: C omboBox>
</m x: A pplication>

If you want to apply the style to some Comboboxes, it’s a good idea to create a CSS style and then apply to Comboboxes elected:

< ? x m l version=”1.0″ encoding=”utf-8″?>
 <m x: A pplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
 <m x: S tyle>
 .myComboBox
 {
 disabledSkin: Embed(source=”ComboBoxSkins.swf”, symbol=”ComboBox_disabledSkin”);
  downSkin: Embed(source=”ComboBoxSkins.swf”, symbol=”ComboBox_downSkin”);
  overSkin: Embed(source=”ComboBoxSkins.swf”, symbol=”ComboBox_overSkin”);
  upSkin: Embed(source=”ComboBoxSkins.swf”, symbol=”ComboBox_upSkin”);  }
 </m x: S tyle>
 <m x: C omboBox x=”196″ y=”135″ styleName=”myComboBox”>
  <!– PUT HERE THE OPTIONS OF COMBOBOX –>
 </m x: C omboBox>
</m x: A pplication> 

If you like, you can apply the style to all comboxes to appear in the application, overriding the default component’s styles:

< ? x m l version=”1.0″ encoding=”utf-8″?>
<m x: A pplication xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
<m x: S tyle>
 ComboBox
 {
 disabledSkin: Embed(source=”ComboBoxSkins.swf”, symbol=”ComboBox_disabledSkin”);
 downSkin: Embed(source=”ComboBoxSkins.swf”, symbol=”ComboBox_downSkin”);
 overSkin: Embed(source=”ComboBoxSkins.swf”, symbol=”ComboBox_overSkin”);
 upSkin: Embed(source=”ComboBoxSkins.swf”, symbol=”ComboBox_upSkin”);
 }
</m x: S tyle>
 <m x: C omboBox x=”196″ y=”135″>
 <!– PUT HERE THE OPTIONS OF COMBOBOX –>
 </m x: C omboBox>
</m x: A pplication>

About these ads

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 96 other followers