Understand flex itemrenderer (4)-state and transition

Document directory

• Status
• Add Element
• Extended list project
• Follow-up work

ItemRenderer is best at communicating with users of applications. Sometimes communication is simple, just displaying a name, sometimes using a more refined color, and sometimes interactive.

ItemEditor is a real interactive control, but they are not the focus of this article. In these examples, I will show you the itemRenderer that changes the visual appearance based on the data itself or user operations.

Status

Flex<mx:State>Is an ideal way to change the appearance of itemRenderer. The status is easy to use and can be used in combination with transition, providing feedback and a pleasant experience for users.

In this example, you will create an MXML itemRenderer for the List (Remember, if you want to, you can do it using ActionScript ). This itemRenderer displays images, titles, authors, prices, and buttons used to buy this book.

<?xml version="1.0" encoding="utf-8"?><mx:HBox xmlns:mx="/2006/mxml">       <mx:Image id="bookImage" source="{data.image}" />      <mx:VBox height="115" width="100%" verticalAlign="top" verticalGap="0" paddingRight="10">            <mx:Text text="{data.title}" fontWeight="bold" width="100%"/>            <mx:Label text="{data.author}" />            <mx:HBox id="priceBox" width="100%">                  <mx:Label text="{data.price}" width="100%"/>                  <mx:Button label="Buy" />            </mx:HBox>      </mx:VBox></mx:HBox>          

However, what you want to achieve is:<instock>Nodes, which areyesOrno), The price and "buy" Button will disappear. I added one for the price and the HBox parent of the ButtonidAttribute to make the encoding here easier. In this way, I can change the HBox andpriceBoxTo change the visibility of those projects.

Overwriteset dataThe function can do this, and you will do this, but it is not directly changedpriceBoxIs defined by the following status:

      <mx:states>            <mx:State name="NoStockState">                  <mx:SetProperty target="{priceBox}" name="visible" value="false"/>            </mx:State>      </mx:states>

Place the following content in the root<mx:HBox>Mark.

This example is somewhat far-fetched because it is too complex and not suitable for simple tasks, but it shows how to use the status. There are two statuses:

• Basic status: this is the normal status of the component. Components that are not in use are in the basic status. In this examplepriceBox visibleThe property istrue(Default ). This is wheninstockIsyes.
• NoStockState: This is wheninstockIsnoStatus. In this statusSetPropertyCommand.targetThe attribute determines which class member has a problem,nameAttribute is the name of the attribute to be changed on the target,valueIs the new value of this attribute.

set dataFunction ViewinstockDetermines the status to use:

            override public function set data( value:Object ) : void            {                  super.data = value;                                    if( data )                  {                        if( data.instock == "yes" )                               currentState = "";                        else                              currentState = "NoStockState";                  }            }

currentStateIs the property controlled by all UIComponent. It determines which status is active. When switching between States, the Flex framework starts from the basic state and then applies the rules in the given state.

Note:Please remember that itemRenderer is used cyclically, so you must always restore the value; do not keep it in itemRendererifWithoutelse.

You can deleteset dataOverwrite. Use the data binding expression to directly set in the root tagcurrentState:

<mx:HBox xmlns:mx="/2006/mxml" width="400" currentState="{data.instock == 'yes' ? '' : 'NoStockState'}" >

By checkingdata.instockTo setcurrentStateValue-a good trick, but it may be difficult to maintain.

Add Element

In this itemRenderer, only wheninstackThe value isyesThe price and "buy" button are displayed. You can also do this without using the status. However, if the itemRenderer wants to add or delete more controls, the status is more suitable, because you can set the itemRenderer'scurrentStateAttributes make it easy to control the control appearance.

You can use the status to add a tag to tell the user that the product has been sold empty, rather than simply deleting the price and Button. The modified status is as follows:

      <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>

<mx:AddChild>Label indicates to add the LabelpriceBox. In additionpriceBoxOfvisibleSet propertyfalseAnd replace it with a friendly message.

Again, you can add this labelset dataFunction-or add it as is, simply set its visibilityfalseAndset dataChange ittrue. But I think you can see the status value: IfinstockChangenoThe requirements for conditions become more complex. You only need to adjustNoStockStateThe switch status does not change.

Note:You can modify the status in the "design" view of Flex Builder.

 

Extended list project

This example is not suitable for List control, but is suitable for VBox and Repeater. When the list must be rolled, the problem with the proper location of the extension project becomes somewhat risky. Imagine that the project height in the list is the same. Now expand the height of Project 2. Progress: Project 2 is higher than other visible projects. The key here is:VisibleProject. The current rolling list. Remember that itemRenderer is used cyclically. So when project 2 gets out of the view, its itemRenderer will be moved to the bottom of the list. The height must be reset. No problem. This is quite simple. Now, Project 2 is rolled back to the view. It should be the extended height. How does itemRenderer know to do this? Through previous articles, you know that the information comes from the data itself or some external sources.

I think the itemRenderer for resizing is too complicated and is not worth doing so. I believe that using VBox and Repeater can do this in a better way. However, the key to Repeater is to createEachChild. If you have 1000 records and use Repeater, you will get 1000 instances of itemRenderer.

In this example, you still write an itemRenderer, but use it as the child of the VBox. The list element looks quite simple: the name and author of a book. However, if you click itemRenderer, the extension is in place. We use two tactics to do this:

• ItemRenderer has a state that contains additional information.
• Itemrenderer uses a resize transition to provide more smooth expansion and contraction for itemrenderer.

The basic status of itemRenderer is quite simple:

      <mx:HBox width="100%">            <mx:Label text="{data.author}" fontWeight="bold"/>            <mx:Text  text="{data.title}" width="100%" fontSize="12" selectable="false"/>      </mx:HBox>

ExpandedStateAdd other elements for the height of itemRenderer:

      <mx:states>            <mx:State name="ExpandedState">                  <mx:AddChild position="lastChild">                        <mx:HBox width="100%">                              <mx:Image source="{data.image}"/>                              <mx:Spacer width="100%"/>                              <mx:Label text="{data.price}"/>                              <mx:Button label="Buy"/>                        </mx:HBox>                  </mx:AddChild>            </mx:State>      </mx:states>

Using itemRenderer to change the size is as easy as adding a transition:

      <mx:transitions>            <mx:Transition fromState="*" toState="*">                  <mx:Resize target="{this}" />            </mx:Transition>      </mx:transitions>

Place it in<mx:states>Mark.

The application transitions every time the status changes, because the statusfromStateAndtoStateThe attribute is a wildcard. Now you only need to addclickEvent Handler function to add the event to the root tag and change the status:

      <mx:Script>      <![CDATA[                        private function expandItem() : void            {                       if( currentState == "ExpandedState" )                        currentState = "";                  else                        currentState = "ExpandedState";            }      ]]>      </mx:Script>

Follow-up work

The status is a good way to greatly modify the visual appearance of itemRenderer. You can classify multiple changes into one State, and then setcurrentStateAll attributes can be completed.

In the next article, we will discuss how to compile more efficient itemRenderer by extending UIComponent.