Real World Flex/ColdFusion: Part 3
In this step of our series we are going to focus on the layout of the application. As I stated in a previous article in this series the layout is a very important step of our application and we need to look at all of our options. This is where I am really going to enjoy some feedback from others so please chime in with your thoughts. Before we get into what my first choice was with the layout and how I can improve on it lets take a look at our options.
We basically have 3 options when laying out our application.
- Absolute Positioned Layout
- Percentage based layout
- Constraints based layouts
Absolute positioning is a layout that you probably won't use to much but its by far the quickest of the layouts. The reason for this is because the application does not need to calculate where items are going to fall on the screen. In an absolute layout you tell the application where to place components based on x,y coordinates. Think of the top left part of your screen as 0,0. From there you can place a component on a screen using x,y attributes for the components. If you are building some widget for a page and you know that the width is going to be a fixed width its not a bad choice but I still think in my opinion I would use constraint based layouts but we will get into that in a second.
Percentage based layouts are probably the most popular among new developers. I think the more layout examples I see the bulk of them use percentage based layouts. These types of layouts are great because they allow for change. If our application is going to be viewed in a browser of 800x600 or 1024x768 we can tell our parent component to grow 100% of the screen. If screens are resized or viewable areas are different are application should be pretty consistent across them all. The drawback to this of course is that before the component is drawn on the screen the flash player needs to figure out where to draw the component and then needs to re draw itself every time the screen is changed.
Constraints based layouts I will admit are completely new to me. From what I can tell you can still tell child components to stretch 100% but this is basically setting up your containers. The way that constraints based layouts work is they use the top,right,bottom & left attributes. Let's say you create a canvas container and set your top,right,bottom & left attributes to 20. This means that no matter the size of the application this container should always be 20 pixels away from each of these values. This offers a little bit of the best of both worlds. When we get into stacking tons of containers / components on top of each other speed will begin to play an issue. If the player always knows where top level containers are going to be placed and just needs to determine control sizes we can see some definite advantage in speed here.
Again I am no expert in the area and I am really just going off of the little knowledge I have. If someone has something to add to that or correct me please do so. Now that we know our options lets dive in start creating our application. I think we should take a look at my first stab at it and then how we can improve on it. Up until this application I would always write layouts using percentage based layouts. Looking back on it I realize now that it was probably the easiest solution and a quick solution. Below is the original mockup I had of the application. When I first looked at the application I thought to myself the container of this application could be panel. Inside of that I have a HDivided box with a tree and data grid component. To finish it off since I am using a panel I can use a control bar for the status text and button controls.
Going off of my original thoughts lets take a look at some code and what it turns out to look like. Keep in mind this will probably not be our end solution. You will notice that the panel does not touch the edges. This is because by default there is a 24px padding for all of the sides.
And here is the code for that layout. As you can you see there really is not much to it. At this point we are not trying to add any other functionality to our application. We are simply trying to figure out the best way to layout our application.
This works and we could easily run with this but we are going to make a small to change to it. Lucky for me I have Kevin Hoyt to always run ideas by. I have had the pleasure of knowing Kevin for awhile now. Kevin is a platform evangelist for Adobe who really seems to enjoy talking with developers and learning from their experiences. Kevin pointed out this could really be a good opportunity to understand constraints based layout. The more features we start adding to our file manager the more nested layouts we are going to run into. Again I am not a pro here so correct me if I am wrong. What we want to do here is have our containers constraints based and our controls will stretch a percentage of the area. The other thing Kevin and I talked about is the Panel component. I think to many times we tend to gravitate to the panel component for a container where it really does not need to go. In this example the browser really acts a panel so I think we can get rid of it.
As you ca see there is not a huge overall change to the look and feel of our application.
Let's take a look at the code to understand what is going on here. The first HBox is going to contain our application title. We are telling it to that no matter what the size of the screen, I want you 20 from the left, top and right and I want you to be 25px high. Next our HDividedBox is also 20 from the left and right to keep the left and right margins 20px. You will notice though that the top is not 20? This is because we know our first HBox is 20 from the top and 20 high, so this needs to be at least 45 from the top, we will go with 50 to add a little spacing. Finally we figure out the bottom of the HDividedBox the same way based on our footer area HBox.
Don't worry too much about the look and feel right now. We are going to get into themes latter on so that our application looks unique. Before we move on from here though I would really love to hear some design thoughts from all of you.
