Trying to make a Flex4 copy of Insync
Hi there,
I'd like to use Cairngorm 3 with Parsley in a new Flex 4 project. To start understanding what I need to do, I thought I'd first take the Insync modular extended project, and try to reproduce some core parts of it in Flex 4. I have got a certain way, but am having trouble which may be something very straightforward I'm missing.
Here's my code. References to core are simply a copy of the insyncModularExtended-core project and the three sections are separate projects which each only contain a label, "Section1", "Section2", "Section3".
//Shell.mxml
<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"
xmlns:core="test.core.*"
xmlns:cairngorm="com.adobe.cairngorm.*"
xmlns:presentation="test.presentation.*"
preinitialize="FlexContextBuilder.build(TestContext);"
addedToStage="dispatchEvent(new Event('configureIOC', true))">
<s:layout>
<s:VerticalLayout />
</s:layout>
<fx:Script>
<![CDATA[
import test.TestContext;
import org.spicefactory.parsley.flex.FlexContextBuilder;
]]>
</fx:Script>
<fx:Declarations>
<cairngorm:CairngormNavigationSupport />
</fx:Declarations>
<fx:Style source="TestStyles.css" />
<presentation:Toolbar width="100%" />
<presentation:ContentViewStack width="100%" height="100%" />
</s:Application>
//TestContext.mxml
<fx:Object xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:module="com.adobe.cairngorm.module.*"
xmlns:infrastructure="test.infrastructure.*"
xmlns:presentation="test.presentation.*"
xmlns:application="test.application.*">
<fx:Script>
<![CDATA[
import org.spicefactory.lib.reflect.ClassInfo;
]]>
</fx:Script>
<fx:Declarations>
<!-- Presentation -->
<presentation:ToolbarPM />
<presentation:MoneyPM />
<!-- Infrastructure -->
<module:ParsleyModuleDescriptor objectId="section1"
url="../../test-section1/bin-debug/Section1.swf"
domain="{ ClassInfo.currentDomain }"/>
<module:ParsleyModuleDescriptor objectId="section2"
url="../../test-section2/bin-debug/Section2.swf"
domain="{ ClassInfo.currentDomain }"/>
<module:ParsleyModuleDescriptor objectId="section3"
url="../../test-section3/bin-debug/Section3.swf"
domain="{ ClassInfo.currentDomain }"/>
<infrastructure:AlertHandler />
</fx:Declarations>
</fx:Object>
//Toolbar.mxml
<s:Group
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
addedToStage="dispatchEvent(new Event('configureIOC', true))">
<s:layout>
<s:HorizontalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import test.presentation.ToolbarPM;
[Inject]
[Bindable]
public var model:ToolbarPM;
]]>
</fx:Script>
<mx:ToggleButtonBar
dataProvider="{ model.menuItems }"
selectedIndex="{ model.selectedIndex }"
itemClick="model.navigationBarHandler(event.item)" />
</s:Group>
//ToolbarPM.as
package moneyinfo.presentation
{
import com.adobe.cairngorm.navigation.NavigationEvent;
import flash.events.EventDispatcher;
import test.application.ContentDestination;
import mx.collections.ArrayCollection;
import mx.collections.IList;
import mx.utils.StringUtil;
[Event(name="navigateTo", type="com.adobe.cairngorm.navigation.NavigationEvent")]
[ManagedEvents(names="navigateTo")]
public class ToolbarPM extends EventDispatcher
{
public static const SECTION1:String = "section1";
public static const SECTION2:String = "section2";
public static const SECTION3:String = "section3";
[Bindable]
public var menuItems:IList;
[Bindable]
public var selectedIndex:int;
public function ToolbarPM()
{
menuItems = new ArrayCollection([SECTION1,SECTION2,SECTION3]);
}
public function navigationBarHandler(label:Object):void
{
var destination:String;
switch(label)
{
case SECTION1:
destination = ContentDestination.SECTION1;
break;
case SECTION2:
destination = ContentDestination.SECTION2;
break;
case SECTION3:
destination = ContentDestination.SECTION3;
break;
}
dispatchEvent(NavigationEvent.newNavigateToEvent(destination));
}
}
}
//ContentDestination.as
package test.application
{
public class ContentDestination
{
public static const SECTION1:String = "content.section1";
public static const SECTION2:String = "content.section2";
public static const SECTION3:String = "content.section3";
}
}
//ContentViewStack.mxml
<mx:ViewStack xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:presentation="test.contacts.presentation.*"
xmlns:core="test.core.*"
addedToStage="dispatchEvent( new Event( 'configureIOC', true ) )">
<fx:Metadata>
[Waypoint(name="content")]
</fx:Metadata>
<fx:Script>
<![CDATA[
import test.application.ContentDestination;
import mx.modules.IModuleInfo;
[Bindable]
[Inject(id="section1")]
public var section1:IModuleInfo;
[Bindable]
[Inject(id="section2")]
public var section2:IModuleInfo;
[Bindable]
[Inject(id="section3")]
public var section3:IModuleInfo;
public override function set selectedIndex(value:int):void
{
super.selectedIndex = value;
}
]]>
</fx:Script>
<core:TestViewLoader
automationName="{ ContentDestination.SECTION1 }"
width="100%" height="100%"
info="{ section1 }" />
<core:TestViewLoader
automationName="{ ContentDestination.SECTION2 }"
width="100%" height="100%"
info="{ section2 }" />
<core:TestViewLoader
automationName="{ ContentDestination.SECTION3 }"
width="100%" height="100%"
info="{ section3 }" />
</mx:ViewStack>
What happens, when I run it, I get a blank screen. If I debug, I find that the model (ToolbarPM) in the Toolbar component is null. So, it's not being injected correctly.
Can anyone see what I'm missing?
Thanks!
AdChoices