请选择 进入手机版 | 继续访问电脑版
收藏本站腾讯微博新浪微博
点点网模板设计大赛 phpchina

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 用悬赏 三天解决问题 解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动 地图任务 邮件更新任务:保护帐号安全

积分换实物,来参加蓝色理想积分兑换吧! 联系招聘客服 蓝色理想帮你找工作! 万元奖励等你拿——点点网模板设计大赛

查看: 3103|回复: 2

[AS1&2] Flex2 学习笔记 Vol2 (版面布局与基本应用) [复制链接]

蓝色月光 楼主

膝盖中箭

超级版主 手机认证 

帖子
2974
体力
12966
威望
76
发表于 2006-8-21 01:22:38 |显示全部楼层
嗯,还是很基础的东西,大家别急,别急,一口吃不成个胖子……

    同学们好,现在开始上课,请大家翻开课本第二页,让我们来学习下 Flex2 的版面布局与基本应用。
    什么?你没课本?那么这位同学请先到外面凉快一下,上课不带本本怎么行……

    让我们建立一个叫 myFirstApp 的项目,大家用不着管这个 E 文是虾米意思,照着做就行了,别打岔。文件生成完毕后如下图所示:



    生成的 MXML 内容也不用管了,直接选择 Design 设计视图,就可以转到与我们熟悉的 DW , Flash 类似的可视化编辑模式。如下图所示:



    如果你从来都没有对面板布局进行过变动的话,那么在左下角我们可以看到组件菜单,如下图所示:



    第一个 Custom 为自定义组件,也就是自己开发或网上下载的组件都在这里,第二个 Controls 就是我们在之前 Flash 各版本里经常看到的如 Button CheckBox之类的常用控制组件了,第三个 Layout 是排版用的组件,这个估计大家都比较新鲜,一会儿主要解说这里,第四个 Navigators 是导航类组件,比如下拉菜单,页面切换什么的,第五个 Charts 是图表组件,你需要安装图表插件才可以使用,官方网站有下载,地址自己找,偶就不提供了。

    我们开始操作吧,拉一个 Panel 组件到场景里来(……习惯了,虽然这里叫 state ,大家知道意思就可以了),随便放,没关系的,一会儿可以调整位置。然后我们可以在右边看到各种组件属性,如下图所示:



    Common 是普通属性,ID 具有唯一值,不能与场景内其他元素命名冲突,在这里输入 myPanel 。Title 为标题字样,在这里输入 myFirstApp 。 Horizontal 和 Vertical 是 Panel 内元素水平及垂直居中,这个基本不用管。Style 就是样式了。由于 Flex2 默认字体大小是10,中文在这里使用会出现不清晰的现象,所以我们要把 Font Size 里的字体大小设置成12,也就是宋体字所能达到的清晰度最小值。其他的大家可以随便改下看看出现什么情况。Style 也可用外部 CSS 文件来控制。
    Layout就是排版了,absolute 是绝对定位,为默认值,vertical 为垂直定位,horizontal 为水平定位。

    下面的 Constraints 是强制性定位,我们在这里使用这个来进行排版。

    选中上面和左边中间的框后,数值输入0,如下图所示:



    现在 Panel 已经是强制性定位为水平及垂直居中,大家可以运行一下看看效果,随意放大缩小浏览器吧,前提是IE,FF似乎总会有那么些莫名其妙的毛病出现。
    现在更改一下两个0的值,就是以中心点来进行偏移到当前值位置,可为正负值。

    OK ,测试完毕,现在我们来看其他属性,选中四个角,然后在各个文本框里输入200,如下图所示:



    现在已经强制性定位为居中并距离上下左右四个方向的边框200px 了,大家可以试试调整各个属性,以便熟悉其具体控制的位置。MXML 代码如下:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3.         <mx:Panel title="MyFirstApp" id="myPanel" fontSize="12" top="200" left="200" bottom="200" right="200">
  4.         </mx:Panel>
  5. </mx:Application>
复制代码


    里面写得很清楚,看不懂的偶可以偷偷的告诉你这世界上存在着金山词霸这东西,金山公司请付偶广告费,谢谢,PM 偶即可。
    下面是偶一个 Web 应用里的布局,大家可以试试怎么达到这个效果:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
  3.         <mx:Panel id="top" fontSize="12" top="5" left="5" right="5" height="100" />
  4.         <mx:HDividedBox left="5" right="5" top="115" bottom="30">
  5.                 <mx:Panel id="left" width="300" height="100%" layout="absolute" />
  6.                 <mx:Panel id="main" width="100%" height="100%" />
  7.         </mx:HDividedBox>
  8.         <mx:Label text="Label" left="5" right="5" bottom="2" height="22" textAlign="center"/>
  9. </mx:Application>
复制代码


    下面是一个家伙的应用……死皮赖脸的要偶帮他打广告……不需要用户名密码,直接登陆即可,是用 vertical 来进行布局的。
    点击访问

    最后给大家附上一个FlexStyleExplorer ,可以生成组件CSS ,请下载附件。

[ 本帖最后由 蓝色月光 于 2006-8-28 15:25 编辑 ]
附件: 你需要登录才可以下载或查看附件。没有帐号?注册
已有 1 人评分威望 收起 理由
mirycat + 2 原创内容

总评分: 威望 + 2   查看全部评分

珍惜生命,远离IT
西部数码顶级域名注册商39元抢注!
remain 

残缺

银牌会员

帖子
1221
体力
2368
威望
4
发表于 2006-8-21 09:01:09 |显示全部楼层
嗯,谢谢版主。
突然觉得flex有点像VC,各位怎么看?
我刚写完一个vim的tabs插件
租服务器,上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具 举报

大花

超级版主 手机认证 

帖子
10079
体力
6299
威望
1
居住地
云南省 曲靖市
发表于 2006-8-21 09:02:02 |显示全部楼层
实话说..我不知道做什么用.。去查查.。

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2012-2-13 12:36 , Processed in 0.131529 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部