flex自定义组件
前期准备:
点击File菜单 -> New -> MXML Component,然后弹出一个对话框。
在对话框中输入组件名,选择此组件继承的类型,如:Canvas,DataGrid,ComboBox …… 等。
然后选择组件的大小,点击Finish即可。
关于组件继承的类型,假设Based on Canvas,那么组件的根元素即为mx:Canvas,此元素的含义为空白面板,那么设计人员可以任意在这个面板容器内放置任何东西,就像开发主程序一样。那么此组件类似一个容器。
如果Based on ComboBox,那么根元素即为mx:ComboBox,此元素的含义为下拉框,那么设计人员可以在下拉框的的内部任意定制内容或代码,那么此组件定制了一个下拉框。
例,登录组件:
制作组件:
首先按照上面的步骤新建一个组件,名为CLogin.mxml,Based on TitleWindow。TitleWindow元素代表有标题的窗口。
然后切换到Design视图,选择这个TitleWindow窗口,在属性框里编辑标题(Title属性),输入“用户登录”。
此时的代码大体如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用户登录">
</mx:TitleWindow>
然后我们加入Form控件并填入内容(FormItem),然后添加按钮以便提交,此时代码如下:
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" width="286" height="208" layout="absolute" title="用户登录">
&nb
相关文档:
在官方网站adobe上可以下载到编写Flex程序的基本工具,首先我们还是运用text的方式来开发我们的第一个程序,并且建议运用Ant工具来部署运行我们的程序。具体情况如下:
设置环境变量path=D:\FreeFlex\sdks\3.2.0\bin
文件名称:mxmlc HelloWorld.mxml
mxmlc -keep-generated-actionscript ......
通过Flex中的Timer可是实现数字时钟的效果,其效果图如下:
实现的代码如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<!--[CDATA[
import mx.formatters.DateFormatt ......
flex builder 设置非系统默认字体:
存在问题:text不能设置bold,否则不起作用。
方法一:(css)
<mx:Style>
@font-face
{
font-family: myFont;
& ......
Mxml组件的打开和关闭特效
openDuration="1000" openEasingFunction="Bounce.easeOut"
closeDuration="1000" closeEasingFunction="Bounce.easeIn"
//菜单透明效果
background-color:#000000;
background-alpha:0.1;
border-style:solid;
drop-shadow-color:#000000;
drop-shadow-enabled:yes;
//展开所 ......
通常大家都会设置visible属性为false。但这样做还是会有问题:组件仍然占用原来的位置。
最后同时使用includeInLayout与visible属性来解决。
实现效果图如下:
实现的效果是当点击hide text的时候,中间文字将消失,同时show text按钮自动向上移动对齐(因为Application的layout属性为vertical)
......