# Flex 筆記 > [name=x213212] 2018/11/03 現在目前開發遇到的BUG將會塞在雜項筆記內~ > [name=x213212] 2018/10/26 新增了XML數據的處理與特性，新增幾個小問題與解決方法。 > [name=x213212] 2018/10/20 新增了事件處理，自定義類別事件發送 與 設計架構架構。 > [name=x213212] 2018/10/11 新增簡易程式碼與基礎。 ## Hello, World! ![](https://i.imgur.com/E6jYZqK.png) ```mxml <?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:Label text="Hello word!!"> </s:Label> </s:WindowedApplication> ``` ## 參考網址 https://help.adobe.com/zh_TW/as3/learn/as3_learning.pdf https://help.adobe.com/zh_TW/as3/learn/index.html https://help.adobe.com/zh_TW/as3/dev/as3_devguide.pdf https://www.youtube.com/watch?v=lyV3qO1sh44 https://www.youtube.com/results?search_query=FLEX+ACTIONSCRIPT+TUTOR https://help.adobe.com/zh_TW/FlashPlatform/reference/actionscript/3/flash/filters/DropShadowFilter.html https://www.oreilly.com/library/view/flex-4-cookbook/9781449388195/ch01.html https://www.jb51.net/books/327716.html https://www.youtube.com/watch?v=VjOOANWKbVk&list=PLBF4EE33511E0A190&index=1 https://youtu.be/awz4_0M31oY https://youtu.be/HXK79X4M4Kw http://flex.apache.org/tourdeflex/index.html https://youtu.be/HXK79X4M4Kw # 快捷鍵 ## 快速補足 content Assitst alt+q # 命名規則 ## package 命名:全小寫 component 元件命名大駝峰命名 大寫開頭尾巴加C EX:HistoryMedicineC view 元件命名: 大駝峰命名，大寫開頭尾巴加v ## Operator / Method : 小駝峰命名, 以動作+ 某事情 Ex: private function doSomething ():void ## Event / trigger :小駝峰命名 元件id_事件名稱或功能 ex:but1_clickHandler(); ## 自訂事件: 自訂事件名:元件id_動作_名詞(全大寫) ## State: 命名 STATE_狀態名 STATE_LOGOUT STATE_LOGIN STATE_MENU ## 變數命名 public :xXXXXX private : _xXXXX local:xxxxx ## 程式元件內部命名 小駝峰命名 Button buxXxxx Label lblXxxx TextInput txtXxxx Group gpXxxx HGroup hgpXxxx VGroup vgpXxx TitleGroup tgpXxx DataGroup dgpXxx List lstXxxx XML xmlXxx XMLList xltXxxx XMLListCollection xlcXxxx RemoteObject rmtXxxx Array arrXxx ArrayList altXxxx ArrayListCollection alcXxxx Object objXxxx # 變數 https://help.adobe.com/zh_TW/as3/learn/WS5b3ccc516d4fbf351e63e3d118a9b90204-7ec7.html ## 一維陣列 ![](https://i.imgur.com/uOeCx8I.png) 我覺得這蠻重要的，可以把類別、字串、數值等等推入，再用length個別讀出 ```Mxml <?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="test_com(event)"> <!-- minWidth="955" minHeight="600"--> <fx:Script> <![CDATA[ import mx.events.FlexEvent; import testing.tmp; public var item:Array = new Array(); public function test_com(event:FlexEvent):void{ var test:tmp =new tmp(1); var test2:tmp =new tmp(2); trace ("hello world!") item.push(test); item.push(test2); for (var i:int; i < item.length;i++) trace (item[i].get_ID()); } ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> </s:WindowedApplication> ``` ## 二維陣列 ![](https://i.imgur.com/gqAfPLq.png) ```mxml <?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="test_com(event)"> <!-- minWidth="955" minHeight="600"--> <fx:Script> <![CDATA[ import mx.events.FlexEvent; import testing.tmp; public var multiplicationTables:Array = new Array(10); public function test_com(event:FlexEvent):void{ for(var i:Number=0 ; i < multiplicationTables.length; i++){ multiplicationTables[i] = new Array(10); for(var j:Number = 0; j < multiplicationTables[i].length; j++){ multiplicationTables[i][j] = i * j; } trace(multiplicationTables[i]); } } ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> </s:WindowedApplication> ``` # 布局 https://stackoverflow.com/questions/3477736/actionscript-mxml-mx-vs-s mx vs spark 在於版本的差異可以共用 ## 上下左右 中間 ![](https://i.imgur.com/Z8uKTrL.png) ```mxml <?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:Panel title="ButtonBar Control Example" height="100%" width="100%"> <s:Label top="0" text="up"/> <s:Label bottom="0" text="down"/> <s:Label right="0" text="r"/> <s:Label right="0" bottom="0" text="r down"/> <s:Label verticalCenter="0" horizontalCenter="0" text="mid"/> </s:Panel> </s:WindowedApplication> ``` ## 垂直排列 VerticalLayout ![](https://i.imgur.com/784TZm1.png) 一般寫法 ```mxml <?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:Group> <s:layout> <s:VerticalLayout> </s:VerticalLayout> </s:layout> <s:Button label="bt1"></s:Button> <s:Button label="bt2"></s:Button> <s:Button label="bt3"></s:Button> </s:Group> </s:WindowedApplication> ``` 簡化寫法 ```mxml <?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:VGroup> <s:Button label="bt1"></s:Button> <s:Button label="bt2"></s:Button> <s:Button label="bt3"></s:Button> </s:VGroup> </s:WindowedApplication> ``` ## 垂直排列 ![](https://i.imgur.com/jtpByJr.png) 一般寫法 ```mxml <?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:Group> <s:layout> <s:HorizontalLayout> </s:HorizontalLayout> </s:layout> <s:Button label="bt1"></s:Button> <s:Button label="bt2"></s:Button> <s:Button label="bt3"></s:Button> </s:Group> </s:WindowedApplication> ``` 簡化寫法 ```mxml <?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:HGroup> <s:Button label="bt1"></s:Button> <s:Button label="bt2"></s:Button> <s:Button label="bt3"></s:Button> </s:HGroup> </s:WindowedApplication> ``` ## 卷軸 Scroller ![](https://i.imgur.com/56XuDpn.png) ```mxml <?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:Scroller height="65"> <s:Group> <s:layout> <s:VerticalLayout> </s:VerticalLayout> </s:layout> <s:Button label="bt1"></s:Button> <s:Button label="bt2"></s:Button> <s:Button label="bt3"></s:Button> </s:Group> </s:Scroller> </s:WindowedApplication> ``` ## Buttonbar ![](https://i.imgur.com/ymFoUqu.png) ```mxml <?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication 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"--> <fx:Script> <![CDATA[ ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:ButtonBar> <s:dataProvider> <s:ArrayList> <s:Button label="bt1"> </s:Button> <s:Button label="bt2"> </s:Button> <s:Button label="bt3"> </s:Button> </s:ArrayList> </s:dataProvider> </s:ButtonBar> </s:WindowedApplication> ``` # 事件處理 ## 按鈕呼叫事件 ```mxml trace ("hello world!") ``` 相當於其他語言debug ,log 顯示在console， 物件宣告完id後，並可以在Action Script直接呼叫也就是fx script那邊 ![](https://i.imgur.com/Y32aDYw.png) ![](https://i.imgur.com/wD8V1z3.png) ```mxml <?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication 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"--> <fx:Script> <![CDATA[ public function test_button():void{ trace ("hello world!") } ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:Button id="button" label="test" click="test_button()"> </s:Button> </s:WindowedApplication> ``` ## 按鈕呼叫事件並傳遞參數 ![](https://i.imgur.com/I6yec0i.png) ```mxml <?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication 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"--> <fx:Script> <![CDATA[ public function test_button(a:String ,b:int):void{ trace ("hello world!" +a +b.toString()) } ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:Button id="button" label="test" click="test_button('傳遞過去',1)"> </s:Button> </s:WindowedApplication> ``` ## 呼叫事件 part2 一樣可以達到這種效果 ```mxml <?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication 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"--> <fx:Script> <![CDATA[ public function test_button(event:MouseEvent):void{ trace ("hello world!") } ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:Button id="button" label="test" click="test_button(event)"> </s:Button> </s:WindowedApplication> ``` ## 系統事件 creationComplete initialization ```mxml <?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="test_com(event)"> <!-- minWidth="955" minHeight="600"--> <fx:Script> <![CDATA[ import mx.events.FlexEvent; public function test_com(event:FlexEvent):void{ trace ("hello world!") } ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> </s:WindowedApplication> ``` 初始話可以加在最上端 https://help.adobe.com/zh_TW/FlashPlatform/reference/actionscript/3/flash/events/MouseEvent.html#MOUSE_MOVE * 還有一種事件處理方式算是為其控件加入監聽的方法以後再來看... ## 事件的監聽 分別是新增監聽事件和移除事件和發送事件 ```actionscript function addEventListener(eventName:String, listener:Object, useCapture:Boolean=false, priority:Integer=0, useWeakReference:Boolean=false):Boolean; function removeEventListener(eventName:String, listener:Object, useCapture:Boolean=false):Boolean; function dispatchEvent(eventObject:Event):Boolean; ``` # 進階開發 好像大多數軟體開發都是基於這種模式 這樣來看假設要拆分元件(公司規定!) ![](https://i.imgur.com/ROqiwlt.png) 這樣來說的話 兩個Obj的東西是看不到的 但是Main卻得到兩個Obj裡面的東西 這時候我們就要來運用到上面 事件處理的裡面的事件的監聽 很簡單 ![](https://i.imgur.com/PELSx0m.png) 假設我們在物件上按下一個按鈕，我們就發送一個訊號通知 監聽的Main知道，我在obj物件做了什麼事 然後Main在做出相對應的處理 因為我們obj之間是無法得知互相的內容，所以要統一由Main做溝通 我們來看實際範例吧! 我們可以看到我們的creationComplete 在物件初始化的時候並呼叫了initAPP這函數 那麼我們還要再撰寫一個actionscript 整體專案長 ![](https://i.imgur.com/gWjZnNv.png) 請注意引用package ```actionscript package events { import flash.events.Event; public class eventobj extends Event { public var str:String public function eventobj(type:String,input_str:String) { this.str=input_str; super(type,true); } } } ``` 再來是主畫面 ```mxml <?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:components="compoents.*" creationComplete="test_com(event)" xmlns:components1="components.*" > <!-- minWidth="955" minHeight="600"--> <fx:Script> <![CDATA[ import mx.events.FlexEvent; import events.eventobj; public function test_com(event:FlexEvent):void{ this.addEventListener("TEST", test_function); } private function test_function(event:eventobj):void { trace (event.str) panel2.textinput.text=event.str; } ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:VGroup> <components1:panel id="panel1"/> <components1:panel2 id="panel2"/> </s:VGroup> </s:WindowedApplication> ``` 再來新增一個panel ```mxml <?xml version="1.0" encoding="utf-8"?> <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Script> <![CDATA[ import mx.events.FlexEvent; import events.eventobj; public function test(event:MouseEvent):void { this.dispatchEvent(new eventobj("TEST",text.text)) } ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:VGroup> <s:Button label="click me!" id= "but" click="test(event)" /> <s:TextInput id="text"/> </s:VGroup> </s:Group> ``` 再來新增一個panel2 ```mxml <?xml version="1.0" encoding="utf-8"?> <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <s:TextInput id="textinput"/> </s:Group> ``` ![](https://i.imgur.com/atV76XE.png) 按下按鈕後就會發現我們能用事件傳遞自定義參數了!!! # 類別 ## 創建一個類別並呼叫 ![](https://i.imgur.com/oIoWy0U.png) 我們創立一個actionscript的類別位於 ```actionscript import testing.tmp; ``` ![](https://i.imgur.com/wKXxdaP.png) ```actionscript package testing {[Bindable] public class tmp { public var CardId:Number; public function tmp() { CardId=10; } public function get_ID():Number { return CardId; } } } ``` 再來回到我們的test並引入tmp類別 ![](https://i.imgur.com/JjXS8j7.png) ```mxml <?xml version="1.0" encoding="utf-8"?> <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="test_com(event)"> <!-- minWidth="955" minHeight="600"--> <fx:Script> <![CDATA[ import mx.events.FlexEvent; import testing.tmp; public function test_com(event:FlexEvent):void{ var test:tmp =new tmp(); trace ("hello world!") test=new tmp(); trace (test.get_ID()); } ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> </s:WindowedApplication> ``` ![](https://i.imgur.com/8P0hEG1.png) 執行後可以看到我們的console成功顯示出新建立的類別並取得 初始化的Card_Id得到10的結果。 # XML的特性 ## 插入一串XML List 給 XMLlistCollection 什麼特性呢，我們可以看到在語言特性上呢我們可以直接對XML的欄位進行新增 ![](https://i.imgur.com/aXi0JEu.png) ```actionscript <fx:Script> <![CDATA[ import mx.collections.XMLListCollection; import mx.events.FlexEvent; [Bindable] private var xlcDg:XMLListCollection=new XMLListCollection(); public function test_com(event:FlexEvent):void{ var xmlTmp:XML = new XML(); xmlTmp=<employee> <name></name> <phone></phone> <email></email> </employee> xmlTmp.employee.name="test"; xmlTmp.employee.phone="123456789"; xmlTmp.employee.email="666.@gmail.com"; xmlTmp.employee.active="false"; trace (xmlTmp); xlcDg.addItem(XMLList(xmlTmp.employee)); trace (xlcDg); } ]]> </fx:Script> ``` ```mxml <s:VGroup> <mx:DataGrid id="dg" width="100%" height="100%" rowCount="5" dataProvider="{xlcDg}"> <mx:columns> <mx:DataGridColumn dataField="name" headerText="Name"/> <mx:DataGridColumn dataField="phone" headerText="Phone"/> <mx:DataGridColumn dataField="email" headerText="Email"/> <mx:DataGridColumn dataField="active" headerText="active"/> </mx:columns> </mx:DataGrid> </s:VGroup> ``` ## 拖曳物件傳值 var tmp:xmllistcollection = new xmllistcollection(); var dragsource:dragsource= new dragspirce(); var item:xmllist= new xmllist(<test/>); item.test= "1234"; dragsource.adddata(item,"item") dragsource數據會顯示 <test> <test> 1234 </test>> </test>> tmp.addItem(dragsource.dataforformat("item")) dragsource.dataforformat("item").test[0] 得 1234 先得 datagrid dataorivude 所綁定的xmllistcolleciton 所以先得 datagrid selsection now_index = event.selectionchange.rowIndex # 雜項筆記 ## 引入pakcage 的xml檔案 <fx:> source="assets/xxx.xml" package_name/xxx.xml image 引入在地路徑檔 source = "@Embed("絕對路徑")" ## DataGrid 綁定後數據 刪除指定index值 弔詭探討 ![](https://i.imgur.com/W0zAujZ.png) 因為再對上方排序的話將會讓整個index大亂 dgtaget.dataprovider[now_index].addItem() xmllistcollection.addItem() 兩種都可以直接對畫面作為呈現 對某選項做修改時 則可以直接 dgtaget.dataprovider[now_index].欄位 但是實際上我們綁定的是xmllistcollection 的值 解決方法呢我們需要在DataGrid 插入change事件 並監測其index值，在對其相對印的xmllistcollection做搜尋的動作 搜尋到該目標後在對其相對印index進行一樣的修改即可避免程式上羅集出錯。 ## TAB頁籤初始化之謎 在插入數據後，沒有切換到改頁籤則會無法完成元件初始化 則解決方法就是插入，這樣的話就大概差不多囉。 ```actionscript creationPolicy="all" ``` https://my.oschina.net/zchuanzhao/blog/512581 ## DateFiled selectedDate var today:Date = new Date();(2018/9/2) today.month -=6;(2018/3/2) DateFiled.selecteDate = today; ## Table dataprovider="{grptable}" viewstack navigatyorcontent xxxxx ## 多國語言的方法 resources.properties: TEST.TEST="11" resourceManger.getString('resources','TEST.TEST') return 11; ## POP 一個視窗 可以傳入一個panel var xxxx:mxml = new xxx; 可以用addeventListener新增事件 則跳出一個視窗 var titlewin:titleinforwindow =popupmanger呼叫建構元 titlewin.title=....... 則可以對其視窗新增事件 titlewin.closebutton.addenentListener(MouseEvent.click,titileclose); 將彈跳出來的視窗把裡面元素設為xxx panel titlewin.addelement(xxx); titleclose(event:mouseevent) { popupmanager.removepopup(titlewin); 移除自己 } 則為右上角關閉按鈕並關閉移除 新增xxx panel 事件 也只要對 xxx.addeventListener就可即可在主畫面監控其跳出視窗並取得視窗內的按鈕事件或其回傳值 ## 非同步語言開發 資料畫面更新篇 大大講的在一個程式語言，你要先有資料還是有畫面，當然當一個程式再載入的時候，前面有講到非同步程式語言，當你POP一個NEW PANEL 的話你會發現有時候你的資料並沒有辦法馬上的傳到新NEW出來的PANEL那麼你可以做兩種方式，這邊可以有兩個解決方案。 ### 先準備好資料 一個是在初始畫面長出來的同時馬上去跟服務器要資料，然後在開啟出來的PANEL的時候把資料傳送進去，所以當NEW PANEL生成的時候可以發現，資料已經準備好了，這樣的話也就沒這問題了。 ### 先NEW PANEL，在要資料 在一個PANEL的剛生成時候，可以在裡面畫面元件都長好的時候，去做去要資料的動作，不過這裡有個缺點就是在資料量重複的時候將會讓程式不斷去做查詢的動作。 ### 複寫一個函數 當要複寫原生插件，可以用override 複寫其函數。