flex 3 将数据从模块传递到父应用程序以在视图堆栈中切换视图 [英] flex 3 passing data from modules to parent application to switch views in the viewstack
问题描述
你好，stackoverflowers，
Hello Fellow stackoverflowers,
我一直在写一段代码.我有一个带有加载 5 个模块的视图堆栈的应用程序.每个模块都是通过 moduleLoader 标签加载的，它们都有一个 id.
I´m stuck writing a piece of code. I have application with a viewstack witch load 5 modules. each module is loaded via the moduleLoader tag and they all have an id.
每个加载的模块都有一个上下文菜单.上下文菜单有 5 个菜单项.视图堆栈的每个视图对应一个菜单项.
Every loaded module has a context menu. the context menu has 5 menuItems. one menuItem for each view for the viewstack.
上下文菜单通过 xml 加载.
The context menu is loaded via xml.
这是我的申请文件.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
backgroundColor="#b1b1b1"
backgroundGradientColors="[#b1b1b1,#252525]">
<mx:Script>
<![CDATA[
import mx.core.Container;
//change viewstack views via modules context menu
public function switchView(viewId:String):void
{
var container:Container = Container(tops.getChildByName(viewId));
if (container != null)
{
tops.selectedChild = container;
}
}
]]>
</mx:Script>
<mx:ViewStack id="tops" width="100%" height="100%">
<mx:ModuleLoader id="admin" url="view/admin.swf" width="100%" height="100%"/>
<mx:ModuleLoader id="tv" url="view/tv.swf" width="100%" height="100%"/>
<mx:ModuleLoader id="community" url="view/community.swf" width="100%" height="100%"/>
<mx:ModuleLoader id="shop" url="view/shop.swf" width="100%" height="100%"/>
<mx:ModuleLoader id="communicator" url="view/communicator.swf" width="100%" height="100%"/>
</mx:ViewStack>
</mx:Application>
这是我模块中的 switch 语句
and this is my switch statement in my Module
public function changeView():void{
switch(action) {
case "admin":
parentApplication.switchView("admin");
break;
case "tv":
parentApplication.switchView("tv");
break;
case "shop":
parentApplication.switchView("shop");
break;
case "community":
parentApplication.switchView("community");
break;
case "default":
parentApplication.switchView("communicator");
break;
}
}
这是我的上下文菜单 xml
and this is my context menu xml
<mx:XML id="appMenu">
<root>
<menuitem enabled="false"/>
<menuitem label="Administration" action="admin" icon="adminMDI"/>
<menuitem label="Television" action="tv" icon="tvMDI"/>
<menuitem label="Community" action="community" icon="communityMDI"/>
<menuitem label="Shopping Mall" action="shop" icon="shoppingMallMDI"/>
<menuitem label="Communicator" action="default" icon="communicatorMDI"/>
</root>
</mx:XML>
我想做的是通过单击上下文菜单中的菜单项之一来切换视图堆栈中的视图.我无法从我的模块到应用程序进行通信.我究竟做错了什么?我必须做什么?有人可以帮我吗?
What i would like to do is switch the views in the viewstack by clicking on one of the menuitems in the context menu. i can't communicate from my module to the application. What am i doing wrong? what must i do? Can anybody help me out?
Oyeah 在我忘记之前
Oyeah before i forget
上下文菜单的 xml 在模块中，但是上下文菜单在扩展按钮的 as 文件中.
the xml of the context menu is in the module but, the context menu is in a as file that extensiate a button.
请任何机构给我一个很好的例子来实现这一点.
please can any body give me a good example how to accomplish this.
谢谢
DJ
推荐答案
在进入多模块通信之前，我看到了几个问题.
I see a couple issues before getting into the multi-module communication.
首先，在您的 changeView() 函数中，您要声明变量 action，然后打开它.
First, in your changeView() function, you are declaring the variable action and then switching on it.
public function changeView():void {
var action:String;
switch(action) {
// action will always be null here.
}
}
因为您的 switch 语句中没有默认"大小写，所以永远不会调用 parentApplication.switchView.
Because you don't have a 'default' case in your switch statement(s), parentApplication.switchView will never be called.
此外，为了简洁起见，您可以编写如下 switch 语句:
Also, for the sake of brevity, you can write switch statements like this:
switch(action) {
case "admin":
parentApplication.changeView("admin");
break;
case "tv":
parentApplication.changeView("tv");
break;
case "shop":
parentApplication.changeView("shop");
break;
// ... etc ...
default:
// this gets called if action doesn't match anything.
break;
}
最后，您可以节省更多的输入，因为您的操作和模块 ID 是相同的，您可以这样做:
Finally, you could save yourself even more typing because your action and module ids are the same, you could do this:
public function changeView(action:String):void {
parentApplication.changeView(action);
}
也许尝试这些事情，然后更新您的问题(此外，您的上下文菜单的 XML 未在您的问题中正确呈现).这可能有助于社区更轻松地解决您的问题.
Maybe try those things and then updating your question (also, the XML for your context menus didn't render correctly in your question). That may help the community solve your issue a little easier.
我不认为问题出在模块通信上.我构建了一个简单的项目，可以满足您的需求.我已经在下面发布了来源.
I don't think the problem is in the module communication. I built a simple project that does what I think you're looking for. I've posted the source below.
mmodules.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" implements="interfaces.IApplication">
<mx:Script>
<![CDATA[
import mx.core.Container;
public function changeView(action:String):void {
viewstack.selectedChild = viewstack.getChildByName(action) as Container;
}
]]>
</mx:Script>
<mx:ViewStack id="viewstack" width="100%" height="100%">
<mx:ModuleLoader id="module1" url="views/module1.swf" />
<mx:ModuleLoader id="module2" url="views/module2.swf" />
</mx:ViewStack>
</mx:Application>
接口/IApplication.as
package interfaces {
public interface IApplication {
function changeView(action:String);
}
}
views/module1.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Module xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
import interfaces.IApplication;
import mx.events.MenuEvent;
import mx.controls.Menu;
/**
* Dynamically builds a menu.
*/
protected function showMenu():void {
var m:Menu = Menu.createMenu(null, menuData, false);
m.labelField = '@label';
m.addEventListener(MenuEvent.ITEM_CLICK, onItemClick);
m.show(10, 10);
}
/**
* Handles whenever an item in the menu is clicked.
*/
protected function onItemClick(e:MenuEvent):void {
if(e && e.item && e.item is XML) {
changeView(e.item.@action);
}
}
/**
* Tells the parent application to switch views.
*/
protected function changeView(action:String):void {
var app:IApplication = parentApplication as IApplication;
switch(action) {
case 'module1':
app.changeView('module1');
break;
case 'module2':
app.changeView('module2');
break;
}
}
]]>
</mx:Script>
<mx:XML format="e4x" id="menuData">
<root>
<menuitem label="Module 1" action="module1" />
<menuitem label="Module 2" action="module2" />
</root>
</mx:XML>
<mx:Button label="Show menu" click="showMenu()" />
</mx:Module>
希望有所帮助.
这篇关于flex 3 将数据从模块传递到父应用程序以在视图堆栈中切换视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
