When working with Flex one component almost always shows up, the DataGrid. Now it may not just be the DataGrid but any List based control. It is rare that I create any type of data driven application and not use one of these controls. Along with displaying information it is also useful to be able to add data. Today, I am going to go over a method that can be used for this task. The way we are going achieve data insertion is by using a popup that will hold a simple form to fill out.
If you are not familiar with the DataGrid I suggest you check out one of our other tutorials on it. Those tutorials should be able to bring you up to speed as I am not going to spend much time going into the nitty gritty detail of the DataGrid or basic interface setup.
Below we have the demo application we are going to build today. It is a very simple note taking application. The part that interests us is the "Add Note" button and the corresponding actions. You can also right click the application to view the source.
The first thing we need to do is put together a very basic interface to hold our data. This is going to include a panel with our title of "Notes", a DataGrid to show the notes, and a button to add a note.
<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>
None of the code above should look foreign, it is the same basic UI elements that are used in many of the DataGrid tutorials. The three columns associate with the variables on our Note class. What Note class you ask? Well the one we are adding right now.
{
public class Note
{
public var author : String;
public var topic : String;
public var description : String;
}
}
To really start getting things moving we need a Script block. In the script area we are going to add a variable to hold our notes. I added an ArrayCollection named notes to hold the notes. This collection can be bound to the data provider of our DataGrid. Below we see our new script block which can be added directly under the Application tag. The second snippet is our updated DataGrid tag.
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var notes:ArrayCollection = new ArrayCollection();
]]>
</mx:Script>
<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>
The next piece we are going to build is our popup, I created a new MXML component and named it AddNote. This is going have the fields to fill out for our new note. It also has two buttons, Cancel and Save. I based the component off a TitleWindow.
<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>
Okay, so we now have a popup to hold all our information. We need to add some code back into our main application to create the popup and show it when appropriate. The first step is to add a creation complete event handler with some initialization code.
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
width="500" height="300"
creationComplete="init()">
The handling function init will create an instance of the popup to be used. We also need to create the private variable that is the popup.
private function init ( ) : void
{
addNoteScreen = new AddNote ( );
addNoteScreen. addEventListener ( "SaveNote", saveNote );
}
The second step is to add a click event handler for our "Add Note" button.
We now need to create the addNote function which will show the popup. The main worker in this function is a class called PopUpManager which simplifies showing and removing of popups. After the following code I will explain a couple of the function calls in detail.
{
PopUpManager.addPopUp (addNoteScreen, this, true );
PopUpManager.centerPopUp (addNoteScreen );
addNoteScreen.author. text = "";
addNoteScreen.topic. text = "";
addNoteScreen. description. text = "";
}
There are two function calls to look at. The first addPopUp shows the popup, we pass in the component to show as the popup (our AddNote class), the parent of the popup, and whether to make it modal (means it is only thing that can be clicked on). The second function call, centerPopUp, centers the popup in its parent. We also reset all the fields on our popup.
Once the component is popped up we can do two things - save the note or cancel. Cancel is easy as we simply need to add a function to our AddNote component to close itself and hook that into the Cancel button. The function is added in a script block and we update our button to call our close function when clicked.
<![CDATA[
import mx.managers.PopUpManager;
private function close():void
{
PopUpManager.removePopUp(this);
}
]]>
</mx:Script>
The close function utilizes the PopUpManager again to remove itself from the screen. To save a note we are going dispatch a custom event from our component. We can add a custom event using the
Event metadata tag. This is wrapped in the Metadata tag and added right beneath the main TitleWindow tag. I named the event "SaveNote".
[Event(name="SaveNote")]
</mx:Metadata>
To dispatch the event we hook into the click event handler of our Save button.
The function to save is added to the script of the component. The function simply dispatches a new event of type "SaveNote".
{
this. dispatchEvent ( new Event ( "SaveNote" ) );
}
This completes all the code for our custom component. Below you can see all the code for the AddNote component.
<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>
Handling the event on the side of the main application is also quite easy. We first create the function to handle the event. I called the function saveNote. It will create a new Note object and set the properties on it from the values in the text fields from the popup. It then adds the new note to our notes collection so that the DataGrid will update and show the note. Finally, it removes the popup from the screen.
{
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 );
}
The final thing we need to do to make this all work is actually listen for our "SaveNote" event from our popup window. This can be added to our init function. This completes the code for our main application which is in its entirety below.
<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>
from:http://www.switchonthecode.com/tutorials/flex-datagrid-adding-rows-using-a-popup