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


this post is action script version of http://blog.flexexamples.com/2010/10/27/setting-multiple-style-names-on-a-spark-button-control-in-flex-4  in this post we assigning   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

 <?xml version="1.0" encoding="utf-8"?>

 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 

               xmlns:s="library://ns.adobe.com/flex/spark" 

               xmlns:mx="library://ns.adobe.com/flex/mx"

               minWidth="955" 

               minHeight="600" 

               creationComplete="application1_creationCompleteHandler(event)">

     <fx:Style>

         @namespace s "library://ns.adobe.com/flex/spark";

         @namespace mx "library://ns.adobe.com/flex/mx";

         .boldWeight {

             fontWeight: bold;

         }

         .redColor {

             color: red;

         }

     </fx:Style>

     <fx:Script>

         <![CDATA[

             import mx.events.FlexEvent;

             import spark.components.Button;

             import spark.layouts.HorizontalAlign;

             import spark.layouts.HorizontalLayout;

             import spark.layouts.VerticalAlign;

             import spark.layouts.VerticalLayout;

             protected function application1_creationCompleteHandler(event:FlexEvent):void

             {

                 setLayout();

                 createButtons();

             }

             private function setLayout():void

             {

                 var hl:HorizontalLayout = new HorizontalLayout();

                 hl.verticalAlign = VerticalAlign.MIDDLE;

                 hl.horizontalAlign = HorizontalAlign.CENTER 

                 layout = hl;

             }

             private function createButtons():void

             {

                 var btn1:Button = new Button();

                 btn1.label = "PRE STYLED"

                 btn1.styleName = "redColor boldWeight";

                 addElement(btn1);

                 var btn2:Button = new Button();

                 btn2.label = "CLICK ME TO MAKE ME STYLABLE"

                 btn2.addEventListener(MouseEvent.CLICK,onBtnClick1);

                 addElement(btn2);

             }

             protected function onBtnClick1(e:MouseEvent):void

             {

                 Button(e.target).label = "Click Again to remove style";

                 Button(e.target).styleName = "redColor boldWeight";

                 Button(e.target).removeEventListener(MouseEvent.CLICK,onBtnClick1);

                 Button(e.target).addEventListener(MouseEvent.CLICK,onBtnClick2);

             }

             protected function onBtnClick2(e:MouseEvent):void

             {

                 Button(e.target).label = "CLICK ME TO MAKE ME STYLABLE";

                 Button(e.target).styleName = ""; 

                 Button(e.target).removeEventListener(MouseEvent.CLICK,onBtnClick2);

                 Button(e.target).addEventListener(MouseEvent.CLICK,onBtnClick1);

             }

         ]]>

     </fx:Script>

 </s:Application>

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 )

Google photo

You are commenting using your Google 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 )

Connecting to %s