Understanding Flex itemRenderers – Part 4: States and transitions

Adding elements

In this itemRenderer, the price and Buy button appears only if the instack value is yes. You could do this without a state, of course, but if your itemRenderer has more controls to be added or removed, a state will make more sense as the controls' appearance can be controlled simply by setting the itemRenderer's currentState property.

Instead of just removing the price and Button, you'll have the state add a label telling the user the item is out of stock. Here's the modified state:

      <mx:states>
            <mx:State name="NoStockState">
                  <mx:SetProperty target="{priceBox}" name="visible" value="false"/>
                  <mx:AddChild relativeTo="{priceBox}" position="before">
                        <mx:Label text="-- currently not in stock --" color="#73DAF0"/>
                  </mx:AddChild>
            </mx:State>
      </mx:states>

The <mx:AddChild> tag says to add the Label into the priceBox. In addition to setting the priceBox's visible property to false, a friendly message replaces it.

Again, you could add this label in the set data function–or add it initially and just set its visibility to false and change it to true in the set data function. But I think you can see the value of the state: if the requirement for the instock being no condition gets more complex, all you need to do is adjust the NoStockState; the ActionScript code which switches the state remains the same.

Note: You can modify states in Flex Builder's Design View.

Page 3 of 4

Previous Page

Next Page