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=”http://www.adobe.com/2006/mxml” creationComplete=”doInit();” title=”Add Employee” width=”362″ height=”186″ borderColor=”#408080″ alpha=”1.0″ backgroundAlpha=”1.0″ layout=”absolute”>
    <mx:Script>
        <![CDATA[
              import mx.managers.PopUpManager;
              import mx.rpc.events.FaultEvent;
              import EmployeeManagement.*;
              import mx.rpc.AsyncToken;
              import mx.data.*;
 
              [Bindable]
              private var employee:Employee;

              private function doInit():void {
                 // Center the TitleWindow container 
                 // over the control that created it.
                 PopUpManager.centerPopUp(this);
              }

              private function addEmployee():void {
                  // Add the employee to the database, then kill this window.
                  employee = new Employee();
                  employee.firstname=newfirstname.text;
                  employee.lastname=newlastname.text;
                  var ir:ItemReference = hibernate.createItem(employee);
                  hibernate.commit();
                  PopUpManager.removePopUp(this);
              }

              private function handleFault(event:FaultEvent):void {
                  mx.controls.Alert.show(event.message.toString());

              }
         ]]>
     </mx:Script>
     <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>
           <mx:FormItem label=”Last Name”>
                   <mx:TextInput id=”newlastname” displayAsPassword=”false” width=”100%”/>
            </mx:FormItem> 
      </mx:Form>
      <mx:HBox x=”4″ y=”92″>
          <mx:Button click=”addEmployee();” label=”OK”/> 
          <mx:Button click=”PopUpManager.removePopUp(this);” label=”Cancel”/>
        </mx:HBox>
</mx:TitleWindow>

 

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

22 Responses to My First Hibernate Enabled Flex App – Part Deux!

  1. Srini says:

    Nice blog on the add employee feature. very helpful. One of the cool things i read about flex is the ability to add records in the list view/datagrid view by doubleclicking. I would like to see an working example of add employee functionality using that event, if possible.

  2. milan says:

    Works like a charm on JRun, really amazing.But not on JBoss (faultString: “No destination ’employee.hibernate’ exists in service flex.data.DataService”). Any idea what changes/settings shoud I make for this?M.

  3. Milan,First, are you running Flex.war expanded in Jboss?Second, are you positive you did all the steps in section 2 of the first part of the tutorial?

  4. milan says:

    Thanks for reply! Yes, I run it expanded (plain folder named flex.war). I did all the steps from tutorial 1 and it is working nice under JRun. But there is a lot of errors regarding hibernate configuration, when I run Jboss (too much text for comment), so I tought that using Hibernate with Flex under Jboss require different settings.M.

  5. Milan, can you send me your log file? Do you have the mysql JDBC driver in the lib folder?my email is mboucher@adobe.com

  6. milan says:

    Thank you, Marcel, I really appreciate your help! I’ve done so many changes yesterday to make it work (rebuilded hibernate, put jars here and there, etc, etc) so today I’ve decided to reinstall JBoss, and you know what? It’s working!!! Well, with your help I have working hibernate-enabled-flex solution on production server – with so little knowledge and experience – that I can’t beleive it! Keep on your good work! Thanks again!Best regards, Milan.

  7. Victor says:

    Nice blog and a very good sample application. I also had the problem – “No destination ’employee.hibernate’ exists in service flex.data.DataService”But was able to fix by changing RTMP endpoint port to 2039 in flex/services-config.xml. It seems that this port has to be different for each FDS2 application. here is the change I made -uri=”rtmp://{server.name}:2039″Hope this helps

  8. Kike says:

    ThankĀ“s a lot!!nice example…

  9. Hi,Love your example, really want to use it on our web site.How can I contact you/Jon AlexanderDirector of Salessales@e-revenues.com

  10. Marcel Boucher says:

    Jon,My email is mboucher@adobe.com.

  11. Nedim says:

    I encounter with the following error:[MessagingError message=’Unknown destination ’employee.hibernate’ for service with id ‘data-service’.’]at mx.messaging.config::ServerConfig$/getProperties()at mx.data::Metadata$iinit()at mx.data::ConcreteDataService$iinit()at mx.data::ConcreteDataService$/getService()at mx.data.mxml::DataService/set destination()at Main/::_DataService1_i()at Main$iinit()at _Main_mx_managers_SystemManager/create()at mx.managers::SystemManager/::initializeTopLevelWindow()at mx.managers::SystemManager/::docFrameHandler()I’ve read all the comments provided on first and second samples, but could not solve the problem.Any comment?Thanks in advance..

  12. Nedim says:

    I think I found my problem. It was because of having more than one Flex Data Services.

  13. Peter says:

    Hi,How do you update your grid and give a message to the user after adding a new employee?Thanks for great tutorial.

  14. Marcel Boucher says:

    Peter,You can just use a mx.controls.Alert.show(“some text”) after the hibernate.commit() call.

  15. Max says:

    Thanks for a great quickstart.I have a couple of minor sugestions though.1) If you want to follow the javas naming conventions your package EmployeeManagement should really be in lowerCamelCase, thus the java bean class would be employeeManagement.Employee.2) The button “delete selected employee” seems redundant as when you select an employee it disapears.Thanks for the good work.

  16. Ashok Manthina says:

    I downloaded the new flex 3 beta and was not able to run the simple sample.I get an error withimport mx.data. package. For some reason “data” is not part of the mx package anymore. Does anyone else faced this issue. Please help.thanks,-am

  17. MAJG says:

    Nice example, but i,ve been trying to do an app with hibernate and relational tables and until now i haven’t had luck because i can retrieve all the information from the database but when i try to add a new element that has a relation with another table it doesn’t seems to work. It will be great if you could post an example that involve Many to Many relations.

  18. Prabhu.K says:

    hi,Marvelous tutorial!!!I am also facing the same problem which flashes the below error. I am using Tomcat 6.0 server. Anyone can pls help me to run this application.???(mx.messaging.messages::ErrorMessage)#0body = (null)clientId = (null)correlationId = “D20FB6A2-ABAB-4D55-4C4D-951A537D554C”destination = “employee.hibernate”extendedData = (null)faultCode = “Server.Processing”faultDetail = (null)faultString = “No destination ’employee.hibernate’ exists in service flex.data.DataService”headers = (Object)#1messageId = “2205479C-B809-5A30-8547-58F2940288F0″rootCause = (null)timestamp = 1196502438968timeToLive = 0Thanks in Advanceregards,Prabhu

  19. Shruti says:

    Can this integration be done if my DB is MS SQL Server?If yes, which jar can I use for the same?

  20. Darren Bishop says:

    Great tutorial.I have basically used the principles/techniques here to put a Flex front-end on the Hibernate 3 tutorial.The problem I am having is that I can only create one new entity (an Event) then an I get an error the next time, something like:faultString = “Item with id ‘events-hibernate:::0’ already exists. Error on destination ‘events-hibernate'”I am trying to do this without transactions so there is no call to DataService.commit() and the data-management-config.xml has falseI can see in Tomcat (5.5) call identity() on the first attempt but not the secomd time round.Any clues?Darren

  21. leonidas says:

    hi Darreni have the same error , did u fix it ?if u did plz post it

  22. I find your article very informative. Thanks for posting!