MyEclipse Logo

MyEclipse for Spring 8.6.1: Spring Flex Scaffolding Tutorial and Tips

Scaffolding a Spring-Flex CRUD application in minutes

Abstract

This tutorial details the steps required to create a fully functional SpringSource certified Java Spring 3.0 Flex 4.0 web application using MyEclipse for Spring 8.6.1.


Table of Contents

1. Introduction
2. Goal
3. Prerequisites
4. Tweak the Derby Tables
5. Create Web Project
6. Scaffold from Database Tables
7. Flex BlazeDS Lazy Loading
8. Deploy the App
9. What's generated?
10. Steps to update the Flex User Interface
11. Conclusion
12. Additional Developer Resources

1. Introduction

Scaffolding consists of generating full or major portions of an application by applying standard application patterns from a minimal set of inputs provided by the developer. In some cases the scaffolded applications are used as-is, but in other cases the scaffolded artifacts are used as a starting point for additional customization by a developer. In either case scaffolding, originally popularized by the RAILS and GRAILS frameworks, is very effective at jump-starting application development.

Adobe Flex is a highly productive, free, open source framework for building expressive web applications that deploy consistently on all major browsers, desktops, and operating systems by leveraging the Adobe® Flash® Player and Adobe AIR® runtimes.

Spring-Flex BlazeDS Integration is a top-level Spring project, and a component of the complete Spring Web stack. This project's purpose is to make it easier to build Spring-powered Rich Internet Applications using Adobe Flex as the front-end client.

MyEclipse for Spring uses the Create-Read-Update-Delete (CRUD) application pattern for generating applications that allows the end-user to manage application data. While CRUD isn't the only application pattern, it's a fairly typical application pattern. While not all web applications are satisfied solely by the CRUD application pattern, developers find that the resulting generated application artifacts lend themselves to being easily re-used, customized and extended. CRUD applications are tied to an application domain model that is used as the input into the scaffolding engine. The domain model can exist in many forms, and the MyEclipse for Spring scaffolding functionality supports the use of Java beans, JPA entities, or database tables as inputs.

2. Goal

Figure 2. Spring Flex runtime app created in minutes

Spring Flex runtime app created in minutes

This tutorial is going to walk you through producing a ready-to-run Spring Flex application that implements the CRUD application pattern for a domain model.

  • Domain model: CUSTOMERS, EMPLOYEE, and PAYMENT tables from the MyEclipse Derby database.

  • Target Container: MyEclipse Tomcat

  • Target Database: MyEclipse Derby

MyEclipse for Spring will be used to generate the entire application within a matter of minutes that includes:

  • A JPA entity corresponding to domain models (CUSTOMER, EMPLOYEE, and PAYMENT)

  • 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 the 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-toMany 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,

  • Creates Bindable RemoteClass domain objects with relationships, and

  • Code which 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 to us by Flex experts.

3. Prerequisites

The prerequisites needed to complete this tutorial are:

  • Download MyEclipse for Spring 8.6

  • OPTIONAL: Flash Builder plugins 4. As noted above, MyEclipse for Spring 8.6 comes packaged with the open source Flex 3 SDK, which is used to compile the Flex development assets into a flash file.

4. Tweak the Derby Tables

To show both a One-to-One and One-to-Many relationship in this example, we need to quickly tweak the Derby database. In order to get a CUSTOMER 1-to-1 EMPLOYEE relationship, a foreign key needs to be added to the CUSTOMER table.

  1. Open and Go to the MyEclipse DB Browser view. Open the MyEclipse Derby connection.

  2. Navigate to CLASSICCARS > TABLE > CUSTOMER. Right-click on the CUSTOMER table, and choose New Foreign Key.

  3. Fill out the Foreign Key Wizard as shown below, and click Finish.

    • Foreign key name: FK_CUSTEMP (or whatever makes sense)

    • Referenced table name: EMPLOYEE

    • Foreign key columns: SALESREPEMPLOYEENUMBER

    Figure 3. Foreign Key Wizard to Create the CUSTOMER 1-to-1 EMPLOYEE relationship

    Foreign Key Wizard to Create the CUSTOMER 1-to-1 EMPLOYEE relationship

5. Create Web Project

  1. Create a MyEclipse Web Project (or Eclipse Dynamic Web Project) called CustomersApp

    NOTE: 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.

6. Scaffold from Database Tables

It's now time to automatically generate all the necessary Java/Spring code and configuration files to implement the CRUD application.

  1. Right-click on the CustomersApp project, and choose MyEclipse > Scaffold Spring CRUD Application from...

    Figure 4. Scaffolding Menu Option

    Scaffolding Menu Option

  2. The first step is to select the type of artifact you want to scaffold from. As mentioned in the tutorial introduction there are a variety of possible inputs into scaffolding. For this tutorial we're going to scaffold from an existing database table that comes with MyEclipse Derby database. Choose the Database Schema option on the Select Artifact Type(s) panel. Click the Next button.

    Figure 5. Select Artifact Type(s)

    Select Artifact Type(s)

  3. The next step is to select the DB connection for accessing the MyEclipse Derby database. This panel will show you all configured DB connections in the MyEclipse workspace, and you must select the MyEclipse Derby connection, which is a preconfigured DB connection in MyEclipse. Click the Next button.

    Figure 6. Specify Persistence Connection Properties

    Specify Persistence Connection Properties

  4. The next step is to select the desired schema and database table(s) that should be used for scaffolding. When the CLASSICCARS schema is selected the tables list will be populated with a list of all the available tables. Add the CUSTOMER,PAYMENT,and EMPLOYEE table to the scaffolding list. Click the Next button.

    Figure 7. Select Database Tables

    Select Database Tables

  5. The next panel will prompt you to select parent objects, and this panel also lets you override the derived name of the Java Object that will be created from the database table. Select the Customer Java object for parent. Click the Next button.

    Figure 8. Database Scaffolding Options

    Database Scaffolding Options

    Note: Java Object names are automatically derived from table names, but the name can be overridden by double-clicking on the name and typing a new name.

  6. The next step is to 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. Enter org.customerapp as the base package. The package names for the different layers will be automatically derived from the base package. A sub-package (i.e. web, service, DAO, and domain) will be added to the end of the base package.

    Figure 9. Application Layers and Packages

    Application Layers and Packages

  7. The next step is to specify which web clients should be generated for the web layer. As you can see, there are a variety of different web clients available, including Spring MVC, Spring Web Flow, Adobe Flex, GWT, and iPhone. This tutorial is focused on Spring Flex, so click on the Generate checkbox for Adobe Flex.

    Figure 10. Select Adobe Flex Web Client

    Select Adobe Flex Web Client

  8. The following wizard pane shows Flex Options. By default, the Flex SDK Home is populated with the packaged Open Source Flex 4.0 SDK located in the user directory. This path is configurable through Windows > Preferences > MyEclipse > Spring Code Generation > 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 show.

    The next choice indicates which Flex MXML version will be generated, Flex 4.0 being the default. 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.

    Figure 11. Flex Options

    Flex Options

  9. The next step is in an optional step to customize the UI. For this tutorial keep the defaults, and click Next.

    Figure 12. Customize UI

    Customize UI

  10. The next few panels provide optional configurations for the project structure and dependencies. For this tutorial, keep the defaults and click the Next button through both of them. 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.

  11. The final panel will give you a summary of everything that will be generated for you. Click the Finish button to scaffold the application from the information you provided in the wizard.

    Figure 13. Summary

    Summary

7. Flex BlazeDS Lazy Loading

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 myeclipseide.com Spring General forum post on Flex Scaffolding Hibernate Lazy Loading.

  • One-to-One or Many-to-One relationships: To get the Customer > Employee (Many-to-One) child form to populate, the FetchType annotation needs to be updated to EAGER in the CustomersApp\generated\org\customerapp\domain\Customer.java file. Open that file, and find the @ManyToOne annotation. Change the FetchType enumeration as follows:

    @ManyToOne(fetch = FetchType.EAGER) 
    @JoinColumns( { @JoinColumn(name = "SALESREPEMPLOYEENUMBER", referencedColumnName = "EMPLOYEENUMBER") }) 
    @XmlTransient Employee employee;

  • 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 the relationship data for to-Many type relationships will be 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.

8. Deploy the App

  1. To deploy the application, right-click on the CustomersApp project and select Run As --> MyEclipse Server Application.

    Figure 14. Run As --> MyEclipse Server Application

    Run As --> MyEclipse Server Application

  2. MyEclipse Tomcat will start up. The first page will be a dashboard for accessing all scaffolded web clients. Since this tutorial only scaffolded a single parent object for Flex, the only option under Adobe Flex is View Customers. Click the button to see generated Spring Flex application in operation.

    Figure 15. Dashboard

    Dashboard

  3. The Spring Flex application can be used to perform create, read, update, and delete functions on Customers, Customer Payments, and Customer Employee. The following screen shots show some of the views.

    Figure 16. CustomerApps - List & View

    CustomerApps - List & View

    Figure 17. CustomerApps - Add Payment

    CustomerApps - Add Payment

9. What's generated?

The following image provides a good illustration of what is generated with Flex Scaffolding:

Figure 18. What's generated with Flex Scaffolding

What's generated with Flex Scaffolding

  • Spring Elements: Part of the Spring Nature that is included in the MyEclipse Standard Spring Tools consisting of Spring IDE features like the Bean View.

  • [/resources] Generated Spring, Hibernate, Log4j, and JTA configuration and property files containing everything needed to conventionally configure a ready to run Spring application.

  • [/generated] Spring backend: Spring enabled Data Access Objects, Domain, and Service layer completely implemented with create, read, update, and delete operations.

  • [/build] Flex Compile mxmlc ant build script that runs once automatically after scaffolding. If the mxml is updated, just right-click on the Customerbuild.xml file and Run As... Ant Build.

  • [/flex_src/assets] Flex Assets folder containing all the styles, images, and skins (Flex 4.0) for a typical Flex front-end.

  • [/flex_src/customer/mxml] CRUD Flex components to support the parent and child relationship Flex componentry and operations.

  • [/flex_src/org/customerapp/domain/*.as] Bindable RemoteClass Action Script Objects representing the domain layer with included Event architecture.

  • [/flex_src/org/ManageCustomer.mxml] Default mxml application.

  • [/WebRoot/flexweb/customer/ManageCustomer.swf]: Compiled Flash File (from Customerbuild.xml).

  • [/WEB-INF/config & /WEB-INF/flex]: Spring-flex and flex configuration files.

10. Steps to update 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/Customerbuild.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, like the services-config.xml, the Flex Ant script needs to be run. Those configuration files are compiled in to the Flash file.

11. Conclusion

Now that you have a running Spring Flex application, you may want re-run the tutorial and scaffold different web clients, including Spring MVC, Web Flow, GWT, and iPhone.

You may also want to try the Spring Annotator and JAX-WS Annotator tutorials which are available in the Eclipse help system and online (see Additional Developer Resources).

What was your experience with this tutorial? Share your experience with us by completing a very brief survey.

12. Additional Developer Resources

Thank you for you interest in MyEclipse for Spring. If you are interested in learning more, the following developer resources are available:

Developer Resources