Flex3新特性

1.Flex占位

Flex2中有Spacer控件用来占位,但这个在窗口进行缩放的时候并不能完全按照比例进行良好的布局。

Flex3中引入了ConstraintColumn和constraintRows两个概念,它用来指定用做Constraints layout的容器的格局。简单的说,就是ConstraintColumn和constraintRows用来在Canvas里面划出隐形的标线,这个比例值可以是象素、百分比或者不指定值(被当前的内容充满)。那么Canvas内的子控件根据ConstraintColumn或constraintRows的id值,通过left="leftCol:0" right="leftCol:0" top="row2:0" bottom="row2:0"这种形式指定与指定标线的距离(象素)。

比如:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 

<mx:Script>
 <![CDATA[
  [Bindable]
  public var txt:String = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. Consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr,  sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.";
 ]]>
</mx:Script> 

<mx:Canvas width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off">
 <mx:constraintColumns>
  <mx:ConstraintColumn id="leftGutter" width="10" />
  <mx:ConstraintColumn id="leftCol" width="50%" />
  <mx:ConstraintColumn id="rightCol" width="50%" />
  <mx:ConstraintColumn id="rightGutter" width="10" />
 </mx:constraintColumns>
 <mx:constraintRows>
  <mx:ConstraintRow id="topGutter" height="10" />
  <mx:ConstraintRow id="row1" height="20%"/>
  <mx:ConstraintRow id="row2" height="80%" />
  <mx:ConstraintRow id="bottomGutter" height="10" />
 </mx:constraintRows>
 
 <mx:TextInput text="password" width="100" right="leftCol:10" top="row1:5"/>
 <mx:Button label="Submit" left="rightCol:10" top="row1:5" />
 
 <mx:Text text="{txt}" left="leftCol:0" right="leftCol:0" top="row2:0" bottom="row2:0"/>
  
 <mx:Text text="{txt}" left="rightCol:0" right="rightCol:0" top="row2:0" bottom="row2:0"/>
 
</mx:Canvas> 

</mx:Application> 

  

2.自动导入皮肤

Flex中的控件是可以定制不同于默认主题的皮肤的。皮肤可以通过图片或者编程的方式自定义。Flex Builder3允许导入某些以存在的图片资源或者Flash导出的SWF文件或者把资源编译成的SWC文件。导入时在工程的导航面板内鼠标右键后选择import,然后选择Flex-Skin Artwork之后,按照步骤提示,选择合适的路径和选项即可。

Flex BUilder会把导入的皮肤指设定为控件所指定的状态的皮肤,并生成一个css文件。

 

实际上,Flex Builder3这种做法只是简化了我们开发的程序,确实达到了一个IDE应该有的作用。但作为我个人,我还是喜欢自己手动做这些工作。

 

3.可视化编辑CSS

在Flex Builder3内编辑一个css的样式文件,选择Design模式。 选择右上方的创建新样式。选项共有四个,其中第二个和第三个能用IDE内的所见所得的样式编辑,它们都是type selector类型的样式。

 

编辑的时候和编辑其它属性一样,基本都是选择已有的内容,不如文字,填充色,边框等。

 

我个人认为这个功能可能有些帮助,但是没有特别大的意义。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值