从另一个组件交换应用程序中的MXML组件 - 可能吗？

-1

我想创建我的第一个真实世界的Flex应用程序。我将有很多不同的数据输入/数据视图屏幕，所以我想我会创建许多不同的组件来处理正在返回的每种不同类型的数据。从另一个组件交换应用程序中的MXML组件 - 可能吗？

我有一个名为Layout的MXML应用程序，并且有一个名为“Navigator”的组件控制菜单，以及一个名为“MainContent”的ViewStack。

我希望Navigator组件将Layout应用程序上的ViewStack更改为另一个Component的每个Component（每个Component都嵌入在每个ViewStack的Canvas中）。

我在导航器上有一个点击处理程序，它看起来像这样： Layout.ContentFrame.selectedChild = event.itemRenderer.data.clickValue;

但它显示错误“通过带有静态类型类的引用访问可能未定义的属性ContentFrame”。

我的方法是做这件事的好方法吗？任何人都可以提出一个不同的方式做这个？

我试图引用它，使用FlexGlobals.Layout ...和topLevelApplication.Layout ...都没有工作？

代码是在这里：http://codeviewer.org/view/code:1972

来源

2011-04-13 danbiscuit

这将是巨大的，如果你提供你的应用程序的一些源代码，但无论如何，我会尽力阐明如何内引用组件MXML应用程序。

所以我试图重新通过描述你的应用程序保持简单：

<?xml version="1.0" encoding="utf-8"?> 
<!-- Layout.mxml --> 
<s:Application creationComplete="init()" minHeight="600" minWidth="955" xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"> 
    <fx:Script> 
    <![CDATA[ 
     import spark.events.IndexChangeEvent; 
     import mx.collections.ArrayCollection; 

     [Bindable] 
     private var items:ArrayCollection; 

     protected function init():void 
     { 
      items = 
       new ArrayCollection([ { label: "Button", clickValue: buttonChild }, 
             { label: "CheckBox", clickValue: checkBoxChild } ]); 
     } 

     protected function changeHandler(event:IndexChangeEvent):void 
     { 
      mainContent.selectedChild = event.newIndex > -1 ? items.getItemAt(event.newIndex).clickValue : noSelection; 
     } 
    ]]> 
    </fx:Script> 
    <s:layout> 
     <s:VerticalLayout horizontalAlign="justify" /> 
    </s:layout> 
    <s:List change="changeHandler(event)" dataProvider="{items}"> 
     <s:layout> 
      <s:TileLayout /> 
     </s:layout> 
    </s:List> 
    <mx:ViewStack id="mainContent"> 
     <mx:Canvas id="noSelection"> 
      <!-- Empty container for no selection --> 
     </mx:Canvas> 
     <mx:Canvas id="buttonChild"> 
      <s:Button label="Button" /> 
     </mx:Canvas> 
     <mx:Canvas id="checkBoxChild"> 
      <s:CheckBox label="CheckBox" /> 
     </mx:Canvas> 
    </mx:ViewStack> 
</s:Application>

正如你所看到的介绍你应该为它们分配一个ID MXML组件。将组件/文档中的每个MXML标签视为类属性，其中id是属性的标识符。那么通过应用程序名称来引用你的应用程序呢 - 它不会起作用。并尽量避免耦合王参考全球应用。

请保持ActionScript编码/命名约定（不要以大写字母开头，大写字母表示类/组件）。

回到你的示例代码，你应该保持低耦合的简单原则：子组件应该对父项一无所知。您可以使用Observer模式访问它，您可以使用Flash事件模型实现该模式。

所以我们的事件类从导航派出以通知的变化主要观点：与常量

/** 
* ViewChangeEvent.as 
*/ 
package 
{ 
import flash.events.Event; 

public class ViewChangeEvent extends Event 
{ 
    public static const CHANGE_VIEW:String = "changeView"; 

    private var _view:Object; 

    public function ViewChangeEvent(type:String, view:Object) 
    { 
     super(type, false, false); 
     this._view = view; 
    } 

    public function get view():Object 
    { 
     return _view; 
    } 

    public override function clone():Event 
    { 
     return new ViewChangeEvent(type, view); 
    } 

    public override function toString():String 
    { 
     return formatToString("ViewChangeEvent", "view"); 
    } 
} 
}

帮助类：

/** 
* Views.as 
*/ 
package 
{ 
/** 
* Keeps constants to represent views. 
*/ 
public class Views 
{ 
    public static const DATA_FORM:String = "dataForm"; 
    public static const DATA_LIST:String = "dataList"; 
} 
}

而且我们修改Navigator：

<?xml version="1.0" encoding="utf-8"?> 
<!-- Navigator.mxml --> 
<s:Group contentBackgroundColor="#F1D7D7" height="300" width="156" xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:s="library://ns.adobe.com/flex/spark"> 
    <fx:Metadata> 
     [Event(name="changeView", type="ViewChangeEvent")] 
    </fx:Metadata> 
    <fx:Script> 
    <![CDATA[ 
     private function fireViewChangeEvent(view:String):void 
     { 
      dispatchEvent(new ViewChangeEvent(ViewChangeEvent.CHANGE_VIEW, view)); 
     } 
    ]]> 
    </fx:Script> 
    <s:TitleWindow height="100%" title="Nav" width="100%" x="0" y="0"> 
     <s:Button label="Form" x="42" y="20" click="fireViewChangeEvent(Views.DATA_FORM)" /> 
     <s:Button label="List" x="42" y="54" click="fireViewChangeEvent(Views.DATA_LIST)" /> 
    </s:TitleWindow> 
</s:Group>

最后主要应用程序，我已经添加ID并替换您的内容无线th测试标签：

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:local="*"> 
    <s:layout> 
     <s:HorizontalLayout/> 
    </s:layout> 


    <fx:Script> 
    <![CDATA[ 
     protected function changeViewHandler(event:ViewChangeEvent):void 
     { 
      switch (event.view) 
      { 
       case Views.DATA_FORM: 
       { 
        viewstack1.selectedChild = stackForm; 
        break; 
       } 
       case Views.DATA_LIST: 
       { 
        viewstack1.selectedChild = stackList; 
        break; 
       } 
       default: 
       { 
        viewstack1.selectedChild = emptyContent; 
        break; 
       } 
      } 
     } 
    ]]> 
    </fx:Script> 

    <local:Navigator height="95%" changeView="changeViewHandler(event)" /> 
    <mx:ViewStack id="viewstack1" width="100%" height="100%"> 
     <s:NavigatorContent label="View 1" width="100%" height="100%" id="emptyContent"> 
     </s:NavigatorContent> 
     <s:NavigatorContent label="stackForm" id="stackForm" width="100%" height="100%"> 
      <s:Label text="stackForm" /> 
     </s:NavigatorContent> 
     <s:NavigatorContent label="stackList" id="stackList" width="100%" height="100%"> 
      <s:Label text="stackList" /> 
     </s:NavigatorContent> 
    </mx:ViewStack> 
</s:Application>

希望这有助于！

来源

2011-04-13 08:14:22 Constantiner

在上面的示例代码中，我使用了'List'组件作为菜单。 – Constantiner 2011-04-13 08:16:04

嗨，我已经看过这个，我可以看到你在做什么，但它看起来是从应用程序引用到组件。我想从组件修改应用程序？感谢您的提示RE：Capitals – danbiscuit 2011-04-13 08:31:12

我已经将我的代码上传到了：http://codeviewer.org/view/code:1972 – danbiscuit 2011-04-13 08:32:43

好像你通过自己的类，而不是他们的实例引用您的组件。

请发表你的一些代码，所以我可以说，正是你应该怎么做呢

来源

2011-04-13 07:41:56

Hi @Florian F.这是我的代码布局： – danbiscuit 2011-04-13 08:14:21

从另一个组件交换应用程序中的MXML组件 - 可能吗？

回答

相关问题