Change the label to Show Details.

Figure 28

Click on the Panel again. Under Flex Properties, locate the Layout area. Change the Layout of the Panel to Width = 400, Height = 200.

Figure 29

Locate the Add New State icon in the upper right corner. Click on it to Add a New State.

Figure 30

We'll call this state details. Type details in the Name field and press OK.

Figure 31

Change the Width on the details Panel to 500 and the Height to 400. Select the Button and delete it. Drag a new button component to the BarControl and change the label to Hide Details.

Figure 32

Click the Base State on the upper-right-hand corner. Click the button. In Flex Properties, under the Common area, Type currentState='details' next to On click to make the base state "transform" or turn into the details state.

Figure 33

Click the details State on the upper-right-hand corner. Click the button. In Flex Properties, under the General area, Type currentState=' ' next to Click to make the details state "transform" or turn back into the base state.

Figure 34

Click on the Base state and select the Source tab to display the source code for the Base state.

Figure 35

Flex uses MXML markup language. Your code should look similar to this.

Next, we will add some data to our panels using the HTTPService command to read an XML file located currently in your application bin folder. Copy the Catalog.xml file to your application's bin folder.

Figure 36

We're going to add three lines to our source code. The first line will define the service we'll be using.

Figure 37

Right above the states tags type:

<mx:HTTPService id="srv" url="catalog.xml"/>.

Figure 38

Next, define the container that will hold the data we're retrieving. Right before the mx:ControlBar tag type:

<mx:DataGrid width="100%" height="100%"dataProvider="{srv.result.catalog.product}"/>

Figure 39

Get the data when the application starts up by adding the following line to the mx:Application tag:

creationComplete="srv.send()"

Now save and run your application.

Figure 40

Figure 41

Press the Show Details Button.

Figure 42

Here the Details are displayed. Press the Hide Details button to return to the previous screen.

Figure 43

Congratulations! You've just built your first Flex application.

Click here for source code!