Its time to start making things look nice.
Last time I started with the central user focused object – the pattern – and started creating MXML components that corresponded to the object’s parts. This, along with some temporary data structures gave me a rough working prototype of the pattern object. It did look quite ugly however.
This time I spent moving objects around, changing layout and playing a bit with color schemes. Since most of the pattern is data driven, allowances need to be made for different lengths of data. This means that objects holding text and images needs to expand to fit the required screen area. Other objects need to flow properly so text doesn’t end up running on top of other paragraphs
In AIR this means that things need to be placed in the appropriate UI containers. I had already used the Canvas container to hold sub parts of the pattern (such as the Instructions and the Recipe), but there are others that came into use such as the HBox, VBox and Tiles. The Canvas is great, you can place any object where ever you want and it doesn’t care. Unfortunately it doesn’t care about flow or object collisions either. With dynamic data the Canvas can look like a real mess. The HBox and VBox on the other hand, will only place one object in one place at a time. Depending on which box you choose it will place objects side by side or stack them. Either way it does take care of flow. Tiles are another really useful container – depending on the direction, it will place things side by side (as with an HBox) until it reaches its maximum width, then it starts a new row. By nesting the containers you can pretty much get the screen to flow any way you want.
To decide what objects went in what container, I started by drawing all the objects on a piece of paper. I then drew an arrow next to each object to indicate the direction I wanted it to flow.
I then drew boxes around objects on the same plane. By looking at the flow lines I can determine what container was required. For example the entire Pattern screen needs to flow down – I want it to get longer if there is a lot of information (not wider). This means that the Pattern Screen can be wrapped in a VBox. One of the consequences of this is that all of the objects would be stacked on top of one another as that is all that a VBox allows. When I look at the Name, Tier and Species fields I want them to be on the same line. This means that they must be grouped in an HBox. By continuing this process I eventually had a layout that would flow correctly as different lengths of data were added. Another thing I found was that by omitting the height and width attributes of certain HBox and VBox elements the boxes will inherit the height and width of the elements inside them (they would flow correctly). I.e. the VBox that contains the picture and recipe will expand to fit all of the Recipe because it does not have a set height.
Another concern that I had was making the right part of the screen scroll. Even though I have a few sections that I did want to scroll – such as the Instructions. I had to tinker with things a log, but I eventually got just the Instructions section to scroll and not the entire page. This was a bit of a PITA and took a lot of fiddling with the width and height values of the various containers. At some points I had scroll bars on top of other scroll bars. If anyone knows of an easier way to this (besides trial and error), please let me know.
Once I had things laid out nicely and flowing correctly, I started looking at themes and colors. Eventually I will use a style sheet, but I’m still playing with things too much for that right now. As far as colors go, I’m no Graphic Designer. I can tell when something looks wrong, but what it takes to make it right is beyond my current skill level. Fortunately there are some really nice tools out there to help. On of my new favorites is Kuler (yes I am Adobe biased). There are tons of user defined color schemes available, some better than others. My favorite feature is the Create From an Image feature. I uploaded a picture (in this case a picture that included my parka and waders) that had the right "feeling" and it picked out the color theme from that picture – way cool. With some minor adjustments I can use those five colors for all my objects and still have something that looks nice.
One other thing that I did was to add a new component for the Species field. I decided that icons looked better than text and it was just a matter of doing a similar repeater setup that I used in the Recipe and Instructions components.
One complaint – As I have stated before, I am a coder by training. I love the rich IDE environments that are provided in tools such as Eclipse. Since Flex Builder is based on Eclipse, I believe that it should have the same rich development environment. Missing features such as source formatting (pretty printing) and variable highlighting annoy me to no end. If someone on the Flex Builder team is listening – please add these feature in as they are in the Java developing mode.