從另一個組件交換應用程序中的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組件 - 可能嗎？

回答

相關問題