Trying to make a Flex4 copy of Insync

Question

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!

Answer 1

Hi Eric,
All Insync samples are compiled with Flex 4 so I'm thinking that you might not use an up-to-date version. Could you get the latest from trunk, please?
Best,
Alex