需要在FLEX應用程序中使用自定義組件的示例

Question

我想知道如何創建CustomComponent以及如何在FLEX應用程序中使用它。 給我一個簡單的例子，我有一點知識在那裏，所以我可以理解，如果你只是給我的代碼。我正在使用FLEX 3.0

在此先感謝。

Answer 1

很高興再次見到你。

格式化Stepper.as

package component 
{ 
import flash.events.Event; 
import flash.events.FocusEvent; 
import flash.events.MouseEvent; 

import mx.controls.NumericStepper; 
import mx.core.mx_internal; 
import mx.events.FlexEvent; 
import mx.formatters.Formatter; 
use namespace mx_internal; 

public class FormattedStepper extends NumericStepper { 
    // formatter 
    private var _formatter:Formatter; 

    public function FormattedStepper() { 
     super(); 
    } 

    override protected function createChildren():void { 
     super.createChildren(); 

     // un-restrict text input and set initial format 
     mx_internal::inputField.restrict = null; 
     doFormat(); 

     // event listeners 
     addEventListener(FlexEvent.VALUE_COMMIT, doFormat); 
     addEventListener(FocusEvent.FOCUS_OUT, doFormat); 
     addEventListener(MouseEvent.CLICK, doFormat); 
     addEventListener(FlexEvent.DATA_CHANGE, doFormat); 
     addEventListener(MouseEvent.MOUSE_DOWN, doFormat); 
     mx_internal::nextButton.addEventListener(MouseEvent.CLICK, doFormat); 
     mx_internal::nextButton.addEventListener(MouseEvent.MOUSE_DOWN, doFormat); 
     mx_internal::prevButton.addEventListener(MouseEvent.CLICK, doFormat); 
     mx_internal::prevButton.addEventListener(MouseEvent.MOUSE_DOWN, doFormat); 
     mx_internal::inputField.addEventListener(MouseEvent.CLICK, unFormat); 
    }  

    private function doFormat(event:Event = null):void 
    { 
     if ((_formatter != null) && (mx_internal::inputField != null) && (mx_internal::inputField.text != null)) 
     { 
      mx_internal::inputField.text = _formatter.format(value); 
     } 
    } 

    private function unFormat(event:Event = null):void 
    { 
     if ((_formatter != null) && (mx_internal::inputField != null) && (mx_internal::inputField.text != null)) 
     { 
      mx_internal::inputField.text = String(value); 
     }    
    } 

    public function set formatter(formatter:Formatter):void { 
     _formatter = formatter; 
     doFormat(); 
    } 
} 
} 

Test.mxml

<mx:NumberFormatter id="numberFormatter" precision="2" useNegativeSign="true" rounding="none"/> 

<mx:FormItem id="formitemLowerTolerance" label="Lower Tolerance:" labelStyleName="labelFormStyle" direction="horizontal"> 
      <component:FormattedStepper id="numstepLowerTolerance" width="150" formatter="{numberFormatter}"/> 
      <mx:Label id="lblLower" text="%"/> 
     </mx:FormItem>