Creating Layouts in Flex


Creating layouts in Flex should be easy, specially when you are using Flex builder and drag and drop capabilities. But, it is a little tricky than it seems and if you choose to ignore some of the finer details, I promise you will be stumped mid-way. While, I found some articles, but I still find something consolidated that I can get into my head. These are all scattered away (maybe I can not pin-point to the right stuff yet). Here is my attempt to put down in black-n-white some guidelines and rules as to what you should be doing and what not?

While all the feedback and comments are welcome, I would appreciate if you can collaborate with me on this one for us to have a comprehensive set of guidelines 🙂

Flex default layout manager, containers and children follow sizing and measuring algorithms to layout the pages and this exercise can be very resource intensive. You never know the client (PC) that will be running your application. Also, what you can not do is to have a minimum requirement like 2GB ram on all systems that run the application, because that would not be possible practically. This is not a game but an application that business users will work on.

Rule 1: Avoid unnecessary container nesting

Coming from an HTML/CSS background it is easy to fall prey to this habit when the objective is to have flexible designs. One example where things can go wrong very quickly are

Flex Layouts | Nested Containers

When you have such kind of nesting, the containers run measuring and sizing algorithm on children. Now, if you have some of the children as containers themselves this can be very time consuming. This will also be a performance issue if you are choosing to resize your screens as the same algorithm is executed again.

You must be asking what should we be doing if we find ourselves in such a situation? Look for alternatives. You should re-evaluate your choice of containers, a better option is Constraint based layouts which makes use of Styles, Horizontol & Vertical alignments, margins, and spacers.

Rule 2: Do not use absolute layout techniques

This technique needs you to define co-ordinates (x,y) for objects. While, this technique is most performant as the there is no need for the player to find out positions for the children, it is not a recommended practice. This approach will not provide you flexible designs and re-sizing the browser window will not resize and re-layout the objects. Try avoiding this one. This approach can be used only with Canvas or Application with layout=”absolute”

Also, you can choose to hard-code widths and heights. This also is a quick win solution because the player need not calculate sizes of objects. In many applications, you will find that this is anyways needed, because, you would not want to extend/shrink the size of your controls like TextInput with changing browser size.

Rule 3: Make wireframes before you start making layouts

This is a very handy and good practice. If you can, then make sure you have a paper-layout (wire frame) of your application design. This will help you in understanding the application design and assist in choosing a container appropriately

Rule 4: Use Navigator containers

Navigator containers like Accordion, TabNavigator and ViewStack has built-in deferred creation policy. This means that all the controls are not created at application start-up, but are deferred until you have activated that view.

Rule 5: Use Box when you have line up things in one direction (horizontally or vertically)

You should be using Box, HBox or VBox only when you have to logically group some controls together and place then in a layout. Do not use nested HBox and VBox to do placements on the screen.

Rule 6: Use Constraints if you have applications that can change size

You can use top, bottom, left, right to set anchor point on the application. This will ensure that your containers and controls would be anchored to the borders as defined by you. Let us say that you have set a control with left=10 and right=10, this will mean that as you resize the application, the size of the container / control will change.

I will try to code an example and upload the same for you to view in some time.

Advertisements

5 thoughts on “Creating Layouts in Flex

  1. Pingback: Flex Best Practices « Scratch Pad

  2. Pingback: Questions people ask? « Scratch Pad

  3. Suggest I have the code:

    What can I do to meet the following conditions?

    1. All child containers of ‘myContainer’ can be seen through scroll.
    2. The application container had no scrolls.

    I do not know the size of the window and

  4. Suggest I have the code:

    What can I do to meet the following conditions?

    1. All child containers of ‘myContainer’ can be seen through scroll.
    2. The application container had no scrolls.

    I do not know the size of the window

Initiate your idea here...

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