Flex4和Flex3的区别在这里就不多说了,有兴趣可以上网找资料。

本次的实践将通过测试用例来说明Flex4中不同Theme的应用效果
在Flash Builder4中出现了两个命名空间

xmlns:s="library://ns.adobe.com/flex/spark" 
xmlns:mx="library://ns.adobe.com/flex/halo"

相应的,控件也出现了两种不同的风格,创建Theme.mxml

<?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" minWidth="1024" minHeight="768">
 <fx:Declarations>
  <!-- Place non-visual elements (e.g., services, value objects) here -->
 </fx:Declarations>
 <s:Panel x="214" y="76" width="250" height="200" title="Flex 4 <s:Panel   />">
 </s:Panel>
 <mx:Panel x="502" y="76" width="250" height="200" title="Flex 3 <mx:Panel   />">
 </mx:Panel>
</s:Application>

 

其中<s:Panel/>显示的是flex4中新添加的风格,而<mx:Panel/>则显示的是flex3中的旧风格

在Design界面上还看不出控件风格的差异:

FLEX实践—FLEX4中Theme Halo应用(一)_library

 

注意下面的各项操作的不同:

1)直接保存,运行,效果如下:

FLEX实践—FLEX4中Theme Halo应用(一)_library_02

 

在上图中看不出两种控件有任何风格上的差异,下面的测试将通过两种不同的方法来实现flex4与flex3控件的风格体现

2)在项目上右键—>Properties—>Flex Complier,在Addtional complier arguments中添加如下参数:

FLEX实践—FLEX4中Theme Halo应用(一)_application_03

 

点击“OK”,运行,效果如下:

FLEX实践—FLEX4中Theme Halo应用(一)_application_04

 

 

 

这次能看到两个控件的风格差异了,右边则是我们熟悉的flex3中的控件风格

 

3)取消第2)步的操作,改变项目的Flex Theme

FLEX实践—FLEX4中Theme Halo应用(一)_application_05

 

FLEX实践—FLEX4中Theme Halo应用(一)_application_06

 

点击“OK”,运行,效果将与第2种方法一样