[转] Flex框架下的RIA开发现场--第7回 Flash Builder/Catalyst双向工作流

[url]http://bbs.9ria.com/thread-76976-1-1.html[/url]


迄今为止，一提到“使用Flash Builder和Flash Catalyst的Flex应用程序开发工作流”，印象中就是“设计师使用Flash Catalyst构建画面，然后将导出的.fxp文件（Flex项目）传递给开发人员，开发人员再使用Flash Builder在.fxp的基础上进行实现。”这样一条单向流程。
不过，在实际的RIA开发中，“由开发者设计自定义的结构和外观，然后再交由设计师进行美化工作”的情形也并不少见。
最近Bata版的Flash Builder 4.5（Burrito:玉米煎饼）和Flash Catalyst 1.5(Panini:三明治)终于能下载了。这次实现了这两个工具之间的双向工作流。本文，就将验证一下这个“双向工作流”。
从Flash Catalyst（下文简称FC）到Flash Builder（下文简称FB）的流程，像先前的版本一样没有改变。本文将对从Burrito到Panini的逆向输入进行解说。


Flash Catalyst互换工程的创建
在FB的包资源管理器中，选择［新建］→［Flash Catalyst 互换工程］。

[img]http://dl.iteye.com/upload/attachment/452107/5a9ed34b-7637-31de-9ae9-e11fb6382825.gif[/img]

图1　从［包资源管理员］建立［Flash Catalyst 互换工程］を作成


[img]http://dl.iteye.com/upload/attachment/452109/858729d2-5876-3143-b725-8637dd82d30f.gif[/img]

图2　新建［Flash Catalyst 互换工程］对话框

　「Flash Catalyst互换工程」一点儿也不比普通的Flex工程逊色，「assets」「components」等包一应俱全。各个包的作用如下：
assets.graphics
保存了向FC导入Illustrator（.ai）文件时被自动转换的Illustrator符号（.fxg）
assets.images
保存了.png、.gif、.jpg、.jpeg等图片文件
assets.media
保存了.mp3、.flv、.f4v等音频、视频文件
components
保存了自定义组件、条目渲染器、皮肤

[img]http://dl.iteye.com/upload/attachment/452111/a1ccd653-7532-3e96-a2b2-ccebac53c39f.gif[/img]


图3　［Flash Catalyst 互换工程］的初始状态


创建简单的自定义MXML组件
让我们来创建一个简单的自定义MXML组件吧。选择［新建］→［MXML 组件］，创建名为「TextInputAndButton」的组件。选择基于默认的［Group］组件。

[img]http://dl.iteye.com/upload/attachment/452113/7b8a9527-6dc5-3657-a2d7-4a2c64ca284a.gif[/img]

图4　［新建 MXML 组件］对话框

创建组件后，若启用了自动编译功能，就会立即显示出有关组件的宽度和高度的警告，这是「Flash Catalyst 互换工程」独有的警告。
只有修正警告内容之后，才能将.fxp文件逆向导入FC。在本示例中，删除width和height属性的定义。

[img]http://dl.iteye.com/upload/attachment/452115/0278b5af-d92e-3de6-9f2b-f6971a59910f.gif[/img]

图5　［Flash Catalyst 互换工程］独有的警告（FB中）

示例中的MXML组件源代码如下：
　　代码1　TextInputAndButton.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Group
     xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:fc="http://ns.adobe.com/flashcatalyst/2009"
>
     <s:TextInput id="inputText" />
     <s:Button id="submitButton" />
</s:Group>

自定义MXML组件创建完成后，导出.fxp文件。选择［文件］→［Flash Builder 工程的导出］（示例代码：BurritoAndPaniniSample001.fxp）。


[img]http://dl.iteye.com/upload/attachment/452117/979b23ee-d3e8-3756-bed1-9558f8b96dae.gif[/img]

图6　［文件］菜单（FB中）

使用FC打开导出的.fxp文件。选择［文件］→［打开工程］。我们看一下这时［库］标签下的［组件］栏目，应该能看到刚才在FB上创建的TextInputAndButton组件。

[img]http://dl.iteye.com/upload/attachment/452119/243ee06c-6626-3c19-9eac-0187acc6fae5.gif[/img]

图7　［库］标签下的［组件］栏目（FC中）

将组件正常导入FC后，下面就是创建皮肤的工作了。要编辑组件，首先需要将组件配置到舞台上，然后就能随心所欲地添加皮肤、美化加工了。在工作流上，这就属于设计师的领域了。
在FC中应用皮肤后，保存.fxp文件，并再次通过FB读取。在FB上选择[文件］→［导入］→［Flash Builder 工程］（示例代码：BurritoAndPaniniSample002.fxp）。

[img]http://dl.iteye.com/upload/attachment/452121/8358c95a-9ae3-3664-91b1-42dba42a47b4.gif[/img]

图8　［Flash Builder工程］的导入对话框

.fxp文件的导入目标，可以选择最初建立的［Flash Catalyst 互换工程］或［新建Flash Catalyst 互换工程］，根据开发类型来自主选择吧。

[img]http://dl.iteye.com/upload/attachment/452123/a31e7e24-4585-3f80-8282-7c9faa26db41.gif[/img]

图9　成功导入FB，TextInput和Button的复合组件就完成了（示例代码：BurritoAndPaniniSample003.fxp）


ActionScript皮肤应用组件的创建
与基于MXML的组件相比，难度有所上升，我们来创建基于ActionScript的自定义组件的，并由FC添加皮肤。
选择「Flash Catalyst 互换工程」→［新建］→［ActionScript 皮肤应用组件］。选择components包，超类选择默认的spark.components.supportClasses.SkinnableComponent。本示例中，将组件名称取作「CustomButtons」。

[img]http://dl.iteye.com/upload/attachment/452125/b21fa079-6cb1-368e-ac6b-cc0da5a4d3b9.gif[/img]

图10　创建［ActionScript 皮肤应用组件］对话框

在创建的.as文件中，自动生成了构造方法和必须重写的方法。各重写方法的作用如下：
getCurrentSkinState():String
返回SkinState名。例如，取得Button组件的状态，会返回“up”、“down”、“over”或“disabled”字符串。
partAdded(partName:String, instance:Object):void
当添加定义好的皮肤部件时自动触发的方法。
partRemoved(partName:String, instance:Object):void
当删除定义好的皮肤部件时自动触发的方法。

除了构造方法和上述重写方法之外，还有一些要素。那就是表示组件皮肤状态的“皮肤状态”定义（[SkinState]元数据标签），以及可以在组件皮肤中定义子对象皮肤的“皮肤部件”定义（[SkinPart]元数据标签）。
代码2　CustomButtons.as

package components {
    import spark.components.Button;
    import spark.components.supportClasses.SkinnableComponent;

    [SkinState("aState")]
    [SkinState("bState")]
    [SkinState("cState")]
    public class CustomButtons extends SkinnableComponent {

        [SkinPart(required="true")]
        public var blueButton:Button;

        [SkinPart(required="true")]
        public var yellowButton:Button;

        [SkinPart(required="true")]
        public var redButton:Button;

        public function CustomButtons() {
            super();
        }
        override protected function getCurrentSkinState():String {
            return super.getCurrentSkinState();
        } 
        override protected function partAdded(partName:String, instance:Object) : void {
            super.partAdded(partName, instance);
        }
        override protected function partRemoved(partName:String, instance:Object) : void {
            super.partRemoved(partName, instance);
        }
    }
}

创建完ActionScript皮肤应用组件后，将它配置到应用程序MXML上，并创建皮肤。如果是MXML组件，就将这个工程交由FC来完成。而如果是ActionScript皮肤应用组件，就必须使用FB来手动编辑。


[img]http://dl.iteye.com/upload/attachment/452127/69245845-d08d-3608-8994-78a5c2b0a99c.gif[/img]

图11　将ActionScript皮肤应用组件配置到应用程序MXML上，并创建皮肤

将皮肤创建到和自定义组件相同的包(components)中。可任意命名，这里取名为“CustomButtonsSkin”。

[img]http://dl.iteye.com/upload/attachment/452129/cf157760-60fb-39fa-991b-4f012d0bc56b.gif[/img]

图12　［新建MXML皮肤］对话框

创建皮肤后，可以看到表明在自定义组件上定义的皮肤状态和皮肤部件的注释。这时，如果启用了自动编译功能，就会显示未定义皮肤部件的错误提示。我们补充定义一下吧。

[img]http://dl.iteye.com/upload/attachment/452131/0ff3a296-be24-37f0-8433-6a91a3e00199.gif[/img]

图13　在创建ActionScript皮肤应用组件的皮肤后，立即显示了一些错误


如下所示，为修正后的ActionScript皮肤应用组件的MXML皮肤：
代码3　CustomButtonsSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark"
         xmlns:fc="http://ns.adobe.com/flashcatalyst/2009">
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("components.CustomButtons")]
    </fx:Metadata>
    <!-- states -->
    <s:states>
        <s:State name="aState" />
        <s:State name="bState" />
        <s:State name="cState" />
    </s:states>

    <!-- SkinParts
    name=redButton, type=spark.components.Button, required=true
    name=yellowButton, type=spark.components.Button, required=true
    name=blueButton, type=spark.components.Button, required=true
    -->
    <s:Button id="redButton" width="100" height="30" />
    <s:Button id="yellowButton" width="100" height="30" />
    <s:Button id="blueButton" width="100" height="30" />
</s:Skin>

在完成所有上述步骤后，剩下的就是导出.fxp文件，并交由FC编辑了。

[img]http://dl.iteye.com/upload/attachment/452133/c6e537e3-2516-3ba2-ad34-4af7958c3fe1.gif[/img]

图14　在FB上完成的包含3个不同颜色按钮的复合组件（示例代码：BurritoAndPaniniSample05.fxp）


如何应对Flash Catalyst互换工程的警告
在FC中创建好皮肤后，如果将创建的组件或皮肤单个地引入普通Flex工程，一般没什么问题。然而，直接使用创建的[Flash Catalyst互换工程]来建立应用程序的话，会出现一些警告信息，不难想象这势必会妨碍到开发。
这里比较方便的是，编辑.actionScriptProperties文件。默认状态下，.actionScriptProperties是不可见的，我们来让它显示吧。在[包资源管理器]菜单中打开[包资源管理器过滤器]，勾选.actionScriptProperties文件来让它显示。

[img]http://dl.iteye.com/upload/attachment/452135/53deb34c-38b1-3946-992b-c7e0e9a88745.gif[/img]

图15　［包资源管理器过滤器］

显示.actionScriptProperties文件后，将它打开。可以看到文件中记载着以下内容：
<flashCatalyst validateFlashCatalystCompatibility="true" />
复制代码


将validateFlashCatalystCompatibility属性设为false，就不会显示Flash Catalyst 互换工程独有的警告了。原本受限不可用的组件和ActionScript也变成可以使用了。
<flashCatalyst validateFlashCatalystCompatibility="false" />
复制代码


Flash Catalyst互换工程中的主要限制事项
为了实现FB和FC的双向作业，必须确保以下限制事项。（以本文发稿时的预览版来说）
原则上不在原有的包上做破坏和添加工作
Flex主题只可使用“Wireframe”（「Flash Catalyst互换工程」的标准主题）
不可以使用ActionScript皮肤应用组件（SkinnableComponent.as的子类）以外的.as文件。基本上使用.mxml文件来构建。
当前版本可以使用的组件、类一览
Animate（只可在Parallel中使用）
Button
BaseFilter子类（BlurFilter、DropShadowFilter、BevelFilter、GlowFilter）
CallAction（只可在Parallel中使用）
ChackBox
Graphic（只可用作.fxg文件的的根标签）
GraphicElement子类（BitmapImage、Ellipse、Line、Path、Rect）
Group
DataGroup（只可用作List的皮肤部件）
Fade（只可在Parallel中使用）
HorizontalLayout（只可用于DataGroup的layout属性）
HScrollBar
HSlider
ItemRenderer（只可用作根标签）
IFill实现类（BitmapFill、LinearGradient、RadialGradient、SolidColor）
IStroke实现类（GradientStroke、RadialGradientStroke、SolidColorStroke）
List
Move（只可在Parallel中使用）
MovieClipSWFLoader
Parallel（只可在Transition或Transition、Parallel中使用）
RadioButton
Rotate（只可在Parallel中使用）
Rotate3D（只可在Parallel中使用）
RichText和Textflow（TLF）元素
Resize（只可在Parallel中使用）
SimpleMotionPath（只可在Animate中使用）
Skin（只可用作根标签）
State（states属性中定义）
SoundEffect（只可在Parallel中使用）
TextInput
TileLayout（只可用于DataGroup的layout属性）
ToggleButton
Transition（transition中定义）
VerticalLayout（只可用于DataGroup的layout属性）
VideoDisplay
VideoPlayer
VScrollBar
VSlider
在创建自定义组件MXML时，只可使用Skin、ItemRenderer、Group根标签
在创建自定义组件的皮肤MXML时，必须将它放在自定义组件相同的包中。
不可使用<Style>标签（不能再工程中保存.css文件）
不可使用Group的layout属性（同样不可使用VGroup、HGroup等容器）
DataGroup只能作为List的皮肤部件来描述
条目渲染器必须放在components中
条目渲染器必须定义在List的皮肤部件（DataGroup）中（不能在List中直接定义）
条目渲染器必须定义“normal”、“hovered”、“selected”3个状态
DataGroup中必须有clipAndEnableScrolling属性
DataGroup中必须有itemRenderer属性
DataGroup中必须有layout属性
HorizontalLayout的verticalAlign属性中不能使用“contentJustify”
VerticalLayout的horizontalAlign属性中不能使用“contentJustify”


　上述限制事项言简意赅。
虽然FC和FB之间实现了双向工作流，但如果在FB中置入了FC中不能再现的处理和外观，就不能回到FC再次编辑。
用一句话来表达，就是“不能超出FC的再现范围”。自始自终都要多加留意双向工作流功能，使其能够和设计或是UI设计紧密地配合。我期待着将来随着FC的版本升级，会实现更加更活的双向工作流功能。
这样的话，在进行前面所说的「Flash Catalyst 互换工程」的工作时，违反了这些限制事项，Flex 4.5（代号「Hero」）的编译器就会发出「Flash Catalyst 互换工程」独有的警告，而开发者也应能处之坦然地开发下去。

[img]http://dl.iteye.com/upload/attachment/452137/9e781cac-38e7-3038-92f0-2f8a250e787c.gif[/img]

图16　「Flash Catalyst 互换工程」独有的警告（FC中）


展望未来
讲完了从FB到FC的导入，感觉如何呢？
或许还只是预览版吧，不少读者会觉得将它投入到实战中尚未成熟吧。诚然，目前稍欠火候，不过它确实突破性地实现了双向工作流。让我们一起期待它今后的发展吧。
下面是笔者天马行空地妄想。“如果实现了目前尚不支持的Flex移动工程和FC之间的互换……”，“如果完全支持Spark组件……”。那时这个工作流将会变得多么强大啊！
若本文能够成为如此趣味十足的未来的预习教材，那将荣幸之至！