March 31, 2005

Efficient Component Layout

I recently worked on a project where there were problems getting the components to fit properly, align, and stretch were necessary. Here are some tips to making it easier to layout your application.

First, diagram what you what. Here is a layout that could be more optimized:

<mx:Application>
	<mx:VBox>
		<mx:HBox>
			<custom component 1>
		</mx:HBox>
		<mx:HBox>
			<custom component 2>
			<mx:VBox>
				<mx:ViewStack>
					.. stack children ..
				</mx:ViewStack>
			</mx:VBox>
			<custom component 3>
	</mx:VBox>
	<mx:HBox>
		<custom component 4>
		<custom component 5 >
		<custom component 6>
	</mx:HBox>
</mx:Application>

This layout can be made more efficient in a couple of ways. First, remember that <mx:Application> lays its children out vertically, so using a VBox inside of it is redudant. The same holds true for <mx:Panel> and <mx:TitleWindow>.

Second, any container with one child is unnecessary. All that you are doing is causing the Flex LayoutManager to do more work.

Here is the same application with a more efficient layout:

<mx:Application>
	<custom component 1>
	<mx:HBox>
		<custom component 2>
		<mx:ViewStack>
			.. stack children ..
		</mx:ViewStack>
		<custom component 3>
	</mx:HBox>
	<mx:HBox>
		<custom component 4>
		<custom component 5>
		<custom component 6>
	</mx:HBox>
</mx:Application>

The first <mx:VBox> was eliminated because it was redudant. The first <mx:HBox> was eliminated because it was unnecessary (it had only 1 child). The same is true for the inner <mx:VBox> that contained the <mx:ViewStack>.

Another layout concern is when and where to place width= and height= specifications. As a rule of thumb, I do not place those values in the component definition. For example, in the definition for CustomComponent.mxml:

<mx:VBox xmlns:mx="http://www.macromedia.com/2003/mxml" width="100%" height="100%">
   .. contents ..
</mx:VBox>

Placing the width= and height= parameters here means that this component will always try to take up all of the space in whatever container it is occupying. My rule is to let the parent component decide how its children should be positioned and sized:

<mx:HBox width="500" height="400">
   <CustomComponent width="100%" height="50%" />
   <OtherComponent width="100%" height="50%" />
</mx:HBox>

Placing the size attributes in the parent lets you easily reuse the component.

Another problem I see is when to use the width= and height= attributes. Take this MXML snippet:

<mx:HBox>
   <CustomComponent width="100%" />
   <OtherComponent width="100%" />
</mx:HBox>

This will have a layout problem because the <mx:HBox> has been given no size. You may think that the <mx:HBox> will take its size from its children, but that is not always the case. You may see scrollbars appearing where you don't want them or components not occupying all of the space.

Suppose the <mx:HBox> above were meant to fill the remaining space of its parent? Without specify width= and height= attributes on the <mx:HBox>, you will get unexpected results.

This is better:

<mx:HBox width="100%" height="100%">
   <CustomComponent width="100%" height="100%" />
   <OtherComponent width="100%" height="100%" />
</mx:HBox>

My other rule of thumb is to always specify width= and height= attributes. This helps the Flex LayoutManager be more efficient and it gives you more control.

Always specify sizes, even for GridItem and GridRow tags.

You can also use <mx:Spacer> to help you out. On the project I mentioned above, the <mx:Grid> was used to create a control bar. There were two parts: a right side and a left side. So the developer used a <mx:Grid> with a single <mx:GridRow> which contained two items: one aligned left and the other aligned right. This worked, but the <mx:Grid> is pretty ineffcient. A better way to lay this out is:

<mx:HBox width="100%" height="26" horizontalGap="2" marginLeft="3">
   <control 1>
   <control 2>
   <mx:Spacer width="100%" />
   <control 3>
   <control 4>
</mx:HBox>

This uses an <mx:HBox> and a <mx:Spacer> in the middle taking up the remaining amount of space. So the Flex Layout Manager places the first two controls in the HBox on the left, then places the other two controls on the right, and fills the remaining space with the spacer.

I threw in some other attributes on the <mx:HBox> in case you weren't aware you could use them. The horizontalGap= attribute will make sure there are only 2 pixels between the items and the marginLeft attribute makes sure the first control is 3 pixels from the edge on the left.

From a performance perspective, it is best to use absolute pixel sizes and positions. But this isn't always possible and certainly, it doesn't make applications resizable. So compromises can be made. If for example, you know that a text field will be 200 pixels wide and 26 pixels height, specify that. If want the text field to occupy the width of its container, then use 100%.

In conclusion, when you are creating a component or application, follow these rules:

First, diagram your layout.

Second, remove controls that are redudant, especially <mx:VBox> containers as immediate children of <mx:Application>, <mx:Panel>, and <mx:TitleWindow> as they place their children vertically by default.

Third, identify containers holding only a single child. All Flex components can be sized and most have the same attributes. Do not think you need a container just to a particular attribute, especially when the child of the container is itself extending a container.

Finally, make sure you specify width= and height= attributes on all components. Use pixel sizes if possible. And use the <mx:Spacer> to take up room between components rather than introducing extra containers.

Posted by pent at 11:57 AM | Comments (3) | TrackBack

March 24, 2005

The Story So Far

I've now been at Macromedia for a full quarter! I've guess I've made it past the 'trial period'. At least I hope so.

I'm most surprised by the diversity of the questions I've been fielding on Macromedia Flex. I only get to see a slice of the things you all do with Flex, and it's pretty interesting.

The types of questions I've seen so far can be divided into the following categories:

Installation and Configuration. Our installation engineers have done a great job of making Flex easy to install. But sometimes things don�t go as planned. Keep in mind that Flex is an Enterprise application, run within a J2EE or .NET environment. Unfortunately, not all J2EE environments are the same, which is where the trouble seems to lie.

Component development. While we all know that every MXML file you make is a component, sometimes specialty components need to be created. I had the privilege of writing a couple of articles on components for the Macromedia site. I've also seen some terrific components written by our customers. When they launch their Flex-powered sites, you will really see some amazing things.

Architecture. By and large the questions around architecting for Flex are the most common. Flex provides a versatile framework for building very sophisticated applications. But as applications grow and become complex, it is important to know how to make things efficient and follow some best-practices. You should check out the Macromedia Flex web site for articles on performance and other things you can do to make your applications better.

Later this year the newest version of the Flash Player, Player 8, will be released. The demo we saw at Macromedia MAX in New Orleans showcased the potential Player 8 will have on Flash applications - and that includes Flex. You will some great performance improvements. Keep your browser tuned to the Flash website for details.

The tag-line we use at Macromedia is 'experience matters' and my experience thus far has been great. All of the customers I've worked with have been super and it has been a privilege getting to know you and your work. I can't wait to see what else you come up.

I also want to thank my teammates for supporting me - giving me the answers, helping with customers, and showing me the ropes.

Posted by pent at 09:24 AM | Comments (3) | TrackBack

March 22, 2005

USA Map

A while ago I wrote about how to use a Flash SWF in a Flex application. This is another take on it, and one I hope you will find useful.

Flex comes with a great set of charts, but no maps. The example uses a map of the USA (a Flash movie) that is controlled by Flex. The map is wrapped in a Flex component so it behaves like other Flex components. For example, there is a dataProvider to color the states; there are also click and rollOver/rollOut events.

This sample demonstrates the following:

You can combine Flash and Flex to make an effective application.
Flex can easily control a Flash SWF and the SWF can report events back to the Flex application.
Using an MXML wrapper around the SWF makes the SWF fit better with Flex applications and provides for great reusability.

Download the zip file and extract the contents into an empty directory. The application file is USADemoApp.mxml. The Flash movie which is the map, is wrapped in USAMap.mxml and used by the application as any component.

Download Flex application

Download Flash source for the USA map

Click to view sample

Posted by pent at 04:28 PM | Comments (22) | TrackBack

Peter Ent

Tips to give your RIA more FLEXappeal!