Flex

June 14th, 2012

Using Spark Layout Classes

More articles by »
Written by: Nouman Naveed
Tags:
flex absolute positioning

I am going to write this article for understanding Spark Layout Classes which were originally included in Adobe Flex 4 release. The purpose of this Spark Layout Classes is to simplify the process of implementing layout and customizing them.  Previously layouts were implemented using properties which are part of container classes in Flex 3. Layouts Classes introduced in Flex 4 are part of spark.layouts package and includes classes like BasicLayout,HorizontalLayout, TileLayout & VerticalLayout.

During Flex 3 days programmers used to use layout property of containers to set the layout type. However, with Flex 4 spark component model, the layout needs to set using layout classes. We will be discussing all layout classes here with examples for better understanding.


Basic Layout

BasicLayout class is a default layout and uses absolute positioning. Absolute positioning means specifying x and y properties of children. The origin is top left corner of the container and x increases to right where as y increases to the bottom.

<s:Application…>
<s:layout>
<s:BasicLayout/>
</s:layout>
</s:Application…>

adobe flex absolute positioning

 HorizontalLayout Class

HorizontalLayout classes lays out children in a single horizontal row and this container will ignore x & y properties of its children if defined. When using this container we need to remember that height of the row  is the height  of the tallest child. Each child calculates its own width by default. This container is very much suitable for displaying visual objects in single for automatic adjustment.

<s:Application>
<s:layout>
<s:HorizontalLayout/>
</s:layout>
</s:Application>

adobe flex horizontal layout

VerticalLayout Class

To simply display visual components from top to bottom in single column we can use VerticalLayout Class. Flex VerticalLayout class lays children in single column and ignores x & y properties of children. The width of the column is the width of the widest child and each child calculates its own height by default. Using vertical layout and horizontal layout is not recommend for performance reasons. It is important to understand that the Flash Player does some calculation on client machine for rendering the application, this includes initialization, measuring of container size, number of children, placing of children on proper location etc.  This takes lots of processing power if you are using many visual components in single container.

<s:Application…>
<s:layout>
<s:VerticalLayout/>
</s:layout>
</s:Application>

flex-vertical-layout

 


About the Author

Nouman Naveed
My name is Mohammed Nouman Naveed. I work and play with Flash Platform technologies and has experience of 11 years. Consulting and Training is part of my job. I am Adobe Certified Instructor, Adobe User Group Manager, Adobe Certified Expert and Adobe Community Champion.




 
 

 
CQ5
adobe aem56 dam logo

Setting Images in DAM

All images are loaded into the DAM (Digital Assets Management). To upload an image, you’ll need to use your Activator login. From the tree, click +Digital Assets Find the way to the tree to suitable folder (AAFP, images, ANN,...
by Nouman Naveed
0

 
 
 

Apache Flex 4.10.0 Available

Here comes Apache Flex 4.10. This project, the all-volunteer group of developers, and stakeholders in the development framework, today announced the release of Apache Flex 4.10.0. This release makes some important improvements ...
by Nouman Naveed
0

 
 
CQ5
aem 5.6.1 features pic

Many New Features in AEM 5.6.1

AEM 5.6.1 is a easy to use, unified experience management collection for marketers in the digital sphere to use in creating, managing, and delivering unique online experiences that are brand-entered and increase demand across d...
by Nouman Naveed
0

 

 
CQ5
Adobe CQ5 WEM, SOCO, Tagging, DAM

What’s New in CQ 5.6

1: It’s called AEM (Adobe Experience Manager) now Though I guess not that essential, it’s going to be exciting if the name is going to attach – there were other occasions where Adobe tried to rename this result and at the...
by Nouman Naveed
0

 
 
CQ5
content management for web and mobile

Content Management for Web & Mobile

Adobe CQ is a WCM and gives a better browser-based user interface. It is best suitable for business and IT for creating interactive, multimedia rich, multichannel consumer understanding to make an engaging digital existence, ma...
by Nouman Naveed
0

 




0 Comments


Be the first to comment!


Leave a Reply

Your email address will not be published. Required fields are marked *