Flash Builder Design 视图扩展类常见问题问答

http://www.adobe.com/cn/devnet/flash-builder/articles/design-view-extensions-faq.html#e


我为何需要Design view extension类？

当你在Flash Builder中开发应用程序时，你需要使用MXML编辑器来编写MXML代码。 MXML编辑器有两种模式：Source模式和Desig模式。 你可以使用Source模式编辑代码，以及使用Design模式编写可视化布局和设计你的应用程序。 当使用Design模式时，Components视图可以显示可用的组件。 你可以从Components视图中拖放任意组件至Design视图中。 当进行这样操作时，Flash Builder能够生成用于在视图中显示对象的代码。 Design模式和Source模式是相互同步的，因此其中一个模式发生的变化，将立即在另外一种模式中表现出来。

有时，某些组件在Design view中拥有定制的外观，但相应的代码在Source view 中不能显示。 为了将这些功能揭示给你的自定义库的用户，你需要使用Design view extension 类。

谁将发现Design View extension类非常有用？

通常情况下，自定义UI控件库的开发人员将会发现 Design View extension 类非常有用。

我应该展现给用户看的 extension 功能是什么呢？

我们将讨论Design视图中各种各样的功能，以帮助你去决定你愿意给用户展现的那些功能。 当你从对象中打开一个MXML文件时，你会看到Source 和Design标签出现在顶部的编辑区（参见图1），这样便于你迅速地在Source 和Design模式之间进行切换。


图1. Source 和 Design标签允许你迅速地在两种模式之间进行切换
图1. Source 和 Design标签允许你迅速地在两种模式之间进行切换



在Design模式下，你可以看见Components 视图，Outline视图，以及Property Inspector。

在Components 视图中显示的控件可以被拖放到Design 视图中（见图2）。 你可以看到这些控件是按照Custom、Controls和Layouts等进行分组的。你可以在某一合适的分组模式下使你的组件可见，或者你也可以创建自己的组件组。


图2. Components 视图中显示的控件可以放置于Design视图中
图2. Components 视图中显示的控件可以放置于Design视图中


图3. 可以对Components视图进行过滤以显示推荐的组件
图3. 可以对Components视图进行过滤以显示推荐的组件



你可以选择仅显示推荐的组件（参见图3）。 例如，Button组件有MX Button 和Spark Button 两个组件。 当你在选择了"仅显示推荐的组件"("Only Show Recommended Component")的时候，Components 视图仅显示Spark Button 。 当你取消选择这个选项时，你可以看到Spark 和MX控件。

在Components视图中，我如何在正确的组下使某个组件可见？

为了在正确的组下使某个组件可见，需要完成下面的操作：
1.创建一个design.xml文件并将它作为组件进行添加。
2.创建一个图标。

我将如何设计design.xml文件呢？

一个范例design.xml应该如下所示


<?xml version="1.0"?>
<design version="2">
    <categories>
        <category id="myControls"  label="MyCustomControls" defaultExpand="true"/>
        <category id="myControls_combined" filteredViewOnly="true" label="MyCustomControls_Filtered" defaultExpand="true"/>
    </categories>
    <components>
        <component name="MyComponent"  displayName=" MySpecialComponent "                category="myControls" filteredViewCategory="myControls_combined" >
        </component>
    </components> 
</design>




标签

属性

描述


Design

Version

将版本指定为 "2" 以便让Flash Builder 识别该标签。

如果你没有指定正确的版本号，则 Design View不能识别XML文件，并且你将收到一条错误消息。


Categories

Id

指定必须在Categories 视图中显示的类别（category）。

 
label

Category名称

 
filteredViewOnly

当你选中"show only recommended components" 选项时呈现。


Components

Name

完全合格的component类名称

 
displayName

在 Components 视图中显示的Component名称

 
Category

Category ID


 
filteredViewCategory

显示当你指定 filteredViewOnly属性时必须呈现的类别。

例如，如果你同时具有MX和 Spark 版本的组件， 则对于MX 组件， 你可以指定filteredViewCategory=""，而对于Spark组件，你可以指定相应的类别（category）。



图4. 放置于Design视图中的组件
图4. 放置于Design视图中的组件



MyCusotmControls 组在它的组内显示了 MySpecialComponent （参见图5）。 你可以在Design视图中拖放 MySpecialComponent 去创建一个实例。



图5. Customer 组件可以在Design视图中进行拖放
图5. Customer 组件可以在Design视图中进行拖放



如果你的组件没有与一个图标关联，它会显示自定义组件的图标，如图5所示。

我如何使一个图标与组件关联？

要使图标与组件关联，应该使用IconFile 元数据标签，如下面的代码所示：


<s:Group xmlns:fx=http://ns.adobe.com/mxml/2009 xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="156" height="106" chromeColor="#6CE4C4" contentBackgroundColor="#EEAFAF">
    <fx:Metadata>
        [IconFile("myIcon.png")]
    </fx:Metadata>
    <s:Button x="20" y="26" label="Button"/>
    <s:CheckBox x="20" y="64" label="CheckBox"/>
</s:Group>



如果ActionScript 文件和IconFile 元数据可以添加到类的开始部分，那么


[IconFile("myIcon.png")]
Public class MyClass extends…..
{
}


•将图标文件放置在组件文件所处的同一位置。
•在库编译（library compilation）中，确保将图标文件也添加到组件中。

你应该能够在Components 视图、Outline视图以及Property Inspector中看到你的component图标（参见图6）。


图6. Components 视图、Outline视图以及Property Inspector
图6. Components 视图、Outline视图以及Property Inspector



我如何使用Property Inspector去给一个组件设置属性呢？

Property Inspector 出现在Design视图的右侧，并且能够显示组件的属性。

T用户通常为某个组件编辑的共同属性应该能够在Common部分中找到。 ID、按钮的标签以及按钮的onClick 事件处理程序等。

通过在desing.xml 文件中指定详细信息，可以在Commom部分中添加各种属性，如下所示：

例如，你可以有一个customLogin组件，该组件有一个组件标题和一个支持按钮的标签。 用户在创建一个新组件的时候可以指定这些值：


<?xml version="1.0"?>
<design version="2">
    <categories>
    <category id="myControls"  label="MyCustomControls" defaultExpand="true"/>
    <category id="myControls_combined" filteredViewOnly="true" label="MyCustomControls_Filtered" defaultExpand="true"/>
    </categories>
    <components>
        <component name="CustomLogin"  displayName=" MySpecialLogin " category="myControls" filteredViewCategory="myControls_combined" >
            <mxmlProperties>
                <textfield id="title" name="Panel Title"/>
                <textfield id="supportButtonLabel" name="Support Button Label"/>
            </mxmlProperties>
        </component>
    </components> 
</design>



当你按照范例所示去定义MXML Properties标签时，Design视图可以显示该组件，并且Property Inspector 的外观如图7所示：



图7. 在Design 视图中显示的组件和相应的Property Inspector
图7. 在Design 视图中显示的组件和相应的Property Inspector



什么是你可以定义的不同属性类型？

你可以定义下面的属性类型：

TEXTFIELD

正如上面的范例所述，你可以使用textField 去描述可编辑的文本数据。

COMBO

combo属性的MXML语法如下所示：


<combo id="supportButtonLabelVisible" name ="Support Button Visible" />
<combo id=" sampleMultipleValue " name ="Sample Multi Value" />



正如属性名字所表示的， comboBox 可以显示多种数值。 例如，Boolean 变量或具有一个已知允许数值集合的变量。 该组件应该使用元数据指定相应的枚举规则，如下所示：



public var supportButtonLabelVisible:Boolean = true;
[Inspectable(category="General", enumeration="30,50,100", defaultValue="20")]
public var sampleMultipleValue:int = 0;



Property Inspector 显示的值如图8所示。



图8. 在Property Inspector中显示的结果
图8. 在Property Inspector中显示的结果



EVENTEXTFIELD

使用该属性可以暴露相应的常见事件，用户可以点击它们生成相应的事件处理程序。 例如，图9给出的一个单选按钮的click事件。


<eventTextfield id="click" name="Click"/>

图9.文本字段的一个范例
图9.文本字段的一个范例



DATATEXTFIELD

dataTextfield 属性有两种使用方法：

•showEvent – true

这里，属性名称被视为事件名称，同时，用户可以使用该属性去生成事件处理程序。 你也可以选择去生成一个服务调用。

这样做，你可以暴露你最喜欢的事件，并且让用户为该事件生成处理程序。 例如，图10给出的按钮click事件。


<dataTextfield id="click" name="On click" showEvent="true"/>

图10.一个文本字段中的click事件的范例
图10.一个文本字段中的click事件的范例


•showEvent – false

当你将showEvent 设置为false时，你可以将服务调用的结果绑与一个指定的属性进行绑定。 例如，图11给出的List data provider 。


<dataTextfield id="dataProider" name="Data Provider"

图11.一个来自data provider的列表的范例
图11.一个来自data provider的列表的范例



其它属性：
•RendererTextField–使用该属性去创建或编辑item渲染器。
•AssetFileChooser–如果你的组件需要为属性值选择文件，使用该属性。 你可以嵌入文件或者指定它作为项目组件的一部分。

此外，还有其它的组件特定的数据类型，不过它们已经超出本文的讨论范围。

什么是默认属性值？

你可以按照如下代码设置你的组件的默认属性：


<defaultAttribute name="sampleMultipleValue" value="100"/>
<defaultAttribute name="title" value="My Title"/>



标签的名称是 defaultAttribute，并且属性名称是创建项目时使用的值。

我如何包含或者移除组件？

你可以根据项目类型去包含或者移除组件。 当你定义你的组件时，你可以指定必须包含或移除组件的相应项目类型。

你可以使用excludedFromProjectType 属性从一个项目类型中移除一个组件，以及使用includeInProjectType 属性从一个项目类型中包含一个组件。 你可以在组件级别或者在属性级别指定该值。

如果你不指定任何值，该组件将适用于全部的项目类型，例如Flex、AIR和移动项目。 目前，你仅可以在移动和非移动项目间指定一个差异值。

我如何从Design视图中移除一个SWC？

Design视图可以加载所有从库路径中引用的SWC文件。 有时，如果你的SWC和Design视图有兼容性问题，或者如果它包含AIR特定的功能， 则在加载SWC时，Design View会报告问题。 可以从Design View释义（interpretation）中移除不兼容的SWC。 但是，如果SWC只用于非UI类，那么你将不希望Design View报告问题。 在这种情况下，你可以从Design View释义中移除该SWC。

这样做，你可以创建一个如下所列的design.xml 文件：


<?xml version="1.0"?>
<design version="2" excludeFromDesignView=”true”> 
</design>



然后，将design.xml文件包含到SWC文件中。

你能启用组件的自定义代码生成功能吗？

如果你有一个复杂的组件，你可以在运行时生成范例代码，这样它提供了在Design视图中一样的外观。

例如，考虑一下Chart组件。 当你拖放一个Chart组件时，你在design视图中能够看到该图表。 但是，当你启用应用程序时，你在运行的应用程序中看不到该图表。

使用自定义代码生成功能可以让你了解组件的使用方式并且能够看到一个工作范例。

步骤
1.创建一个自定义LineChart
创建一个自定义chart类，例如，MyLineChart，它与LineChart。 这样做，创建一个库项目以及一个由LineChart扩展而来的MXML组件。

2.在应用程序项目中使用库
当你在应用程序项目中包含库项目时，你会注意到 LineChart 属于Design View中的自定义组件部分。 你可以在Design View中按照指定的目录包含 LineChart。 然而，注意这里不需要启用自定义代码生成功能。

3.拖放MyLineChart 组件
当你拖放 MyLineChart 组件到Design View时，你会看到Design View中呈现了一些数据的折线图。 当你试图在它里面用 MyLineChart启用应用程序时，它会显示一个空的 Line chart。 也就是说，用来呈现那个chart 的数据仅仅适用于Design View。 该数据来自于LineChart extension类。

在这个步骤中，你应该在Design View中并在运行时添加一个空的chart。 所以，你需要废弃任何通过 LineChart extension类添加的数据。

4.创建一个自定义LineChart
为了扩展基础extension类并且删除特殊的数据设置，你需要创建一个ActionScript 类 MyLineChartExtension，并且覆盖如下的create组件：



package
{
Import com.adobe.flexide.extensions.components.mx.charts.chartClasses.CartesianChartExtension;
import flash.display.DisplayObject;
public class MyLineChartExtension extends CartesianChartExtension
{
     public override function createComponent(inItemType:String):DisplayObject{
// We ignore the actual data provider and always display sample data
        var item:DisplayObject = super.createComponent(inItemType);
        var chart:MyLineChart = MyLineChart(item);
        return chart;
    }
}



然后，创建相应的Chart组件而且不需要设置数据。

在design.xml中指定如下所示的扩展：


<?xml version="1.0"?>
<design version="2">
    <categories>
        <category id="myControls"  label="MyCustomControls" defaultExpand="true"/>
        <category id="myControls_combined" filteredViewOnly="true" label="MyCustomControls1" defaultExpand="true"/>
    </categories>
    <components>
        <component name="MyLineChart"  excludeFromProjectType="mobile" displayName="MySpecialChart" category="myControls" filteredViewCategory="myControls_combined" >
            <designExtension class="MyLineChartExtension"/>
        </component>
    </components>
</design>



你包含该库并且将相应的图表拖拽到 Design View中时，你能够在Design View中看到空的图表。

现在，你可以生成自定义代码，这样，相应的图表能够在Design View和浏览器中显示相应的数据。

Inserter Java Extension 类

为了创建一个自定义对话框（dialog）或自定义代码生成（code generation），你需要为Flash Builder创建一个Java扩展。
1.在相应的插件中，指定extension类的详细信息，如下所示：


<extension point="com.adobe.flexbuilder.mxmlmodel.componentInserters">
    <componentInserter class="drophandlersample.MyLoginInserter">
        </componentInserter>
    </extension>


2.在 MyLoginInserter 类中实现com.adobe.flexbuilder.mxmlmodel.components.IcomponentInserter。


public class MyLineChartInserter  extends AutoIDInserter implements IComponentInserter {
    public void insertComponent(IComponentInsertionManager componentInsertionManager, IComponentInsertParams params, boolean showDialog)
{
    }
}


3.在design.xml中为应用程序指定inserter类的详细信息。


<?xml version="1.0"?>
<design version="2">
    <categories>
        <category id="myControls"  label="MyCustomControls" defaultExpand="true"/>
        <category id="myControls_combined" filteredViewOnly="true" label="MyCustomControls1" defaultExpand="true"/>
    </categories>

    <components>
        <component name="MyLineChart"  excludeFromProjectType="mobile" displayName="MySpecialChart" inserterClass="drophandlersample.MyLineChartInserter" category="myControls" filteredViewCategory="myControls_combined">
        <designExtension class="MyLineChartExtension" />
        </component>
    </components>
</design>



在本范例中，假定我们希望生成相应的数据提供者和系列的详细信息。 因此，在MyLineChartInserter的 instertComponent 方法中编写相应的详细信息。

参见 MyLineChartInserter的范例代码。

你如何才能创建一个定制的Design View？

你可以使用extension类来创建一个定制的Design View。 下列问题可以帮助你了解关于extension类的更多信息。

你如何创建一个extension类？

你可以为你的自定义组件创建一个extension类。 你可以从对应于你的base类的extension类进行扩展。

例如，如果你的类由Group扩展而来，则你的extension 类必须由 GroupExtension 类扩展而来。

建议对extension类的所有级别进行指定。 例如，如果你的类是 MyLogin ，它是由 MyGroup扩展而来， 而 MyGroup 是由 Spark Group扩展而来， 则建议创建由 create MyLoginExtension 扩展而来的 MyGroupExtension。 其中， MyGroupExtension 是由 GroupExtension扩展而来的。

你如何对你的extension类进行编译和打包？

为了编译 MyGroupExtension 类，你需要为使用 GroupExtension类的应用程序提供 MyGroupExtension 类和 MyGroup类的定义。 关于如何实现这一操作，参见 相关文档。

下面是 IComponentExtension的若干方法：

createComponent
•创建由 extension类控制的一个 DisplayObject
•覆盖这一函数以便以不同方式创建组件。 或在base类中改变对象创建的行为。

setProperty
•在指定组件中设置一个属性。

* 返回一个Boolean 值来指示该 extension类是否已经设置相应的属性。 如果该值为false，则默认处理程序已经设置了相应属性。 如果该属性需要特殊处理，则你可以覆盖该值。 例如，你可以覆盖该方法，以便阻止正在运行的indicator组件播放动画。/p>

setStyle
•在指定组件中设置一个式样。

* 返回一个Boolean 值来指示该 extension类是否已经设置相应的属性。 如果该式样需要特殊处理，则你可以覆盖该值。

canShowBorder
•返回一个指示Design View 是否应该围绕该条目绘制一个边框的值。 在 Design view中， 你可以选择是否围绕条目绘制一个边框。 如果你启用该选项，则Design View 将围绕所有条目绘制一个边框。 围绕条目的边框使得在设计面上查看条目的尺寸和位置更为简便。 该函数的默认值为false。

usesAbsolutePositioning
•返回一个指示条目是否使用决定定位功能（absolute positioning）对其子条目进行布局的值。
•如果你希望创建一个具有其自己布局规则并且在某些场景支持绝对定位（absolute positioning）的容器，则覆盖该函数。

* 针对绝对定位（absolute positioning）时，返回"" 针对垂直布局（vertical layout），返回 "vertical" ，以及针对水平布局（horizontal layout），返回 "horizontal" 。
•返回一个指示条目是否应该是一个容器的值。
•由 ContainerExtension 继承而来的Extension类返回值为true
•如果你具有这样的场景：相应的组件由 Container继承而来，但在 Design View中不应该被看作一个容器，则覆盖该函数以便返回一个false值。




Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License+Adobe Commercial Rights

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可。Adobe 提供超出该许可范围、与本产品包含的代码示例相关的权限。