flash builder
Episode one of our introduction to data-driven development with Adobe Flash Builder saw us hook up a Catalyst-generated Flex application to our database, and use the code generation features of Flash Builder to create a PHP service for our app’s back end. By the time we finished, we had a working Flex application that made a full round-trip to our database via a PHP service, and populated a contact list with items.
在我们使用Adobe Flash Builder进行数据驱动的开发的简介中，第1集介绍了如何将Catalyst生成的Flex应用程序连接到我们的数据库，并使用Flash Builder的代码生成功能为我们的应用程序后端创建PHP服务。 到完成时，我们有了一个可用的Flex应用程序，该应用程序通过PHP服务对数据库进行了完整的往返，并在列表中填充了项目。
In today’s final instalment, we’ll learn about some of the more advanced features of code generation that Flash Builder makes available to us, and add some data-editing capabilities to our application.
在今天的最后一期中，我们将学习Flash Builder向我们提供的一些更高级的代码生成功能，并为我们的应用程序添加一些数据编辑功能。
If you’ve followed this series since its first instalment, you should be up to speed and ready to roll; for anyone who’s joining us late, I’ll assume you have a little familiarity with Flex and MXML. You won’t actually need to know any PHP, as Flash Builder does all the heavy lifting for us, though you will need to have PHP and MySQL installed.
如果您是从第一期开始就遵循本系列的，那么您应该赶快上手，随时可以滚动； 对于迟到我们的人，我假设您对Flex和MXML有点熟悉。 实际上，您不需要了解任何PHP，因为Flash Builder将为我们完成所有繁重的工作，尽管您将需要安装PHP和MySQL。
Make sure to test your knowledge with the Adobe-sponsored quiz at the end of the article.
请确保在文章结尾使用Adobe赞助的测验来测试您的知识。
In the first two articles in this series, we used Adobe Flash Catalyst to convert some basic artwork into a working prototype of a contact application, then imported the Flash Catalyst project into Flash Builder. Using Flash Builder’s data driven development tools, we automatically generated a PHP service that contained all the calls we need to manage our contact data, and automagically hooked it up to our application.
在本系列的前两篇文章中，我们使用Adobe Flash Catalyst将一些基本的图稿转换为联系人应用程序的工作原型，然后将Flash Catalyst项目导入Flash Builder。 使用Flash Builder的数据驱动开发工具，我们自动生成了一个PHP服务，其中包含管理联系数据所需的所有调用，并自动将其连接到我们的应用程序。
This time, you’ll see just how much work has been put into Flash Builder to allow us to build applications rapidly. But before we get to that, we’ll need to add a couple more features to make our application usable.
这次，您将看到Flash Builder投入了多少工作，使我们能够快速构建应用程序。 但是在此之前，我们需要添加更多功能以使我们的应用程序可用。
Our starting position is the end result of the previous article’s instructions. To make life easier, this installment’s downloadable archive has a Flash Builder project named part_2_start.fxp.
我们的起始位置是上一篇文章说明的最终结果。 为了使生活更轻松， 本期可下载的存档中有一个名为part_2_start.fxp的Flash Builder项目。
When you import the .fxp file, you will be presented with a dialog asking you to update path variables. This is because we are using a PHP installation in the project, and the variables should be set as follows:
导入.fxp文件时，将显示一个对话框，要求您更新路径变量。 这是因为我们在项目中使用PHP安装，并且变量应设置如下：
-
OUTPUT_FOLDER
导出目录
-
This should be your webroot, or the web directory you’re serving your project from. For example
C:Inetpubwwwrootcontacts.这应该是您的webroot，或您要从中提供项目的Web目录。 例如
C:Inetpubwwwrootcontacts。
PHP_FLEX_SERVER_ROOT
PHP_FLEX_SERVER_ROOT
-
This should be the root of your web server. For example
C:Inetpubwwwroot.这应该是您的Web服务器的根目录。 例如
C:Inetpubwwwroot。
PHP_WEB_URI
PHP_WEB_URI
-
This should be the url root used to access your project when it compiles. For example
http://localhost/contacts.这应该是编译时用于访问项目的url根目录。 例如
http://localhost/contacts。
This assumes you have a local web server and PHP installation, of course.
当然，这假定您具有本地Web服务器和PHP安装。
We already have a working contact list on the left-hand side of our application. What we need now is to add a single contact view, so that the user can see the details of any contact in the list when he or she clicks on a contact’s name.
我们的应用程序左侧已经有一个工作联系人列表。 现在，我们需要添加一个联系人视图，以便用户在单击联系人姓名时可以在列表中看到任何联系人的详细信息。
When we were working in Flash Catalyst, we defined a contactView state. The code in Main.mxml works, but it’s a little simplistic for what we want to do, so let’s modify it slightly.
在Flash Catalyst中工作时，我们定义了contactView状态。 Main.mxml的代码Main.mxml工作，但是对于我们想要做的事情来说有点简单，所以让我们对其进行一些修改。
Start by cutting out all the <fx:DesignLayer> and <s:RichText> elements that are being used to show the contact’s name on the right-hand side of our display: we’re going to create a new component for this purpose.
首先，切出所有用于在显示的右侧显示联系人姓名的<fx:DesignLayer>和<s:RichText>元素：为此，我们将创建一个新组件。
Right-click on /src/components in your Package Explorer pane in Flash Builder, and create a new MXML component. Call it ContactItem and fill in the details in the dialog as per Figure 1, “The ContactItem Component”.
在Flash Builder的“程序包资源管理器”窗格中右键单击/src/components ，然后创建一个新的MXML组件。 将其ContactItem然后按照图1“ ContactItem Component”在对话框中填写详细信息。
Flash Builder will generate the component structure for us. Next, we want to drop in the code to display the contact item’s details. First, insert the following code inside the Group element, which adds a public variable so the component can be passed a Contact value object:
Flash Builder将为我们生成组件结构。 接下来，我们要添加代码以显示联系人项的详细信息。 首先，将以下代码插入Group元素内，该元素添加一个公共变量，以便可以向该组件传递Contact值对象：
<fx:Script> <![CDATA[ import valueObjects.Contact; [Bindable] public var contactData : Contact; ]]></fx:Script>
Don’t forget the [Bindable] metadata—without it, the component won’t pick up changes to our selections at runtime. You’ll recall that, in article two of the series, Flash Builder generated the valueObjects/Contact.as class for us, and we can use this as the expected type.
不要忘记[Bindable]元数据-如果没有它，该组件将不会在运行时获取对我们选择内容的更改。 您会记得，在本系列的valueObjects/Contact.as文章中，Flash Builder为我们生成了valueObjects/Contact.as类，我们可以将其用作期望的类型。
Now let’s add a slightly cleaned-up version of the generated Catalyst code, from which we’ve simply removed the Catalyst-specific items and stripped out the includeIn attribute. The code should look like this:
现在，让我们为生成的Catalyst代码添加一个略微清理的版本，从中我们仅删除了Catalyst特定的项并去除了includeIn属性。 该代码应如下所示：
<s:BitmapImage source="@Embed('assets/images/mockup/at.png')"/><s:RichText color="0xFFFFFF" fontSize="18" kerning="on" lineHeight="120%" whiteSpaceCollapse="preserve"> <s:content><s:p whiteSpaceCollapse="collapse"><s:span>Toby Tremayne</s:span></s:p></s:content></s:RichText><s:RichText color="0xFFFFFF" kerning="on" lineHeight="120%" whiteSpaceCollapse="preserve"> <s:content><s:p whiteSpaceCollapse="collapse"><s:span>9999 999 999</s:span></s:p></s:content></s:RichText><s:RichText color="0xFFFFFF" kerning="on" lineHeight="120%" whiteSpaceCollapse="preserve"> <s:content><s:p whiteSpaceCollapse="collapse"><s:span>toby@magicindustries.net</s:span></s:p></s:content></s:RichText><s:RichText color="0xFFFFFF" kerning="on" lineHeight="120%" whiteSpaceCollapse="preserve"> <s:content><s:p whiteSpaceCollapse="collapse"><s:span>21b Baker Street</s:span></s:p></s:content></s:RichText><s:RichText color="0xFFFFFF" kerning="on" lineHeight="120%" whiteSpaceCollapse="preserve"> <s:content><s:p whiteSpaceCollapse="collapse"><s:span>London</s:span></s:p></s:content></s:RichText>
Finally, we want to make sure the ContactItem component is picking up the actual data that’s passed to it, so we replace the hard-coded values with references to our value object:
最后，我们要确保ContactItem组件正在拾取传递给它的实际数据，因此我们将硬编码的值替换为对我们的value对象的引用：
<s:RichText color="0xFFFFFF" fontSize="18" kerning="on" lineHeight="120%" whiteSpaceCollapse="preserve"> <s:content><s:p whiteSpaceCollapse="collapse"><s:span>{contactData.first_name}</s:span></s:p></s:content></s:RichText><s:RichText color="0xFFFFFF" kerning="on" lineHeight="120%" whiteSpaceCollapse="preserve"> <s:content><s:p whiteSpaceCollapse="collapse"><s:span>{contactData.phone}</s:span></s:p></s:content></s:RichText><s:RichText color="0xFFFFFF" kerning="on" lineHeight="120%" whiteSpaceCollapse="preserve"> <s:content><s:p whiteSpaceCollapse="collapse"><s:span>{contactData.email}</s:span></s:p></s:content></s:RichText><s:RichText color="0xFFFFFF" kerning="on" lineHeight="120%" whiteSpaceCollapse="preserve"> <s:content><s:p whiteSpaceCollapse="collapse"><s:span>{contactData.address1}</s:span></s:p></s:content></s:RichText><s:RichText color="0xFFFFFF" kerning="on" lineHeight="120%" whiteSpaceCollapse="preserve"> <s:content><s:p whiteSpaceCollapse="collapse"><s:span>{contactData.city}</s:span></s:p></s:content></s:RichText>
Now, move back to Main.mxml. First, check that the Application tag’s currentState attribute is set to listView:
现在，移回Main.mxml 。 首先，检查Application标签的currentState属性是否设置为listView ：
<s:Application xmlns:fc="http://ns.adobe.com/flashcatalyst/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:flm="http://ns.adobe.com/flame/2008" xmlns:lib="assets.graphics.mockup.*" xmlns:d="http://ns.adobe.com/fxg/2008/dt" xmlns:ai="http://ns.adobe.com/ai/2009" xmlns:ATE="http://ns.adobe.com/ate/2009" xmlns:contactservice1="services.contactservice1.*" height="600" width="800" backgroundColor="#FFFFFF" preloaderChromeColor="#FFFFFF" currentState="listView">
Next, go to the section of the code from which we stripped out the elements we put into ContactItem.mxml, and drop in a call to our new component, like so:
接下来，转到代码部分，从该部分中删除放入ContactItem.mxml的元素，并放入对新组件的调用，如下所示：
<components:ContactItem id="contactPane" contactData="{contactList.selectedItem}" includeIn="contactView" x="450" y="125" />
If you type this using the code insight in Flash Builder (IE type the opening left angle bracket and wait for the little popup, you can navigate to your components:ContactItem and when you select it, the IDE will automatically add an xmlns attribute to your <Application> tag. If not, you will need to make sure the following is added to the <Application> tag:
如果您使用Flash Builder中的代码洞察来键入此内容(即，键入左左尖括号并等待小弹出窗口，则可以导航至您的components:ContactItem并且在选择它时，IDE会自动将xmlns属性添加到您的<Application>标记。如果没有，则需要确保将以下内容添加到<Application>标记：
xmlns:components="components.*"
The list component was automatically assigned an id when we used the Flash Builder code generation tools to hook it up to our PHP service call, but it’s a very non-descriptive list1. Change the id to contactList to make your code a little clearer.
当我们使用Flash Builder代码生成工具将list组件连接到我们PHP服务调用时，会自动为list组件分配一个id ，但这是一个非描述性的list1 。 将id更改为contactList以使您的代码更加清晰。
You can, of course, set id names and properties for your components in Flash Catalyst using the Properties pane in the Catalyst IDE prior to porting the project to Flash Builder.
当然，您可以在将项目移植到Flash Builder之前，使用Catalyst IDE中的“ 属性”窗格为Flash Catalyst中的组件设置id名称和属性。
Now we want to make the contact pane appear on the right hand side when the user selects an item from the contact list. Add this function to Main.mxml’s script block:
现在，当用户从联系人列表中选择一个项目时，我们希望使联系人窗格显示在右侧。 将此函数添加到Main.mxml的脚本块中：
protected function list_changeHandler():void { currentState='contactView';}
And then add a change handler on the contact list itself, like so:
然后在联系人列表本身上添加一个更改处理程序，如下所示：
<s:List id="contactList" skinClass="components.TobyTremayneDataList" x="157" y="163" change="list_changeHandler()" creationComplete="list_creationCompleteHandler(event)" labelField="address1" itemRenderer="components.RepeatedItem1"> <s:AsyncListView list="{getAllContactResult.lastResult}"/></s:List>
If you followed the last article and made your own adjustments, Flash Catalyst created transitions using parallels to simultaneously fade each element (first name, last name etc). We have replaced those individual elements with a single component, so we need to modify the transition code. Change it instead to have a simple Fade for each transition, targeting our new ContactItem component. The new set of transitions should look like this:
如果您按照上一篇文章进行了自己的调整，则Flash Catalyst会使用并行创建过渡，以同时淡化每个元素(名字，姓氏等)。 我们已经用单个组件替换了这些单独的元素，因此我们需要修改过渡代码。 改为对其进行更改，使每个过渡都有一个简单的淡入淡出，以我们的新ContactItem组件为目标。 新的过渡集应如下所示：
Flash Catalyst created transitions that used parallels to simultaneously fade each element (first name, last name etc.). However, we’ve replaced those individual elements with a single component, so we need to modify the transition code. Change it instead to have a simple Fade for each transition, which will target our new ContactItem component:
Flash Catalyst创建的transition s使用parallel来同时淡入每个元素(名字，姓氏等)。 但是，我们已经用单个组件替换了这些单独的元素，因此我们需要修改过渡代码。 对其进行更改，以使每个transition都有一个简单的Fade ，它将针对我们新的ContactItem组件：
<s:transitions> <s:Transition fromState="contactView" toState="listView" autoReverse="true"> <s:Fade duration="200" target="{contactPane}" /> </s:Transition> <s:Transition fromState="listView" toState="contactView" autoReverse="true"> <s:Fade duration="200" target="{contactPane}" /> </s:Transition></s:transitions>
Now, if you save and compile your Flash Builder project, you’ll see that when you click in the contact list, the selected contact’s data appears on the right-hand side of the display.
现在，如果您保存并编译Flash Builder项目，则将看到在联系人列表中单击时，所选联系人的数据将出现在显示屏的右侧。
翻译自: https://www.sitepoint.com/data-driven-development-with-flash-builder-part-ii-2/
flash builder
扫一扫
2590
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
