Setting multiple style names on a Spark Button control in Flex 4

By Peter deHaan On October 27, 2010 · 5 Comments

The following example shows how you can define multiple style names on a Spark Button control in Flex 4 by setting the styleName property to a space separated list of CSS style names.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/27/setting-multiple-style-names-on-a-spark-button-control-in-flex-4/ -->
<s:Application name="Spark_Button_styleName_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Style>
        .boldWeight {
            fontWeight: bold;
        }
        .redColor {
            color: red;
        }
    </fx:Style>
 
    <s:Button id="btn1"
            label="MXML"
            styleName="redColor boldWeight" />
 
    <s:Button id="btn2"
            label="ActionScript (click)"
            toolTip="Click to apply styles"
            click="btn2.styleName = 'redColor boldWeight';" />
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

Tagged with: styleName

About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

Visit Authors Website →

Add Widgets (Content Sidebar)

This is your Content Sidebar. Edit this content that appears here in the widgets panel by adding or removing widgets in the Content Sidebar area.

5 Responses to Setting multiple style names on a Spark Button control in Flex 4

Anuj Gakhar says:

October 28, 2010 at 5:26 am

Nice, I did not know that. Is this applicable only to Button or all Spark Controls?

Reply
- Peter deHaan says:
  
  October 28, 2010 at 7:51 am
  
  @Anuj Gakhar,
  
  Despite the blog post title, this should work on all controls.
  
  Peter
  
  Reply
Jeetendra Singh says:

October 28, 2010 at 12:55 pm

I am learning continuously from your blog and update all stuff which i learn in my blog ,
action script version of this post can be seen at setting-multiple-style-names-on-a-spark-button-control-in-flex-4-using-as3

Reply
Pavel says:

November 20, 2010 at 5:45 am

I am very interested on programming. Can anyone tell me how is adobe flex to create desktop or internet application? You can see my current works on http://www.Pavelsoftstudi.tk. If you have any advise to me pls mail me Pavelsoft@yahoo.com. Thanks in advanced!

Reply
tom says:

February 2, 2011 at 2:47 pm

Many thanks for that. I’ve been trying to find a solution for my problem with styles. I needed to have a couple different styles and one of components I was using had to inherit properties from more than one style. That’s awesome!

Reply