Search Flex Components Free

Custom Search

December 27, 2007

seperate the code and UI view

How to create AS files for a tab navigator.

// main.mxml

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”” layout=”absolute”

backgroundGradientColors=”[#ffffff, #c0c0c0]” xmlns:local=”*”>

<mx:TabNavigator x=”10″ y=”10″ width=”200″ height=”200″>

<local:FirstTab label=”Tab 1″ width=”100%” height=”100%”/>

<mx:Canvas label=”Tab 2″ width=”100%” height=”100%”/>



// firstTab.mxml

<?xml version=”1.0″ encoding=”utf-8″?>

<FirstTabClass xmlns=”tab.*” xmlns:mx=”” width=”250″ height=”150″>

<mx:Button label=”Button” horizontalCenter=”0″ verticalCenter=”0″ id=”button”/>



package tab


import mx.containers.Canvas;

import mx.controls.Button;



public class FirstTabClass extends Canvas


// the variable name should correspond to the id of the button object in the component

public var button:Button;

public function FirstTabClass() {

addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);


private function creationCompleteHandler(event:FlexEvent):void {

button.addEventListener(MouseEvent.CLICK, buttonClickHandler);


private function buttonClickHandler(event:MouseEvent):void {





Related Flex Tutorials