Faster layouts in Flex 4

The new Spark component layouts introduced in Flex 4 use object virtualization in order to minimize object instantiation. You’ll be amazed on how much faster your application will be by just making use of the new Spark layouts.

In Flex 3 one would use VBox or HBox to layout the components on the canvas as shown bellow:

	<mx:VBox>
		<!-- Vertical aligned components go here -->
	</mx:VBox>

	<mx:HBox>
		<!-- Horizontal components go here -->
	</mx:HBox>

In Flex 4 this same layout can be achieved by using:

	<s:VGroup>
		<!-- Vertical aligned components go here -->
	</s:VGroup>
	
	<s:HGroup>
		<!-- Horizontal components go here -->
	</s:HGroup>

But the above Spark components still add a minor overhead due to inheritance. You can have it a bit faster but with the added cost of extra verbosity:

	<s:Group>
		<s:layout>
			<s:VerticalLayout/>
		</s:layout>

                <!-- Vertical aligned components go here -->

	</s:Group>
	
	<s:Group>
		<s:layout>
			<s:HorizontalLayout/>
		</s:layout>

                <!-- Horizontal components go here -->

	</s:Group>

This last format requires a little bit more from the developer but it does pay off on larger applications.

Here is a very good article on Spark Layouts by Evtim.

Advertisements

About CrazyPenguin

Software Engineer
This entry was posted in Flex 3, Flex 4 (Spark). Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s