Question

I have a component A in my flex project where people can vote for their favourite artist. Someone “likes” an artist, it get’s updated in my database. There is also a component B that shows a chart of the most liked artists. I call the data from the database on creationcomplete in Flex. The problem is that when a person first votes on an artist, it will not be visible in the datagrid untill the user reloads the main page (?) or reopens the entire application. So i was wondering how i can update the datagrid everytime someone adds a vote to my database. I’m now using an update button, but that’s not very user friendly of course. Any help is welcome!

Answer 1

Using an arrayCollection, you just make it bindable all the way through all components

<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.events.FlexEvent;

        [Bindable]
        public var artistData:ArrayCollection = new ArrayCollection([
            {artistName : "Paula", artistLikes : "0"},
            {artistName : "Bob", artistLikes : "0"},
            {artistName : "Arthur", artistLikes : "0"}
        ]);

    ]]>
</fx:Script>

<s:layout>
    <s:VerticalLayout/>
</s:layout>

<s:DataGrid id="artists" dataProvider="{artistData}" width="100%" height="150">
    <s:columns>
        <s:ArrayList>
            <s:GridColumn dataField="artistName" headerText="Artist Name"/>
            <s:GridColumn dataField="artistLikes" headerText="Artist Likes"/>
        </s:ArrayList>
    </s:columns>
</s:DataGrid>

<components:CompA artistDataInCompA="{artistData}" height="100"/>

<components:CompB artistDataInCompB="{artistData}" height="100"/>

Let’s say you increment your likes in comp A (Don’t forget to call the refresh() on the arrayCollection)

<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable]
        public var artistDataInCompA:ArrayCollection;

        protected function button_clickHandler(name:String):void
        {
            var index:Number = getItemIndexByProperty(artistDataInCompA, "artistName", name);
            var numLikes:Number = artistDataInCompA[index].artistLikes;
            // Here you update your PHP
            // HTTPService...

            // and the ArrayCollection that is binded all the way through all components
            artistDataInCompA[index].artistLikes = numLikes + 1;
            artistDataInCompA.refresh();
        }

        protected function getItemIndexByProperty(array:ArrayCollection, property:String, value:String):Number
        {
            for (var i:Number = 0; i < array.length; i++)
            {
                var obj:Object = Object(array[i])
                if (obj[property] == value)
                    return i;
            }
            return -1;
        }

    ]]>
</fx:Script>

<s:layout>
    <s:VerticalLayout/>
</s:layout>

<s:Button label="Add a like to Paula" click="button_clickHandler('Paula')"/>

<s:Button label="Add a like to Bob" click="button_clickHandler('Bob')"/>

<s:Button label="Add a like to Arthur" click="button_clickHandler('Arthur')"/>

And now do what you have to do in your comp B

<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;

        [Bindable]
        public var artistDataInCompB:ArrayCollection;

    ]]>
</fx:Script>

<s:layout>
    <s:VerticalLayout/>
</s:layout>

<s:Label text="Paula has {artistDataInCompB.getItemAt(0).artistLikes} like(s)"/>

<s:Label text="Bob has {artistDataInCompB.getItemAt(1).artistLikes} like(s)"/>

<s:Label text="Arthur has {artistDataInCompB.getItemAt(2).artistLikes} like(s)"/>