3 Replies Latest reply on Jun 16, 2009 12:16 PM by ProjectedSurplus

    Binding Image Filenames between components

    ProjectedSurplus Level 1

      My application contains two components:

       

      1) Contains a mx:RemoteObject which returns an array of filenames from a cfc which I then cast to an ArrayCollection and assign to a {Bindable} public var named "images".  I then use "images.getItemAt(0).columnName" to populate mx:Image controls.

       

      2) Contains SignIn boxes/code that with successful validation returns an updated array of filenames which I cast to an ArrayCollection and have tried assigning to both "images" and "Component1.images" in hopes of (ultimately) having the aforementioned mx:Image controls update. 

       

      Thus my question is A.) how in component 2 can I identify component 1's ArrayCollection named images for assignment and B.) do I also need to call some sort of function to have the mx:Images control update once the ArrayCollection is updated?

       

      Thanks in advance

        • 1. Re: Binding between components
          ProjectedSurplus Level 1

          OK, by combining all the code into a different "test" mxml application the images are automatically updated hence question B is answered insofar as the ArrayCollection broadcasts its update to the mx:Images (e.g. after it is updated by images = authManager.UnPw.lastResult as ArrayCollection;)

           

          However, A. still remains, how can I assign the new value received in component 2 to the images ArrayCollection in component 1?  Again, thanks in advance for any time you might save me in LiveDocs . . . .

          • 2. Re: Binding between components
            ProjectedSurplus Level 1

            Supposedly:  "The Event metadata tag is used to declare events that will be dispatched by your custom class. Adding this metadata tag to your class definition allows you to add an event handler function to the MXML tag used to instantiate your custom class."

             

            Thus to component2 (signIn) I added:

             

                    <fx:Metadata>
                       [Event(name="childEvent")]
                    </fx:Metadata>

             

            and to the "validatedOK" function:

             

                    dispatchEvent( new Event( "childEvent" ) );

             

             

            Then to the Main.mxml application (which instantiates        <components:SignIn horizontalCenter="0" bottom="50"/>     )  I added:

             

                <fx:Script>
                    <![CDATA[
                        import mx.controls.Alert;

             

                        public function childEvent(event:Event):void {
                        Alert.show("SignIN!", "Alert Box", Alert.OK);
                    }
                    ]]>
                </fx:Script>

             

            but . . . . . . . . still NO JOY -- please help!.

             

            Fwiw if I add    Alert.show("SignIN!", "Alert Box", Alert.OK);  to the "validatedOK" function then the alert box displays so I know most of the code is working.  Bonus points for assistance which confirms my suspicions that this issue is rationale for creating ValueObjects/ModelObjects (ie. good MVC code would bind the data to such a VO then have an event "controller" broadcast the change to the view?????)

            • 3. Re: Binding between components
              ProjectedSurplus Level 1

              OK then, from http://www.slideshare.net/effectiveui/flex-3-deep-dive I have a little better grasp of VOs and per my last paragraph above, think they are the solution to this binding between components (or at least part of the solution).

               

              Anyway, creating a vos folder under src and then creating an actionscript class in it facilitates defining the following:

               

              package vos
              {
                  public class BoringVO1
                  {
                      [Bindable]
                      public var wall : String = "Hello World";
                  }
              }

               

               

              --------------------------------------------------------

               

              Then this works in the main application (or fwiw in a separate component that is loaded into the main app.mxml):

               

                  <fx:Script>
                      <![CDATA[
                         
                          import vos.BoringVO1;
                         
                          [Bindable]
                          public var vo : BoringVO1;

               

                          protected function button1_clickHandler(event:MouseEvent):void
                          {
                              vo = new BoringVO1;
                             
                          }

               

                      ]]>
                  </fx:Script>
                 
                  <mx:Label id="theLabel" text="{vo.wall}"/>
                  <s:Button click="button1_clickHandler(event)" x="82" y="3"/>

               

               

              --------------------------------------------------------------

               

              However, I am still unable to figure out how to separate the <mx:Label> and <mx:Button> into different components so  . . . . please help!;)