Flex Application Development in 60 minutes pt.1

I first gave a semblance of this presentation at LFPug back in September. After that I refined it as there were a few teething problems and I wanted to try and add in more functionality. You can read about that here. After I had sorted out the issues I had on my “todo” list I then presented the new revised version at Flash on the Beach ’07. What is detailed within is the process used to create the FotB ’07 application which attendees of my session produced.

Before I kick off this tutorial you’ll need to download these files. Once you have got them extract the archive they came in and you should be left with a text file and another zip (don’t extract this one). Open the README and follow the instructions. Once you’re ready to go read on…

OK, so in the true spirit of tutorials we are going to do this by the numbers. So the first thing you need to do is open the Main.mxml if it is not already open. Once it is open we are going to switch to Design View. OK, let’s go…

1. From the Component panel drag out a Panel components.
2. We are going to lay this up so that we have one on the left hand side that extends from the top of our application to the bottom.
3. Once you have stretched it out make sure you only position it so there is a gutter from the top, left and bottom application margins – it should show a pale blue indicator line when you hit it. (If you want better control set the constraints in the Property panel [IMAGE]
4. Once it is in position make it about 270 pixels wide and give it an id of “filePanel” (minus quotes), and set the title property to “File View” (again minus the quotes). For the most part we will be using the Property panel to set our values so unless indicated otherwise this is where you should be entering information.
5. Now drag another Panel component out and place this so it has a gutter from the top and right hand side of the application and a similarly sized gutter between it and the first panel. [IMAGE].
6. Again we need to set the id and the title properties. Set these to “previewPanel” and “Preview” respectively. (Again minus quotes).
7. Height wise we need to make this about 470 pixels tall. This should leave a small space that runs along the right hand base of the application.
8. Into this space drag a third and final Panel component and stretch it out so it has an equal gutter around itself and the other panels, just as we did for the previous two.
9. Again we need to set the id and title using the following values, “detailView” and “Description”. (You can take it as black, that unless I indicate otherwise, you should always add values without the quotes).
10. Save the Main.mxml

You should now have something that looks like the image below (albeit in “Flex Teal”). If you don’t, panic not. Just copy the layout in the image. Feel free to test it at this point and bask in your new super m4c| F13>< Sk|77z :). Seriously though, we have done the initial layout and we can now start to plug in the content.

For this section we are going to switch back to the Source View (and we will only do this a couple of times to enjoy it.

1. At the top of the MXML file just below the Application tag insert a carriage return and type the following into your file:

   <mx:HTTPService id=”dataFeed” url=”../assets/data/assets.xml” resutlFormat=”e4x” />

   What we have just inserted is the MXML class that is going to load our data in (OK so it is only a locally held file, but it principle would be the same if you were loading XML from a remote server).

2. Now we have this in place we need to add in an event that will trigger off our new service. To do this we need to add a little bit of code to the end of our Application tag . Place your cursor in front of the “>” of the Application tag at the top of our file and type in the following (code hinting will kick in so it should be quick to do):

   creationComplete=”dataFeed.send()”

   What this does is once the Application has finished setting everything up and all of the assets have been created it fires off an event called creation complete. So we know when we should load our data we get the creationComplete event to then tell our HTTPService to load the data by invoking its send() method – easy eh

3. OK, that’s all we need to do in the Source View at the moment. Time to switch back to Design View again and add some more elements.
4. Once back in Design View we need to drag and drop a Tree component onto the white content area of our first panel (“fileView”).
5. Set the Tree component’s width and height to 100% (it should now fill the white area).
6. Give it an id of “fileList”
7. The next step is a bit of data plumbing. We are going to wire in our HTTPService to our Tree component. To do this we need to enter some information into the Data Provider field directly below the id in the Property panel..
8. Into this field we are going to add the following. Don’t worry if you don’t understand it, I’ll go over it once we have added it.

   {dataFeed.lastResult.folder}

   Ok, so that was painless, but what does this actual mean and do. Well if we take the curly braces first. These are to indicate that we are performing a data binding and in this case we are binding to the last result object that the HTTPService has received. However, we need to do a little bit deeper than that inside the result object and start at an object named folder. If you are wondering how and why we came to this conclusion then open up the assets.xml that we set as the URL of our HTTPService.

   You’ll notice that while folder is indeed a node in the XML file it isn’t the root node. This is because when you receive a block of XML data the root node is reapplied as the base of the HTTPService result object so the first exposed node is indeed folder or in our case a collection of nodes called folder.

9. So we now have our data from our HTTPService bound to our Tree component. Let’s test it out. Save your Main.mxml file again and run the application.
10. By now you are probably looking at a rather weird tree with what appears to be random XML placed next to a folder icon. Don’t worry you haven’t got it wrong. The reason it looks like this is due to the fact that it is displaying all of the attribute data. We just need to filter it out and tell the Tree component which field we want to use as our label (that way we should get a more user friendly tree). To do this we need to set the labelField property and we are going to provide it with a rather special looking piece of data.

    What we are going to use as the value is the id field of each of the XML nodes, however as it is an attribute we have to tell the component this. Now E4X provides us with a really easy way to do this. All we need to do is prefix the XML id value with the @ and it will know we are looking for an attribute of the node it is iterating over. So our labelField property within our Tree component MXML tag should read. To set this you need to switch to the Category View of the Property panel (it’s the middle of the three icons to the right of the Property panel title bar). Once in there you need to expand the Data node and you will find the entry for labelField. In the value field enter @id. If you switch back to the Source View you’ll see the Tree tag now has the following added to it.

    labelField=”@id”

    OK, save that again and test it. Now it should display the data like you would expect it.

Our tree is now displaying our data bu it doesn’t reflect the content we are loading in. By which I mean that we are clearly loading in information about images, but the default renderer for the Tree component uses a piece of paper to denote a element. We can fix this by using our own itemRenderer. Now we aren’t going to create the itemRenderer but the source is included within the source download. All we are going to do is implement it. So let’s get back to adding in our itemRenderer for now.

1. Make sure you still have the Tree component selected in Design View and if you don’t still have it set, switch to Category View in the Property panel again. Now to add in our itemRenderer we need to know a few things. Firstly we need to know that we actually have an itemRenderer. This we do, the ones for this application are compiled into a SWC which is inside the assets folder in the project. The second thing we need is the fully qualified package path to the renderer we wish to use. This I’m going to tell you now. It is com.flashgen.mx.renderers.TreeImageRenderer
2. Copy this to your clipboard as we are going to need it in a bit.
3. Now as I indicated make sure you are in the Property panel’s Category View and expand the Other node. It’s in alphabetical order so just scroll down until you hit the I’s and locate the entry for itemRenderer
4. Paste the package path from step 1 above into the value field of the item renderer
5. Save your Main.mxml again and test the application again. This time you should now see the leaf nodes have been replaced with a tiny thumbnail of the image. Neat huh?
6. Now we have the tree pretty much sorted lets look at loading up some data from it into one of the other panels. Locate the previewPanel (top right) and drag an Image component out of the component panel and on to it. Unlike the Tree component we are not going to make this 100%. We are going to give this a bit of a gutter around itself within the Panel. To do this we are going to set the constraints on the Image component. Make sure it is selected and locate the little panel image at the bottom of the main Property panel in Design View. We want to set a constraint of 10 all around it so all we need to do is check the four corner check boxes and in the text fields that activate when we have check them. Enter the value of 10 in each of them.

7. 

   Now our Image component should be centered within the panel with a nice equal gutter all around it. However you may have noticed that the weird little icon of a broken image is located top left. If we left it like this our images might look a bit out of place hard aligned up at the top. However we can fix this. Switch back to the Category View of the Properties panel.

8. We need to locate the properties that will allow us to reposition the image that is loaded. Now I suspect you are thinking this is in the Layout Constraints node. Well you’d be wrong, for some reason Adobe have decided that the properties we want are part of the Styles node. So expand that and locate horizontalAlign and verticalAlign set these to center and middle respectively.
9. If you now look at the Image component you’ll notice that the little image icon is located in the middle of the component.
10. Job done. All we need to do now is give it an id, so enter preview in the id field; save Main.mxml and we’ll move on to linking this to our Tree component (fileList).

At this point it is probably worth a quick recap of what we have achieved so far.
Firstly we have placed 3 panels within our application and named them filePanel,previewPanel and detailPanel respectively. In to filePanel we have placed a Tree component and wired it up to an HTTPService that we called dataFeed. This service is linked to an XML file located within our project structure. To provide relevance to the data we are returned we have added a custom TreeItemRenderer which displays a small thumbnail of the images we load in. Finally we added an Image component to our previewPanel, centered the image that will get loaded and applied a margin via the constraints control in the Property panel.
Well done, we’re about 50% through this now so let’s push on and get some data flowing.

1. Right, we are now going to link up our Tree component to our Image component (again we’re sticking with the Design View and the Properties panel). If you don’t have the Image component selected already select it now.
2. We are going to set a couple of properties now. The first one is scaleContent, set this to true if it isn’t already set. (true is the default, but just to be explicit we’ll set it anyway).
3. Next we need to tell the Image component where it gets it’s data from. This is one by setting the source property. If you haven’t spotted it yet it is on the main Property panel view above the scaleContent field. Set the source filed to the following:

   {fileList.selectedItem.@orig}

   Hopefully by now this is starting to make a bit more sense. Just to recap it, we are telling the Image component that we want to load the image that is represented by orig within our XML file. As orig is an attribute we need to prefix it with @. However, as our XML was loaded by our HTTPService and then bound to our Tree component (fileList), we now reference it as data from our Tree component. To get this to all happen seamlessly though we still need to use the curly “Binding” braces to inform the Flex compiler that we need to bind to this data and receive notification of any changes that may happen to it based on the criteria enclosed within it. i.e. when an item is selected within the fileList.

4. Before we test this we’ll wire up the final panel (as this is pretty much the same process we used to wire up the Image component. To do that we need to drag a TextArea component from the component panel and drop it on our third panel (detailPanel).
5. Again, like the Image component set the constraints so it has a 10 pixel margin around itself.
6. Set the id of this TextArea component to description. Now, once you have this done you may notice a faint keyline around the TextArea.

   This is normal, but for this instance we don’t need it; make sure the TextArea is selected and locate the section called Style on the main Property panel. Inside this there is a sub section called Border / Alpha. We need to set the border style to none. Since none of these fields have labels it’s this one above.

7. To wire this TextArea in to our application we are going to use the same process as we did for our Image component in step 3 above. However we are going to set the text property with the following:

   {fileList.selectedItem.@description}

   As you can see this is almost identical, except we are accessing the description attribute of our original XML data. Again, as this is an attribute and we are utilizing E4X we use the @ to indicate it is an attribute property.

8. Finally we are going to save the file and test it. You should have something like the image below. If not, don’t worry. Just go over the steps again.

Well that’s the first part of the application done. At this point we have the main elements of our application in place, so we could leave it there if we wished. However, to complete our application we still have some additional elements to add. Those bits we shall cover off in the second part of this tutorial.
Hopefully this will have been fun and you will have enjoyed what we have gone through so far. Until next time, have fun and feel free to elaborate on what we have created so far.