3 Replies Latest reply on Jul 6, 2007 5:25 PM by ntsiii

    ItemRenderer and DataProvider

    big4head
      I'm currently writing an app that is a List of dynamically created Custom Components (actually advanced search form fields). I have set it up as a List whose DataProvider is an ArrayCollection. This ArrayCollection is made up of custom components which can be reodered through drag and drop and are added and removed dynamically by a buttons on the components themselves. The Custom Components also serve as the ItemRenderer for the List.

      I seem to have a basic misunderstanding of the interrelationship between the ItemRenderer, DataProvider and the app, as when I try to access the individual components from within the app through the ArrayCollection the individual components within the ArrayCollection do not seem to correspond to the actual components displayed in the app. What is the best way to establish a relationship between an enclosing app (or List container) with an arbitrarily large group of dynamically created and reorderable Custom Components so that their positions and internal form data are easily accessible from the main app?
        • 1. Re: ItemRenderer and DataProvider
          bitwyse Level 1
          This sounds similar to what was trying to do. Although I was using a simple datagrid and item renderer. I was trying to communicate from the item renderer to the datagrid in the parent application. The item renderer is a component.

          Anyhow, I had to subclass the datagrid and add my own events to the datagrid then set up the dispatching of the event in the item renderer.

          See this link
          • 2. Re: ItemRenderer and DataProvider
            big4head Level 1
            Thanks for the reply. It is a similar situation, but I'm trying to get updated info from the List of Components. For example, when an addPanel button click event is triggered in the Component, Ican see teh current values of that component in the Debugger and it sucessfully calls the AddPanel method in the parent app which adds a new component to the DataProvider (which shows up in the app). However when I try in the Parent App to iterate over the components in the DataProvider to retrieve their form element values they are all listed as null.

            code excerpt:

            PARENT APP

            [Bindable] public var targetData:ArrayCollection = new ArrayCollection();
            [Bindable] public var queryStr:String = "";


            private function init():void
            {
            var aswb:ASWBox = new ASWBox();
            var aswStr:String = aswb.idStr;
            aswStr ="aswb"+targetData.length;
            targetData.addItem(aswb);
            cmp.dataProvider = targetData;
            }

            public function addASWB(aswb:ASWBox):void
            {
            var ASWProxy:IListItemRenderer = aswb as IListItemRenderer;
            var idx:int = cmp.itemRendererToIndex(ASWProxy);
            if (idx == (targetData.length-1)) {
            var aswb2:ASWBox = new ASWBox();
            var aswStr:String = aswb2.idStr;
            aswStr ="aswb"+targetData.length;
            targetData.addItem(aswb2);
            refresh();
            }
            }

            public function getQueryString():String
            {
            var qsStr:String = "";
            for (var i:int=0;i<targetData.length;i++) {
            qsStr += targetData.i.broadcastQuery(); //changed syntax to display in post;should be square brackets
            }
            return qsStr;
            }


            public function removeASWB(aswb:ASWBox):void
            {
            var ASWProxy:IListItemRenderer = aswb as IListItemRenderer;
            var idx:int = cmp.itemRendererToIndex(ASWProxy);
            targetData.removeItemAt(idx-1);
            refresh();
            }

            public function refresh():void {
            cmp.dataProvider.refresh();
            queryDisplay.text = getQueryString();
            for (var i:int=0;i<targetData.length;i++) {
            targetData.i.setX(); //changed syntax to display in post;should be square brackets

            }
            }


            COMPONENT CODE

            [Bindable] public var idStr:String;

            public function setId(id:String):void {
            this.idStr = id;
            }

            public function broadcastQuery():String {
            var qs:String = "";
            qs += fieldNames ? fieldNames.selectedLabel+" ":"a ";
            qs += searchParams ? searchParams.selectedLabel+" ":"b ";
            qs += searchString ? searchString.text+" ":"c ";
            qs += logicalOperator ? logicalOperator.selectedValue+" ": "d ";
            qs += this.idStr;
            return qs;
            }

            private function addPanel(event:Event):void {
            if (event.target.selected) {
            this.parentApplication.addASWB(this);
            }
            }

            private function closePanel():void {
            this.parentApplication.removeASWB(this);
            }


            I hope this makes it clearer and thanks for all the help.

            RG
            • 3. Re: ItemRenderer and DataProvider
              ntsiii Level 3
              I am not quite sure what is going on in your code, but a key thing to remeber with item renderers is that they are re-used as you scroll or as the underlying data changes. Only enough renderers exist to show the visible items. So you can not successfully access the data through the renderer.

              Typically, the renderer updates the dataProvider item. Then you can iterate through the dataProvider Items. As bitwyse noted, your renderers can dispatch bubbling events to do work as necessary.

              Tracy