My First Hibernate Enabled Flex App – Part Deux!

If you have not done so, start with the first part of this tutorial. This is part 2 of the Employee Manager application that I created a month ago. I think this is good timing since Milan added a comment asking about how we would add new employees to the database, not just edit and delete. So here we go, in this post, we will start where we left off in my initial tutorial.

Section 4 – Adding New Employees So now we have a Flex Data Services 2 application that allows us to display and edit database records. What if we want to add new records? This is Flex, obviously there are many ways to do this. In this tutorial, I have chosen to use the PopUpManager. The Flex PopUpManager alows us to design MXML dialogs that can be displayed as modal or non-modal windows. We will use this feature to display a non-modal window that will capture the new employee information and persist it into the database.

4.1 Define the non-modal window: Since we have walked though the Hibernate code previously, I will not repeat myself here. Let’s create the AddEmployeePopUp.mxml file. Copy and paste the following MXML into a new file in your application called AddEmployeePopUp.mxml.

<?xml version=”1.0″?>
<mx:TitleWindow xmlns:mx=”” creationComplete=”doInit();” title=”Add Employee” width=”362″ height=”186″ borderColor=”#408080″ alpha=”1.0″ backgroundAlpha=”1.0″ layout=”absolute”>
              import mx.managers.PopUpManager;
              import EmployeeManagement.*;
              import mx.rpc.AsyncToken;
              private var employee:Employee;

              private function doInit():void {
                 // Center the TitleWindow container 
                 // over the control that created it.

              private function addEmployee():void {
                  // Add the employee to the database, then kill this window.
                  employee = new Employee();
                  var ir:ItemReference = hibernate.createItem(employee);

              private function handleFault(event:FaultEvent):void {

     <mx:DataService id=”hibernate” destination=”employee.hibernate” fault=”handleFault(event)”/>
     <mx:Form x=”4″ y=”4″>
           <mx:FormItem label=”First Name”>
                  <mx:TextInput id=”newfirstname” width=”100%”/>
           <mx:FormItem label=”Last Name”>
                   <mx:TextInput id=”newlastname” displayAsPassword=”false” width=”100%”/>
      <mx:HBox x=”4″ y=”92″>
          <mx:Button click=”addEmployee();” label=”OK”/> 
          <mx:Button click=”PopUpManager.removePopUp(this);” label=”Cancel”/>


Take time to look at the AddEmployee() function in the above MXML. This function demonstrates how to add a new entry in the database.

4.2 Make the non-modal window appear: Now that we have defined our popup window, we need to call it so it will be displayed. To do this, we will add a new function to the Main.mxml application called showAddEmployeeWindow(). This function will use the PopUpManager to display our add employee window. Copy and paste this code in the script block of your Main.mxml file:


private function showAddEmployeeWindow():void {
     // Create a non-modal TitleWindow container.
     var helpWindow:IFlexDisplayObject = PopUpManager.createPopUp(this, AddEmployeePopUp , false);


NOTE: You only need to copy the function highlighted in bold. All of the other functions are already in your Main.mxml file.

So now we have a function that will displat the popup window, we need to add a button to our control bar which will display the window to add an employee. Locate the ApplicationControlBar in the Main.mxml file and add a new button:

<mx:Button label=”Add New Employee” id=”button1″ click=”showAddEmployeeWindow()”/>

That’s it! Our application now has the ability to add new records in the database.

Comments Closed