5 Replies Latest reply on Feb 2, 2010 12:08 PM by allanjard

    Updating multiple UI elements on value change

    allanjard

      Hello all,

       

      I'm sure this question comes from my ignorance of OO programming (I'm a procedural kind of person) and relative newness to AS3/Flex 4, so please forgive me if this is a daft question.

       

      Basically what I have is a data object made up of the following custom classes LinkCollection, Link, GroupCollection and Group. Obviously Link and Group can be put into their respective collection objects with multiple instances, and the GroupCollection is a property of a Link (i.e. Links contain Groups). This basic object drives my entire system, with multiple UI components. So what I'm wondering is, what is the best/correct way to update the UI components based on this structure. For example, if a property in a Group instance were to change, I'd like the components which use that property to be 'told' of this change.

       

      I could certainly add something like a 'listener' queue - is this the right thing to do (feeling that is probably is). But this would be custom event calling rather than using [Bindable] or ObjectProxy. So basically looking for a best practice guide for this kind of thing if it exists?

       

      Many thanks,

      Allan

        • 1. Re: Updating multiple UI elements on value change
          NewFlo

          I think there are some possible ways to solve this problem. Maybe you should take a look at the concept of DataBinding first.

          (Day1)

          http://www.adobe.com/devnet/flex/videotraining/flex4beta/


          Basically it works like that...

          You use the [Bindable] Marker on the Properties for which you want to get a notification (you wont see it, because the framework will handle that).

          After that you can bind the Prop to a UI component using {boundProb}. Hope that helps.

           

          Class:

          [Bindable]

          private var counter:int = 1;

           

          MXML:

          <mx:Label text="{counter}"></mx:Label>

           

          Now if the value in the class changes, the text of the label gets updated instantly.

          Hope that helps a little.

          • 2. Re: Updating multiple UI elements on value change
            allanjard Level 1

            Hi NewFlo,

             

            Thanks for the reply. I've been looking at the Bindable option, as well as ObjectProxy - but I'm have trouble in my head relating it to what I what to do. I've no problem with understanding the basic examples in the "Flex in 5 days" (which is a great start - thanks for that Adobe!) - but that uses only a bindable variable with a property which can be accessed in that MXML file.

             

            The example I'm looking at is that I've got a custom component nested several layers down from the top level, where my LinkCollection object is. So it needs to bind up a few classes, and also bind to a Group (from my example before) which is several layers down in the data object...

             

            Thanks,

            Allan

            • 3. Re: Updating multiple UI elements on value change
              John Hall Level 4

              It all comes down to event dispatchers and listeners. I know that's simplistic but behind the scenes, that's the way you solve the problem. That said, your instance is one of the reasons for the popularity of Mate and Swiz frameworks - it makes managing all the databinding (with data injection into other components) much easier. The next thing is to understand how objects on the display list can dispatch events whereas objects that aren't on the displayList need special arrangements to notify other components that values have changed.

               

              If you haven't run into this presentation before, it's a must see for understanding binding under the hood and how it relates to dispatchers and listeners.

               

              http://tv.adobe.com/watch/360flex-conference/diving-in-the-data-binding-waters-by-michael- labriola/

               

              Most every time I rewatch it, I learn something new.

              • 4. Re: Updating multiple UI elements on value change
                kubens

                Currently I am working on some components that are linked with data services. To ensure that the components recognize data changes the components register event listeners on linked data services. My current playground shows a simple database application which contains following custom components:

                 

                Application Toolbar

                The application toolbar is linked with a data service to recognize reloads of data and with a data grid to recognize row selections. Pending of current status of both data service and data grid the buttons will be either enabled or disabled.

                 

                Paging Toolbar

                Paging toolbar is linked with data service and call responder to request new data for paging and to ensure that binded ui components like a data grid will be updated.

                 

                Unfortunatelly some standard application components are not part of the Flash Builder components, but luckywise it is easy to build such components. But that is time intensive and to to be honest it is a pitty that such standard application components are missing. If you would compare Flash Builder components with ExtJS components than you will understand what I mean. If this gap will bridged then nobody can stop the success of Flash Builder especially if you consider the Catalyst strategy

                 

                Cheers

                Wolfgang

                • 5. Re: Updating multiple UI elements on value change
                  allanjard Level 1

                  @John Hall: That's a brilliant video! I thoroughly enjoy it, and learned at lot. I've been thinking how I would like to go on a Flex training course, or have a mentor - I almost feel like I have now - thanks very much for the link.

                   

                  Thanks also for the rest of your post, which was equally informative. I wasn't sure if I should post my original questions - but am very glad I did now. It's good to hear that it's not just me that has encountered this - and will look at the Mate and Swiz frameworks you mention. I've starting building up my classes to dispatch events, for certain actions - as primarily a JS developer this almost an entirely new approach for me, but I'm starting to like the flexibility it provides as I get deeper into it.

                   

                  @kubens: Thanks for posting your application and allowing 'view source' on it. It's very interesting to see how you've built it up!

                   

                  Regards,

                  Allan