4 Replies Latest reply on Jan 7, 2010 5:19 PM by Johnking08

    MVC 'best practice' how-to question. (Assume not using Mate, Cairngorm, PureMVC etc.)

    rickcr Level 1

      I've built a ton of webapps (mostly in Java/JSP) using various architectures and best practices over the  years. I'm new to RIAs on the client side, though, and starting out with Flex. The tutorials online don't seem to cover some of the real-world scenarios I typically run into when talking to different components. I understand there are frameworks (eg Mate, Cairngorn, etc) that deal with MVC, but I actually want to start out without them - mostly so I can see clearly where they are making things cleaner or more manageable and I can better get a grasp of coding RIAs the proper way.


      So let's take what I consider a simple example that I'm trying to work on and how it should be coded correctly in Flex.


      main application file to contain two custom view components -  MyTreePanel.mxml and MyDisplayPanel.mxml


      MyTreePanel contains a Tree. When you select a node in the Tree, you then want to select an approriate ViewStack component in MyDisplayPanel.mxml.


      What is the best way to set this up? I currently have a 'treeChanged' event handler in the MyTreePanel.mxml to handle the tree node click, but how do I tell the MyDisplayPanel 'when this treeChanged event fires, select the appropriate view on MyDisplayPanel to display.' MyTreePanel shouldn't need to have any awareness of the other MyDisplayPanel so I'm not sure how to correctly wire this together.


      I understand how to create a bindable model object, but in this case it's the view itself (MyDisplayPanel.mxml) that needs to be signaled what to do. In the model/view/controller examples, you create a bindable model object and you could use the controller from one view to modify the model, which of course will affect another view using the model, but I bit unclear how this works out with mxml view components.


      To provide some clarity in a brief example...



      <mx:HBox width="100%" height="100%">
           <view:TreePanel width="400" height="600"/>
           <view:MyDisplayPanel width="400" height="600"/>



      public function treeChanged(event:Event):void {
          selectedNode=Tree(event.target).selectedItem as XML;
          var nodeID:String = selectedNode.@label;
          //will want MyDisplayPanel to select the correct view state based on this nodeID string


      <mx:Tree id="myTreeNav" dataProvider="{xmlData}" ..... />


      //somehow be made aware of the nodeID selected in TreePanel and then...
      myStack.selectedChild = Container(myStack.getChildByName(nodeID));


          <mx:ViewStack id="myStack" width="100%" height="100%">
              <views:CompA id="compA" width="100%" height="100%"  />
              <views:CompB id="compB" width="100%" height="100%"  />


      Is it possibly better for the containing component that holds TreePanel and MyDisplayPanel to be the one containing the treeChanged even listener? and then it can call down to the MyDisplayPanel to do its switching? Or maybe someohow leverage some kind of Observable pattern to handle all of this?


      Any documents explaining best practices for this kind of work would be much appreciated.