Scaffolding Adobe and Spring Flex
This tutorial is walks you through the generation of software components for Adobe Flex and Spring-Flex. You will produce a ready-to-run Spring Flex application that implements the CRUD application pattern for a domain model. Spring scaffolding requires a MyEclipse Spring or Bling subscription. In this tutorial, you will learn how to:
- Scaffold from database tables into an existing project
- Set Relationship fetch type
- Update the Flex user interface
Duration Time: 30 Minutes
Don't have MyEclipse? Download Now
Note: If you get a popup regarding the project compiler compliance level not matching the workspace default, specify that you want to use a custom setting for the project by clicking Yes.
If you are using Flash Builder and want to use a Flex project, please take a look at the following forum post which helps set up the project for scaffolding: http://www.myeclipseide.com/PNphpBB2-viewtopic-t-25828.html.
Note: An optional prerequisite for this tutorial is Flash Builder plugin 4. MyEclipse for Spring comes packaged with the open source Flex 3 SDK, which is used to compile the Flex development assets into a Flash file.
- Right-click EmployeesApp, and select MyEclipse>Scaffold Spring CRUD Application.
- Select the Database Schema option, which is the type of artifact from which you want to scaffold. Click Next.
- Select the MyEclipse Derby connection from the list of configured DB connections in the MyEclipse workspace, and click Next.
- Select the CLASSICCARS schema, add the EMPLOYEE and OFFICE tables to the scaffolding list, and click Next.
- Select the Employee Java object as the parent object, and click Next.
This panel also lets you override the derived name of the Java object created from the database table.Java object names are derived automatically from table names, but the name can be overridden by double-clicking the name and typing a new name.
- Specify which layers of the application should be scaffolded and which package names should be used for each layer. All the layers are enabled by default. Type org.employeesapp as the base package. The package names for the layers are derived automatically from the base package. A sub-package (i.e., web, service, DAO, and domain) are added to the end of the base package. Click Next.
- Select the Generate checkbox for Adobe Flex to indicate which clients should be generated for the web layer, and click Next.
- Accept the default Flex options, and click Next.
By default, the Flex SDK Home is populated with the packaged Open Source Flex 4.0 SDK located in the user directory. This path isconfigurable by selecting Window>Preferences from the menu, expanding MyEclipse>Spring Code Generation, and selecting Flex.
If the Flex Builder plug-ins are installed into MyEclipse for Spring and the project contains the Flex nature, this Flex SDK Home text box will not appear.
Flex 4.0 is the default Flex MXML option. Either choice will be compiled against the Flex 4.0 SDK unless you want to use a different Flex SDK or the Flex builder plugins.
- Accept the default project configuration options, and click Next.
- Accept the default Spring Capabilities options, and click Next.
- Accept the defaults on the REST options page, and click Next.
- Accept the defaults on the Customize UI page, and click Next.
Note: The field names are derived automatically from the column names of the selected database tables, but the field name can be overridden by double-clicking the name and typing a new name.
- Accept the default locations for generated files (source code, configuration files, JSP, etc...), and click Next.
- Accept the default runtime libraries and options, and click Next.
Note: if using Spring 2.5, you'll need to consider a classpath dependency conflict described in this forum thread: http://www.myeclipseide.com/PNphpBB2-viewtopic-t-25763.html
- Click Finish on the summary page.
The current BlazeDS implementation has limited lazy loading support, so some considerations need to be mentioned when dealing with relationships. For more information and discussion about this topic and alternate options, see the Spring General forum post on Flex Scaffolding Hibernate Lazy Loading.
One-to-One or Many-to-One Relationships
To get the Employee >Office (Many-to-One) child form to populate, the FetchType annotation needs to be updated to EAGER in the EmployeesAppgeneratedorg.employeesapp.domainEmployee.java file. Open that file, and find the @ManyToOne annotation. Change the FetchType enumeration as follows:
@ManyToOne(fetch = FetchType.EAGER) @JoinColumns(@JoinColumn(name = "OFFICECODE", referencedColumnName = "OFFICECODE")) @XmlTransient Office office;
One-to-Many or Many-to-Many Relationships
Interestingly enough, no changes need to be made to these types of relationships to get the relationship results to populate. However, it needs to be noted that all relationship data for to-Many type relationships is pre-loaded automatically when the application first loads. If this becomes an issue with performance, take a look at the alternate options in the forum linked above.
- Right-click EmployeesApp, and select Run As>MyEclipse Server Application. Select the MyEclipse Tomcat server.
MyEclipse Tomcat starts and opens the application. The first page is a dashboard for accessing all scaffolded web clients. Because this tutorial scaffolded only a single parent object for Flex, the only option under Adobe Flex is View Employees.
- Click View Employees to see generated Spring Flex application in operation.
The Spring Flex application can be used to perform create, read, update, and delete functions on Employees and Offices.
To ease your way into code generation with ME4S, this tutorial involved scaffolding from only a single database table. Therefore, only the software components for managing a single entity were generated, and there were no entity relationships. When you start generating for multiple entities, potentially with entity relationships, there are many more software components generated than were generated with this tutorial. Even though there's a lot more code, it is grouped and organized as shown in the following diagrams.
Your final scaffolded application includes:
- A JPA entity corresponding to domain models (EMPLOYEE and OFFICE)
- DAOs to managing the JPA entity
- Finder methods (JPA named queries) in the DAO based on domain model fields
- Services with fully implemented CRUD operations for managing the domain model
- All necessary Spring annotations and configuration files for a Spring Flex app
- JUnits for every service and controller
- SpringSource certified code and configuration files
- Spring Framework 3.0 (Spring 2.5 optional)
- Generated Flex 4.0 mxml (Flex 3.5 optional)
- Spring BlazeDS Integration 1.0.3
- Out-of-the-box Adobe Flex 4.0 open source SDK and ant script using the mxmlc compiler that generates the swf file into the webroot
- An mxml default application with separate mxml forms and grids for CRUD operations and relationships
- A flex_src/assets folder with CSS and images. Uses embed statements and common Flex styles like backgroundGradientAlphas, up-skin, over-skin, down-skin
- Navigation to the context root
- Use of the DataGrid with dataProvider to render results from the server
- Implementation of a TabNavigator to show the CRUD operations and relationships
- A RemoteObject in separate mxml applications implemented by creating operations
- An Alert Form validation using StringValidator, NumberValidator, the Validator.validateAll method and ValidationResultEvent adhering to the General guidelines for validation
- Asterisks on required fields with the required attribute on the FormItem
- Use of the Accordion control to show child relationships
- PopUpManager implementation when deleting objects or reporting errors
- Editable DataGrid control for the child in One-to-Many or Many-to-Many relationships
- DateFormatter controls used to format Date and Time fields in forms and inside editable data grids
- Use of the dissolve alternative to fading text,
- Bindable RemoteClass domain objects with relationships
- Code that follows spring-flex-testdrive conventions, including an event driven action script architecture for created, updated, and deleted objects. Plus, a compilation of best practices found within the Flex community and recommended by Flex experts.
The following steps provide a general guideline on what to do if the Flex UI needs to be updated:
- Make modifications to the *.mxml or *.as files.
- Right-click the /build/Employeebuild.xml file, and select Run As>Ant Build.
- Check the console for a successful build or any errors.
Note: If any changes are made to the flex configuration files in WEB-INF, such as the services-config.xml, the Flex Ant script needs to be run. Those configuration files are compiled into the Flash file.