This is the fourth in a series of posts making up a general tutorial on Adobe Flex. In this post I continue describing ActionScript, the programming language used to code the business logic in Flex applications. In this post I describe ActionScript classes.
Classes – ActionScript is an object oriented language making use of many object oriented constructs, such as classes, packages, inheritance, accessor methods, method overriding, etc. Classes are such a large topic that only a brief overview of the topic will be covered here.
The following is a class we will use in our discussion of ActionScript classes.
package com.chikaradev.classes {
import mx.controls.Button;
public class MyButton extends Button{
private var _myvar:int = 0;
public function MyButton(){
super();
}
public function set myvar(val:int):void{
this._myvar = val;
}
public function get myvar():int{
return this._myvar;
}
override protected function updateDisplayList(unscaledWidth:Number,
unscaledHeight:Number):void{
super.updateDisplayList(unscaledWidth, unscaledHeight);
this.graphics.lineStyle(3, 0xFF0000, 1);
this.graphics.moveTo(5, this.height/2);
this.graphics.lineTo(this.width-5, this.height/2);
validateNow();
}
}
}
package com.chikaradev.classes – it is good to organize custom classes into packages that map to the directory structure where the classes are located, relative to the main application MXML file. In this case the file for custom class MyButton reside in the following directory structure:
src
com
chikaradev
classes
MyButton.as
import mx.controls.Button; – we need to import the Button class because our custom class “extends” Button, meaning it is based upon the Flex standard Button class.
public class MyButton extends Button – here we declare the custom class MyButton, with the access modifier public, using the extends keyword to indicate we are basing our class on the Flex Button class.
private var _myvar:int = 0; – our custom class will have a private variable _myvar. Often, the names of private variables in Flex start with an underscore.
public function MyButton() – this is the constructor of the class, where initialization occurs. We simply call the super() method, which calls the constructor of the “super” class, meaning the class this class extends (Button);
public function set myvar(val:int):void – Flex uses a feature called set and get methods to implement accessor methods, a key object oriented design construct. Implementing a set and get method here allows us to assign a value to _myvar, or to assess its value, using the myvar=”100” syntax in the <MyButton> MXML tag. The method can be named anything, but in the body we assign the parameter to the private _myvar variable: this._myvar = val;
override protected function updateDisplayList – here we “override” the standard Flex Button class method updateDisplayList, meaning we want to change the standard behavior of the method. We first call the super class version of the updateDisplayList method, and then implement custom code, where we draw a line through the label of the button.
validateNow(); – often you want to call either validateNow() or invalidateDisplayList() after custom code that affects the display list, because your code may be executed but not rendered onscreen yet, and these methods force a redraw of the UI.
The following code illustrates defining an instance of our custom class in MXML and in ActionScript. Notice when you execute this simple application that the MyButton instance defined in MXML is displayed above the instance defined in ActionScript, because the MXML is processed before the creationComplete event is dispatched.
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="init();" xmlns:comp="com.chikaradev.classes.*">
<mx:Script>
<![CDATA[
import com.chikaradev.classes.MyButton;
private function init():void{
var mb:MyButton = new MyButton();
mb.label = "Greg";
mb.myvar = 35;
this.addChild(mb);
}
]]>
</mx:Script>
<comp:MyButton myvar="100" label="My New Button"/>
</mx:Application>
Tags: ActionScript, classes