Flex组件101 –在UI组件里启动屏幕键盘支持

本文来自：http://www.insideria.com/2009/08/flex-components-101---enabling-keyboard-support-in-uicomponent.html

 

创建过扩展UI组件的自定义组件，那你毫无疑问可以进入这样一个场景。即使你为屏幕键盘事件添加了事件监听，或你覆盖了keyDownHandler 函数，你可能会发现你的组件实例未处理屏幕键盘事件。设定focusEnabled, mouseFocusEnabled, 或tabEnabled 似乎也不会产生此效果。不要抓狂！这很容易。你可能已经注意到如果你扩展一个Canvas或一个Button, 或其它任何Flex 组件（Spark或Halo), 你可轻松接收屏幕键盘事件，而毫无问题。然而，如果你创建自定义组件，而你想一个完全空白的对象（尽可能的bare-bone），你想扩展UI组件。UI组件是所有可视化Flex组件的根本，包括所有的Halo 和 Spark 组件组。

在UI组件里启动屏幕键盘支持就像执行"IFocusManagerComponent"界面一样容易。所有使用于"IFocusManagerComponent"界面的方法都在UI组件基本类里定义清楚，你所要做的就是向你的类声明添加"extends IFocusManagerComponent"。

下面是个简单的范例。它是一个自定义组件，接收屏幕键盘输入，在屏幕上予以显示。

这里是让组件运行起来的代码：

package

{

   import flash.events.KeyboardEvent;

   import mx.controls.Text;

   import mx.core.UIComponent;

   import mx.managers.IFocusManagerComponent;

   

   public class UIComponentWithKeyboard 

     extends UIComponent 

     implements IFocusManagerComponent

   {

      private var txt : Text;

      

      override protected function createChildren() : void

      {

         super.createChildren();

         txt = new Text();

         txt.visible = true;

         txt.setStyle("color", 0);

         txt.text = "click here, and press any key to accept keyboard events";

         addChild( txt );

       }

      

      override protected function updateDisplayList(w:Number, h:Number) : void

      {

         super.updateDisplayList(w,h);

         txt.width = w;

         txt.height = h;

         with (this.graphics)

         {

            clear();

            beginFill(0xFF0000, .1);

            drawRect(0,0,w,h);

          }

       }

      

      override protected function keyDownHandler(event:KeyboardEvent) : void

      {

         txt.text = "keycode:" + event.keyCode + 

                ", location:" + event.keyLocation + 

                ", charcode:" + event.charCode + 

                ", value:" + String.fromCharCode( event.charCode );

       } 

    }

}