MACROMEDIA FLEX-GETTING STARTED WITH FLEX Manuale Utente Scaricare il pdf (Pagina 106)

</mx:State>

</mx:states>

<mx:Button id="btnChanger" label="Open"

click="onChangerClick(event);" />

</mx:VBox>

The important part of the code is the array of mx:State objects

which define the two states: open and closed. In the open state

the height of the control is set to 400, and in the closed state

it’s set to 100. The label of the Open/Close button is also

changed from Open to Close based on the state.

When I bring this up in the browser the box starts in the closed

state, as shown in Figure 6-7.

Then when I click the Open button the box gets big and the

button changes to read Close because the button sets the cur

rentState to open or closed depending on the current value (see

Figure 6-8).

States make it easy to define how an interface can change in

various modes. Transitions make the change between states

sexy by applying effects to the change. To create these state

transitions I’ve added a set of mx:Transition objects to the

original example. That new application code appears in Ex-

ample 6-8.

Example 6-8. States2.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

layout="horizontal"

xmlns:mycomps="mycomps.*">

<mycomps:FlexiBox2 />

</mx:Application>

The new FlexiBox code appears in Example 6-9.

Example 6-9. FlexiBox2.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="300"

height="100"

currentState="closed" cornerRadius="5" borderColor="#ff0000"

90 | Chapter 6: More Flex Applications

1 2 ... 101 102 103 104 105 106 107 108 109 110 111 ... 147 148

Nessun commento

MACROMEDIA FLEX-GETTING STARTED WITH FLEX Manuale Utente Pagina 106