apache-flex - Flash builder 4.6 - 代码隐藏方法

Question

我正在尝试为移动应用程序使用 flash builder 找出“代码背后”的正确方法：

1. 我正在创建一个 flex 移动 AIR 项目（基于“选项卡式视图”模板）
2. 在设计模式下设置我的 UI
3. 现在我希望所有逻辑都在一个单独的类中，从而相应地改变 UI 外观

听起来很容易，但是我真的无法获得这样做的方法，感谢您的帮助:)

更新：

主应用：

<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                  xmlns:s="library://ns.adobe.com/flex/spark" applicationDPI="160">
    <s:ViewNavigator label="a" width="100%" height="100%" firstView="views.aView"/>
    <s:ViewNavigator label="b" width="100%" height="100%" firstView="views.bView"/>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
</s:TabbedViewNavigatorApplication>

观点一：

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="a">
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Label id="txt" x="280" y="139" text="Label"/>
</s:View>

所以现在我希望 MyClass 根据我的逻辑更改 txt textField ，正确的方法是什么？

Answer 1

All you do is make an AS file that has the same base class as whatever your MXML object was initially set up as, for example if it's a VGroup make MyBaseClass extends VGroup, then change the VGroup to MyBaseClass.

Example

[Main.mxml]

<main:MainBase 
   xmlns:main="*"
   ...>
</main:MainBase>

[MainBase.as]

public class MainBase extends Application

Answer 2

将您的代码背后视为基类（或抽象类）。在抽象类中，将方法的实际实现或属性背后的“真实对象”留给扩展类来提供是很常见的。

这与在 Flash 中将基类设置为自定义类时所做的完全一样，但实际的成员对象（按钮等）是在其库实例链接到您的剪辑的 MovieClip 的舞台上提供的。

有关背后代码的更多信息，请在此处查看我的博客文章。如果您想查看此处描述的模板组件的代码，请查看此处。尽管模板组件在 Spark 世界 (IMO) 中用处不大。

Answer 3

一种优雅的方式是实现 IMXMLObject。在实现该接口时，IMXMLObject#initialize 方法将组件（命名为 Object 类型的文档）和可选的 id（类型为 String）作为参数，您可以轻松实现此模式。最大的优点是，您使用组合而不是继承，并且在使用接口时，您可以将其用作某种类型保存混合作为视图行为：

    package net.icodeapp.examples.views
    {
      import flash.events.MouseEvent;

      import mx.core.IMXMLObject;
      import mx.events.FlexEvent;

      public class ViewBaseModel implements IMXMLObject
      {
        //-------------------------------------------------------------------------
        //
        //          Properties
        //
        //-------------------------------------------------------------------------

        private var _id:String;

        private var _viewBase:ViewBase;

        protected function set viewBase(value:ViewBase):void
        {
          _viewBase = value;

          if (!_viewBase)
            throw new ArgumentError('View must be instance of ViewBase');

          if (!_viewBase.initialized)
            _viewBase.addEventListener(FlexEvent.CREATION_COMPLETE, viewBase_creationCompleteHandler, false, 0, true);
          else
            viewCreationCompleted();
        }

        //-------------------------------------------------------------------------
        //
        //          Constructor
        //
        //-------------------------------------------------------------------------

        public function ViewBaseModel()
        {
        }

        //-------------------------------------------------------------------------
        //
        //          Methods
        //
        //-------------------------------------------------------------------------

        public function initialized(document:Object, id:String):void
        {
          viewBase = document as ViewBase;
          _id = id;
        }

        private function viewCreationCompleted():void
        {
          _viewBase.addEventListener(MouseEvent.CLICK, viewBase_clickHandler);
        }

        //-------------------------------------------------------------------------
        //
        //          Event Handler
        //
        //-------------------------------------------------------------------------

        private function viewBase_creationCompleteHandler(event:FlexEvent):void
        {
          viewCreationCompleted();
        }

        private function viewBase_clickHandler(event:MouseEvent):void
        {
          // todo: do some action
        }
      }
    }

模型被初始化，引用由框架设置。查看生成的 ActionScript 代码时，您会看到模型实例化后在构造函数中调用的 IMXMLObject#initialize。

    <?xml version="1.0"?>
    <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
                 xmlns:views="net.icodeapp.examples.views.*">
      <fx:Declarations>
        <views:ViewBaseModel/>
      </fx:Declarations>
    </s:Group>

模型将通过视图接收事件，并可以在其上调用方法。