Flex学习笔记(Day 1)

简介: StringValidator 字符串验证 PhoneNumberValidator 电话号码验证 DateValidator 日期验证 EmailValidator 邮箱验证 NumberValidator 数字验证 Alert 引入命名空间 import mx.
StringValidator 字符串验证
PhoneNumberValidator 电话号码验证
DateValidator 日期验证
EmailValidator 邮箱验证
NumberValidator 数字验证

Alert
引入命名空间
import mx.controls.Alert;
import mx.events.CloseEvent;
Alert.okLabel = "确定";
Alert.show("程序正在运行!\n小心","注意",Alert.OK);

YES|NO|OK|CANCEL  1|2|4|8 如果有多个的话,可以使用相加后的值
如果要显示YES+NO的话,使用3即可

Alert.show("确定保存吗?","保存",3,this,alertok);
protected function alertok(event:CloseEvent):void
{
    if(event.detail==Alert.YES)
    {
        lblMsg.text = "YES";
    }
    else
    {
        lblMsg.text = "NO";
    }
}

Alt+/ 强制提示引入命名空间问题


monthNames='["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]'

dayNames='["周一","周二","周三","周四","周五","周六","周日"]'

formatString = "YYYY-MM-DD"

TextInput控件
为s:Application添加creationComplete="init()"

protected function init():void
{
   input.addEventListener(KeyboardEvent.KEY_DOWN,enter);
}
protected function enter(e:KeyboardEvent):void
{
   if(e.KeyCode==13)
   {
       Alert.show("按下回车键","注意",Alert.OK);
   }
}
或者在TextInput控件的KeyDown="enter(event)"

DataGrid控件

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

<?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/mx" minWidth="955" minHeight="600" creationComplete="Application1_CreationCompletedHandler(event)">
    
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.collections.IList;
            import mx.containers.Grid;
            import mx.controls.Alert;
            import mx.events.CalendarLayoutChangeEvent;
            import mx.events.CloseEvent;
            import mx.events.FlexEvent;
            
            import spark.events.IndexChangeEvent;
            
            [Bindable]
            protected var province:ArrayCollection = new ArrayCollection(
                [{label:"安徽",data:1},{label:"江苏",data:2},{label:"浙江",data:3}]
            );
            
            [Bindable]
            protected var country:ArrayCollection = new ArrayCollection(
                [{label:"第一组",children:province}]
            );
            
            protected var dgCollection:ArrayCollection = new ArrayCollection();
            
            protected function btn_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                Alert.yesLabel="确定";
                Alert.noLabel = "取消";
                Alert.show("确定保存吗?","保存",3,this,alertok);
            }
            
            protected function Application1_CreationCompletedHandler(event:FlexEvent):void
            {
                dgCollection.addItem({xm:"张三",nl:25,xl:"本科"});
                dgCollection.addItem({xm:"李四",nl:25,xl:"大专"});
                dgCollection.addItem({xm:"王五",nl:25,xl:"硕士"});
                dgCollection.addItem({xm:"余六",nl:25,xl:"博士"});
                dg.dataProvider = dgCollection;
            }
            
            protected function alertok(event:CloseEvent):void
            {
                if(event.detail==Alert.YES)
                {
                    lblMsg.text = "YES";
                }
                else
                {
                    lblMsg.text = "NO";
                }
            }
            
            protected function cb_changeHandler(event:IndexChangeEvent):void
            {
                // TODO Auto-generated method stub
                this.lblMsg.text ="ComboBox选中的文本是:"+cb.selectedItem.label+",值为:"+cb.selectedItem.data;
            }
            
            protected function btnAdd_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                province.addItem({label:"海南",data:4});
            }
            
            protected function btnDelete_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                province.removeItemAt(list.selectedIndex);
            }
            
            protected function df_changeHandler(event:CalendarLayoutChangeEvent):void
            {
                // TODO Auto-generated method stub
                this.lblMsg.text = df.selectedDate.fullYear+"年"+(df.selectedDate.month+1)+"月"+df.selectedDate.date+"日";
            }
            
            protected function button1_clickHandler(event:MouseEvent):void
            {
                //为DataGrid控件添加数据
                dgCollection.addItem({xm:"田七",nl:28,xl:"本科"});
                
            }
            
            protected function button2_clickHandler(event:MouseEvent):void
            {
                //为DataGrid控件删除数据
                dgCollection.removeItemAt(dg.selectedIndex);
            }
            
            protected function button3_clickHandler(event:MouseEvent):void
            {
                //为DataGrid控件添加列
                var newGrid:GridColumn = new GridColumn();
                newGrid.dataField = "hyzk";
                newGrid.headerText="婚姻状况";
                var cols:IList = dg.columns;
                cols.addItem(newGrid);
            }
            
            protected function button4_clickHandler(event:MouseEvent):void
            {
                //为DataGrid控件删除列
                var cols:IList = dg.columns;
                cols.removeItemAt(3);
            }
            
            protected function button5_clickHandler(event:MouseEvent):void
            {
                // 遍历DataGrid
                for(var i:int=0;i<dgCollection.length;i++)
                {
                    ta.text =ta.text+dgCollection[i].xm+"\n";
                }
            }
            
            public var step:int = 10;
            protected function button6_clickHandler(event:MouseEvent):void
            {
                // 滚动条值设置
                this.pb.setProgress(step+=10,100);    
                if(step<100)
                {
                    this.pb.label="正在加载..."+(step/100)*100+"%";
                }
                else if(step==100)
                {
                    this.pb.label="加载完成";
                }
            }
            //文件上传下载进度
            public var file:FileReference = new FileReference();
            protected function file_progress(e:ProgressEvent):void
            {
                pbar.label="已上传"+Math.round(100*e.bytesLoaded/e.bytesTotal)+"%";
                pbar.setProgress(Math.round(100*e.bytesLoaded/e.bytesTotal),100);
            }
            
            protected function upload():void
            {
                if(file.size>0)
                {
                    file.load();
                }
            }
            
            [Bindable]
            protected var stateText:String="请选择要导入的文件";
            protected override function createChildren():void
            {
                super.createChildren();
                file.addEventListener(Event.SELECT,file_select);
                file.addEventListener(Event.COMPLETE,file_complete);
                file.addEventListener(ProgressEvent.PROGRESS,file_progress);
            }
            
            protected function file_select(e:Event):void
            {
                stateText= file.name;
            }
            
            protected function file_complete(e:Event):void
            {
                var byteArray:ByteArray = new ByteArray();
                byteArray=file.data;
                byteArray.position = 0;
                Alert.show("上传完毕!","恭喜",Alert.OK);
            }
            
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <!-- 将非可视元素(例如服务、值对象)放在此处 -->
        <mx:StringValidator source="{xm}" property="text" maxLength="4" minLength="2" tooLongError="姓名太长" tooShortError="姓名太短">
        </mx:StringValidator>
        <s:NumberValidator source="{nl}" property="text" minValue="0" maxValue="120" >
        </s:NumberValidator>
    </fx:Declarations>
    <s:Form x="361" y="7" width="300" height="165">
        <s:FormItem label="姓名:">
            <s:TextInput id="xm"/>
        </s:FormItem>
        <s:FormItem label="年龄:">
            <s:TextInput id="nl"/>
        </s:FormItem>
        <s:FormItem label="邮箱:">
            <s:TextInput id="yx"/>
        </s:FormItem>
    </s:Form>
    <s:Button id="btn" x="10" y="6" label="按钮" click="btn_clickHandler(event)"/>
    <s:Label id="lblMsg" x="76" y="186" text="世界你好!" color="{cp.selectedColor}"/>
    <s:ComboBox id="cb" x="10" y="35" change="cb_changeHandler(event)" dataProvider="{province}"/>
    <s:List id="list" x="6" y="66" width="150" height="77" dataProvider="{province}"></s:List>
    <s:Button id="btnDelete" x="86" y="151" label="删除" click="btnDelete_clickHandler(event)"/>
    <s:Button id="btnAdd" x="8" y="151" label="增加" click="btnAdd_clickHandler(event)"/>
    <mx:Tree x="8" y="211" width="312" dataProvider="{country}"></mx:Tree>
    <mx:ColorPicker id="cp" x="327" y="6"/>
    <mx:DateField id="df" x="197" y="7" change="df_changeHandler(event)"
                  dayNames="["周日","周一","周二","周三","周四","周五","周六"]"
                  formatString="YYYY-MM-DD"
                  monthNames="["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]"/>
    <s:DataGrid x="361" id="dg" y="180" width="300" requestedRowCount="4">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn dataField="xm" headerText="姓名"></s:GridColumn>
                <s:GridColumn dataField="nl" headerText="年龄"></s:GridColumn>
                <s:GridColumn dataField="xl" headerText="学历"></s:GridColumn>
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>
    <s:Button x="382" y="316" label="添加" click="button1_clickHandler(event)"/>
    <s:Button x="491" y="317" label="删除" click="button2_clickHandler(event)"/>
    <s:Button x="382" y="367" label="添加列" click="button3_clickHandler(event)"/>
    <s:Button x="491" y="367" label="删除列" click="button4_clickHandler(event)"/>
    <s:Button x="10" y="396" label="遍历DataGrid" click="button5_clickHandler(event)"/>
    <s:TextArea id="ta" x="106" y="396" height="20"/>
    <mx:ProgressBar id="pb" x="573" y="326" labelPlacement="center" maximum="100" minimum="0" mode="manual"/>
    <s:Button x="602" y="353" label="进度" click="button6_clickHandler(event)"/>
    <s:Panel x="353" y="396" width="250" height="200" title="数据导入">
        <s:TextInput x="10" y="10" width="157" text="{stateText}"/>
        <s:Button x="175" y="11" label="浏览" click="file.browse();"/>
        <mx:ProgressBar id="pbar" x="10" y="57" width="157" labelPlacement="center"/>
        <s:Button x="175" y="57" label="上传" click="upload();"/>
    </s:Panel>
</s:Application>

页面效果如下:




相关文章
|
机器学习/深度学习 人工智能 算法
【代数学作业1完整版-python实现GNFS一般数域筛】构造特定的整系数不可约多项式:涉及素数、模运算和优化问题
【代数学作业1完整版-python实现GNFS一般数域筛】构造特定的整系数不可约多项式:涉及素数、模运算和优化问题
390 0
|
9月前
|
机器学习/深度学习 算法 文件存储
神经架构搜索:自动化设计神经网络的方法
在人工智能(AI)和深度学习(Deep Learning)快速发展的背景下,神经网络架构的设计已成为一个日益复杂而关键的任务。传统上,研究人员和工程师需要通过经验和反复试验来手动设计神经网络,耗费大量时间和计算资源。随着模型规模的不断扩大,这种方法显得愈加低效和不够灵活。为了解决这一挑战,神经架构搜索(Neural Architecture Search,NAS)应运而生,成为自动化设计神经网络的重要工具。
|
机器学习/深度学习 人工智能 安全
2024年软件开发新趋势
2024年的软件开发领域迎来诸多新趋势。低代码/无代码平台通过可视化界面让非技术用户也能快速构建应用,显著降低开发成本。5G技术的普及带来高速度和低延迟,推动物联网和人工智能的发展,促进实时数据处理。DevSecOps将安全融入开发和运维全过程,减少安全风险。远程工作的常态化促进了Zoom、Microsoft Teams等协作工具的发展,提升团队效率。AI和ML技术在自动化测试、代码审查等方面的应用日益广泛,助力个性化用户体验。这些趋势正重新定义软件开发的未来,为企业带来机遇与挑战。
|
SQL Oracle 关系型数据库
关系型数据库直接查看日志文件
【6月更文挑战第10天】
372 3
|
JavaScript Java 测试技术
基于ssm+vue.js+uniapp小程序的超市库存商品管理系统附带文章和源代码部署视频讲解等
基于ssm+vue.js+uniapp小程序的超市库存商品管理系统附带文章和源代码部署视频讲解等
159 4
go配置镜像(阿里云、七牛)
go配置镜像(阿里云、七牛)
1207 1
|
NoSQL Linux
centos 7 源代码安装新版本gdb
centos 7 源代码安装新版本gdb
489 0
|
Java 数据库 容器
J2EE的体系架构
J2EE是Java2平台企业版(Java 2 Platform,Enterprise Edition),它的核心是一组技术规范与指南,提供基于组件的方式来设计、开发、组装和部署企业应用。J2EE使用多层分布式的应用模型。
2573 0
|
存储 编解码 Prometheus
可观测|时序数据降采样在Prometheus实践复盘
基于 Prometheus 的监控实践中,尤其是在规模较大时,时序数据的存储与查询是其中非常关键,而且问题点较多的一环。如何应对大数据量下的长周期查询,原生的 Prometheus 体系并未能给出一个令人满意的答案。对此,ARMS Prometheus 近期上线了降采样功能,为解决这个问题做出了新的尝试。
可观测|时序数据降采样在Prometheus实践复盘
|
机器学习/深度学习 人工智能 小程序
AI赋能创意「logo生成器」带来全新体验!
在借助AI大模型背后先进的人工智能和深度学习算法,阿里云企航logo生成小程序为您提供智能化的设计体验。
2170 0
AI赋能创意「logo生成器」带来全新体验!