導讀：
　　I first gave a semblance of this presentation at LFPugback 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. 這個PPT第一次是在LFPugback 的演講上給出的，在那之后，我對文中一些問題進行了修改同時添加了更多的功能，那以后，修改后的文章在BEACH 07講演上再次給出
　　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… 在我推出這個教程之前，你需要下載這些文件，并仔細的閱讀README注意事項
　　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…第一件事情，打開MAIN.MXML切換到設計視圖
　　From the Component panel drag out a Panel components.

拖出PANEL組件
　　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.

我們將要把它放在左邊，從下往上
　　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]

放置的時候可以注意藍色的對準線
　　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.

將此組件的寬設置為270PX，ID設置為為“FILEPANLE’,title設置為"fileview"，
　　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].
　　Again we need to set the id and the title properties. Set these to “previewPanel” and “Preview” respectively. (Again minus quotes).
　　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.
　　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.
　　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).

其他的PANEL照著下面的圖片設置（我發現我很沒有耐心翻譯這些基礎教程）
　　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>:). 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.
　　At the top of the MXML file just below the Application tag insert a carriage return and type the following into your file:
<?xml:namespace prefix = mx /><httpservice id="”dataFeed”" url="”../assets/data/assets.xml”" strong><br>　　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). <br>　　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 “&gt;”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): <br>　　<strong>creationComplete=”dataFeed.send()”</strong> <br>　　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 <strong>creationComplete</strong>event to then tell our <strong>HTTPService</strong>to load the data by invoking its send() method - easy eh <br>　　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. <br>　　Once back in Design View we need to drag and drop a <strong>Tree</strong>component onto the white content area of our first panel (”fileView”). <br>　　Set the <strong>Tree</strong>component’s <strong>width</strong>and <strong>height</strong>to <strong>100%</strong>(it should now fill the white area). <br>　　Give it an <strong>id</strong>of “fileList” <br>　　The next step is a bit of data plumbing. We are going to wire in our <strong>HTTPService</strong>to our <strong>Tree</strong>component. To do this we need to enter some information into the Data Provider field directly below the <strong>id</strong>in the Property panel.. <br>　　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. <br>　　<strong>{dataFeed.lastResult.folder}</strong> <br>　　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 <strong>HTTPService</strong>has received. However, we need to do a little bit deeper than that inside the result object and start at an object named <strong>folder</strong>. If you are wondering how and why we came to this conclusion then open up the <strong>assets.xml</strong>that we set as the URL of our <strong>HTTPService</strong>. <br>　　You’ll notice that while <strong>folder</strong>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 <strong>HTTPService</strong>result object so the first exposed node is indeed <strong>folder</strong>or in our case a collection of nodes called folder. <br>　　So we now have our data from our <strong>HTTPService</strong>bound to our <strong>Tree</strong>component. Let’s test it out. Save your Main.mxml file again and run the application. <br>　　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 <strong>Tree</strong>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 <strong>labelField</strong>property and we are going to provide it with a rather special looking piece of data. <br>　　What we are going to use as the value is the <strong>id</strong>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 <strong>id</strong>value with the @ and it will know we are looking for an attribute of the node it is iterating over. So our <strong>labelField</strong>property within our <strong>Tree</strong>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 <strong>Data</strong>node and you will find the entry for <strong>labelField</strong>. In the value field enter <strong>@id</strong>. If you switch back to the Source View you’ll see the <strong>Tree</strong>tag now has the following added to it. <br>　　<strong>labelField=”@id”</strong> <br>　　OK, save that again and test it. Now it should display the data like you would expect it. <br>　　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. <br>　　Make sure you still have the <strong>Tree</strong>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 <strong>itemRenderer</strong>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 <strong>com.flashgen.mx.renderers.TreeImageRenderer</strong> <br>　　Copy this to your clipboard as we are going to need it in a bit. <br>　　Now as I indicated make sure you are in the Property panel’s Category View and expand the <strong>Other</strong>node. It’s in alphabetical order so just scroll down until you hit the I’s and locate the entry for <strong>itemRenderer</strong> <br>　　Paste the package path from step 1 above into the value field of the item renderer <br>　　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? <br>　　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 <strong>previewPanel</strong>(top right) and drag an <strong>Image</strong>component out of the component panel and on to it. Unlike the <strong>Tree</strong>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 <strong>Image</strong>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. <br>　　<img height="193" src="http://blog.flashgen.com/images/flex/constraints.jpg" width="206"><br>　　 <br>　　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 <strong>Category View</strong>of the Properties panel. <br>　　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 <strong>Layout Constraints</strong>node. Well you’d be wrong, for some reason Adobe have decided that the properties we want are part of the <strong>Styles</strong>node. So expand that and locate <strong>horizontalAlign</strong>and <strong>verticalAlign</strong>set these to <strong>center</strong>and <strong>middle</strong>respectively. <br>　　If you now look at the <strong>Image</strong>component you’ll notice that the little image icon is located in the middle of the component. <br>　　Job done. All we need to do now is give it an <strong>id</strong>, so enter <strong>preview</strong>in the id field; save Main.mxml and we’ll move on to linking this to our <strong>Tree</strong>component (<strong>fileList</strong>). <br>　　At this point it is probably worth a quick recap of what we have achieved so far. <br>　　Firstly we have placed 3 panels within our application and named them <strong>filePanel</strong>,<strong>previewPanel</strong>and <strong>detailPanel</strong>respectively. In to <strong>filePanel</strong>we have placed a <strong>Tree</strong>component and wired it up to an <strong>HTTPService</strong>that we called <strong>dataFeed</strong>. 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 <strong>TreeItemRenderer</strong>which displays a small thumbnail of the images we load in. Finally we added an <strong>Image</strong>component to our <strong>previewPanel</strong>, centered the image that will get loaded and applied a margin via the constraints control in the Property panel. <br>　　Well done, we’re about 50% through this now so let’s push on and get some data flowing. <br>　　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. <br>　　We are going to set a couple of properties now. The first one is <strong>scaleContent</strong>, set this to <strong>true</strong>if it isn’t already set. (true is the default, but just to be explicit we’ll set it anyway). <br>　　Next we need to tell the <strong>Image</strong>component where it gets it’s data from. This is one by setting the <strong>source</strong>property. If you haven’t spotted it yet it is on the main Property panel view above the <strong>scaleContent</strong>field. Set the source filed to the following: <br>　　<strong>{fileList.selectedItem.@orig}</strong> <br>　　Hopefully by now this is starting to make a bit more sense. Just to recap it, we are telling the <strong>Image</strong>component that we want to load the image that is represented by <strong>orig</strong>within our XML file. As <strong>orig</strong>is an attribute we need to prefix it with <strong>@</strong>. However, as our XML was loaded by our <strong>HTTPService</strong>and then bound to our <strong>Tree</strong>component (<strong>fileList</strong>), we now reference it as data from our <strong>Tree</strong>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 <strong>fileList</strong>. <br>　　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 <strong>Image</strong>component. To do that we need to drag a <strong>TextArea</strong>component from the component panel and drop it on our third panel (detailPanel). <br>　　Again, like the <strong>Image</strong>component set the constraints so it has a 10 pixel margin around itself. <br>　　Set the <strong>id</strong>of this <strong>TextArea</strong>component to <strong>description</strong>. Now, once you have this done you may notice a faint keyline around the <strong>TextArea</strong>. <br>　　This is normal, but for this instance we don’t need it; make sure the <strong>TextArea</strong>is selected and locate the section called <strong>Style</strong>on the main Property panel. Inside this there is a sub section called <strong>Border / Alpha</strong>. We need to set the border style to <strong>none</strong>. Since none of these fields have labels it’s this one above. <br>　　To wire this <strong>TextArea</strong>in to our application we are going to use the same process as we did for our <strong>Image</strong>component in step 3 above. However we are going to set the <strong>text</strong>property with the following: <br>　　<strong>{fileList.selectedItem.@description}</strong> <br>　　As you can see this is almost identical, except we are accessing the <strong>description</strong>attribute of our original XML data. Again, as this is an attribute and we are utilizing E4X we use the <strong>@</strong>to indicate it is an attribute property. <br>　　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. <br>　　<img height="420" src="http://blog.flashgen.com/images/flex/flexapp60mins_pt1.jpg" width="525"><br>　　 <br>　　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. <br>　　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. </httpservice>

<httpservice url="”../assets/data/assets.xml”" strong>不翻譯了，大家直接對著代碼看吧，呵呵。<br><br>本文轉自 <br><a >http://blog.flashgen.com/2007/12/04/flex-application-development-in-60-minutes-pt1/</a> </httpservice>

60分鐘Flex應用開發第一部分