flex的功能

tech2023-12-22 70

flex的功能

The release of Flex 4 beta 1 has been some time coming. It has had a very public development process which began back in August last year, when Adobe revealed early builds of Flex 4 – previously codenamed Gumbo – on their open source site. While some of the Flex 4 feature set has undergone modification and refinement during that period, most of the early features are still there. In this article, we’re going to go through some of the more significant changes you’ll find in Flex 4.

Flex 4 beta 1的发布已经有一段时间了。它具有非常公开的开发过程，该过程始于去年8月，当时Adobe在其开放源代码网站上公开了Flex 4的早期版本(以前代号为Gumbo)。尽管在此期间一些Flex 4功能集已经过修改和完善，但大多数早期功能仍然存在。在本文中，我们将经历一些在Flex 4中可以找到的更重要的变化。

At the end, there’s a quiz – test your knowledge of Flex 4, and you’ll be in the running for a copy of Flex Builder 3 Standard, with a free upgrade to Flash Builder 4!

最后，有一个测验– 测试您对Flex 4的了解，然后您将可以免费获取Flash Builder 4的Flex Builder 3 Standard副本！

命名空间 (Namespaces)

Namespaces are used by Flex for a number of reasons: to identify the version of the language being used, to give a scope with which we can map an XML tag to a specific ActionScript class, and to tell the compiler the location for custom components. Flex 4 has been updated to the new MXML 2009 namespace, which now contains new language tags. Components are now declared in their own namespaces, with the Flex 3 (Halo) and the Flex 4 (Spark) components each having their own namespace.

Flex使用命名空间的原因有很多：识别使用的语言的版本，提供一个范围，我们可以将XML标记映射到特定的ActionScript类，并告诉编译器自定义组件的位置。 Flex 4已更新为新的MXML 2009名称空间，该名称空间现在包含新的语言标记。现在，组件在各自的名称空间中声明，而Flex 3(Halo)和Flex 4(Spark)组件各自具有自己的命名空间。

This means that the application file will now potentially have three namespace declarations within the Application tag:

这意味着应用程序文件现在可能在Application标记内具有三个名称空间声明：

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> </s:Application>

Observant readers will have noticed that the new MXML 2009 namespace is prefixed with fx. It’s used for special language entities; some you’re already familiar with while others are new with the introduction of Flex 4.

细心的读者会注意到，新的MXML 2009名称空间以fx为前缀。用于特殊语言实体；其中一些您已经熟悉，而另一些是Flex 4的新增功能。

Many Flex 3 tags have Flex 4 equivalents, but some new language tags have been introduced as part of this namespace. These include:

许多Flex 3标签具有等效的Flex 4标签，但是此名称空间中引入了一些新的语言标签。这些包括：

fx:Declarations

fx:Private

fx:Library

fx:Declarations is used to define non-visual children of the application that represent property declarations; these are now no longer permitted to be under the application root on their own. One example would be the declaration of service calls, for example, RemoteObject, WebService, and HTTPService. graphics and text primitives

图形和文字基元 fills, strokes, gradients, and bitmaps

填充，笔触，渐变和位图 support for filters, masks, alphas, and blend modes.

支持滤镜，遮罩，Alpha和混合模式。

FXG graphical elements can be used in Flex 4 in a number of ways. The example code above includes two FXG elements, a square, and a star. FXG elements can be used within an MXML file or component and can also be saved as an .fxg file format. The CS4 tools will typically export an FXG using the FXG 2008 namespace. Because these files are designed to be shared between graphical applications, you'll find that they have a stricter format to what's used in Flex; the Flex compiler will only use the FXG-specific tags. Adobe's new application, Flash Catalyst, will make it easy to create FXG graphics compatible with Flex 4, which you can then use to complete your application's user interface and appearance.

FXG图形元素可以通过多种方式在Flex 4中使用。上面的示例代码包含两个FXG元素，一个正方形和一个星形。 FXG元素可以在MXML文件或组件中使用，也可以另存为.fxg文件格式。 CS4工具通常将使用FXG 2008命名空间导出FXG。因为这些文件旨在在图形应用程序之间共享，所以您会发现它们的格式比Flex中使用的格式更严格。 Flex编译器将仅使用FXG特定的标签。 Adobe的新应用程序Flash Catalyst将使创建与Flex 4兼容的FXG图形变得容易，然后您可以使用它来完成应用程序的用户界面和外观。

New effects have been added to Flex 4 that can also be applied to FXG graphical elements. These new effects will work on both new and old components alike. Standalone effects must now be declared within fx:Declarations tags instead of the body of the application. Once again, Flash Catalyst has additional tools to help make using these effects easier.

Flex 4中添加了新效果，这些效果也可以应用于FXG图形元素。这些新效果将在新旧组件上均起作用。现在必须在fx:Declarations标记中声明独立效果，而不是在应用程序主体中fx:Declarations 。 Flash Catalyst再次具有其他工具，可帮助简化这些效果的使用。

CSS handling has also had improvements made in this new release. One of the reasons for this is that CSS has a more important part to play in the skinning of components. Additional selectors have been added, including an id selector and a descendant selector, which may be applied to components; this allows you to apply a style to a component depending on if they descend from a particular component, for example, a Button that is a descendant of an HBox. If you're familiar with descendant CSS selectors, you should find this an intuitive way to deal with these components.

CSS处理在此新版本中也进行了改进。原因之一是CSS在组件外观中扮演着更重要的角色。添加了其他选择器，包括ID选择器和后代选择器，它们可以应用于组件。这使您可以根据组件是否来自特定组件(例如，作为HBox的后代的Button HBox样式来向组件应用样式。如果您熟悉后代CSS选择器，则应该找到一种直观的方式来处理这些组件。

版面 (Layouts)

In Flex, you choose components by their layout properties as you build them: a Canvas will give you absolute x, y positioning, a VBox's contents are laid out in a vertical stack, an HBox sets its contents out horizontally, and the Application tag offers a choice of all three layout options. The new layout tag in Flex 4 also offers the choice of all three layout options; its purpose is to decouple the layout rules from individual components, giving developers control over the positioning of a component's children. One advantage is that layouts can be defined, changed, or removed at runtime for a component.

在Flex中，您在构建组件时通过其布局属性选择组件： Canvas将为您提供绝对的x, y定位， VBox的内容以垂直堆栈的形式放置， HBox的内容以水平的方式放置，Application标签提供了所有三个布局选项的选择。 Flex 4中的新layout标签还提供了所有三个布局选项的选择。它的目的是使布局规则与各个组件脱钩，从而使开发人员可以控制组件子代的位置。一个优点是可以在运行时为组件定义，更改或删除布局。

The sample code below specifies a vertical layout, and will display two buttons stacked vertically within the application:

下面的示例代码指定了垂直布局，并将在应用程序中显示两个垂直堆叠的按钮：

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <s:layout> <s:VerticalLayout/> </s:layout> <s:Button label="button one"/> <s:Button label="button two"/> </s:Application>

状态 (States)

Ask most Flex developers about view states, and they'll tell you that these are best created with Flex Builder. In Flex 3, states described how visual elements may be added or removed programmatically from the visual layer, with similar tags for modifying styles, properties, and events. States mean effective changes to the UI can be made in Flex with efficient reuse of visual elements.

向大多数Flex开发人员询问视图状态，他们会告诉您最好由Flex Builder创建。在Flex 3中，状态描述了如何以编程方式从可视层添加或删除可视元素，并使用类似的标记来修改样式，属性和事件。状态意味着可以在Flex中通过有效重用可视元素来对UI进行有效更改。

The reason why it's been easier to use Flex Builder for this process is that the IDE is able to record the various steps required to change states and translate those changes into the necessary code. You could write the same code that it generates yourself, but why would you? It takes a tremendous amount of time to work out the order of what's going to happen.

使用Flex Builder进行此过程更容易的原因是，IDE能够记录更改状态所需的各个步骤，并将这些更改转换为必要的代码。您可以编写自己生成的代码，但是为什么呢？弄清楚要发生的事情需要花费大量时间。

Now, states have been updated for Flex 4: the tags previously used have been deprecated and the changes required for the various states are now elements of the visual components that you use. Components now always exist, instead of being programmatically added when switching to a specific state. This means that there are no more failures due to missing variables, as there were in the past. While it's likely to still be faster to manage states visually, the way that changes are applied in your code is more logical.

现在，Flex 4的状态已更新：先前使用的标签已弃用，并且各种状态所需的更改现在已成为您使用的可视组件的元素。现在，组件始终存在，而不是在切换到特定状态时通过编程方式添加。这意味着不再像过去那样因缺少变量而导致失败。尽管以可视方式管理状态可能仍会更快，但是在代码中应用更改的方式更加合乎逻辑。

The states themselves are created in a similar fashion to Flex 3; each is defined with a State tag nested within a pair of states tags. In the past, a base view state had to be defined explicitly by setting a currentState attribute - instead, the first state is considered the default.

状态本身的创建方式与Flex 3类似。每个与一个限定State嵌套在双内标签states的标签。过去，必须通过设置currentState属性来显式定义基本视图状态-而是将第一个状态视为默认状态。

The AddChild and RemoveChild classes from Flex 3 have been replaced with the includeIn and excludeFrom MXML tag attributes, both of which can be comma-separated lists of multiple states if required. The visual SetProperty and SetStyle classes, as well as the SetEventHandler class, have been replaced with a new propertyName.stateName syntax.

Flex 3中的AddChild和RemoveChild类已替换为includeIn和excludeFrom MXML标记属性，如果需要，这两个属性都可以是逗号分隔的多个状态列表。可视的SetProperty和SetStyle类以及SetEventHandler类已被新的propertyName.stateName语法替换。

Let's see an example, shown in full in Listing 2. Note the definition of the two states in the code - one for the default state, and one to be shown once the form has been submitted:

让我们看一个清单2中完整显示的示例。注意代码中两个状态的定义-一个用于默认状态，一个在表单提交后将显示的状态：

<s:states> <s:State name="defaultState"/> <s:State name="formSubmit"/> </s:states>

We can also see that the Label component has a text value defined for defaultState:

我们还可以看到Label组件具有为defaultState定义的文本值：

<mx:Label id="formLabel" x="20" y="16" text.defaultState="Your name:"/>

Also note the includeIn attribute on the TextInput - it is only set to appear while we're in the defaultState:

还要注意TextInput上的includeIn属性-仅设置为在我们位于defaultState ：

<s:TextInput id="formInput" x="97" y="15" includeIn="defaultState"/>

The Button has attribute changes for different states: its x and y attributes are changed for the formSubmit state using a dot notation; that is, x.formSubmit="20". The Button also has two click event handlers, one for each state, with the second one used to change back to defaultState:

Button具有针对不同状态的属性更改：使用点表示法为formSubmit状态更改了其x和y属性；即x.formSubmit="20" 。 Button还具有两个click事件处理程序，每个状态处理程序一个，第二个用于更改回defaultState：

<s:Button id="formButton" x="295" y="15.5" label="Submit" label.formSubmit="Again" x.formSubmit="20" y.formSubmit="38" click.defaultState="formHandler()" click.formSubmit="currentState='defaultState'"/>

Those were just some of the features that you'll use on a day-to-day basis with your development in Flex 4. This beta release is a significant upgrade to Flex; a lot of the changes will make Flex development easier and give you more creative control over your project. We'll be sure to see some new and exciting uses of the technology as Flex fans become acquainted with these excellent new features. You can keep up to date with Flex 4 and grab the Flex 4 beta SDK at Adobe Labs.

这些只是您在Flex 4开发中日常使用的一些功能。此beta版本是对Flex的重要升级；许多更改将使Flex开发更加容易，并为您提供对项目的更多创意控制。随着Flex粉丝熟悉这些出色的新功能，我们一定会看到该技术的一些令人兴奋的新用途。您可以随时了解Flex 4的最新信息，并在Adobe Labs中获取Flex 4 beta SDK。

Feeling confident? Test your knowledge of what's new in Flex 4 with our quick quiz. Three lucky entrants will win a copy of Flex Builder Standard, with a free upgrade to Flash Builder 4!

感觉有信心？通过我们的快速测验，测试您对Flex 4的新知识。三个幸运的参赛者将获得Flex Builder Standard的一份副本，并免费升级到Flash Builder 4！

翻译自: https://www.sitepoint.com/whats-new-flex-4/

flex的功能

最新回复(0)