小程序flex:1

小程序flex:1

You may have heard some buzz recently about Adobe’s release of Flex 2. Flex is a collection of technologies that combine to give developers a strong framework for building Rich Internet Applications. You may already be familiar with one of those technologies: Flash.

您可能最近听说过有关Adobe发行的Flex 2的一些嗡嗡声。Flex是一组技术的组合，这些技术相结合为开发人员提供了一个构建Rich Internet Application的强大框架。 您可能已经熟悉其中一种技术：Flash。

RIAs are lightweight online programs that provide users with a more dynamic and interactive experience than they might find in a normal web page. Like web applications built with AJAX, Flex applications feel much more responsive, because a new web page doesn’t need to be loaded every time the user takes action. However, unlike working with AJAX, Flex developers don’t need to worry about dealing with differing browser implementations of JavaScript or CSS — you can focus all of your time on the application’s development, because the framework runs on Adobe’s cross-platform Flash Player.

RIA是轻量级的在线程序，可为用户提供比普通网页更动态和交互式的体验。 就像使用AJAX构建的Web应用程序一样，Flex应用程序的响应速度也要快得多，因为不需要在用户每次执行操作时都加载新的网页。 但是，与使用AJAX不同，Flex开发人员无需担心处理不同JavaScript或CSS浏览器实现-您可以将所有时间都花在应用程序的开发上，因为该框架在Adobe的跨平台Flash Player上运行。

Flex hit the ground running with the release of Flash Player 9 in June of this year. Thanks to a new internal architecture, Flash Player 9 runs up to ten times faster than previous releases. ActionScript, Flash’s programming language, also received an extensive update that will help developers migrating from other languages feel more at home. New features include strong typing, regular expressions, and native support for XML thanks to ECMAScript for XML (E4X). Flash 9 runs on Windows and Mac OS X, and a Linux player is currently in development.

Flex于今年6月发布了Flash Player 9，开创了先河。 由于有了新的内部体系结构，Flash Player 9的运行速度比以前的版本快十倍。 Flash的编程语言ActionScript也获得了广泛的更新，这将有助于从其他语言进行迁移的开发人员感到宾至如归。 由于ECMAScript for XML(E4X)，新功能包括强类型，正则表达式和对XML的本机支持。 Flash 9可在Windows和Mac OS X上运行，目前正在开发Linux播放器。

At its core, the Flex Framework comes with dozens of components, from basic lists and data grids to charts, layout systems, and media players. Additionally, Flex Data Services (FDS) allows your Flex application to interact with Java libraries on a server. It also provides facilities for data synchronization, messaging, and collaboration. And, unlike previous releases of Flex that required the developers to have the full version of Flex Data Services and cost thousands of dollars, the Flex 2 framework, compiler, and a command-line debugger can all be downloaded for free. Yes, you heard that right: the basic developer tools can be downloaded at no cost! It’s even possible to access a limited version of Flex Data Services for free.

Flex框架的核心是数十个组件，从基本列表和数据网格到图表，布局系统和媒体播放器。 此外，Flex Data Services(FDS)允许您的Flex应用程序与服务器上的Java库进行交互。 它还提供了用于数据同步，消息传递和协作的工具。 而且，不同于以前的Flex版本要求开发人员拥有完整版本的Flex Data Services并花费数千美元，Flex 2框架，编译器和命令行调试器都可以免费下载。 是的，您没听错：可以免费下载基本的开发人员工具！ 甚至有可能免费访问Flex Data Services的受限版本。

For serious Flex development, you’ll probably want to use Flex Builder. This powerful development environment includes a drag-and-drop visual editor, enhanced debugging capabilities, and a full-featured code editor. It leverages the open source Eclipse IDE, which should be very familiar to Java developers. A healthy community has grown around Eclipse, resulting in the development of many cool plug-ins, including some that allow integration with version control systems like CVS or SourceSafe and others that provide support for many other programming languages. Despite being based on an open source tool, Flex Builder is not free, nor is it cheap (US $499, or US $749 if you include data visualization components). However, you can download a 30-day free trial version (or the Flex Builder plug-in, if you already have Eclipse installed), or use your own IDE instead.

对于认真的Flex开发，您可能需要使用Flex Builder 。 这个强大的开发环境包括一个拖放式可视化编辑器，增强的调试功能以及一个功能齐全的代码编辑器。 它利用Java开发人员应该非常熟悉的开源Eclipse IDE。 一个健康的社区围绕Eclipse成长，从而导致开发了许多很酷的插件，其中包括一些允许与版本控制系统(如CVS或SourceSafe)集成的插件，以及一些为许多其他编程语言提供支持的插件。 尽管使用的是开源工具，Flex Builder也不免费，也不便宜(499美元，如果包含数据可视化组件，则为749美元)。 但是，您可以下载30天的免费试用版(或Flex Builder插件，如果您已经安装了Eclipse)，或者使用自己的IDE。

Before we start building our own application in this environment, let’s step back and take a look at what’s involved.

在此环境中开始构建自己的应用程序之前，让我们退后一步，看看其中涉及到什么。

Flex开发的工作原理 (How Flex Development Works)

Flex provides developers with more than one way to build an application or component. Our first foray into Flex will introduce MXML, a special markup language that was designed with application layout in mind. Creating an instance of a component in your application couldn’t get any easier than declaring it in MXML:

Flex为开发人员提供了多种方法来构建应用程序或组件。 我们对Flex的首次尝试将引入MXML，这是一种特殊的标记语言，其设计时考虑了应用程序的布局。 在应用程序中创建组件实例比在MXML中声明它容易得多：

<mx:Button id="myButton" label="Press Me!"/>

As you can see, the Button‘s properties are set right inside the tag. We’ve named this instance "myButton" and given it a label that says, "Press Me!" Setting the id allows us to reference this Button elsewhere in our code. Styles, such as colors or skins, and event handlers can be set in a similar way. For example, if you wanted to listen for a button click, you could call functions and run snippets of ActionScript code right inside the click property of the Button. We’ll see an example of this later, when we create our first Flex application.

如您所见， Button的属性设置在标签内部。 我们已将该实例命名为"myButton"并为其指定了标签“ Press Me！”。 设置id允许我们在代码的其他地方引用此Button 。 可以使用类似的方式来设置样式(例如颜色或皮肤)和事件处理程序。 例如，如果您想监听按钮的单击，则可以在Button的click属性内调用函数并运行ActionScript代码段。 当我们创建第一个Flex应用程序时，我们将在后面看到一个示例。

Thanks to the inherent hierarchy of XML, we can place components inside one another. Let’s put our Button inside a layout container — in this case, a Panel.

由于XML固有的层次结构，我们可以将组件彼此放置在一起。 让我们将Button放入布局容器中-在本例中为Panel 。

<mx:Panel>  <mx:Button id="myButton" label="Press Me!"/> </mx:Panel>

We’ve declared the Panel component with two tags this time. Containers in MXML work in the same way as they function in XHTML, where an element such as a paragraph includes an opening tag and a closing tag. Other components that appear inside these two tags will become children of the container.

这次我们用两个标签声明了Panel组件。 MXML中的容器的工作方式与它们在XHTML中的工作方式相同，其中诸如段落之类的元素包括一个开始标记和一个结束标记。 出现在这两个标签内的其他组件将成为容器的子代。

As you become more experienced with Flex, you’ll want to get down and dirty with pure ActionScript 3. Flex’s core components are written in this language, and the Flex documentation includes all sorts of information to help you write solid code that uses the same architecture. You’ll even discover that the source code for the core components comes with the Flex 2 compiler. What better place could there be to look for best practices in component development than within the very components provided by Adobe?

随着对Flex的使用变得越来越丰富，您将开始使用纯ActionScript 3入门。Flex的核心组件是用这种语言编写的，并且Flex文档包含各种信息，可帮助您编写使用相同语言的可靠代码。建筑。 您甚至会发现Flex 2编译器随附了核心组件的源代码。 在Adobe开发的最佳组件中，还有什么比最佳的组件开发更好的地方？

Interestingly enough, the Flex 2 compiler actually converts MXML into ActionScript 3 as it compiles your applications. It handles all the special application bootstrapping code behind the scenes to make developers’ lives easier. Our partial MXML example from above can therefore easily be translated to ActionScript:

有趣的是，Flex 2编译器在编译应用程序时实际上将MXML转换为ActionScript 3。 它可以处理所有特殊的应用程序自举代码，以使开发人员的生活更加轻松。 因此，我们上面的部分MXML示例可以轻松地转换为ActionScript：

var myPanel:Panel = new Panel(); addChild(myPanel); var myButton:Button = new Button(); myButton.label = "Press Me!"; myPanel.addChild(myButton);

While our MXML example appears on three lines, the ActionScript equivalent takes five lines. It would grow much larger if we wanted to set more than a couple of additional properties on the components. As you build more complex applications, you’ll experience the beauty of using MXML for layout and initialization. Not only will you find it easier to visualize the hierarchy of components, you’ll actually fit more information into fewer lines of code.

尽管我们的MXML示例出现在三行中，但等效于ActionScript的行却占据了五行。 如果我们想在组件上设置多个其他属性，它将变得更大。 在构建更复杂的应用程序时，您将体会到使用MXML进行布局和初始化的美妙之处。 您不仅会发现可视化组件的层次结构更加容易，而且实际上会将更多信息放入更少的代码行中。

弄湿你的脚 (Get your Feet Wet)

Let’s get things started and put together a simple application that shows off some of Flex’s cool features. To play along at home, you might like to download the free 30-day trial version of Flex Builder from Adobe, which includes the Flex 2 SDK (Flex Builder is currently only available for Windows, but a Mac version is due out at the end of the year). If you’re feeling especially adventurous (or you’re on a Mac and can’t wait until then), you could of course use your own text editor (the SDK is available as a separate, free download from the same page, complete with command-line compiler). I’ll assume that you’re using Flex Builder for this tutorial.

让我们开始吧，并组装一个简单的应用程序，展示一些Flex的出色功能。 要在家中进行游戏，您可能想从Adobe下载30天免费试用版的Flex Builder ，其中包括Flex 2 SDK(Flex Builder目前仅适用于Windows，但最终版本为Mac)的一年)。 如果您特别喜欢冒险(或者在Mac上等不及要等到那时)，则可以使用自己的文本编辑器(SDK可从同一页面单独获得免费下载，完整使用命令行编译器)。 我假设您在本教程中使用的是Flex Builder。

I’d also recommend that you download the source code and other files I’ve provided for this tutorial. I’ll explain many of the main sections and concepts that we’ll meet along the way, but I won’t be covering every single line of code, so you’ll need the source code download in order to follow along.

我还建议您下载本教程提供的源代码和其他文件 。 我将解释我们将在此过程中遇到的许多主要部分和概念，但是我不会覆盖每一行代码，因此您需要下载源代码才能继续学习。

Launch Flex Builder and select File > New > Flex Project. The new project wizard starts by asking how we intend to access data in our application. Choose Basic, since we won’t be using Flex Data Services or ColdFusion, then click the Next button. The Basic option is appropriate in cases where you don’t need data connectivity, or you plan to access data through custom sources written in server-side languages such as PHP or ASP.NET.

启动Flex Builder，然后选择“文件”>“新建”>“ Flex项目”。 新的项目向导首先询问我们打算如何访问应用程序中的数据。 选择“基本”，因为我们将不使用Flex Data Services或ColdFusion，然后单击“下一步”按钮。 如果您不需要数据连接，或者您计划通过以服务器端语言(例如PHP或ASP.NET)编写的自定义源访问数据，则可以使用基本选项。

Next, we need to enter the name of our application. We’re going to build a small page that lets us view and edit the biographies of some managers at a growing software company. This page might be a single module of a larger content management system (CMS) that the company uses. Let’s call our project "Company Leaders". You don’t need to change the default location — these files will be saved in a special Flex Builder 2 folder inside your user directory (that’s My Documents on Windows).

接下来，我们需要输入应用程序的名称。 我们将建立一个小页面，使我们可以查看和编辑成长中的软件公司的一些经理的简历。 该页面可能是公司使用的较大内容管理系统(CMS)的单个模块。 让我们将我们的项目称为“公司负责人”。 您无需更改默认位置-这些文件将保存在用户目录(Windows上的“我的文档”)内的特殊Flex Builder 2文件夹中。

Click Finish to exit. If you were to continue with the wizard by clicking the Next button, you could enter more advanced options such as additional source code and library paths (Flex libraries allow developers to include custom components that they may have purchased or downloaded). We don’t need any of these options for this project, so we’ll skip them.

单击完成退出。 如果要通过单击“下一步”按钮继续向导，则可以输入更多高级选项，例如其他源代码和库路径(Flex库允许开发人员包括他们可能已购买或下载的自定义组件)。 对于该项目，我们不需要任何这些选项，因此我们将跳过它们。

A new project is created in Flex Builder

在Flex Builder中创建一个新项目

Flex should have created a blank application, and you should see the Source view with a couple of lines of MXML code. Click on the Design button above the source code view — we’ll start by trying out the design editor.

Flex应该已经创建了一个空白应用程序，并且您应该看到Source视图以及两行MXML代码。 单击源代码视图上方的“设计”按钮-我们将首先试用设计编辑器。

Like Dreamweaver or other WYSIWYG editors, Flex’s Design View lets us drag and drop components into our application and manipulate them visually. We can also set properties of the components without needing to edit any code.

像Dreamweaver或其他WYSIWYG编辑器一样，Flex的设计视图使我们能够将组件拖放到应用程序中并对其进行可视化操作。 我们还可以设置组件的属性，而无需编辑任何代码。

The UI components available in the Design View

设计视图中可用的UI组件

In the bottom-left corner of Flex Builder, you should see a Components pane — click on it if it isn’t selected. Inside, you should see several different categories, including Custom, Controls, Layout, and Navigators. A Charts category might be in there, too — the Flex Builder trial version also comes with a trial application that contains some robust charting components. Expand the Layout category and drag a Panel component into the design view of your application.

在Flex Builder的左下角，您应该看到一个Components窗格-如果未选中，请单击它。 在内部，您应该看到几个不同的类别，包括“自定义”，“控件”，“布局”和“导航器”。 Charts类别也可能在其中-Flex Builder试用版还附带了一个包含一些强大的图表组件的试用版应用程序。 展开“布局”类别，然后将“面板”组件拖动到应用程序的设计视图中。

Changing the properties of a component with the Properties pane

使用“属性”窗格更改组件的属性

Now, on the right side of Flex Builder, you should see the Flex Properties pane. We’ll use this to edit the Panel component we just dragged into the design view. Click on the Panel component — the Properties pane will show a series of items that you can edit, such as the Panel’s id, title, alignment options, styles, position, and dimensions. Type "Company Leaders" in the Title field. You should see it appear on the title bar of your Panel.

现在，在Flex Builder的右侧，您应该看到“ Flex属性”窗格。 我们将使用它来编辑刚刚拖动到设计视图中的面板组件。 单击“面板”组件-“属性”窗格将显示一系列可以编辑的项目，例如面板的ID，标题，对齐选项，样式，位置和尺寸。 在标题字段中输入“公司负责人”。 您应该看到它出现在面板的标题栏上。

The panel for our first Flex application

我们第一个Flex应用程序的面板

The design view is a great way to get a simple application layout started. Click on the Source button above the design view, and we’ll jump right into editing a little MXML. In the source view, you’ll see some markup for our main application and the Panel component that it contains:

设计视图是一种开始简单应用程序布局的好方法。 单击设计视图上方的Source按钮，我们将直接跳入编辑一点MXML。 在源代码视图中，您将看到我们的主应用程序及其包含的Panel组件的一些标记：

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">  <mx:Panel x="140" y="100" width="250" height="200" layout="absolute" title="Company Leaders">  </mx:Panel> </mx:Application>

As you can see, the Application acts as a container just like the Panel component. A few extra properties have been added for us already. The Panel is positioned at the point to which you dragged it into the design view, and it has default dimensions of 250 pixels by 200 pixels. Both the Panel and the Application use "absolute" layout. We’ll learn a bit more about other layout modes in a moment.

如您所见，应用程序就像Panel组件一样充当容器。 已经为我们添加了一些额外的属性。 Panel位于将其拖到设计视图中的位置，其默认尺寸为250像素乘200像素。 面板和应用程序均使用“绝对”布局。 稍后我们将进一步了解其他布局模式。

From here, we could add components to the main application, or we could work with components inside our Panel. Let’s add a List of our leader’s names and a Form that allows us to edit their information inside the Panel tags.

从这里，我们可以向主应用程序中添加组件，也可以在Panel使用组件。 让我们添加一个领导者姓名列表和一个表格，该表格使我们可以在Panel标签中编辑其信息。

<mx:List id="names"/> <mx:Form id="details">  <mx:FormItem label="Name:">    <mx:TextInput id="nameInput"/>  </mx:FormItem>  <mx:FormItem label="Title:">    <mx:TextInput id="titleInput"/>  </mx:FormItem>  <mx:FormItem label="Description">    <mx:TextArea id="descInput"/>  </mx:FormItem>  <mx:Button label="Save Changes"/> </mx:Form>

If you take a look at the design view, you’ll discover a bit of a mess. The Form looks alright, but our List is hidden behind it. We can use Flex’s layout system to correct this problem. Let’s alter the layout property of our Panel:

如果您查看设计视图，会发现有些混乱。 Form看起来不错，但我们的List隐藏在它的后面。 我们可以使用Flex的布局系统来纠正此问题。 让我们更改Panel的layout属性：

<mx:Panel layout="horizontal" title="Company Leaders">

Now the Form appears to the right of our List, and the elements no longer overlap. You’ll notice that I removed the position and sizing parameters. The Panel should be able to determine a good size for itself automatically, on the basis of its content. However, the Panel now appears in the upper left-hand corner of the application. Let’s change the layout parameters of the application to position the Panel in a better place:

现在，该Form显示在List的右侧，并且元素不再重叠。 您会注意到，我删除了position和sizing参数。 Panel应能够根据其内容自动确定合适的规模。 但是， Panel现在显示在应用程序的左上角。 让我们更改应用程序的布局参数，以将面板放置在更好的位置：

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle">

That looks better, doesn’t it? We’ve removed the absolute layout, and the application will position the Panel right in the middle of the screen. Even better, Flex will always keep the Panel centered — even when the application changes size.

看起来更好，不是吗？ 我们已经删除了绝对布局，该应用程序会将Panel定位在屏幕中间。 更好的是，即使应用程序更改大小，Flex仍将Panel始终居中。

疯狂获取数据 (Getting Wild with Data)

We’ve finished the general layout of our Flex application. Now, let’s move on to one of the coolest features Flex provides — we’re going to bind a data source to our form, and watch Flex automatically handle all the details for us.

我们已经完成了Flex应用程序的总体布局。 现在，让我们继续介绍Flex提供的最酷的功能之一-我们将把数据源绑定到表单，然后观察Flex为我们自动处理所有细节。

In the finished example code, under the main form markup that we’ve already covered, you’ll find an ArrayCollection element. Copy and paste this section into the MXML code. The ArrayCollection contains all the data that we need to show about the company leaders. It’s pretty long, so here’s a shorter version that only contains the details of a single person, Darron Bryant.

在完成的示例代码中，在我们已经介绍过的主要表单标记下，您将找到一个ArrayCollection元素。 复制此部分并将其粘贴到MXML代码中。 ArrayCollection包含我们需要显示的有关公司领导者的所有数据。 它很长，所以这是一个简短的版本，只包含一个人Darron Bryant的详细信息。

<mx:ArrayCollection id="people">  <mx:Object>      <mx:image>images/darron.jpg</mx:image>      <mx:name>Darron Bryant</mx:name>      <mx:title>Chief Technology Officer</mx:title>      <mx:description>Darron leads the charge when it comes to developing new products. He's passionate about riding the bleeding edge of technology to take advantage of every new development.</mx:description>    </mx:Object>   </mx:ArrayCollection>

MXML features a native ability to bind data sources to the properties of components. Let’s start out by binding the names of the ArrayCollection we just added to our List component:

MXML具有将数据源绑定到组件属性的本机功能。 让我们从绑定刚刚添加到List组件的ArrayCollection的名称开始：

<mx:List id="names" dataProvider="{people}" labelField="name" selectedIndex="0"/>

You’ll notice that the dataProvider property contains curly brackets, which sit around the "people" collection. This is how Flex discovers that we want to bind the data source to our List. When Flex binds data, it automatically generates all of the boring event-handling code that would be such a hassle for us to write in ActionScript. Flex can determine when the data in the "people" collection changes, and it will notify every event listener that’s listening for those changes. With just those two brackets, we get dozens of lines of code for free.

您会注意到dataProvider属性包含大括号，大括号位于“ people”集合的周围。 这就是Flex发现我们想要将数据源绑定到List 。 当Flex绑定数据时，它会自动生成所有无聊的事件处理代码，这对于我们用ActionScript编写代码来说很麻烦。 Flex可以确定“ people”集合中的数据何时更改，并将通知正在侦听这些更改的每个事件侦听器。 仅使用这两个括号，我们就可以免费获得数十行代码。

The next property, labelField, tells the List which property from our data source it should show when displaying text on the List. In this case, we’re looking for the name of the person whose details we’re displaying. Our first person’s name is Darron Bryant, so his name will appear as the first item in the List. I’ve also set the selectedIndex to 0. This means that Darron’s name will be selected by default.

下一个属性labelField告诉List当在List上显示文本时应该在数据源中显示哪个属性。 在这种情况下，我们正在寻找要显示其详细信息的人员的姓名。 我们第一个人的名字是Darron Bryant，因此他的名字将出现在列表的第一位。 我也将selectedIndex设置为0 。 这意味着默认情况下将选择Darron的名称。

For the first time so far, a change to the code will not be reflected in the design view — to see data binding in action, we need to run our application. Click the Run button on the main toolbar (it’s the green circle with the white arrow in it).

到目前为止，第一次更改代码不会反映在设计视图中-要查看实际的数据绑定，我们需要运行应用程序。 单击主工具栏上的“运行”按钮(这是带有白色箭头的绿色圆圈)。

Running the application in Flex Builder

在Flex Builder中运行应用程序

When you click the Run button, Flex Builder opens your default web browser and displays your application. Unlike the design view, this display lists a series of names that we can click on.

单击“运行”按钮时，Flex Builder将打开默认的Web浏览器并显示您的应用程序。 与设计视图不同，此显示列出了一系列我们可以单击的名称。

The sample application with simple data binding in play

具有简单数据绑定功能的示例应用程序

Let’s take our binding a step further so that something actually happens when we choose a name from the list. When the user clicks on a name, we want additional information about that person to appear in the Form to the right. Data binding is pretty flexible, so let’s use a little inline ActionScript to populate the Form.

让我们进一步进行绑定，以便当我们从列表中选择一个名称时，实际上会发生某些事情。 当用户单击名称时，我们希望有关此人的其他信息显示在右侧的Form中。 数据绑定非常灵活，因此让我们使用一些内联ActionScript来填充Form 。

<mx:TextInput id="nameInput" text="{people.getItemAt(names.selectedIndex).name}"/>

We’ve taken the selectedIndex from the List and used it to retrieve an object from the data source. This object represents one of the people we’re dealing with; we can access the name property based on this index. Run the application again, and click on a couple of the names. Thanks to Flex, the data changes with almost no effort on our part! Alter the two other TextInput boxes — titleInput and descInput — to display a person’s title and a short description of him or her. The code to do this should be almost identical to the code that retrieved the person’s name.

我们从List获取了selectedIndex ，并使用它来从数据源中检索对象。 这个对象代表我们正在与之打交道的人之一。 我们可以基于该索引访问name属性。 再次运行该应用程序，然后单击几个名称。 多亏了Flex，我们几乎可以毫不费力地更改数据！ 更改其他两个TextInput框( titleInput和descInput )以显示一个人的标题和对他或她的简短描述。 执行此操作的代码应与检索此人姓名的代码几乎相同。

Let’s look at one last example of data binding. Since we’re recognizing this group of people for their leadership ability, we probably want to show users of the application what they look like. You may have noticed the first property in our data source that makes reference to an image. We’re going to bind this image property to an Image component, in order to display a picture when a person is selected. Start by adding a few elements around the Form:

让我们看一下数据绑定的最后一个示例。 因为我们认识到这群人的领导能力，所以我们可能想向应用程序用户展示他们的样子。 您可能已经注意到我们的数据源中引用图像的第一个属性。 我们将把此image属性绑定到Image组件，以便在选择一个人时显示图片。 首先在表单周围添加一些元素：

<mx:VBox horizontalAlign="center" width="100%">  <mx:Image id="picture"                        source="{people.getItemAt(names.selectedIndex).image}"/>    <mx:Form id="details">      // removed Form code for brevity //    </mx:Form>   </mx:VBox>

Directly above the Form, we’ve added the Image component. I’ve already bound its source property to the data source in the same way I bound the TextInput boxes to the data source previously. Around the image and Form, you’ll see a component called a VBox. Boxes are special layout components that help keep our application organized. You’ll remember that we set the Panel’s layout property to "horizontal". We want the Image to appear directly above our Form; the VBox gives us the vertical alignment we need, and it affects only the components that are inside the box. The HBox does the same, except it aligns its children horizontally.

在Form正上方，我们添加了Image组件。 我已经将它的source属性绑定到数据源，方法与之前将TextInput框绑定到数据源的方法相同。 在图像和窗体周围，您将看到一个名为VBox的组件。 框是特殊的布局组件，有助于使我们的应用程序井井有条。 您会记得，我们将面板的layout属性设置为“水平”。 我们希望Image直接出现在Form上方； VBox为我们提供了所需的垂直对齐方式，并且仅影响框内的组件。 HBox功能相同，只是它的子元素水平对齐。

Look for the images you’ll need in the downloadable source archive. Once you’ve included them with your project, and run it, you’ll see that the images change with the rest of the data whenever you click on a name in the List component.

在可下载的源归档文件中查找所需的图像。 将它们包含在项目中并运行后，只要单击“列表”组件中的名称，就会看到图像随其余数据一起变化。

We just need to do one more thing to make our application fully functional. You may have noticed the button on the form that says Save Changes. After a user changes a person’s data, he or she should be able to save the updated profile. The next time the person is selected, the modified data will be displayed.

我们只需要再做一件事就可以使我们的应用程序完全正常运行。 您可能已经注意到表格上显示“保存更改”的按钮。 用户更改一个人的数据后，他或她应该能够保存更新的配置文件。 下次选择此人时，将显示修改后的数据。

We want this to happen after the user clicks on the Save Changes button. We’ll use the click event property to trigger a function call:

我们希望这种情况在用户单击“保存更改”按钮后发生。 我们将使用click事件属性来触发函数调用：

<mx:Button label="Save Changes" click="this.saveChanges();"/>

We’re going to get a little more advanced at this point. We used a small amount of ActionScript to handle the event binding; now, we’re going to write a short function right inside our MXML document that will let us save the data. Let’s add a Script element to the application and put our function inside:

在这一点上，我们将变得更加先进。 我们使用了少量的ActionScript来处理事件绑定。 现在，我们将在MXML文档中编写一个简短的函数，该函数可以保存数据。 让我们向应用程序添加一个Script元素，然后将函数放入其中：

<mx:Script>  <![CDATA[      private function saveChanges():void      {        var updatedPerson:Object =                      this.people.getItemAt(this.names.selectedIndex);        updatedPerson.name = this.nameInput.text;        updatedPerson.title = this.titleInput.text;        updatedPerson.description = this.descInput.text;        this.people.setItemAt(updatedPerson, this.names.selectedIndex);        this.people.refresh();      }    ]]>   </mx:Script>

When the saveChanges function is called, we use getItemAt to access the profile from our data source, and we set each of its properties manually. Next, the setItemAt function overwrites the previous data. Finally, we call the refresh function to inform the ArrayCollection that we altered some of the data, and Flex will take care of the rest.

调用saveChanges函数时，我们使用getItemAt从数据源访问配置文件，并手动设置其每个属性。 接下来， setItemAt函数将覆盖先前的数据。 最后，我们调用refresh函数以通知ArrayCollection我们更改了一些数据，Flex会处理其余的数据。

Congratulations! You’ve run your very first working Flex application. The appropriate data will display whenever you click on a person’s name in the list, and you can save any changes you make to the data back to the data source. With a little data binding and some ActionScript for the more advanced functionality, building a web application couldn’t be simpler.

恭喜你！ 您已经运行了第一个可运行的Flex应用程序。 只要您在列表中单击某人的姓名，就会显示适当的数据，并且您可以将对数据所做的任何更改保存回数据源。 只需少量的数据绑定和一些ActionScript即可使用更高级的功能，构建Web应用程序再简单不过了。

增强功能……还有更多！ (Enhancements … and More!)

If you’re looking to do more, you might want to add a Reset button, which users could click to restore the person’s data to its previous state (if for example, they decided not to save the changes they’d made to a profile). You could also create a custom item renderer for the names list, to display a thumbnail of each person’s picture next to his or her name. You might even pull the data from a different source.

如果您要执行更多操作，则可能需要添加一个“重置”按钮，用户可以单击该按钮将此人的数据恢复到以前的状态(例如，如果他们决定不保存对个人资料所做的更改)。 您还可以为姓名列表创建一个自定义项目渲染器，以在每个人的姓名旁边显示其图片的缩略图。 您甚至可以从其他来源提取数据。

Adding an image to each of our fearless leaders

为我们每一个无所畏惧的领导人增添形象

Take a look at some styling code I added to my final version of the application (if you’ve coded any CSS before, this will look familiar):

看一看我添加到应用程序最终版本中的一些样式代码(如果您之前曾经编码过任何CSS，可能会很熟悉)：

Panel    {        borderStyle: solid;        headerColors: #e7e7e7, #d9d9d9;        backgroundAlpha: 100;        paddingTop: 10;      }      List      {        paddingLeft: 10;        paddingRight: 10;        paddingTop: 10;        paddingBottom: 10;      }

Flex’s style system includes many different properties, and by creating your own assets inside Flash or Photoshop, you can change the appearance of your application entirely. Imagine changing the skin to match your company’s branding and marketing materials. With a little work, you could even create a skin to match the default theme of Windows or Mac OS X. The possibilities are endless!

Flex的样式系统包括许多不同的属性，通过在Flash或Photoshop中创建自己的资产，您可以完全更改应用程序的外观。 想象一下改变皮肤以匹配公司的品牌和营销材料。 只需做一些工作，您甚至可以创建一个皮肤来匹配Windows或Mac OS X的默认主题。可能性是无限的！

资源资源 (Resources)

The resources available to teach you about developing with Flex are growing quickly, with most of the information provided by Adobe. If you’re interested in learning more about Flex, I’d encourage you to check out some of the following resources:

借助Adobe提供的大多数信息，可用于教您有关使用Flex开发的资源正在Swift增长。 如果您有兴趣了解有关Flex的更多信息，建议您查看以下一些资源：

The FlexCoders mailing list is worth subscribing to.

FlexCoders邮件列表值得订阅。

For some more introductory material, look no further than the Flex Quick Start guide.

有关更多介绍性材料，请参阅Flex快速入门指南 。

You’ll also want to visit Adobe’s new development community site, Flex.org. It just launched with the release of Flex 2, and Adobe has plans to expand it to include all sorts of great community interaction related to Flex.

您还需要访问Adobe的新开发社区网站Flex.org 。 它是随Flex 2发行版一起发布的，Adobe计划将其扩展到包括与Flex相关的各种出色的社区互动。

Adobe has put a great demo app online to showcase most of what is possible in Flex called JamJar.

Adobe在网上发布了一个出色的演示应用程序，以展示Flex中称为JamJar的大多数功能 。

Finally, you should check out Adobe’s listing for Flex blogs. These folks share all sorts of information about their own discoveries.

最后，您应该查看Adobe的Flex博客列表 。 这些人分享有关他们自己发现的各种信息。

摘要 (Summary)

In this article, we’ve barely scraped the surface of a whole new way to build Rich Internet Applications. We took a brief look at the Flex development cycle for building web applications using MXML and ActionScript, then looked at using the Design View of Flex Builder to create a simple page layout. We added some data binding to populate a list on this page, and we then went one step further by writing a small amount of ActionScript that saved the changes a user made to the data. Finally, I pointed you in the direction of some other resources that you can use to expand your Flex development skills.

在本文中，我们几乎没有涉及构建富Internet应用程序的全新方法。 我们简要介绍了使用MXML和ActionScript构建Web应用程序的Flex开发周期，然后介绍了使用Flex Builder的设计视图创建简单的页面布局。 我们添加了一些数据绑定以填充此页面上的列表，然后通过编写少量ActionScript来保存用户对数据所做的更改，从而进一步走了一步。 最后，我向您指出了其他一些资源的方向，您可以使用这些资源来扩展Flex开发技能。

I hope this has given you a taste for just what’s possible with the Flex 2 framework. Now it’s up to you to get out there and start flexing your muscles!

我希望这使您对Flex 2框架所能提供的一切有所了解。 现在，您可以走出那里并开始锻炼肌肉了！

翻译自: https://www.sitepoint.com/flex-2-internet-applications/

小程序flex:1