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.
<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
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.
Posted by: Srini | September 28, 2006 07:48 AM
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.
Posted by: milan | September 28, 2006 12:37 PM
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?
Posted by: Marcel Bouher | September 28, 2006 12:49 PM
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.
Posted by: milan | September 28, 2006 02:03 PM
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
Posted by: Marcel Bouher | September 28, 2006 02:15 PM
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.
Posted by: milan | September 29, 2006 04:28 AM
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
Posted by: Victor | November 7, 2006 07:01 AM
Thank´s a lot!!
nice example...
Posted by: Kike | January 10, 2007 03:33 AM
Hi,
Love your example, really want to use it on our web site.
How can I contact you/
Jon Alexander
Director of Sales
sales@e-revenues.com
Posted by: Jon Alexander | January 17, 2007 04:40 PM
Jon,
My email is mboucher@adobe.com.
Posted by: Marcel Boucher | January 21, 2007 10:09 AM
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..
Posted by: Nedim | March 29, 2007 06:46 PM
I think I found my problem. It was because of having more than one Flex Data Services.
Posted by: Nedim | April 26, 2007 03:21 PM
Hi,
How do you update your grid and give a message to the user after adding a new employee?
Thanks for great tutorial.
Posted by: Peter | May 8, 2007 05:22 PM
Peter,
You can just use a mx.controls.Alert.show("some text") after the hibernate.commit() call.
Posted by: Marcel Boucher | May 9, 2007 08:39 AM
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.
Posted by: Max | June 4, 2007 12:03 PM
I downloaded the new flex 3 beta and was not able to run the simple sample.
I get an error with
import 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
Posted by: Ashok Manthina | July 20, 2007 11:39 PM
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.
Posted by: MAJG | August 15, 2007 02:58 PM
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)#0
body = (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)#1
messageId = "2205479C-B809-5A30-8547-58F2940288F0"
rootCause = (null)
timestamp = 1196502438968
timeToLive = 0
Thanks in Advance
regards,
Prabhu
Posted by: Prabhu.K | December 1, 2007 04:57 AM
Can this integration be done if my DB is MS SQL Server?
If yes, which jar can I use for the same?
Posted by: Shruti | March 13, 2008 12:01 PM
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 false
I can see in Tomcat (5.5) call identity() on the first attempt but not the secomd time round.
Any clues?
Darren
Posted by: Darren Bishop | March 14, 2008 12:20 PM
hi Darren
i have the same problem , did u fix it ?
help plz
Posted by: leonidas | May 14, 2008 05:33 PM
hi Darren
i have the same problem like u, did u fix it ?
thx
Posted by: leonidas | May 15, 2008 07:01 AM