setStyle and clearStyle usages for Spark button control in flex4 using as3


This post is again action script version of http://blog.flexexamples.com/2010/10/27/clearing-a-style-on-the-spark-button-control-in-flex-4/ , this example is showing how to add/remove style from spark component

 <?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:Script>

         <![CDATA[

             import flash.text.engine.FontWeight;

             import mx.containers.ControlBar;

             import mx.events.FlexEvent;

             import spark.components.Button;

             import spark.layouts.VerticalLayout;

             private var targetButton:Button;

             protected function application1_creationCompleteHandler(event:FlexEvent):void

             {

                 setLayout();

                 var styleSetter:Button = new Button();

                 styleSetter.label="Set Style";

                 var styleRemover:Button = new Button();

                 styleRemover.label="Remove Style";

                 styleSetter.addEventListener(MouseEvent.CLICK,setButtonStyle);

                 styleRemover.addEventListener(MouseEvent.CLICK,removeButtonStyle);

                 controlBarContent = [styleSetter,styleRemover];

                 targetButton = new Button();

                 addElement(targetButton);

                 targetButton.label = "Targer Button";

             }

             protected function setButtonStyle(e:MouseEvent):void

             {

                 targetButton.setStyle("fontWeight",FontWeight.BOLD);

             }

             protected function removeButtonStyle(e:MouseEvent):void

             {

                 targetButton.clearStyle("fontWeight");    

             }

             private function setLayout():void

             {

                 var vl:VerticalLayout = new VerticalLayout();

                 vl.paddingBottom = 20;

                 vl.paddingLeft = 20;

                 vl.paddingRight = 20;

                 vl.paddingTop = 20;

                 layout = vl;

             }

         ]]>

     </fx:Script>

     <fx:Declarations>

         <!-- Place non-visual elements (e.g., services, value objects) here -->

     </fx:Declarations>

 </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