Question

I am learning Flex and trying to make a simple RPG to practice. I am using view states to change between screens. right now I have a HomeView.mxml which displays my character information, InventoryView.mxml which shows my inventory items, and EquipmentView.mxml which shows the equipped items. They each have their respective view states.

in my main mxml file, i create a global variable for the character and an ArrayCollection of items in the game. it creates 2 labels in mxml for Inventory and Equipment and when i click on the label it calls a click handler which sets currentState=”EquipmentView” or “InventoryView”

This works and the state changes and the respective views are shown properly.

My problem is in my EquipmentView state. When i enter the state the first time, it has a creationComplete function which displays images for my equipment and sets a click handler. when i click the item, it “unequips” it and removes it from the equipment list and removes the image. this also works fine, but when I go to my inventory view and “equip” an item and return to the EquipmentView, the image does not show. I have a label which counts the length of my equipmentList variable and that is accurate when i switch views, but i cant get the image to display again.

Is there a way to call my displayEquippedItems() function (which is originally called on creationComplete) when the view is changed?

here is my function:

protected function displayEquippedItems():void
        {
            Alert.show("Displaying Items");
            for (var i:int = 0; i<c.equippedItems.length; i++)
            {

                var item:Item = c.equippedItems.getItemAt(i) as Item;
                switch (item.type)
                {                       
                    case 'Weapon':
                        var il:ItemImage = new ItemImage(item);
                        il.source = "../assets/sword.gif";
                        il.scaleX=.25;
                        il.scaleY=.25;
                        il.horizontalCenter=-80;
                        il.verticalCenter=-30;
                        il.addEventListener(MouseEvent.CLICK, equippedItemClicked);
                        equipGroup.addElement(il);                          
                        break;
                    default:
                        Alert.show("Didnt find a weapon");
                        break;
                }
            }
        }

ItemImage is a class i defined that extends the Image component and only sets a variable “item” to the Item it is displaying so i can get the name, type (and eventually change the image source)
Also equipGroup is just a group i defined in the mxml to hold equipment items

Any help would be great, thanks

Answer 1

There are a few ways to accomplish what I believe you want to.

The first is to look at the updateComplete event. Whereas creationComplete will only execute once, after the component’s creation cycle is done; the updateComplete event will fire every time the component will redraw. I have no doubt, this event will do what you want; however you’ll want to be careful about running your code too many times. A lot of things could cause a component to redraw, and it sounds like you have a very specific use case.

The second thing to look at is the show event. This will fire whenever the component becomes visible; which should fire when the state changes to the state that shows this component.

To answer your specific question; you can run code whenever a state change is complete by using the stageChangeComplete event. In your case I believe this could work similar to the show event; but you’d be listening for it at different places. The stateChangeComplete event is something you’d listen for in the component which contains states. The show event is something you’d listen for in the component that contains the inventory; which I assume is a child of the component which controls state.