Flex 3 与 Flex 4 之间的区别(3)

新增组件和容器

如前所述，Flex 4 SDK 引入了许多使用新架构的新组件类，它们应当可以令外观和其他自定义操作更简单。下表列出了 Flex 3 MX 组件及其 Flex 4 Spark 对应组件：

Adobe 鼓励您与 Spark 组件一起使用 MX 组件和容器。由于 Adobe 在同一基类 (UIComponent) 上构建组件，Spark 与 MX 之间应当可以实现全面的可互操作性。下表列出了目前没有 Spark 直接等效类的组件和容器。

要将 MX 导航器（ViewStack、Accordion、TabNavigator）用于 Spark 组件，导航器的子代应当是一个 NavigatorContent 组件。否则，您无法在 MX 导航器中使用 Spark 基元。此处是一个示例：

<mx:ViewStack id="vs" selectedIndex="{tb.selectedIndex}">
	<s:NavigatorContent label="bar">
	   <s:layout>
	     <s:VerticalLayout />
	   </s:layout>
	   <s:Label text="bar" />
	   <s:TextInput />
	</s:NavigatorContent>
</mx:ViewStack>

状态语法中的变化

Flex 4 将状态功能升级为一个全面的 MXML 语言功能。因此，您可能会发现状态更灵活、更直接。新的状态语法内联程度更高，允许在上下文中指定状态特定变化。以下是 Flex 4 语法中的主要区别：

• 只有状态是在状态阵列中定义的。
• 在新的状态语法中，不能使用 AddChild 和 RemoveChild。您必须使用 includeIn 和 excludeFrom 属性在组件上定义组件在特定状态中的角色。

在以下 Flex 3 示例中，仅当文档的 currentState 为 submitState 时，才使用状态包含一个 Button 并删除一个 TextInput。对于较复杂的状态，这种方法可以做到十分详细。

<mx:states>
    <mx:State name="submitState" basedOn="">
        <mx:AddChild relativeTo="{loginForm}" >
           <mx:Button label="submit" bottom="10" right="10"/>
        </mx:AddChild>
        <mx:RemoveChild target="{firstTextInput}"/>
    </mx:State>
</mx:states>
 
<mx:TextInput id="firstTextInput" />
<mx:Canvas id="loginForm" />

以下是一段使用 includeIn 和 excludeFrom、更简单的 Flex 4 代码。

<s:states>
    <s:State name="submitState" />
</s:states>
<s:TextInput id="firstTextInput" excludeFrom="submitState" />
<s:Group id="loginForm" >
    <s:Button label="submit" bottom="10" right="10" includeIn="submitState"/>
</s:Group>

• SetProperty、SetStyle 和 SetEventHandler 已替换为新的点语法，它允许您限定具备特定状态标识符的 MXML 属性值。

在以下 Flex 3 示例中，代码为 submitState 中的一个 Button 定义了属性、样式和事件。

<mx:states>
    <mx:State name="submitState" basedOn="">
        <mx:SetProperty target="{submitButton}" name="label" value="submit" />
        <mx:SetStyle target="{submitButton}" name="textDecoration" value="underline"/>
        <mx:SetEventHandler target="{submitButton}" name="click" handler="trace(’done’);"/>
    </mx:State>
    <mx:State name="clearState" basedOn="">
        <mx:SetProperty target="{submitButton}" name="label" value="clear" />
        <mx:SetEventHandler target="{submitButton}" name="click" handler="emptyDocument()" />
    </mx:State>
</mx:states>
 
<mx:Button id="submitButton" />

在 Flex 4 中，代码如下：

<s:states>
    <s:State name="submitState" />
    <s:State name="clearState" />
</s:states>
 
<s:Button label.submitState="submit" textDecoration.submitState="underline"
   click.submitState="trace(’done’)" click.clearState="emptyDocument()"
   label.clearState="clear" textDecoration.clearState="none"/>

• 组件不能再处于未定义状态或空状态。默认情况下，声明的第一个状态是组件的初始状态。
  当文档使用 MXML 2009 语言命名空间时，可以使用新语法。可以混合使用旧版语法和新版状态语法。只有 MXML 2006 命名空间中可以使用旧版语法。

此外，各个组件现在支持外观类中定义的一组状态，这使得根据组件状态应用可视变化更加简单。例如，如果查看 Spark Button 的外观，您会发现已定义以下状态：

<s:states>
    <s:State name="up" />
    <s:State name="over" />
    <s:State name="down" />
    <s:State name="disabled" />
</s:states> 

ButtonSkin 类定义了各个状态中 Spark Button 在可视方面的变化。

以上只是简要介绍了新的 Flex 4 beta 状态语法。有关更多详细信息，请参阅增强的状态文档*。

上一篇  |  下一篇