Flex使用弹出窗口为DataGrid添加新数据

经常在Demo中会看到列表，表格等方式来显示数据。当然有时候也需要添加数据到这些列表或者表格中。有很多方式提交，这里展示一个弹出窗口的方式来添加新的数据到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>  

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
 xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="absolute"
 width="500" height="300"
 creationComplete="init()">
  <mx:Script>
   <![CDATA[
     import mx.managers.PopUpManager;
     import mx.collections.ArrayCollection;
     
     [Bindable]
     private var notes:ArrayCollection = new ArrayCollection();
     
     private var addNoteScreen:AddNote;
     
     private function init():void
     {
       addNoteScreen = new AddNote();
       addNoteScreen.addEventListener("SaveNote", saveNote);
     }
     
     private function addNote():void
     {
       PopUpManager.addPopUp(addNoteScreen, this, true);
       PopUpManager.centerPopUp(addNoteScreen);
       addNoteScreen.author.text = "";
       addNoteScreen.topic.text = "";
       addNoteScreen.description.text = "";
     }
     
     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);
     }
   ]]>
 </mx:Script>
  <mx:Panel title="Notes"
   width="100%" height="100%"
   layout="vertical" horizontalAlign="right"
   paddingTop="3" paddingLeft="3" paddingRight="3" paddingBottom="3">
    <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>
    <mx:Button label="Add Note" click="addNote()"/>
  </mx:Panel>
</mx:Application>

 参考翻译：http://www.switchonthecode.com/tutorials/flex-datagrid-adding-rows-using-a-popup