[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
自定义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
创建完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
在完成所有上述步骤后,剩下的就是导出.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组件……”。那时这个工作流将会变得多么强大啊!
若本文能够成为如此趣味十足的未来的预习教材,那将荣幸之至!
迄今为止,一提到“使用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组件……”。那时这个工作流将会变得多么强大啊!
若本文能够成为如此趣味十足的未来的预习教材,那将荣幸之至!