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>

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>

Creating an auto-scrolling DataGrid control in Flex using as3

This is action script version of  http://blog.flexexamples.com/2009/01/31/creating-an-auto-scrolling-datagrid-control-in-flex/  post

1:  <?xml version="1.0" encoding="utf-8"?>
2:  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
3:                xmlns:s="library://ns.adobe.com/flex/spark"
4:                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">
5:      <fx:Script>
6:          <![CDATA[
7:              import mx.collections.ArrayCollection;
8:              import mx.controls.DataGrid;
9:              import mx.controls.dataGridClasses.DataGridColumn;
10:              import mx.events.CollectionEvent;
11:              import mx.events.FlexEvent;
12:
13:              private var timer:Timer;
14:              private var arr:ArrayCollection;
15:              private var dg:DataGrid;
16:              protected function application1_creationCompleteHandler(event:FlexEvent):void
17:              {
18:                  // TODO Auto-generated method stub
19:                  timer = new Timer(1000);
20:                  arr = new ArrayCollection();
21:                  dg = new DataGrid();
22:                  var columns:Array = new Array();
23:
24:                  var dgIdColumn:DataGridColumn = new DataGridColumn();
25:                  dgIdColumn.dataField="id";
26:                  dgIdColumn.headerText = "ID";
27:                  columns.push(dgIdColumn);
28:
29:                  var dgTimeColumn:DataGridColumn = new DataGridColumn();
30:                  dgTimeColumn.dataField="time";
31:                  dgTimeColumn.headerText = "Timer";
32:                  columns.push(dgTimeColumn);
33:
34:                  dg.columns = columns;
35:                  dg.x = 0;
36:                  dg.y = 0;
37:                  dg.dataProvider = arr;
38:                  addElement(dg);
39:
40:                  timer.addEventListener(TimerEvent.TIMER,onTimerTick);
41:                  arr.addEventListener(CollectionEvent.COLLECTION_CHANGE,onCollectionChange);
42:                  timer.start();
43:              }
44:
45:              private function onTimerTick(e:TimerEvent):void
46:              {
47:                  arr.addItem({id:timer.currentCount,time:"TEMP"});
48:              }
49:
50:              private function onCollectionChange(e:CollectionEvent):void
51:              {
52:                  callLater(scrollDataGrid);
53:              }
54:
55:              private function scrollDataGrid():void
56:              {
57:                  dg.verticalScrollPosition = dg.maxVerticalScrollPosition;
58:              }
59:
60:          ]]>
61:      </fx:Script>
62:      <fx:Declarations>
63:          <!-- Place non-visual elements (e.g., services, value objects) here -->
64:      </fx:Declarations>
65:  </s:Application>
66: