60分钟Flex应用开发第一部分

导读：
　　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 READMEand 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 Panelcomponents.

拖出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 270pixels wide and give it an idof “filePanel” (minus quotes), and set the titleproperty to “File View” (again minus the quotes). For the most part we will be using the Property panelto set our values so unless indicated otherwise this is where you should be entering information.

将此组件的宽设置为270PX，ID设置为为“FILEPANLE’,title设置为"fileview"，
　　Now drag another Panelcomponent 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 idand the titleproperties. Set these to “previewPanel” and “Preview” respectively. (Again minus quotes).
　　Height wise we need to make this about 470pixels 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 Panelcomponent 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 idand titleusing 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> 　　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). 　　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 creationCompleteevent to then tell our HTTPServiceto load the data by invoking its send() method - easy eh 　　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. 　　Once back in Design View we need to drag and drop a Treecomponent onto the white content area of our first panel (”fileView”). 　　Set the Treecomponent’s widthand heightto 100%(it should now fill the white area). 　　Give it an idof “fileList” 　　The next step is a bit of data plumbing. We are going to wire in our HTTPServiceto our Treecomponent. To do this we need to enter some information into the Data Provider field directly below the idin the Property panel.. 　　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 HTTPServicehas 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.xmlthat we set as the URL of our HTTPService. 　　You’ll notice that while folderis 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 HTTPServiceresult object so the first exposed node is indeed folderor in our case a collection of nodes called folder. 　　So we now have our data from our HTTPServicebound to our Treecomponent. Let’s test it out. Save your Main.mxml file again and run the application. 　　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 Treecomponent 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 labelFieldproperty 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 idfield 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 idvalue with the @ and it will know we are looking for an attribute of the node it is iterating over. So our labelFieldproperty within our Treecomponent 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 Datanode 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 Treetag 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. 　　Make sure you still have the Treecomponent 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 itemRendererwe 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 　　Copy this to your clipboard as we are going to need it in a bit. 　　Now as I indicated make sure you are in the Property panel’s Category View and expand the Othernode. It’s in alphabetical order so just scroll down until you hit the I’s and locate the entry for itemRenderer 　　Paste the package path from step 1 above into the value field of the item renderer 　　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? 　　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 Imagecomponent out of the component panel and on to it. Unlike the Treecomponent 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 Imagecomponent. 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. 　　<img height="193" src="http://blog.flashgen.com/images/flex/constraints.jpg" width="206"> 　　 　　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 Viewof the Properties panel. 　　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 Constraintsnode. Well you’d be wrong, for some reason Adobe have decided that the properties we want are part of the Stylesnode. So expand that and locate horizontalAlignand verticalAlignset these to centerand middlerespectively. 　　If you now look at the Imagecomponent you’ll notice that the little image icon is located in the middle of the component. 　　Job done. All we need to do now is give it an id, so enter previewin the id field; save Main.mxml and we’ll move on to linking this to our Treecomponent (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,previewPaneland detailPanelrespectively. In to filePanelwe have placed a Treecomponent and wired it up to an HTTPServicethat 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 TreeItemRendererwhich displays a small thumbnail of the images we load in. Finally we added an Imagecomponent 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. 　　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. 　　We are going to set a couple of properties now. The first one is scaleContent, set this to trueif it isn’t already set. (true is the default, but just to be explicit we’ll set it anyway). 　　Next we need to tell the Imagecomponent where it gets it’s data from. This is one by setting the sourceproperty. If you haven’t spotted it yet it is on the main Property panel view above the scaleContentfield. Set the source filed to the following: 　　{[email protected]} 　　Hopefully by now this is starting to make a bit more sense. Just to recap it, we are telling the Imagecomponent that we want to load the image that is represented by origwithin our XML file. As origis an attribute we need to prefix it with @. However, as our XML was loaded by our HTTPServiceand then bound to our Treecomponent (fileList), we now reference it as data from our Treecomponent. 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. 　　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 Imagecomponent. To do that we need to drag a TextAreacomponent from the component panel and drop it on our third panel (detailPanel). 　　Again, like the Imagecomponent set the constraints so it has a 10 pixel margin around itself. 　　Set the idof this TextAreacomponent 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 TextAreais selected and locate the section called Styleon 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. 　　To wire this TextAreain to our application we are going to use the same process as we did for our Imagecomponent in step 3 above. However we are going to set the textproperty with the following: 　　{[email protected]} 　　As you can see this is almost identical, except we are accessing the descriptionattribute 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. 　　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. 　　<img height="420" src="http://blog.flashgen.com/images/flex/flexapp60mins_pt1.jpg" width="525"> 　　 　　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. </httpservice>

<httpservice url="”../assets/data/assets.xml”" strong>不翻译了，大家直接对着代码看吧，呵呵。 本文转自 <a href="http://blog.flashgen.com/2007/12/04/flex-application-development-in-60-minutes-pt1/">http://blog.flashgen.com/2007/12/04/flex-application-development-in-60-minutes-pt1/</a> </httpservice>

60分钟Flex应用开发第一部分

相关推荐