5 Replies Latest reply on Aug 20, 2009 5:20 PM by Gregory Lafrance

    new to value objects - need help

    wolfman33 Level 1

      Hi guys,

       

      I'm just starting out with flex builder, and i sorta grasp the concept of MVC and using value objects and custom event, and components.

       

      However, based on the all the examples floating around there on the web, I still cannot apply these to my own project. Any help would be appreciated.

       

      Here is what I need to do:


      I have the main application file that has a datagrid with a data provider  that's an array collection. (lets say with 2 fields: name and address)


      I have a custom component that's a panel with 2 labels inside. (name and address)


      I need to simply pass the currently selected record's name and address to the custom component's labels.


      And I need to this with value objects and event objects.

       

      (i already know how to do this with binding properties, but I hear that's bad practice)

       

      A step by step description would be very helpful.

       

      Thanks in advance.

        • 1. Re: new to value objects - need help
          Gregory Lafrance Level 6

          Here is my Flex Cookbook post on using custom events to pass data around:

           

          http://www.adobe.com/cfusion/communityengine/index.cfm?event=showdetails&postId=11246&prod uctId=2&loc=en_US

           

          If this post answered your question or helped, please mark it as such.

          1 person found this helpful
          • 2. Re: new to value objects - need help
            wolfman33 Level 1

            Hi Greg,

             

            I've seen your tutorial before, and it's very impressive and helpful.

             

            But I need something simpler, based on the example I provided, so that I don't have to do too much reverse engeneering.

            • 3. Re: new to value objects - need help
              Gregory Lafrance Level 6

              If this post answered your question or helped, please mark it as such.

               

              http://livedocs.adobe.com/flex/3/html/help.html?content=createevents_3.html

               

              -------------- MyEvent.as ---------------

              package
              {
                import flash.events.Event;
               
                [Bindable]
                public class MyEvent extends Event{
                  public var name:String;
                  public var address:String;
                  public static const DATA_TRANSFER:String = "data_transfer";

                  public function MyEvent(name:String, address:String) {
                    super(MyEvent.DATA_TRANSFER, true);
                    this.name = name;
                    this.address = address;
                  }

                  override public function clone():Event {
                    return new MyEvent(name, address);
                  }
                }
              }

               

              -------------- MyPanel.mxml ---------------

              <?xml version="1.0" encoding="utf-8"?>
              <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
                width="400" height="300" creationComplete="init();">
                <mx:Script>
                  <![CDATA[
                    import MyEvent;
                   
                    private function init():void{
                      systemManager.addEventListener(MyEvent.DATA_TRANSFER, handleDataTransfer);
                    }
                   
                    private function handleDataTransfer(evt:MyEvent):void{
                      this.lblName.text = evt.name;
                      this.lblAddress.text = evt.address;
                    }
                  ]]>
                </mx:Script>
                <mx:HBox>
                  <mx:Label text="Name: "/>
                  <mx:Label id="lblName"/>
                </mx:HBox>
                <mx:HBox>
                  <mx:Label text="Address: "/>
                  <mx:Label id="lblAddress"/>
                </mx:HBox>
              </mx:Panel>

              -------------- MainApp.mxml ---------------

              <?xml version="1.0"?>
              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                xmlns:comp="*">
                <mx:Script>
                  <![CDATA[
                    import mx.collections.ArrayCollection;
                    import MyEvent;
                   
                    [Bindable] private var aCollection:ArrayCollection = new ArrayCollection([
                      {name: "name1", address: "address1"},
                      {name: "name2", address: "address2"},
                      {name: "name3", address: "address3"}
                    ]);
                    
                    private function changeHandler(evt:Event):void{
                      var myEVT:MyEvent = new MyEvent(evt.currentTarget.selectedItem.name, evt.currentTarget.selectedItem.address);
                      this.dispatchEvent(myEVT);
                    }
                  ]]>
                </mx:Script>
                <mx:DataGrid dataProvider="{aCollection}" change="changeHandler(event)">
                  <mx:columns>
                    <mx:DataGridColumn dataField="name" headerText="Name" />
                    <mx:DataGridColumn dataField="address" headerText="Address" />
                  </mx:columns>
                </mx:DataGrid>
                <comp:MyPanel/>
              </mx:Application>
              
              1 person found this helpful
              • 4. Re: new to value objects - need help
                wolfman33 Level 1

                Thanks for that. It works beautifuly.

                 

                Is there a way to do this using a value object? or a model object?

                 

                You know, instead of passing each value seperately using the event, you can just pass the array collection into a value object, then make the value object accessable through the custom component?

                • 5. Re: new to value objects - need help
                  Gregory Lafrance Level 6

                  I'll let you add code to process the entire ArrayCollection now

                   

                  package
                  {
                    [Bindable]
                    public class ValueObject extends Object{
                      public var dataObject:Object;
                      public function ValueObject(dataObject:Object){
                        super();
                        this.dataObject = dataObject;
                      }
                    }
                  }

                   

                   

                  package
                  {
                    import flash.events.Event;
                    import ValueObject;
                   
                    [Bindable]
                    public class MyEvent extends Event{
                      public var vo:ValueObject;
                      public static const DATA_TRANSFER:String = "data_transfer";

                      public function MyEvent(vo:ValueObject) {
                        super(MyEvent.DATA_TRANSFER, true);
                        this.vo = vo;
                      }

                      override public function clone():Event {
                        return new MyEvent(vo);
                      }
                    }
                  }

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
                    width="400" height="300" creationComplete="init();">
                    <mx:Script>
                      <![CDATA[
                        import MyEvent;
                        import mx.collections.ArrayCollection;
                       
                        private function init():void{
                          systemManager.addEventListener(MyEvent.DATA_TRANSFER, handleDataTransfer);
                        }
                       
                        private function handleDataTransfer(evt:MyEvent):void{
                          this.lblName.text = ArrayCollection(evt.vo.dataObject).getItemAt(0).name;
                          this.lblAddress.text = ArrayCollection(evt.vo.dataObject).getItemAt(0).address;
                        }
                      ]]>
                    </mx:Script>
                    <mx:HBox>
                      <mx:Label text="Name: "/>
                      <mx:Label id="lblName"/>
                    </mx:HBox>
                    <mx:HBox>
                      <mx:Label text="Address: "/>
                      <mx:Label id="lblAddress"/>
                    </mx:HBox>
                  </mx:Panel>

                  <?xml version="1.0"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                    xmlns:comp="*">
                    <mx:Script>
                      <![CDATA[
                        import mx.collections.ArrayCollection;
                        import MyEvent;
                      
                        [Bindable] private var aCollection:ArrayCollection = new ArrayCollection([
                          {name: "name1", address: "address1"},
                          {name: "name2", address: "address2"},
                          {name: "name3", address: "address3"}
                        ]);
                       
                        private function changeHandler(evt:Event):void{
                          var myEVT:MyEvent = new MyEvent(new ValueObject(aCollection));
                          this.dispatchEvent(myEVT);
                        }
                      ]]>
                    </mx:Script>
                    <mx:DataGrid dataProvider="{aCollection}" change="changeHandler(event)">
                      <mx:columns>
                        <mx:DataGridColumn dataField="name" headerText="Name" />
                        <mx:DataGridColumn dataField="address" headerText="Address" />
                      </mx:columns>
                    </mx:DataGrid>
                    <comp:MyPanel/>
                  </mx:Application>