10 August 2009
Some working knowledge of Eclipse and Flex Builder (as well as some Java and Flex background) will be helpful to build the application. However, even without this background, you can still build the application from the provided source code.
Because the scope of the article is limited, the demo application is not designed in terms of an enterprise architecture. The Java backend does not follow the concept of separating services and data access objects. There are books available on Hibernate, Java Persistence Architecture and enterprise architectures. Those best practices are not considered in this article.
This tutorial is part 2 of the series “Flex, BlazeDS, and Hibernate JPA on Tomcat and MySQL”. In this article, I extend the application developed in Part 1 by adding a second database table.
How is this reflected in the application? Part 1 contained only an entity to create Consultant objects. In part 2, I introduce Project objects as well as the ability to assign Projects to Consultants using drag-and-drop (see Figure 1).
The sample application for this article makes use of the following software and technology:
The application uses a Flex front end to perform the following tasks:
The sample application uses Adobe Flex as the presentation layer. The sample files provide all the code and configuration settings that are required to deploy and launch the application.
Part 1 of this article describes how to install the software. While the same software is used for this article, in some cases I’ve updated to newer versions. For example, I use MySQL 5.1.36 now in place of MySQL 5.0.67.
Before you start developing the application, you need to start MySQL and create a database. While you can do this in Eclipse<; in this case it’s simpler to use the command prompt. To start MySQL, open a command prompt and change to the MySQL directory containing the database files; for example: C:\ADC\mysql\mysql—5.1.36—win32\bin.
Execute this command to start the database server:
Later, if you need to shutdown MySQL, you can do so by executing this command:
mysqladmin —u root shutdown
While in the MySQL folder, execute the following command from the command prompt:
mysqladmin —u root create consultant_db
The newly created database is named consultant_db. You can verify that the database has been successfully created by executing this command:
mysqlshow —u root
Hibernate will generate the database tables from the Java beans when the application is run for the first time. This is a great thing, because you do not have to worry about creating SQL statements to set up tables and columns.
See Preparing the development environment in Part 1 of this article for a detailed description of how to set up your development environment. It is important to set up the Tomcat server, so the application can be run and tested on the server.
Now you are ready to start developing the actual application. The complete source code and XML files are included with this article’s sample files. You can use the code by copying and pasting the file contents or by simply copying the files to the correct location in your file system.
The following files are used on the server:
The sample application uses the Apache log4j logging utility to log database access. You need an XML configuration file in the Java Source folder named log4j.xml to configure log4j. Use the sample log4j.xml file to create your own copy in the Java source folder.
When using the Java Persistence API (JPA) implementation of Hibernate you need to configure the entity beans. This is done with an XML configuration file called persistence.xml, which is a standard configuration file in JPA. It has to be included in the META—INF directory inside the classpath of the project or in a JAR file that contains the entity beans. The persistence.xml file must define a persistence—unit with a unique name in the current scoped classloader. Here it is for the sample application:
Create a new folder in the Java Source folder and name it META—INF. Copy the sample persistence.xml file to the META—INF folder.
On the sever side you need to extend a BlazeDS configuration file to enable the Java service to be accessed later from the Flex client. Replace the remoting—config.xml file in the project folder WebContent/WEB—INF/flex with the remoting—config.xml included with the sample files. This file adds two new destination blocks that are identified by their IDs consultantService and projectService. The services are linked to the Java service classes ConsultantService and ProjectService.
Create a new Java package beneath the Java source folder and name it com.adobe.demo.domain. You can then start creating the three Java classes.
Create a new Java class BaseDomain in the Java package com.adobe.demo.domain. Copy the code from the sample BaseDomain.java file. This class is extended by the Consultant and the Project classes, because it provides the attribute id and the attribute created as a timestamp.
Create a new Java class Consultant in the Java package com.adobe.demo.domain. Copy the code from the sample Consultant.java file. The Consultant class is the entity bean that defines the structure of the Consultant object. It also contains the annotations (a special form of syntactic metadata) that describe the database relation (here, the table including its columns) and some SQL queries. For example, the annotation @Table holds the name of the database table that will be created when the application runs the first time:
@Table(name = "consultants")
The new attribute projects stores all projects assigned to the Consultant. The annotations @ManyToMany and @JoinTable define the database relationship and result in a new mapping table named consultants_projects, which is used to store the relations.
Create a new Java class Project in the Java package com.adobe.demo.domain. Copy the code from the sample Project.java file. The Project class is the new entity bean that defines the structure for a Project object. This class also contains annotations to map the Consultant’s list attribute with the database mapping table consultants_projects. If a project is deleted, all corresponding projects that are assigned to consultants will be removed from the mappings table as well. This ensures consistent data handling.
Create a new Java class ConsultantService in the Java package com.adobe.demo. Copy the code from the sample ConsultantService.java file.
The service class contains several methods, some of which are called by the Flex application:
Create a new Java class ProjectService in the Java package com.adobe.demo. Copy the code from the sample ProjectService.java file.
The service class contains the following methods, which are called by the Flex application:
To create the client layer, begin by creating a hierarchical folder structure in the flex—src folder similar to the Java package. The following list describes each of the main files used in the Flex view.
This is the main Flex application. It contains the view components to list the consultants and the project database records.
This class is extended by the Consultant and the Project classes. It provides the attribute id and the attribute created as a timestamp.
This class defines the client object that holds the consultant information. Note that the class refers to the corresponding Java class Consultant.java. This is accomplished with the code [RemoteClass(alias="com.adobe.demo.domain.Consultant")]
This class defines the client object that holds the project information. Note that the class refers to the corresponding Java class Project.java. This is accomplished with the code [RemoteClass(alias="com.adobe.demo.domain.Project")]
This is the view component to list all consultants and to perform the actions that will change the data in the database, like add, update, and delete a consultant. When a consultant is selected in the top list, the assigned projects are then shown in the list below.
The consultant form is the Flex view component to enter or update a consultant object and to assign or remove project items from the consultant. Drag—and—drop is supported by the list components in this view.
This view component lists all available projects stored in the database and enables the user to create, update, and delete projects, as well as reload data.
This is a simple form to enter or change a project name and to save the project object to the database.
Open a web browser and enter the following URL to access the sample application:
It takes a few seconds for the database table to be generated. Once completed, the initial screen is displayed (see Figure 2).
To create a new consultant record, click Create Consultant and enter the data in the new window. Before assigning projects to the consultant you’ll need to select the Projects tab and create one or more projects. After you create some projects, you can assign those objects to a consultant (see Figure 3) and save the consultant object to the database.
The newly created record is displayed in the upper list and the assigned projects can be seen in the list at the bottom of the screen (see Figure 4).
I’ve kept the sample application fairly simple and straightforward. When you are building a more complex application with multiple tables, it is better to create more generic Java code, for example by using data access objects (DAOs).
Look for more samples in Tour de Flex that use the Hibernate assembler and data services samples.
The following resources provide more details on the technologies used in this article: