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=” http://www.adobe.com/2006/mxml” 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%”/> </mx:TabNavigator> </mx:Application> // firstTab.mxml <?xml version=”1.0″ encoding=”utf-8″?> <FirstTabClass xmlns=”tab.*” xmlns:mx=” http://www.adobe.com/2006/mxml” width=”250″ height=”150″> <mx:Button label=”Button” horizontalCenter=”0″ verticalCenter=”0″ id=”button”/> </FirstTabClass> // FirstTabClass.as package tab { import mx.containers.Canvas; import mx.controls.Button; import mx.events.FlexEvent; import flash.events.MouseEvent; 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 { trace(”FirstTabClass”); } } }