這將是巨大的,如果你提供你的應用程序的一些源代碼,但無論如何,我會盡力闡明如何內引用組件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>
希望這有助於!
在上面的示例代碼中,我使用了'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