Flex學習筆記（Day 1）

暖楓無敵發表於2012-08-26

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("按下Enter鍵","注意",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>

頁面效果如下：

Flex學習筆記(Day 2)
2012-08-29
Flex筆記
flex：1學習筆記
2020-10-16
Flex筆記
flex學習筆記
2018-05-08
Flex筆記
Java 學習筆記--Day1
2019-03-23
Java筆記
flex 學習筆記 ExternalInterface
2021-09-09
Flex筆記
Flex佈局學習筆記
2016-08-22
Flex筆記
OpenCV影像處理學習筆記-Day1
2020-09-28
OpenCV筆記
CSS學習筆記：flex佈局
2021-11-16
CSS筆記Flex
Day 1 筆記
2019-03-22
筆記
Python學習筆記—day1—基礎知識
2019-02-27
Python筆記
黑馬pink JavaScript學習筆記_Web APIs Day1
2024-07-23
JavaScript筆記WebAPI
java 學習筆記 day02
2020-11-05
Java筆記
學習筆記-DAY01-VUE
2020-09-23
筆記Vue
day02_css學習筆記
2018-04-18
CSS筆記
RAC學習筆記-Day_01
2018-04-23
筆記
學習筆記1
2020-10-18
筆記
學習筆記-1
2020-12-31
筆記
TA學習記錄Day1
2021-01-05
笨方法學C 筆記 (day1)
2019-05-11
筆記
Day1-學習筆記-js之正規表示式
2020-11-08
筆記JS
HQYJ嵌入式學習筆記——C語言複習day1
2021-02-20
筆記C語言
linux學習筆記-day5
2018-08-10
Linux筆記
DAY 24 LeetCode學習筆記
2020-09-30
LeetCode筆記
Linux學習筆記 Day 4~5
2017-11-16
Linux筆記
day 1 c++小白學習記錄
2020-11-03
C++
swift學習筆記《1》
2018-09-05
Swift筆記
Vue學習筆記1
2018-09-06
Vue筆記
Numpy學習筆記 1
2020-11-23
筆記
HTML學習筆記1
2020-11-14
HTML筆記
Numpy學習筆記（1）
2018-01-16
筆記
SLAM學習筆記（1）
2018-04-19
SLAM筆記
Oracle學習筆記1
2017-02-24
Oracle筆記
mysql學習筆記-1
2016-06-26
MySql筆記
Zynq學習筆記（1）
2014-11-23
筆記
scapy學習筆記（1）
2013-09-19
筆記
Git—學習筆記1
2015-06-02
Git筆記
perl學習筆記1
2011-07-27
筆記
Oracle學習筆記-1
2009-09-18
Oracle筆記

Flex學習筆記（Day 1）

相關文章