Looking at the Adobe Flex 2 Component Explorer

This content requires Flash

To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

Video Transcript

Let's examine a little bit more in detail about some other flexibility that an HBox container will offer us. So what I would like you to do is, click up here on the Help menu and choose Flex Start Page, and the Flex Component Explorer will allow us to explore many of the different components available to us including the HBox.

So just click Run here, and let's find our HBox in the Component Library and what I would like you to do is scroll down a little bit here and you'll see under Containers and Layout Management, you'll see the HBox container. Click on the HBox, and let's just make our code window just a little bit bigger, so adjust the size of that so we can read it a bit more easily.

You'll see the application up at the top and let's examine this code so we understand what is occurring. So of course, you'll see our Application tag and then you'll see two panel containers. There is one panel container and here is another panel container and you'll see that both of these are contained within an HBox tag as you see here and you'll see both of those panels are arranged in a horizontal fashion.

You also see that we set the width and the height of each of these HBoxes. So it takes up a 100% of the available screen real estate, that's what the 100% means there. Then you'll see within the first panel I have another HBox, within the first panel and here you'll see I have a Label control and a TextInput control and again you'll see both of those are arranged in a horizontal fashion, because they are actually located within an HBox.

Now you want to be very careful of actually nesting many HBoxes or vertical boxes within one another because it will affect the performance of your application. Remember in Flex we're doing all of this on the clients and it does required quite a bit of calculations on the client machine within the Flash Player to actually calculate how much space each one of these is going to take up.

So if you have lots and lots of different HBoxes, you may see some performance degradation within your application. So you want to be very careful and that's certainly a good place to start troubleshooting applications when you do have performance problems. Let's just examine the vertical box container, which we looked at earlier as well and you'll see here I have an application tag and this one is even a little more complicated is I have an HBox here, and I have one panel and you'll see that's displayed horizontally.

Then I have a vertical box that's located within the HBox, and I have two panels within that vertical box. So it's arranging these two panels vertically and you'll see that it's arranged that way, but they're within an HBox, so it's horizontal to the first panel. So this is just a great way of being able to organize your applications with a minimum of effort. So close off the Samples Explorer and close off Fundamentals_wt2.mxml.