Flex and Java

Last saved: 1/6/2010 Allmon and Anderson / Flex on Java 1

©Manning Publications Co. Please post comments or corrections to the Author Online forum:
http://www.manning-sandbox.com/forum.jspa?forumID=455

2 Allmon and Anderson / Flex on Java Last saved: 1/6/2010

MEAP Edition
Manning Early Access Program

Copyright 2009 Manning Publications

For more information on this and other Manning titles go to
www.manning.com


Licensed to Wow! eBook <www.wowebook.com>


Part 1: Getting started
1. Some Flex with your Java
2. Beginning with Java
3. Getting Rich with Flex
4. Connecting to Web Services

Part 2: Strengthening the backend
5. BlazeDS remoting and logging
6. Flex messenging

Part 3: Going above and beyond
7. Securing and personalizing your application
8. Charting with DeGrafa
9. Desktop 2.0 with Adobe AIR
10. Testing your Flex app with FlexUnit
11. Flex on Grails




1
Some Flex with your Java?

This chapter covers:

The basics of Flex

The components we utilize alongside Flex and Java

In 1995, Sun introduced the first Java platform and with it birthed the “applet.” The
applet allowed Java applications to run inside the browser with rich functionality and all the
benefits of the Java framework, including connecting to the server side. The applet became
hugely popular for a couple of years but then its popularity waned. The applet adoption rate
dropped mainly because of problems surrounding the browser plugin. Building features in an
applet from scratch or even other rich implementations can be expensive compared to the
simplicity of using the Flex framework.
Figure 1.1 displays a simple Java Applet datagrid next to a Flex datagrid. The Flex
datagrid not only looks much nicer out of the box than the applet; it's also much more
functional. The Flex DataGrid and AdvancedDataGrid components provide built-in support for
such tasks as sorting, dragging columns, row highlighting, data nesting, and styling.




Figure 1.1 Comparing a Java applet DataGrid to a Flex Advanced DataGrid

Macromedia embraced the idea of having a dedicated runtime environment for the
browser and in the year 1997 debuted the Flash Player. The Flash runtime provides
lightweight graphics and animation capabilities in manageable file sizes. This has made the
player hugely successful across operating systems and browser platforms. The Flash runtime
allows for Rich applications to have true stateful experiences and a high level of security.

A STATEFUL FLEX EXPERIENCE
A stateful experience with Flex means that the client (Flex) will manage or remember
everything it needs to without needing to submit to the server side, update and manage
a session or request through Hyper Text Protocol (HTTP), and then refresh the client side
with updated data after a submit with data from the session or request.

In general, Java developers have done extremely well in leveraging the principles of
Object Oriented Programming (OOP) to build extremely stable, testable, and extensible
applications. Flex has become a rich internet application (RIA) solution for Java developers
because it not only bridges the gap between a solid server side and a great user interface; it
is built on top of solid OOP principles such as abstraction, encapsulation, inheritance, and
polymorphism.
These advantages benefit other technologies besides pure Java. As you'll see in (the
bonus) Chapter 11, when we demonstrate Flex integration with one of the hottest new
frameworks for web development, Groovy on Grails. We'll work on a bug tracking system to
complement other sample applications throughout the book. Integrating Flex with Grails is
just as easy as with Java and, in many respects, even easier.
Flex development is now bolstered with many of the benefits of Java-like frameworks for
performing unit testing, continuous integration, and agile development practices. The




combination of frameworks and the Flex SDK allows even beginning developers to begin
developing applications immediately.
A thriving Flex open source community can offer Java developers components as simple
as a custom navigation tree or button and as complex as a datagrid that allows a user to sift
through items in an iTunes CoverFlow visual format. Most of these custom components
simply extend stock Flex objects found in the SDK. Adobe made Flex 3.0 open source and it
now has a ton of community resources available. It’s worth mentioning that the FlexSDK with
Adobe’s built-in charting components is still commercial for some reason.
We have chosen to show you Flex for Java because of the powerful duality of a rich and
stateful client in conjunction with a powerful server side. Also, Java is broadly used in the
mainstream and is the existing server-side for many Flex migration projects. While there are
currently other alternative ways for doing RIA development, Flex will most likely prove to be
a champion RIA framework because of the simplicity and testability it provides to developers.
We are now ready to discuss some of Flex framework features.

1.1 A whirlwind tour of Flex
It’s time to take a peek at the components we’ll use throughout this book. We won’t go into
too much detail about the components as that is beyond the scope of this book. Instead, we
will focus on the usage of components and framework in real world development.

1.1.1 MXML and ActionScript
At the heart of every Flex application you’ll find a combination of MXML files (XML files with
the .mxml extention) and ActionScript classes. They are the basic building blocks of the Flex
framework. The Flex compiler takes these files and creates a SWF file which is then
executed in the Flash Player.
MXML
MXML is a XML based markup language similar to HTML/XHTML. The MXML syntax is used
to declaratively define your application. MXML has numerous tags for common user interface
objects, such as text input fields, radio buttons, and dropdown lists. It also has many user
interface components and layout components that are common to rich client development,
such as menu bars, tabbed panels, data grids, and navigational trees. In addition to these
controls it's possible to build custom components that extend existing ones or do completely
something different. For instance, in chapter 8 we will be covering the Degrapha drawing API
to create a pie chart for a samle application.
ACTIONSCRIPT
ActionScript, and more specifically ActionScript 3.0, is a dynamic scripting language
based on the ECMAScript Language Specification, Third Edition. It is composed of two parts:
the language specification itself and the Flash Player API. It is very similar to JavaScript in
syntax, so it should look very familiar to any experienced web developer. Unlike JavaScript,
ActionScript is actually compiled into byte code before being executed instead of being
parsed and interpreted at runtime.



UTILIZING BUILT-IN ACTIONSCRIPT CONTROLS
Dozens of user controls, powered by ActionScript, are available with Flex out of the box.
As we demonstrate later in this book, existing components can be extended to create
your own custom components. Since your application will always run inside the Flash
Player, you don’t have to worry about cross-browser compatibility issues either. In
Chapter 8 we will go over how to utilize custom components in your Flex applications
using ActionScript for the purpose of reuse.

ActionScript is a dynamically typed language similar to Python or Groovy and does its
type checking at runtime instead of at compile time. You have the option of directing the
compiler to perform type checking at compile time by enabling strict mode on the compiler,
but this is not a good substitute for a comprehensive set of unit tests.
Flex Software Development Kit (FlexSDK) and Flash Player are the two key elements in
making a Flex application come to life. We will now briefly introduce those elements along
with BlazeDS.
Now comes the part we’ve all been waiting patiently for—we’re going to create a “Hello
World” application in Flex.

CREATING AN APPLICATION IN FLEX
Let's start by modeling our directory structure, shown in Figure 1.2, after the Maven default
project structure. This will prove useful since we are using Maven to build the Flex-Bugs
sample application in chapter 2.
The sample application can be placed in a project directory such as C:devprojects for
Windows, or /home/user/dev/projects Linux.

Figure 1.2 The folder structure for our “Hello World” application is formatted for the Maven build
convention.

The main source code location for our hello world sample application will be contained in
the src/main/flex folder. Since ActionScript follows a similar pattern for packages as Java, if




your ActionScript class belongs to the com.example package, the source for this class will be
contained in the src/main/flex/com/example folder. The src/main/resources folder should
contain any resources that belong to the application but are not compiled with the sources.
For example, any configuration files or message bundles belong in the resources folder. The
src/test/flex and src/test/resources folders are identical to the src/main/flex and
src/main/resources folders respectively, the only difference being that these folders are for
the test code of the application.
In true “Hello World” fashion, we are going to start simple and create the simplest Flex
application possible in Chapter 3. We'll expand on that and produce a Flex client application
that interacts with a Java web application server-side. For the purpose of introducing some
Flex code, the following snippet demonstrates a very trivial example of a simple Flex
application. We are going to create a single .mxml file that will print out the words “Hello
World”.

<?xml version="1.0" encoding="utf-8"?> #1
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" #2
layout="absolute">
<mx:Text text="Hello World!"/> #3
</mx:Application>

#1 XML document declaration
#2 MXML application root node
#3 MXML Text element

If you’ve done any web development before, this should at least look somewhat familiar
to you. MXML, just like XHTML is nothing more than XML. At the beginning of the file you’ll
see the standard XML declaration (#1). Immediately following this you’ll see the root node
(#2), which in most Flex applications will be the <mx:Application> element. In chapter 3,
we will greatly evolve this example by creating a nice Flex application. In Chapter 9, where
we talk more about Adobe AIR, the root node for an AIR application is typically
<mx:WindowedApplication>. Inside of the <mx:Application> element is a single
<mx:Text> element (#3) with its text attribute set to “Hello World!”.
In order to see the wonderful things you can do in Flex, including the beloved Hello
World application, there must be a way to build the application. Now that we’ve created the
“Hello World” application, let’s discuss our build options.

1.1.2 The FlexSDK
The FlexSDK comes in two flavors: the Free Adobe Flex SDK and the Open Source Flex SDK.
Both contain everything you need in the way of developing, optimizing, and debugging Flex
applications. It includes the ActionScript and MXML compilers, tools for creating JavaDoc-like
documentation, and the Flex Framework. The only real difference is that the Free Adobe Flex
SDK contains some additional components that enhance the Flex application, such as tools
for advanced font encoding, tools for packaging AIR applications, and the Flash Player. These
extra components are not open source but have been made freely available by Adobe.




1.1.3 BlazeDS
Up until fairly recently if you wanted to connect your data driven application to a Java based
backend, your choices were fairly limited. You could expose your Java services as XML Web
Services, either as SOAP based or RESTful and connect to them this way, write your own
custom marshaller/unmarshaller based on the Adobe AMF protocol, or pony up big bucks for
a license for Adobe’s LiveCycle Data Services. With the release of Flex 3, however, Adobe
decided to spawn an open source project named BlazeDS, which contains much of the
functionality specific to connecting Flex to a Java based service. In Chapter 4, we cover
more about how to connect to Java using both web services and the BlazeDS components.

1.1.4 Flash Player 10
Of course none of this could be possible without the Flash Player 10 runtime. It is the
heart and soul of every Flex application. While the Flash Player itself is not open source, it
has been available free of charge since its inception. The Flash Player can be found on
nearly every computer in the world. The Flash Player gives your Flex applications the ability
to execute and look the same no matter what browser your application runs in. Because
your Flex application runs inside the Flash Player, you do not have to be concerned with
cross browser issues.

Adobe Contributes ActionScript engine source to Mozilla
In November of 2006, Adobe contributed the source code for their ActionScript Virtual
Machine to the Mozilla foundation, thus spawning the Tamarin project. Tamarin will in the
future support ECMAScript Edtion 4 and be integrated into the SpiderMonkey project,
Mozilla’s next generation JavaScripting engine to be included with future versions of
Mozilla (Mozilla 2008).

Because of the widely popular Flash Player and a powerful open source SDK, Flex is a
great fit for Java developers needing to build rich clients.
Now let's take a peek at how we'll utilize Flex in this book.

1.2 Inside Flex on Java
This book is primarily for any developer who would like to learn how to integrate Flex on
Java. With that in mind, we looked for the perfect ingredients to equip its readers with the
right tools needed in real world scenarios without overcomplicating things.
We took a more purist approach to development and used good design patterns and
didn't introduce any MVC or other event-based frameworks to help us with that. The point
being, if our readers learn how to devlop in this way, using the inherit event-based Flex API
and framework, they will be able to integrate pretty much any framework out there with
intuity and better understand when is the right time to do so.
Our focus will also not be on teaching Java. Even though we will build a Java web
application in chapter 2 the intent of this book is not to teach our readers Java. In fact, we




went to great lengths to figure out how to avoid as much Java learning curve as possible and
still allow the readers that are new to Java to build a simple Java web application. That's why
we chose a good framework that will help us with that.
Flex on Java will provide readers with powerful examples in how to integrate the two
technologies. Since, it's Flex on Java there's more of a focus on Flex itself and is concerned
with the integration with Java.
Therefore, we will be tackling the following topics in detail.

1.2.1 Beginning with Java
In chapter 2 we begin by laying a foundation by rapidly building a sample Java web
application to work with. This will be useful if you don't already have an application or need a
little assistance in getting started with setting up a Flex on Java development environment.
Setup type chapters can feel slightly mechanical because of the downloads and installations
they must ramble through. However, we've tried to keep it interesting and painless while
using some popular development environment frameworks that majority of the readers will
be pleased to see being utilized.
With the big picture in mind we carefully chose the Java technologies used in chapter 2.
Most Java developers will feel at home while developers new to Java shouldn't feel
overwhelmed and can also download the full sample application.

1.2.2 Building a Flex Interface
Chapter 3 will demonstrate building a disconnected Flex client. We will be creating the
beginnings of a rich user interface for the Flex-Bugs sample application shown in figure 1.3.




Figure 1.3 The Flex-Bugs sample Flex application

A disconnected Flex client can take advantage of mock data and can allow developers to
easily prototype the user interface without the complexity of external dependencies.

1.2.3 Integrating with Web Services
Integrating Flex with the server side is what this book is all about. It allows us to go from
mock to real inside a sample Flex client. In chapter 4 we will demonstrate connecting to the
Java server side and how to leverage the powerful Flex API for connecting to web services.
What readers may find different in this chapter is that we will actually connect to the
server side through the Model-View-Presenter (MVP) design pattern instead of the typical
approach of simply using the mxml tag element approach that doesn't scale well for most
applications.
Now that this chapter is going to connect to the server-side services we will be covering
event dispatching and handling in detail. Interfaces and views will also be covered as we
design a clean, well designed Flex client, that will scale on demand.

1.2.4 Integration with BlazeDS, Logging and Messaging
Integrating Flex with Java is what this book is all about. That's why in chapter 5 will
demonstrate further how to connect a Flex client more directly to the server-side using the




opensource BlazeDS framework. BlazeDS provides a mechanism for allowing Flex to call
methods on Java objects through binary serialization. This is much faster than what's
possible with Web Services or XML/HTTP(s) because it's using real objects and doesn't have
to marshal XML.
Since logging is a critical component to any application and development environment,
chapter 5 also covers BlazeDS logging in detail.
Real-time messaging is an important feature in most enterprise applications. Chapter 6
will also demonstrate how to develop Flex applications that take advantage of simple polling
and JMS in chapter 11. The Flex framework provides an API that enables distributed
communication with the server-side or between clients that is loosely coupled and
asynchronous. Flex has both a powerful and simple API for handling messaging.

1.2.5 Securing Flex Applications
Security is something that seems to be missing in most technical books for some reason. In
a utopian society we wouldn't need it but it's always the elephant in the room when
gathering requirements for an application. However, since we don't live in utopia we better
understand how it works in Flex. If not handled with care, security can be one of the most
expensive features in a business application. Chapter 7 will demonstrate building
authentication, authorization, and personalization with Spring Security (Acegi) integration.

1.2.6 Creating custom Flex controls with DeGrafa
One of the most powerful features of Flex has to do with what is not in the SDK. Confused?
In chapter 8 we will explore creating and leveraging custom Flex controls with the open
source framework DeGrafa. DeGrafa is a declarative graphics framework that provides a
suite of graphics classes. DeGrafa can be used to build robust charts, tools, and other
graphical elements with less effort and complexity.
In chapter 8 will create a custom pie chart component that will be appropriately tied into
our sample application in good taste. We will also demonstrate creating a DataGrid
ItemRenderer and perform dynamic object creation.

1.2.7 Desktop 2.0 with Adobe AIR
A Business sometimes can't live with the web alone. For times when a desktop client is the
best way to go Flex goes beyond the web with Adobe AIR. A Flex application can easily be
ported to a desktop environment with AIR. This is especially easy for applications built with a
good design. Chapter 9 will demonstrate how to allow a Flex application to live in two worlds,
creating a key and signing a Flex/AIR application, and packaging and distributing an AIR
application.

1.2.8 Flex on Grails
Finally, chapter 11 will cover Flex integration with Groovy and Grails. There we will build a
standalone application end-to-end demonstrating the power of Flex and Grails development
together.




The Groovy programming language is the first dynamic scripting language to be adopted
as a standard through the Java Community Process (JCP). The specification for Groovy can
be found under Java Specification Request (JSR) 241 on the web at
http://jcp.org/en/jsr/detail?id=241. While Groovy supports powerful features that can be
found in others like Python, Ruby and Smalltalk, Grails (a groovy DSL) provides a rapid
development environment for both server-side and the web that rivals the Ruby on Rails
(RoR) framework. With Flex on Grails you can quickly create a dynamic application that runs
on the JVM with much less effort.

1.3 Summary
Whether you are new to building web or desktop applications with Flex on Java or an
experienced developer, this book will teach you how to integrate Flex on Java quickly and
effectively. In this chapter we introduced the basic elements of Flex and the additional
components we'll utilize throughout the book, but in the next chapter we'll focus on building
the Java side of our application.




2
Beginning with Java

This introduction covers

Generating the application structure with Maven

Building some Java server-side domain objects and services

Building a simple JSP user interface

Now that we've introduced you to the basics of Flex and the additional components we'll
utilize, we will begin by creating a Java web application. The Java application will expose web
services so that we can later connect to them from a Flex client.
We have attempted to not tie the book to a specific sample application by focusing more
on the concepts and techniques around using various frameworks and tools. This should
allow you to pick a topic in the book that interests you and get rolling on it. However, we will
demonstrate many topics by using a application built in this chapter called “Flex-bugs”. So, if
you want to follow the samples of in the book you can download the full code listings on the
book's website at http://manning.com/allmon. You could also replace the application
contents with something else that's more meaningful to you by changing the domain objects
to manage whatever you want like contacts, movie favorites, etc. Feel free to play with the
code snippets all you want! Lean into the big picture concepts and techniques we hope will
help you successfully integrate Flex with Java.
Throughout the book, especially in this chapter, we leverage a few Java frameworks that
help to lighten the amount of work there is in building a fully functional web application. This
chapter is a little mechanical in nature because we need to set up a development
environment. So, there are a few downloads and installs that must take place if you choose
to use our samples. You may find that you can just browse through this chapter and do only
what you haven't done already before moving on.




The Java frameworks used will help to keep development to a minimum for creating a
sample application to work with for integration purposes. This will allow us to focus on
teaching and demonstrating how to build synergy between Flex and Java.

2.1 Working with Appfuse
In order to have a Java application to work with from chapter 3 on, we decided to build that
first. However, you can start with Flex in chapter 3 if you'd like or move around the book as
you find it convenient. We decided to do build the Java application first since the largest
percentage of readers will be refactoring existing applications to include a Flex client and this
will give you something to play with fast.
In this chapter we'll start off by generating the project structure with the Apache Maven,
a convention-over-configuration project management framework. Maven will build the
application for us and speed up the development process for us. Once we have a project
structure generated, we'll start building the server-side components while leveraging MySQL
for the database.
As for the Java server-side pieces we will start with creating some Plain Old Java Objects
(POJOs), some Data Access Objects (DAOs), and some service objects that will be exposed
to a Web tier.
Before we begin writing a Flex client that integrates with Java we'll first setup a simple
Java server side application using the AppFuse framework. AppFuse was created by Mark
Raible of Raible Designs for the purpose of simplifying the construction of Java web
applications through convention. Using AppFuse on the server side will allow us to focus on
the integration of Flex with Java creating simple domain and service Java objects.
Since the layers of architecture and complexity can make approaching the building of a
Java web application a bit daunting AppFuse is a great technology choice. For those not
familiar with building Java web applications Appfuse will simplify the task of dealing with the
layers and delivering value faster.
AppFuse allows a Java developer to quickly start focusing on business domain concerns. A
typical Java application will be POJO driven and wired together through the open source
dependency injection (DI) framework Spring. The dependency injection design pattern helps
to build applications with loosely coupled components making your application more flexible
and testable. The following steps will guide you through setting up your development
environment with the AppFuse framework.
Finally, Appfuse comes stocked with Maven integration to make things even easier and
that's where our development set up begins. So, let's get things rolling by installing Maven.

2.2 Generate the application structure with Maven
To pigeon hole Maven and call it a build system really doesn’t do it justice. Apache Maven is
much more than just a build system; it is described as a software project management and
comprehension tool. So what exactly does that mean? At the core of every Maven project is




a project object model, or more affectionately known as the POM, and from this POM Maven
can build, generate reports, generate documentation, and more, all from a single description
of the project. If you’d like to learn more about Maven you can either check out the Apache
Maven project site at http://maven.apache.org or download the free e-book from Sonatype
at http://www.sonatype.com/book.
Before we get going with Maven we need to be sure we first have the Java Development
Kit (JDK) properly installed. You can follow the next section for that or skip it if you're ready
to go. After we install the JDK we will be sure to install the MySQL database as well. We will
need MySQL installed before generating the project with the Appfuse Maven archetype.

2.2.1 Download and Install the Java Development Kit (JDK)
In order to run any Java server side environment the JDK must be installed and
configured. Download and install JDK 1.6+ from the Sun website at
http://java.sun.com/javase/downloads/index.jsp. Set up an environment variable for
JAVA_HOME that points to the JDK directory. It's also helpful to add the JDK's bin directory
to the path. Open up a command prompt and type in java –version, in order to verify that
Java is installed correctly. The version information of the configured JDK should be presented
as shown in figure 2.1.

Figure 2.1 Verify that Java is set up correctly by checking the version

Once Java is configured we can move on to setting up the open source MySQL database.

2.2.2 Download and Install MySQL
In order to demonstrate database integration and persistence we will use MySQL. MySQL
is an open source database that is extremely lightweight. Download and install MySQL 5.x
from the MySQL website at http://dev.mysql.com/downloads/mysql/5.0.html#downloads.




SET UP A DATABASE
Here we will set up a database for the Flex-Bugs sample application. After you have
MySQL installed pull up the command prompt and login to MySQL using the root account and
then create the Flexbugs database as shown in figure 2.2. Using the command mysql -u root
-p will instruct MySQL to login to the localhost instance of MySQL using the root account. It
will then ask for the password. Please keep record of the admin account's user and password
for later reference. Creating the database is as simple as executing the command create
database flexbugs.

Figure 2.2 Using the MySQL commands to login into the database instance and create the Flexbugs
database

Now let's move on to installing Maven for creating the project structure, managing the
dependencies, building the application.

2.2.3 Download and Install Maven
Maven can be downloaded at http://maven.apache.org/download.html. Be sure to
download version 2.0.9 or above. Once Maven is downloaded it can be configured by simply
setting up a M2_HOME environment variable that points to where Maven was installed. The
M2_HOME/bin directory will need to be set onto the path as well or exported for any Unix
platform. For more assistance on installing or configuring Maven visit the Maven website here
http://maven.apache.org/download.html#Installation.

2.2.4 Create a Maven Multi-module Project
We are going to create a Maven Multi-Module project called Flex-Bugs. A multi-module
project could be configured manually by creating a top-level “super POM”, adding projects
under the super POM directory, and editing the super POM to include the modules with the



modules element. However, we are going to use a technique that exploits a little known
feature of the archetype:create plugin, and the Maven site archetype to kickstart the project.
Creating a multi-module project has many benefits, one of them being the ability to build
every artifact in a project with one simple “mvn compile” command. Another benefit is that if
you are using either the maven eclipse:eclipse plugin or the idea:idea plugin, you can enter
this command at the root of the project and it will generate all of the project files for all of
the contained modules.
First we'll generate the top level project using the maven-archetype-site-simple
archetype using the following command:

mvn archetype:create
-DgroupId=org.foj
-DartifactId=flex-bugs
-DarchetypeArtifactId=maven-archetype-site-simple

This archetype generates a Maven project with the directory structure as shown in figure

2.3.

Figure 2.3 The generated top-level maven project

The project that is generated is the minimum project setup to generate site
documentation. The index.apt file is the main index page for the site, and is written in the
Almost Plain Text format, which is a wiki like format. You can also generate a more complete
site project using the maven-archetype-site archetype like this,

-DgroupId=[Java:the project's group id]
-DartifactId=[Java:the project's artifact id]
-DarchetypeArtifactId=maven-archetype-site

This will generate a project structure similar to figure 2.4.




Figure 2.4 A fully dressed up maven site project

After you have generated the site project, edit the pom.xml created from the site
archetype plugin. Make sure the packaging type is set to “pom” like in listing 2.1. We've left
stuff out for brevity.

Listing 2.1 Packaging of type “pom” indicates a multi-module project.
<project>
<modelversion>4.0.0</modelversion>
<groupid>org.foj</groupid>
<artifactid>flex-bugs</artifactid>
<version>1.0-SNAPSHOT</version>
<packaging>pom</packaging> #1
...
</project>

Cueballs in code and text
#1 Artifact type (jar, war, ear, ect.)

By setting the packaging type to “pom” (#1), any projects you generate from the root of
the project directory will insert itself into the project by creating an entry into the modules
section of the pom.xml for the site.
Appfuse comes stocked with custom Maven archetypes. The different archetypes allow
Appfuse to create different flavors of Java web applications with varying technology stacks.
We will use the Struts 2 Basic archetype for the flexbugs sample application.
In the root directory of your project that you created above, type in the command in
listing 2.2.

Listing 2.2 Create the flex-bugs-web module for the java server-side




-DarchetypeGroupId=org.appfuse.archetypes #1
-DarchetypeArtifactId=appfuse-basic-struts #2
-DremoteRepositories=http://static.appfuse.org/releases #3
-DarchetypeVersion=2.0.2 #4
-DgroupId=org.foj.flex-bugs #5
-DartifactId=flex-bugs-web #6

The appfuse-basic-struts (#2) archetype isn't a built-in maven resource. Instead, it's
provided through a remote repository (#3). You provide maven with coordinates to the
archetype by also providing the archetypeGroupId (#1) and version (#4) along with the rest
of the required details. The groupId (#5) points to the top-level project and the artifactId
(#6) is the name of the module you are about to create.
Once you've executed the command, look inside the top-level pom.xml from the main
project. There should now be an entry towards the bottom of the file like the following.

...
<modules>
<module>flex-bugs-web</module>
</modules>
...

Executing the command in listing 2.2 should generate the project structure shown in
figure 2.5. Do not be concerned with the warnings while creating your project, they are
expected. As long as you see BUILD SUCCESSFUL at the end, your project was created
successfully.




Figure 2.5 Generated module structure using the appfuse-basic-struts archetype

As you can see from figure 2.5 Maven was able to generate the project structure and
even added in a couple files for us to test it out.

2.2.5 Maven provides a buildable Project
If you look in the src/main/java/org/foj package you will find a source file called
App.java. This Java class contains a single “hello world” method that will return the text
“Hello” when invoked. Further down the project structure, in the test folder, you will see the
AppTest.java junit test. This contains a single unit test that exercises the App.java class to
ensure it returns hello. We can remove those files later. However, if you're new to Maven
you may be wondering why this is significant and rightfully so. The answer will be found in
executing the “mvn jetty:run-war” goal later and seeing what happens.
The first thing to notice is that it appears to be building something. In fact, the flex-bugs-
web POM tries to build a deployable Java web application archive or “war” but will first choke
on a configuration issue. If running the mvn jetty:run-war cmd without changing the
configuration you will most likely get this error.

[INFO] --------------------------------------------------------------------
----
[ERROR] BUILD ERROR




[INFO] --------------------------------------------------------------------
----
[INFO] Error executing database operation: CLEAN_INSERT

Embedded error: Access denied for user 'root'@'localhost' (using password:
NO)
[INFO] --------------------------------------------------------------------
----
[INFO] For more information, run Maven with the -e switch

So, let's first edit the POM for the flex-bugs-web module. It will be located at the root of
that module. There's a whole lot of stuff going on in there but we are going to focus on the
piece we need to change. Clear down to the bottom we need to specify our MySQL user and
password. Here's an example:
...
<jdbc.username>root</jdbc.username>
<jdbc.password>java4ever</jdbc.password>
...
The maven archetype we used, brought to us by Appfuse, made it extremely easy to get
to this point and is far easier than starting from scratch.

2.2.6 Running the Flex-Bugs-Web application
Maven equips a developer with the ability to use the application immediately without
manually deploying it anywhere. Executing the maven jetty:run-war goal from the Flex-
Bugs-Web module will gather all the resources, compile all the code and tests, execute the
unit tests, generate test reports, build a deployable war file, and launch the war file in an
embedded instance of the very popular and lightweight Jetty servlet container. Using the
appfuse-basic-struts archetype will also generate the default database for us and add some
additional configuration files in order to allow developers to quickly get developing features.
Once you've run the jetty:run-war command you can now go to
http://localhost:8080/flex-bugs-1.0-SNAPSHOT and login from there. By default, you can
login to the application using “admin” for both the username and password. Once logged in
you are redirected to the administration panel as seen in figure 2.6. From there you can do
basic things like editing your user profile and managing users.




Figure 2.6 Appfuse default application

There is nothing glamorous at this point in regards to the application. However everything
you see and can do at this point has been with only a little setup effort. Appfuse does much
under the covers for us from a framework and technology perspective. In fact, it's possible
that it just saved us a week or more of typical Java development time when getting a project
together with a little help from Maven.
Before we start development of the Flex-Bugs sample application it's good to know that
the source code is available for download at https://flexonjava.googlecode.com/svn/flex-
bugs/trunk.

2.3 Build the Model Objects
A model object is a simple POJO that will be persistable and mapped to the database.
Appfuse uses the Spring framework in conjunction with Hibernate to manage performing
database operations for objects that are mapped to a database.

First let's start with Issue.java as seen in listing 2.3. For the flex-bugs application we
need something to store Issues and Comments. An Issue is something that describes
something that needs fixed to meet a requirement. This could be a bug, a new feature, a
refactor, or an optimization for example. A single issue can have many comments so there
will be a relationship built between the Issue and Comment objects.

Listing 2.3 The Issue model object



package org.foj.model; # 1

import org.apache.commons.lang.builder.EqualsBuilder; #2
...

@Entity #3
public class Issue extends BaseObject implements Serializable { #4

private Long id; #5
private String project;
private String description;
private String type;
private String severity;
private String status;
private String details;
private String reportedBy;
private Date reportedOn;
private String assignedTo;
private Double estimatedHours;

@Id #6
@GeneratedValue(strategy = GenerationType.AUTO) #7
public Long getId() { #8
return id;
}

public void setId(Long id) { #9
this.id = id;
}

...

@Override # 10
public int hashCode() {
return new HashCodeBuilder(11, 37).append(id).toHashCode();
}

@Override # 11
public boolean equals(Object o) {
if (null == o) return false;
if (!(o instanceof Issue)) return false;
if (this == o) return true;

Issue input = (Issue) o;
return new EqualsBuilder()
.append(this.getId(), input.getId())
.isEquals();

}

@Override # 12
public String toString() {
return new ToStringBuilder(this, ToStringStyle.MULTI_LINE_STYLE)
.append(id)
.append(project)
.append(description)




.toString();
}
}

#1 Model Java Package
#2 Import declarations
#3 Java persistence framework
#4 Issue extends Appfuse BaseObject
#5 Class instance variables
#6 Declares database pk relationship
#7 Indicates how to generate id
#8 “getter” method returns Id
#9 “setter” method sets Id
#10 hashcode to distinguish objects
#11 equals to distinguish objects
#12 toString provides object info
We will be storing the model objects in the org.foj.model Java package (#1) and will use
the Appfuse framework in conjunction with the Spring Framework and Hibernate to simplify
our application development. Spring provides a dependency injection and more while
Hibernate provides a means to build persistable objects (#3) with an object-oriented design.
The Id (#6) and GeneratedValue (#7) annotation help to facilitate the persistence by
designating a field as a database primary key.
The Issue object is a subclass of the Appfuse BaseObject (#4) and contains the instance
variables (#5) we need to describe an Issue. All of the instance variables or “fields” have
getters (#8) and setters (#9) required by the Java bean specification.
Extending BaseObject requires us to override the toString (#13), equals (#12), and
hashcode (#12) methods since they're defined as abstract in the BaseObject class. To
implement these methods we are leveraging the Apache Commons Builder package (#2) for
creating the elements for these methods. Any time you are implementing the Serializable
interface, it's a good idea to also implement the equals and hashCode methods.

Constructing the application
It's fair to say that we've formatted the book and code examples to be more consumable
by the reader rather than verbosely describing the development process as it would have
been performed. In reality, we constructed the application by building out the Issue
object end-to-end and then added the Issue Comments after that. A user story driven
approach to development reduces complexity, saves time, and increases productivity by
helping to keep tasks simple by only focusing on one feature at a time. Task estimates for
stories are smaller and more manageable and this helps to enable more visibility and
agility in a project.




Next we will create a model object for a Comment. The comment, as seen in listing 2.4,
will be another persistable object. There can be many comments to a single issue. For the
remainder of the code snippets in chapter 1 we will use “...” for trivial things like imports and
getters and setters of similar objects.

Listing 2.4 The Comment model object
...

@Entity
public class Comment extends BaseObject implements Serializable { #1

private Long id;
private Issue issue;
private String author;
private Date createdDate;
private String commentText;

@Id
@GeneratedValue(strategy = GenerationType.AUTO)
public Long getId() {
return id;
}

public void setId(Long id) {
this.id = id;
}

@ManyToOne(fetch = FetchType.EAGER)
#2
public Issue getIssue() {
return issue;
}

public void setIssue(Issue issue) {
this.issue = issue;
}

...

@Override
public int hashCode() {
return new HashCodeBuilder(11, 37).append(id).toHashCode();
}

@Override
public boolean equals(Object o) {
if (null == o) return false;
if (!(o instanceof Issue)) return false;
if (this == o) return true;

Issue input = (Issue) o;
return new EqualsBuilder()
.append(this.getId(), input.getId())
.isEquals();



}

@Override
public String toString() {
return new ToStringBuilder(this, ToStringStyle.MULTI_LINE_STYLE)
.append(id)
.toString();
}

}

#1 Comment declaration
#2 Comment has a many-to-one relationship with Issue

There's not much different from an Issue POJO to a Comment (#1). The class fields are
related to comments and there is a Many-to-one relationship (#2) with Issue. We've also
told Hibernate that we'd like it to eagerly fetch the Issue when returning the Comment. In
normal Java web development we could rely on a plugin to keep the session open for us to
lazily load the Issue object only when it's referred to at runtime, but since our Flex
application runs external to the JVM we cannot take advantage of this luxury.
Now that we have our model objects built we can now create a set of Data Access Objects
or “DAOs”. We will need a DAO for Issue and Comment.

2.4 Build the DAOs
AppFuse provides some generic implementations for your DAO objects that you can leverage
if your DAOs do nothing more than the basic create, retrieve, update, delete (CRUD)
operations. Since our IssueDao will do nothing more than these basic operations, there is no
need for us to define a concrete IssueDao and can instead use the GenericHibernateDao
which you'll see when we wire up the beans in the application context later. Our
CommentDao however needs to implement a couple of operations that go beyond the basic
CRUD operations so we'll first create an interface for the CommentDao shown in listing 2.5.

Listing 2.5 The CommentDao.java
...

public interface CommentDao extends GenericDao<Comment, Long> {

List<Comment> getCommentsByIssueId(Long issueId);

void deleteAllCommentsForIssueId(Long issueId);

}




The CommentDao has two simple methods, one that returns a list of Comment objects by
passing in the issueId argument, and another to delete all of the comments for an issue.
The second method is there to facilitate the deleting of issues. Since we have a foreign key
relationship from Comment to Issue, we cannot delete an Issue if any Comments are
referring to it.

NOTE
We defined the relationship from Comment to Issue by annotating the field with a
@OneToOne annotation, and could have also defined the reverse of that relationship in
the Issue class by including a Set of Comments belonging to an issue. However because
of the fact that we could not lazy load those objects, it would have forced us to eager load
the Comments into the Set, which would force those Comments to eager load their
Issues, which forces the Issues to eager load their Comments, and so on. This usually
will occur in a stack overflow because you've effectively got a circular reference that will
cause an infinite loop of eager fetching.

Now let's implement the CommentDaoImpl as seen in listing 2.6.

Listing 2.6 The CommentDaoImpl.java
...

public class CommentDaoImpl extends GenericDaoHibernate<Comment, Long>
implements CommentDao {

public CommentDaoImpl() {
super(Comment.class);
}

@Override
@SuppressWarnings("unchecked")
public List<Comment> getCommentsByIssueId(Long issueId) {
return getHibernateTemplate().find("from Comment where issue_id = ?",
issueId);
}
}

Much like the IssueDaoImpl, CommentDaoImpl extends GenericDaoHibernate but
implements CommentDao. The only thing really interesting happening here is that we have a
method that returns a list of Comment objects by leveraging the Hibernate template and a
query. Spring and Hibernate are a wonderful combination and make for clean and intuitive
DAO objects.
Now that we constructed the DAOs we can now move on to building some services.




2.5 Build the services
Now we just need to expose some services to the web tier. We will be able to take advantage
of these services for the Flex client we will be building, starting in chapter 2. Again we'll start
with some interfaces like IssueManager in listing 2.7.

Listing 2.7 The IssueManager.java
package org.foj.service;

import org.foj.model.Issue;
import javax.jws.WebService;

@WebService
public interface IssueManager { #1

java.util.List<Issue> getAll(); #2
Issue get(Long id); #3
Issue save(Issue issue); #4
void remove(Long id); #5

}

#1 IssueManager interface declaration with the WebService annotation
#2 Return all Issues
#3 Get specific Issue by it's ID
#4 Save an Issue
#5 Delete an Issue
We define the IssueManager as a WebService by annotating it using the @WebService
annotation (#1). IssueManager contains methods defining our basic CRUD operations for
reading (#2 and #3), creating and updating(#4), and deleting (#5). Now let's take a look at
the CommentManager in listing 2.8.

Listing 2.8 The CommentManager.java
package org.foj.service;

import org.foj.model.Comment;
import java.util.List;

@WebService #1
public interface CommentManager {

List<Comment> findCommentsByIssueId(Long issueId); #2
void deleteAllCommentsForIssueId(Long issueId); #3
Comment get(Long id); #4
Comment save(Comment comment); #5
void remove(Long id); #6

}



#1 CommentManager interface declaration with the WebService annotation
#2 get comments for an issue id
#3 delete all comments for an issue
#4 get a comment by its ID
#5 save a comment
#6 remove a comment
CommentManager is also a WebService (#1) by virtue of it being annotated with the
@WebSerivce annotation just as with the IssueManager. It contains a method to return a list
of Comment objects by providing an issueId (#2), a method for deleting all comments for an
issue id (#3), a method for saving a comment (#4) and lastly a method for deleting a
comment (#6). Now let's provide some implementation for the services like
IssueManagerImpl in listing 2.9.

Listing 2.9 The IssueManagerImpl.java
package org.foj.service.impl;

import org.appfuse.dao.GenericDao;
import org.foj.model.Issue;
import org.foj.service.IssueManager;
import org.foj.service.CommentManager;

@WebService(serviceName = "IssueService",
endpointInterface = "org.foj.service.IssueManager") #1
public class IssueManagerImpl implements IssueManager {

private GenericDao<Issue, Long> issueDao;
private CommentManager commentManager;

public IssueManagerImpl() { #2
}

public IssueManagerImpl(GenericDao<Issue, Long> issueDao,
CommentManager commentManager) { #3
this.issueDao = issueDao;
this.commentManager = commentManager;
}

public List<Issue> getAll() { #4
return issueDao.getAll();
}

public Issue get(Long id) { #5
return issueDao.get(id);
}

public Issue save(Issue issue) { #6
return issueDao.save(issue);
}




public void remove(Long id) { #7
commentManager.deleteAllCommentsForIssueId(id);
issueDao.remove(id);
}

}

#1 IssueManagerImpl declaration with the WebService annotation
#2 default no arg constructor
#3 Constructor that sets the injected IssueDao instance and CommentManager to use
#4 Method that returns all Issues
#5 get specific issue
#6 Save issue
#7 remove an issue
The IssueManagerImpl also uses the WebService annotation just as in the interface, but
also provides the serviceName and endpointInterface attributes (#1). We provide a default
no args constructor (#2) as well as one that will be used by Spring to inject the IssueDao
and CommentManager(#3). Next we impement the methods for returning the list of Issues
(#4), returning a specific issue (#5), and saving an issue (#6) by delegating the calls to
those methods to the IssueDao. The implementation for removing an issue first deletes any
comments for the issue by calling the CommentManager and then removes the issue by
calling the remove method on the IssueDao. Now let's look at the CommentManager in
listing 2.10.

Listing 2.10 The CommentManagerImpl.java
package org.foj.service.impl;

import org.foj.dao.CommentDao;
import org.foj.model.Comment;
import org.foj.service.CommentManager;

@WebService(serviceName = "CommentService",
endpointInterface = "org.foj.service.CommentManager") #1
public class CommentManagerImpl implements CommentManager {

private CommentDao commentDao;

public CommentManagerImpl() { #2
}

public CommentManagerImpl(CommentDao commentDao) { #3
this.commentDao = commentDao;
}

public List<Comment> findCommentsByIssueId(Long issueId) { #4
return commentDao.getCommentsByIssueId(issueId);



}

public void deleteAllCommentsForIssueId(Long issueId) { #5
commentDao.deleteAllCommentsForIssueId(issueId);
}

public Comment get(Long id) { #6
return commentDao.get(id);
}

public Comment save(Comment comment) { #7
return commentDao.save(comment);
}

public void remove(Long id) { #8
commentDao.remove(id);
}

}

#1 CommentManagerImpl declaration with the WebService annotation
#2 Default no args constructor
#3 Constructor that sets the injected CommentDao instance to use
#4 find all comments for an issue
#5 delete all comments for an issue
#6 get specific comment
#7 save a comment
#8 delete a comment
Just like the IssueManagerImpl, the CommentManagerImpl defines itself to be a
WebService using the @WebService annotation, and defining its endpoint interface and
service name (#1). Next we define a default no args constructor (#2) as well as one that
will be used by Spring to inject our CommentDao (#3). We implement the methods to get
the comments for an issue (#4), deleting all the comments for an issue (#5), getting a
specific comment (#6), saving a comment (#7) and deleting a comment (#8) by delegating
to the CommentDAO.

NOTE
AppFuse provides GenericManager implementation base classes just as it does for DAOs,
but we chose not to use them here because certain WebService consumers such as Flex
have difficulty dealing with Web Services that return objects as ArrayOfAnyType, which is
what AppFuse will return if we leverage the GenericManagers. So to work around this
issue we'll be defining and implementing our CRUD operations for the Web Services
explicitly.

We are now officially done with the server-side objects and can now wire things together
with the Spring configuration and work on the web tier components.



2.6 Wiring things together with Spring
Spring provides developers with a means to easily wire objects together to keep application
components loosely coupled and testable. Notice how we've wired the model, DAO, and
service objects together in listing 2.11. The applicationContext.xml is located in the
srcmainwebappWEB-INF directory, along with some other configuration files.

Listing 2.11 The applicationContext.xml
...


<bean id="issueDao"
class="org.appfuse.dao.hibernate.GenericDaoHibernate"> #1
<constructor-arg value="org.foj.model.Issue"/>
<property name="sessionFactory" ref="sessionFactory"/>
</bean>

<bean id="commentDao" class="org.foj.dao.impl.CommentDaoImpl">
#2
<property name="sessionFactory" ref="sessionFactory"/>
</bean>


<bean id="issueManager" class="org.foj.service.impl.IssueManagerImpl">
#3
<constructor-arg ref="issueDao"/>
</bean>

<bean id="commentManager"
class="org.foj.service.impl.CommentManagerImpl"> #4
<constructor-arg ref="commentDao"/>
</bean>

...

#1 issueDao
#2 commentDao
#3 issueManager
#4 commentManager
The first bean we define is our GenericDao for the issueDao (#1). The commentDao
(#2) is defined with our concrete implementation. Next, we create Spring beans for
issueManager (#3) and commentManager (#4). The constructor-arg element is used to
inject the dependencies into the service class constructor.
Now that we've wired things up with Spring let’s construct the web tier starting with some
Struts framework action classes.


2.7 Construct the web tier
In a struts application we are able to utilize the Model-View-Controller design pattern. The
pattern encourages separation between the data model, view elements, and controllers that
sit between them. The MVC pattern has been a widely adopted in the Java community for
many years now and has even made its way into other languages and frameworks, like Flex.

2.7.1 Build the Struts action classes
We'll start by building some controller or “action” classes first like IssueAction in listing 2.12.

Listing 2.12 The IssueAction.java
package org.foj.action;

import org.appfuse.webapp.action.BaseAction;
...

public class IssueAction extends BaseAction { #1

private IssueManager issueManager;
private CommentManager commentManager;
private List<Issue> issues;
private List<Comment> comments;
private Issue issue;
private Long id;

public void setIssueManager(IssueManager issueManager) { #2
this.issueManager = issueManager;
}

public void setCommentManager(CommentManager commentManager) { #2
this.commentManager = commentManager;
}

...

public String list() { #3
issues = issueManager.getAll();
return SUCCESS;
}

public String delete() { #4
issueManager.remove(issue.getId());
saveMessage(getText("issue.deleted"));

return SUCCESS;
}

public String edit() { #5
if (id != null) {
issue = issueManager.get(id);
} else {
issue = new Issue();
}




comments = commentManager.findCommentsByIssueId(issue.getId());

return SUCCESS;
}

public String save() throws Exception { #6
if (cancel != null) {
return CANCEL;
}

if (delete != null) {
return delete();
}

boolean isNew = (issue.getId() == null);

issue = issueManager.save(issue);

String key = isNew ? "issue.added" : "issue.updated";
saveMessage(getText(key));

if (!isNew) {
return INPUT;
} else {
return SUCCESS;
}

}

}

#1 IssueAction extends Appfuse BaseAction
#2 Setters for IssueManager and CommentManager
#3 Returns a list of Issue objects
#4 Deletes an issue
#5 Edits by issueId
#6 Saves an Issue
IssueAction extends the Appfuse BaseAction (#1) that contains many common methods
actions rely on. IssueAction has setters for the service objects (#2). These setters will be
called by Spring and their instances will be injected into the action class during run time. The
IssueAction facilitates controlling communications to the server-side from the web tier. It
contains the methods for the view pages to do things like delete (#4), edit (#5) and, most
importantly, save issues (#6).
The same type of thing needs to happen for comments and can be found in the
CommentAction but this time it's all about comments and not issues. All the methods here
are facilitating CRUD for the Comment POJO by calling the commentManager service. The
CommentAction class can be downloaded from the website if needed.




Now that we've got our actions in place let's work on some JSP files to actually have a
simple UI for managing issues.

2.7.2 Edit the Issue menu item
First things first. We have to modify the menu.jsp in order to get to the Issues list. So, let's
start with the menu.jsp in listing 2.13.

Listing 2.13 The menu.jsp
...
<menu:displayMenu name="MainMenu"/>
<menu:displayMenu name="UserMenu"/>
<menu:displayMenu name="IssueMenu"/>
#1
<menu:displayMenu name="AdminMenu"/>
<menu:displayMenu name="Logout"/>
...

#1 Adding the IssueMenu item to the JSP view file
The menu JSP file reads in the menu xml data. All we need to do to add the Issue menu
item is add a single line(#1) to this file that is located in the ../flex-bugs-
web/src/main/webapp/common directory. In listing 2.14 we will actually provide the xml
data for that menu item.

Listing 2.14 The menu-config.xml
...
<Menu name="IssueMenu" title="menu.issue" description="Issues Menu"
#1
roles="ROLE_ADMIN,ROLE_USER" page="/issues.html">
<Item name="ViewIssues" title="menu.viewIssues" page="/issues.html"/>
</Menu>
...

#1 Add the Issue menu item to the menu data xml file
Just adding to the already existing Appfuse plumbing for creating menu items (#1)
quickly gives us access to our new features. Now let's create the IssueList.jsp that will be
displayed when you click the Issues menu item.

2.7.3 Add some JSP resources
The IssueList.jsp, in listing 2.15, will display a list of issues and allow you to add new or
modify existing issues from there. The Issue and Comment JSP files will reside in the
../src/main/webapp/WEB-INF/pages directory.




Listing 2.15 The issueList.jsp
<%@ include file="/common/taglibs.jsp" %>
#1

<head>
<title><fmt:message key="issueList.title"/></title>
<meta content="<fmt:message key='issueList.heading'/>" name="heading"/>
</head>

<c:set var="buttons">
#2
<input type="button" style="margin-right: 5px"
onclick="location.href='<c:url value="editIssue.html"/>'"
value="<fmt:message key="button.add"/>"/>
<input type="button" onclick="location.href='<c:url
value="/mainMenu.html"/>'"
value="<fmt:message key="button.done"/>"/>
</c:set>

<c:out value="${buttons}" escapeXml="false"/>
#3

<s:set name="issues" value="issues" scope="request"/>
#4

<display:table name="issues" class="table" requestURI="" id="issueList"
#5
export="false" pagesize="25">
<display:column property="id" sortable="true" href="editIssue.html"
paramId="id" paramProperty="id" titleKey="issue.id"/>
<display:column property="project" sortable="true"
titleKey="issue.project"/>
<display:column property="description" sortable="false"
titleKey="issue.description"/>

<display:setProperty name="paging.banner.item_name" value="issue"/>
<display:setProperty name="paging.banner.items_name" value="issues"/>

</display:table>

<c:out value="${buttons}" escapeXml="false"/>

<script type="text/javascript">
#6
highlightTableRows("issueList");
</script>

#1 Essential tag libraries bundle
#2 Variable holds button data
#3 Prints out button data for display
#4 Variable represents issues list
#5 Displays nicely formatted table




#6 JavaScript highlights the table rows
To make life easier, we include a JSP that in turn includes a bundle of tag libraries (#1)
that are useful for our web application. We have some button data that will be stored in a
variable (#2) and a Java Standard Tag Library (JSTL) tag (#3) that will print out the buttons.
We create a variable that will hold a list of issues (#4) from the request scope an HTML table
that is formatted using the included display tag library (#5). Finally, there's a little
JavaScript used to highlight rows of data for us (#6). Now let's have a look at the
issueForm.jsp in listing 2.16.

Listing 2.16 The issueForm.jsp

<head>
<title><fmt:message key="issueDetail.title"/></title>
<meta content="<fmt:message key='issueDetail.heading'/>"/>
</head>

<s:form id="issueForm" action="saveIssue" method="post" validate="true">
#1
<s:hidden name="issue.id" value="%{issue.id}"/>

<s:textfield key="issue.project" required="true" cssClass="text medium"/>
#2
<s:textfield key="issue.description" required="true" cssClass="text
medium"/>
<s:textfield key="issue.type" required="true" cssClass="text medium"/>
<s:textfield key="issue.severity" required="true" cssClass="text
medium"/>
<s:textfield key="issue.status" required="true" cssClass="text medium"/>
<s:textarea key="issue.details" required="true" cssClass="text medium"/>

<li class="buttonBar bottom">
#3
<s:submit cssClass="button" method="save" key="button.save"
theme="simple"/>
<c:if test="${not empty issue.id}">
<s:submit cssClass="button" method="delete" key="button.delete"
onclick="return confirmDelete('issue')"
theme="simple"/>
</c:if>
<s:submit cssClass="button" method="cancel" key="button.cancel"
theme="simple"/>
</li>

</s:form>

<c:if test="${not empty issue.id}">

<s:form id="commentsForm" action="editComment" method="post"
validate="true"> #4

<s:set name="comments" value="comments" scope="request"/>




<display:table name="comments" class="table" requestURI=""
id="commentList" export="false" pagesize="25">
<display:column property="id" sortable="true" href="editComment.html"
paramId="id" paramProperty="id"
titleKey="comment.id"/>
<display:column property="author" sortable="true"
titleKey="comment.author"/>
<display:column property="commentText" sortable="false"
titleKey="comment.commentText"/>

<display:setProperty name="paging.banner.item_name" value="comment"/>
<display:setProperty name="paging.banner.items_name"
value="comments"/>

</display:table>

<s:submit cssClass="button" key="button.add" theme="simple"/>

</s:form>

</c:if>

highlightTableRows("commentList");
</script>

#5
Form.focusFirstElement($("issueForm"));
</script>

#1 “s” Struts form tag in action
#2 Form text input fields
#3 CRUD Button bar
#4 Comments struts form
#5 JavaScript assigns focus
Obviously, the issueForm.jsp will allow a user to add or edit an issue. If you peak into the
included ../src/main/webapp/common/taglibs.jsp you will notice that the Struts tag libraries
are included and the letter “s” was used for the tag prefix (#1). There are Struts textField
elements (#2) that will map to an Issue object. The button bar created will contain save,
delete, and cancel buttons (#3). The delete will only display if the issue has an id or already
exists. Now let's keep moving and build the commentForm.jsp like in listing 2.17.

Listing 2.17 The commentForm.jsp

<head>
<title><fmt:message key="commentDetail.title"/></title>


# -- issue list page --
issueList.title=Issue List
issueList.heading=Issues

# -- issue detail page --
issueDetail.title=Issue Detail
issueDetail.heading=Issue Information

# -- comment form --
comment.id=Id
comment.author=Author
comment.issueId=Issue Id
comment.createdDate=Created Date
comment.commentText=Details
comment.added=Comment has been added successfully.
comment.updated=Comment has been updated successfully.
comment.deleted=Comment has been deleted successfully.

# -- issue list page --
commentList.title=Comment List
commentList.heading=Comments

# -- issue detail page --
commentDetail.title=Comment Detail
commentDetail.heading=Comment Information

If more langauage support is needed add the same properties with the respective
translation to the appropriate properties file in the same directory. Now let's wire up the view
components with Struts.

2.7.5 Configure the struts.xml
In order to wire up the JSP view components to the controller objects we created we can use
the struts.xml located in the ../src/main/resources directory. Listing 2.19 demonstrates the
wiring we need for the Issues management.

Listing 2.19 The struts.xml
<package>
...

<action name="issues" class="org.foj.action.IssueAction" method="list">
#1
<result>/WEB-INF/pages/issueList.jsp</result>
</action>

<action name="editIssue" class="org.foj.action.IssueAction"
method="edit"> #2
<result>/WEB-INF/pages/issueForm.jsp</result>
<result name="error">/WEB-INF/pages/issueList.jsp</result>
</action>

<action name="saveIssue" class="org.foj.action.IssueAction"
method="save"> #3


<result name="input">/WEB-INF/pages/issueForm.jsp</result>
<result name="cancel" type="redirect-action">issues</result>
<result name="delete" type="redirect-action">issues</result>
<result name="success" type="redirect-action">
<param name="actionName">editIssue</param>
<param name="id">${issue.id}</param>
</result>
</action>

<action name="comments" class="org.foj.action.CommentAction"
method="list">
<result>/WEB-INF/pages/commentList.jsp</result>
</action>

<action name="editComment" class="org.foj.action.CommentAction"
method="edit">
<result>/WEB-INF/pages/commentForm.jsp</result>
<result name="error">/WEB-INF/pages/commentList.jsp</result>
</action>

<action name="saveComment" class="org.foj.action.CommentAction"
method="save">
<result name="input">/WEB-INF/pages/commentForm.jsp</result>
<result name="cancel" type="redirect-action">
</result>
<result name="delete" type="redirect-action">
</result>
<result name="success" type="redirect-action">
</result>
</action>

</package>

#1 issues action loads issueList.jsp
#2 editIssue loads issueForm.jsp
#3 saveIssue loads issueForm
Struts makes it really simple to wire up the view components quickly and make changes.
As you can see, the issue action (#1) will load the issueList.jsp whenever the list() method
is invoked on the IssueAction. In the same way, editIssue (#2) will load the issueForm.jsp
when the edit() method is called and if that doesn't work for some reason it will go back to
the list page. Finally, the saveIssue action will persist an Issue by taking the input from the
issueForm.jsp.
The remainder of the IssueAction is more of the same but pertains to issue comments.




2.7.6 Configure Hibernate
The final thing to do is configure our POJOs with the Hibernate session factory like in listing
2.20. That way when the app is loaded into memory Hibernate knows about these objects.
We do this through the hibernate.cng.xml located in the ../src/main/resources directory.

Listing 2.20 The hibernate.cfg.xml
<!DOCTYPE hibernate-configuration PUBLIC "-//Hibernate/Hibernate
Configuration DTD 3.0//EN"
"http://hibernate.sourceforge.net/hibernate-configuration-3.0.dtd">

<hibernate-configuration>
<session-factory>
<mapping class="org.appfuse.model.User"/>
<mapping class="org.appfuse.model.Role"/>
<mapping class="org.foj.model.Issue"/> #1
<mapping class="org.foj.model.Comment"/> #1
</session-factory>
</hibernate-configuration>

#1 Adding Issue and Comment to the hibernate configuration for loading with the Hibernate session-
factory
Another simple configuration to take care of. This time we create a class mapping (#1)
for each of our model objects, Issue and Comment. If you were to browse to rebuild the the
application with the mvn jetty:run-war command the issues button should be available as
seen in figure 2.7.

Figure 2.7 The issues list page with the integrated Issues menu button




2.8 Summary
In this chapter we set up a Java web application using the Appfuse framework. Appfuse
simplified the plumbing involved in building a typical Java web application using many of the
popular frameworks out there including Struts, Spring, and Hibernate.
In the next chapter we'll get started with building a Flex client that will consume the Flex-
bugs web services and also call directly with BlazeDS.




3
Getting Rich with Flex

In this chapter

Create a Flex project using archetype

Create a Flex front-end for the sample application

In the last chapter we introduced you to AppFuse and created our sample issue tracking
application. Now it’s time to begin the task of creating the Flex front-end for our sample
application. We’ll start off by incrementally building up the view layer introducing you to a
few of the pertinent concepts of Flex as we go. This chapter is not meant to be a
comprehensive guide to the Flex framework by any stretch of the imagination; however you
should still be able to follow along without too much trouble. If you want a more in depth
look at the Flex framework check out the title Flex in Action.

3.1 Generate the application structure
The first thing we need to do before we get started is to create our Flex application. Since
we’ll be using the Flex Mojos Maven plugin we’ll be creating the application in a similar
manner as we did for the AppFuse portion of the application. We’ve taken the liberty to
create a Maven archetype to minimize the amount of manual work we would need to do in
order to create the project structure.

FNA (FNA is Not AppFuse)
Some folks at Adobe Consulting have started a new project up at Google Code called FNA
or FNA is Not AppFuse (http://code.google.com/p/fna/). The FNA project has similar
goals to that of AppFuse in that they are making an attempt at creating a framework that
enables developers a way to jumpstart their RIA applications with Flex and Java. We



Flex and Java

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Flex and Java

Similar to Flex and Java (20)

Recently uploaded

Recently uploaded (20)

Flex and Java