Scaffolding Adobe and Spring Flex

1. Create a Web Project

New web project

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.

2. Scaffold from Database Tables

1. Right-click EmployeesApp, and select MyEclipse>Scaffold Spring CRUD Application.
   
   Scaffolding the application
2. Select the Database Schema option, which is the type of artifact from which you want to scaffold. Click Next.
   
   Selecting artifact types from which to scaffold
3. Select the MyEclipse Derby connection from the list of configured DB connections in the MyEclipse workspace, and click Next.
   
   Selecting the DB connection
4. Select the CLASSICCARS schema, add the EMPLOYEE and OFFICE tables to the scaffolding list, and click Next.
   
   Selecting database tables from which to scaffold
5. 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.
   
   Database scaffolding options
6. 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.
   
   Application layers and packages
7. Select the Generate checkbox for Adobe Flex to indicate which clients should be generated for the web layer, and click Next.
   
   Selecting the Adobe Flex web client
8. 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.

9. 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.
   
   Flex options

10. Accept the default project configuration options, and click Next.
    
    Configuration options
11. Accept the default Spring Capabilities options, and click Next.
    
    Adding Spring capabilities
12. Accept the defaults on the REST options page, and click Next.
    
    REST options
13. 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.
    
    UI customization options
14. Accept the default locations for generated files (source code, configuration files, JSP, etc…), and click Next.
    
    Selecting target folders
15. 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
    
    Runtime dependencies
16. Click Finish on the summary page.
    
    Summary page

3. Set the Relationship Fetch Type

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.

4. Deploy the App

1. Right-click EmployeesApp, and select Run As>MyEclipse Server Application. Select the MyEclipse Tomcat server.
   
   Deploying the applicationMyEclipse 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.
2. Click View Employees to see generated Spring Flex application in operation.
   
   Dashboard

The Spring Flex application can be used to perform create, read, update, and delete functions on Employees and Offices.

5. What’s Generated?

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.

Generated scaffolding

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.

Spring Flex runtime app

6. Updating the Flex User Interface

The following steps provide a general guideline on what to do if the Flex UI needs to be updated:

1. Make modifications to the *.mxml or *.as files.
2. Right-click the /build/Employeebuild.xml file, and select Run As>Ant Build.
3. 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.