Flex使用彈出窗口爲DataGrid添加新數據

首先，我們開始建設一個基本的界面結構，一個帶有“Notes"標題的Panel,一個DataGrid，以及一個用於提交數據的按鈕。
Xml代碼

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application
3. xmlns:mx="http://www.adobe.com/2006/mxml"
4. layout="absolute"
5. width="500" height="300">
6. <mx:Panel title="Notes"
7. width="100%" height="100%"
8. layout="vertical" horizontalAlign="right"
9. paddingTop="3" paddingLeft="3" paddingRight="3" paddingBottom="3">
10. <mx:DataGrid width="100%" height="100%">
11. <mx:columns>
12. <mx:DataGridColumn headerText="Author" dataField="author" width="80"/>
13. <mx:DataGridColumn headerText="Topic" dataField="topic" width="100"/>
14. <mx:DataGridColumn headerText="Description" dataField="description"/>
15. </mx:columns>
16. </mx:DataGrid>
17. <mx:Button label="Add Note"/>
18. </mx:Panel>
19. </mx:Application>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="500" height="300">
<mx:Panel title="Notes"
width="100%" height="100%"
layout="vertical" horizontalAlign="right"
paddingTop="3" paddingLeft="3" paddingRight="3" paddingBottom="3">
<mx:DataGrid width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn headerText="Author" dataField="author" width="80"/>
<mx:DataGridColumn headerText="Topic" dataField="topic" width="100"/>
<mx:DataGridColumn headerText="Description" dataField="description"/>
</mx:columns>
</mx:DataGrid>
<mx:Button label="Add Note"/>
</mx:Panel>
</mx:Application>

這些代碼看起來並不陌生，DataGrid三個列的數據對應我們Note類的三個屬性，我們定義Note類如下：
Xml代碼

1. package
2. {
3. public class Note
4. {
5. public var author:String;
6. public var topic:String;
7. public var description:String;
8. }
9. }

package
{
public class Note
{
public var author:String;
public var topic:String;
public var description:String;
}
}

要真正使得我們的數據開始運轉，我們還需要一個腳本塊：需要一個數據結構來保存我們的Note信息。這裏我們使用 notes：ArrayCollection來記錄我們要添加和已經添加的數據。這些數據能夠在DataGrid中顯示，是因爲我們要把它設置成爲 DataGrid的provider.接下來我們先定義和初始化這個notes.
Js代碼

1. <mx:Script>
2. <![CDATA[
3. import mx.collections.ArrayCollection;
4.
5. [Bindable]
6. private var notes:ArrayCollection = new ArrayCollection();
7. ]]>
8. </mx:Script>

<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;

[Bindable]
private var notes:ArrayCollection = new ArrayCollection();
]]>
</mx:Script>

然後在把它設置成爲datagrid的provider.
Xml代碼

1. <mx:DataGrid dataProvider="{notes}" width="100%" height="100%">
2. <mx:columns>
3. <mx:DataGridColumn headerText="Author" dataField="author" width="80"/>
4. <mx:DataGridColumn headerText="Topic" dataField="topic" width="100"/>
5. <mx:DataGridColumn headerText="Description" dataField="description"/>
6. </mx:columns>
7. </mx:DataGrid>

<mx:DataGrid dataProvider="{notes}" width="100%" height="100%">
<mx:columns>
<mx:DataGridColumn headerText="Author" dataField="author" width="80"/>
<mx:DataGridColumn headerText="Topic" dataField="topic" width="100"/>
<mx:DataGridColumn headerText="Description" dataField="description"/>
</mx:columns>
</mx:DataGrid>

接下來，我們就要創建一個彈出的窗口，這裏使用的是Flex組件TitleWindow.我們起名爲AddNote.mxml.它將用於輸入界面，通過它，可以輸入與datagrid三列屬性對應的數據。它還包含兩個按鈕：cancel和save.
Xml代碼

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
3. layout="absolute" width="348" height="218"
4. title="Add A Note">
5. <mx:Label text="Author" x="35" y="10"/>
6. <mx:TextInput id="author" width="150" x="84" y="8"/>
7. <mx:Label text="Topic" y="36" x="42"/>
8. <mx:TextInput id="topic" width="150" x="84" y="34"/>
9. <mx:Label text="Description" y="62" x="10"/>
10. <mx:TextArea id="description" width="234" height="77" x="84" y="61"/>
11. <mx:Button label="Cancel" x="193" y="146"/>
12. <mx:Button label="Save" x="264" y="146"/>
13. </mx:TitleWindow>

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="348" height="218"
title="Add A Note">
<mx:Label text="Author" x="35" y="10"/>
<mx:TextInput id="author" width="150" x="84" y="8"/>
<mx:Label text="Topic" y="36" x="42"/>
<mx:TextInput id="topic" width="150" x="84" y="34"/>
<mx:Label text="Description" y="62" x="10"/>
<mx:TextArea id="description" width="234" height="77" x="84" y="61"/>
<mx:Button label="Cancel" x="193" y="146"/>
<mx:Button label="Save" x="264" y="146"/>
</mx:TitleWindow>

好了，我們已經擁有一個可以作爲數據輸入的界面，我們還要在我們的主程序中設定在某個合適的時間初始化並且顯示這個窗口，這個任務就交給了 Application的creation complete事件。即在Application 創建的時候執行：
Xml代碼

1. <mx:Application
2. xmlns:mx="http://www.adobe.com/2006/mxml"
3. layout="absolute"
4. width="500" height="300"
5. creationComplete="init()">

<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="500" height="300"
creationComplete="init()">

在這個init()函數中，我們創建了AddNote的一個實例，並設置監聽來自save按鈕的saveNote事件
Js代碼

1. private var addNoteScreen:AddNote;
2.
3. private function init():void
4. {
5. addNoteScreen = new AddNote();
6. addNoteScreen.addEventListener("SaveNote", saveNote);
7. }

private var addNoteScreen:AddNote;

private function init():void
{
addNoteScreen = new AddNote();
addNoteScreen.addEventListener("SaveNote", saveNote);
}


Xml代碼

1. <mx:Button label="Add Note" click="addNote()"/>

<mx:Button label="Add Note" click="addNote()"/>

當用戶點擊addNoe按鈕的時候就要彈出剛纔創建的窗口。這裏我們使用PopManager來簡單管理窗口的創建和關閉。
Js代碼

1. private function addNote():void
2. {
3. PopUpManager.addPopUp(addNoteScreen, this, true);
4. PopUpManager.centerPopUp(addNoteScreen);
5. addNoteScreen.author.text = "";
6. addNoteScreen.topic.text = "";
7. addNoteScreen.description.text = "";
8. }

private function addNote():void
{
PopUpManager.addPopUp(addNoteScreen, this, true);
PopUpManager.centerPopUp(addNoteScreen);
addNoteScreen.author.text = "";
addNoteScreen.topic.text = "";
addNoteScreen.description.text = "";
}

這裏有兩個方法，方法一addPopUp，就是彈出窗口，這裏我們傳輸了三個參數，addNoteScreen爲AddNote的一個實例，this爲當前窗口，true爲是否設是否只有彈出的窗口可被點擊，即是否只有彈出的窗口處於Active狀態。第二個方法，就是設置彈出窗口的位置。

當窗口彈出來的時候，我們可以做兩件事情，一提交保存用戶輸入數據，二是簡單的關閉窗口。如果關閉窗口，我們也使用PopManager管理器：
Js代碼

1. <mx:Script>
2. <![CDATA[
3. import mx.managers.PopUpManager;
4.
5. private function close():void
6. {
7. PopUpManager.removePopUp(this);
8. }
9. ]]>
10. </mx:Script>

<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;

private function close():void
{
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>


Xml代碼

1. <mx:Button label="Cancel" click="close()" x="193" y="146"/>

<mx:Button label="Cancel" click="close()" x="193" y="146"/>

若要保存用戶提交的數據，我們需要調度一個自定義的事件.我們使用Event metadata tag來創建我們的自定義事件，而這個<metadata>標記將在TitleWindow中創建。
Java代碼

1. <mx:Metadata>
2. [Event(name="SaveNote")]
3. </mx:Metadata>

<mx:Metadata>
[Event(name="SaveNote")]
</mx:Metadata>

要調度這個時間，我們必須和按鈕save掛鉤起來：
Xml代碼

1. <mx:Button label="Save" click="save()" x="264" y="146"/>

<mx:Button label="Save" click="save()" x="264" y="146"/>

這個方法將添加到腳本中，這個方法就是簡單調度SaveNoe事件：
Js代碼

1. private function save():void
2. {
3. this.dispatchEvent(new Event("SaveNote"));
4. }

private function save():void
{
this.dispatchEvent(new Event("SaveNote"));
}

下面是TitleWindow所有代碼：
Xml代碼

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
3. layout="absolute" width="348" height="218"
4. title="Add A Note">
5. <mx:Metadata>
6. [Event(name="SaveNote")]
7. </mx:Metadata>
8. <mx:Script>
9. <![CDATA[
10. import mx.managers.PopUpManager;
11.
12. private function close():void
13. {
14. PopUpManager.removePopUp(this);
15. }
16.
17. private function save():void
18. {
19. this.dispatchEvent(new Event("SaveNote"));
20. }
21. ]]>
22. </mx:Script>
23. <mx:Label text="Author" x="35" y="10"/>
24. <mx:TextInput id="author" width="150" x="84" y="8"/>
25. <mx:Label text="Topic" y="36" x="42"/>
26. <mx:TextInput id="topic" width="150" x="84" y="34"/>
27. <mx:Label text="Description" y="62" x="10"/>
28. <mx:TextArea id="description" width="234" height="77" x="84" y="61"/>
29. <mx:Button label="Cancel" click="close()" x="193" y="146"/>
30. <mx:Button label="Save" click="save()" x="264" y="146"/>
31. </mx:TitleWindow

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" width="348" height="218"
title="Add A Note">
<mx:Metadata>
[Event(name="SaveNote")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import mx.managers.PopUpManager;

private function close():void
{
PopUpManager.removePopUp(this);
}

private function save():void
{
this.dispatchEvent(new Event("SaveNote"));
}
]]>
</mx:Script>
<mx:Label text="Author" x="35" y="10"/>
<mx:TextInput id="author" width="150" x="84" y="8"/>
<mx:Label text="Topic" y="36" x="42"/>
<mx:TextInput id="topic" width="150" x="84" y="34"/>
<mx:Label text="Description" y="62" x="10"/>
<mx:TextArea id="description" width="234" height="77" x="84" y="61"/>
<mx:Button label="Cancel" click="close()" x="193" y="146"/>
<mx:Button label="Save" click="save()" x="264" y="146"/>
</mx:TitleWindow

要把彈出窗口中用戶輸入的數據顯示在Application 中的datagrid中，其實也很簡單，就是要數據綁定。前面的[Bindable]中的notes:ArrayCollecton就要與我們彈出窗口中的用戶輸入數據綁定起來。這個方法由save按鈕觸發後執行：
Js代碼

1. private function saveNote(e:Event):void
2. {
3. var note:Note = new Note();
4. note.author = addNoteScreen.author.text;
5. note.topic = addNoteScreen.topic.text;
6. note.description = addNoteScreen.description.text;
7. notes.addItem(note);
8. PopUpManager.removePopUp(addNoteScreen);
9. }

private function saveNote(e:Event):void
{
var note:Note = new Note();
note.author = addNoteScreen.author.text;
note.topic = addNoteScreen.topic.text;
note.description = addNoteScreen.description.text;
notes.addItem(note);
PopUpManager.removePopUp(addNoteScreen);
}

在綁定之後，即顯示在Application datagrid中之後，我們要把彈出的窗口關閉，即removePopUp。這裏就是全部的介紹了，下面是Application的代碼：
Xml代碼

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application
3. xmlns:mx="http://www.adobe.com/2006/mxml"
4. layout="absolute"
5. width="500" height="300"
6. creationComplete="init()">
7. <mx:Script>
8. <![CDATA[
9. import mx.managers.PopUpManager;
10. import mx.collections.ArrayCollection;
11.
12. [Bindable]
13. private var notes:ArrayCollection = new ArrayCollection();
14.
15. private var addNoteScreen:AddNote;
16.
17. private function init():void
18. {
19. addNoteScreen = new AddNote();
20. addNoteScreen.addEventListener("SaveNote", saveNote);
21. }
22.
23. private function addNote():void
24. {
25. PopUpManager.addPopUp(addNoteScreen, this, true);
26. PopUpManager.centerPopUp(addNoteScreen);
27. addNoteScreen.author.text = "";
28. addNoteScreen.topic.text = "";
29. addNoteScreen.description.text = "";
30. }
31.
32. private function saveNote(e:Event):void
33. {
34. var note:Note = new Note();
35. note.author = addNoteScreen.author.text;
36. note.topic = addNoteScreen.topic.text;
37. note.description = addNoteScreen.description.text;
38. notes.addItem(note);
39. PopUpManager.removePopUp(addNoteScreen);
40. }
41. ]]>
42. </mx:Script>
43. <mx:Panel title="Notes"
44. width="100%" height="100%"
45. layout="vertical" horizontalAlign="right"
46. paddingTop="3" paddingLeft="3" paddingRight="3" paddingBottom="3">
47. <mx:DataGrid dataProvider="{notes}" width="100%" height="100%">
48. <mx:columns>
49. <mx:DataGridColumn headerText="Author" dataField="author" width="80"/>
50. <mx:DataGridColumn headerText="Topic" dataField="topic" width="100"/>
51. <mx:DataGridColumn headerText="Description" dataField="description"/>
52. </mx:columns>
53. </mx:DataGrid>
54. <mx:Button label="Add Note" click="addNote()"/>
55. </mx:Panel>
56. </mx:Application>