Chapter 1. Some Flex with your Java?

This chapter covers

• A brief history of Java and Flex
• A whirlwind tour of Flex
• MXML and ActionScript

In 1995, Sun introduced the first Java platform and gave birth to the applet which 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 before its popularity waned mainly because of problems surrounding the browser plugin.

Macromedia embraced the idea of having a dedicated runtime environment for the browser, like the Java applet, and in 1997 released the Flash Player. Adobe has since taken over the rights to the Macromedia suite of products and helped to evolve what is now the Flex framework and development API.

Building features in an applet from scratch or even with other rich implementations can be expensive compared to the simplicity of using the Flex framework. Figure 1.1 displays a simple Java applet data grid next to a Flex data grid. The Flex data grid right out of the box not only looks better than the applet, it’s much more functional with much less code overhead. The Flex DataGrid and AdvancedDataGrid components provide built-in support for tasks such as sorting, dragging columns, row highlighting, data nesting, and styling.

Figure 1.1. Comparing a Java applet DataGrid (left) to a Flex Advanced DataGrid

The Flash runtime provides lightweight graphics and animation capabilities in manageable file sizes, making the player hugely successful across OSs and browser platforms. The Flash runtime allows for rich applications to have true stateful experiences and a high level of security.

 

Note

A stateful experience with Flex means that the client (Flex) will manage or remember everything it needs to without having to: submit to the server side, update and manage a session or request through HTTP, and refresh the client side with updated data after a submit with data from the session or request.

 

In general, Java developers have successfully leveraged 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 UI, it is also built on top of OOP principles such as encapsulation, inheritance, and polymorphism.

These advantages benefit other technologies besides pure Java, as you’ll see in chapter 11, when we demonstrate Flex integration with Grails, one of the hottest web development platforms. We’ll build a simple contact management system and learn how to get rolling with Groovy and Grails development. Integrating Flex with Grails is in many respects easier than integrating Flex with Java.

Flex development is now bolstered by many of the benefits of Java-like frameworks for performing unit testing, functional testing, and continuous integration. The combination of Java and the Flex Software Development Kit (SDK) allows developers new to the business to start building applications immediately.

A thriving Flex open source community can offer Java developers GUI components as simple and as complex as required. Most of these custom components extend stock Flex objects found in the Flex SDK. Adobe made Flex 3 open source, and it now has numerous community resources. The Flex SDK with Adobe’s built-in charting components is still commercial.

We have chosen Flex 4 with Java because of the 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 platform for many Flex migration projects. Although there are alternative ways for doing RIA development, Flex will most likely prove to be the superior RIA framework because of the simplicity and testability it provides to developers. We’re 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’ll 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 extension) and ActionScript classes. These two components are the basic building blocks of the Flex framework. The Flex compiler takes these files and creates a small web format (SWF) file, which is executed in the Flash Player.

MXML

MXML is an XML-based markup language similar to HTML/XHTML. The MXML syntax, used to declaratively define your application, has numerous tags for common UI objects, such as text input fields, radio buttons, and drop-down lists. It also has many UI components and layout components that are common in rich client development, such as menu bars, tabbed panels, data grids, and navigational trees. In addition, it’s possible to build custom components that extend existing ones or produce something completely different like the flow visualization chart. Figure 1.2, which was made with Degrafa, shows this function.

Figure 1.2. Flow visualization chart

In chapter 8 we’ll be covering the Degrafa drawing API for Flex to create a pie chart for a sample 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 the language specification and the Flash Player API. It is similar to JavaScript in syntax, so it should look familiar to any experienced web developer. Unlike JavaScript, ActionScript is compiled into byte code before being executed, instead of being parsed and interpreted at runtime.

 

Note

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. Because 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’ll 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.

The Flex SDK and Flash Player are the two key elements in making a Flex application come to life.

1.1.2. The Flex SDK

The Flex 4 SDK comes in two flavors: the Free Adobe Flex SDK and the Open Source Flex SDK. Both contain everything you need for developing, optimizing, and debugging Flex applications. The SDKs include the ActionScript and MXML compilers, tools for creating JavaDoc-like documentation, and the Flex Framework. The only difference between the two is that the Free Adobe Flex SDK contains additional components that enhance the Flex application, such as tools for advanced font encoding, tools for packaging Adobe Integrated Runtime (AIR) applications, and the Flash Player. These extra components are not open source but have been made available by Adobe. To learn more about the Flex SDK downloads visit http://opensource.adobe.com/wiki/display/flexsdk/downloads.

1.1.3. 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. Although Flash Player itself is not open source, it has been free since its inception and can be found on nearly every computer in the world. Flash Player gives your Flex applications the ability to execute in the same manner and look the same no matter what browser your application runs in. Because your Flex application runs inside Flash Player, you do not have to be concerned with cross browser issues.

 

 

Because of the widely popular Flash Player and a powerful open source SDK, Flex is a great fit for Java developers building rich clients.

Now comes the part we’ve all been waiting patiently for—we’re going to create a “Hello World!” styled application in Flex.

1.2. Creating an application in Flex

Let’s start by modeling our directory structure, shown in figure 1.3, after the Maven default project structure. This will prove useful because we’re using Maven to build the FlexBugs sample application in chapter 2.

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

The sample application can be placed in a project directory such as C:devprojects for Windows, or /home/<YOUR_USERNAME>/development for Linux.

The main source code location for our “Hello World!” sample application will be contained in the src/main/flex folder. Because ActionScript follows a pattern similar to Java for packages, 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, except these folders are for the test code of the application.

For the purpose of introducing Flex code, listing 1.1 demonstrates a trivial example of a simple Flex application. We’re going to create a single .mxml file that will print the words “Flex 4 is Fun” as seen in figure 1.4.

Figure 1.4. A simple Flex application

As you can see there’s nothing fancy happening here and the code presented in listing 1.1 is also simple.

Listing 1.1. Main.mxml

If you’ve ever done any web development, this should look familiar. MXML, like XHTML, is nothing more than XML. At the beginning of the file you’ll see the standard XML declaration . Next you’ll see the root node with the defined xml namespaces , which in most Flex applications will be within the <mx:Application> element. In chapter 3, we’ll evolve this example by creating a nice Flex application. In chapter 9, where we talk more about Adobe AIR, we’ll explain that the root node for an AIR application is typically <mx:WindowedApplication>. Inside the <mx:Application> element is a style element and a single RichText element with its text attribute set to “Flex 4 is Fun”.

1.3. Finding the right tools and patterns

As this book’s title suggests, Flex on Java will focus on Flex integration with Java. With that in mind, we diligently searched for the perfect ingredients to equip you with the right tools for real-world scenarios without overcomplicating things.

We’re not focusing on teaching Java, but we build a simple Java web application in chapter 2. We chose frameworks that should ease the Java learning curve necessary to get a sample application up and running fast. We won’t dive deep into every part of Flex development. Instead, Flex on Java will provide you with simple yet powerful examples of integrating the two technologies.

Therefore, we’ll be tackling in detail the topics outlined in the sections that follow.

1.3.1. Building a Flex interface

Often developers begin building naked UI components without being connected to a backend server and database. A disconnected Flex client can take advantage of mock data and allow developers to easily prototype the UI without the complexity of external dependencies.

This approach is demonstrated in chapter 3 where we create the beginnings of a rich UI for the FlexBugs sample application shown in figure 1.5.

Figure 1.5. The FlexBugs sample Flex application

1.3.2. Integrating with web services

What may seem unfamiliar to you in this chapter is that when we connect to the server side we’ll be modeling our application using the Model-View-Presenter (MVP) design pattern instead of employing the typical approach of using the mxml tag element that doesn’t scale well for most applications. Using the MVP approach, all web services calls will be wrapped in a Model object written in ActionScript. This makes changing the implementation less painful.

Connecting to server-side services, event dispatching, and event handling are all things that are critical to any Flex business application and are built into the core of the framework. That’s why in chapter 4 we’ll demonstrate connecting to the Java server side and how to leverage the powerful Flex API for connecting to web services. Plenty of literature, including the Flex online documentation, covers the typical approach of connecting to services. In this book, we’ll create clean interfaces and views as we build a well-designed Flex client that will scale on demand.

1.3.3. Integration with BlazeDS, logging, and messaging

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 marshaler/unmarshaler 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, Adobe decided to spawn BlazeDS, an open source project that contains much of the functionality specific to connecting Flex to a Java-based service.

Integrating Flex with Java is what this book is all about. That’s why chapter 5 will demonstrate further how to connect a Flex client more directly to the server side using the open source BlazeDS framework. BlazeDS provides a mechanism for allowing Flex to call methods on Java objects through binary serialization with the Action Message Format or AMF. This is much faster than what’s possible with web services or XML/HTTP(s) because it uses real objects and doesn’t have to marshal XML.

Because logging is a critical component of 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 demonstrate how to develop Flex applications that take advantage of simple polling; in chapter 11 we’ll discuss how to connect using Java Message Service (JMS). The Flex framework provides an API that enables distributed communication with the server side or communication between clients that is loosely coupled and asynchronous. Flex has both a powerful and simple API for handling messaging.

1.3.4. Securing Flex applications

Many technical books skip security, but it’s always the elephant in the living room when gathering requirements for an application. It’s important to understand the security issues of Flex both to decrease risk and to minimize the cost of what can be one of the most expensive features in any business application. Chapter 7 will demonstrate building authentication, authorization, and personalization with Spring Security (Acegi) integration.

1.3.5. Creating custom Flex controls with Degrafa

Custom components are first class citizens inside the Flex framework, and many ActionScript frameworks take advantage of this. One that really stands out is Degrafa, which is a declarative graphics framework that provides a suite of graphics classes. Degrafa is open source and can be used to build robust charts, tools, and other graphical elements with less effort and complexity than other frameworks.

We’ll create a custom pie chart component that will be appropriately tied into our sample application in chapter 8. While we’re at it we’ll also demonstrate creating a DataGrid ItemRenderer and perform dynamic object creation.

1.3.6. Desktop 2.0 with Adobe AIR

A business sometimes can’t live with the web alone, and 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 well-designed applications that allow for optimal reuse of code. Chapter 9 will demonstrate how to allow a Flex application to live in two worlds—by demonstrating how to package and distribute an AIR application.

1.3.7. Flex and Grails

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 at http://jcp.org/en/jsr/detail?id=241. Groovy supports powerful features that can be found in other languages like Python, Ruby, and Smalltalk; Grails is a full development stack for Groovy that provides a rapid development environment for both server side and the web that resembles and rivals the Ruby on Rails (RoR) framework. With Flex and Grails you can quickly create a dynamic application that runs on the JVM with much less effort. Flex integration with Groovy and Grails is covered in chapter 11.

1.4. Summary

Whether you’re experienced or inexperienced in building web or desktop applications with Flex on Java, this book will teach you how to integrate Flex on Java quickly and effectively. Combining Flex with Java allows developers to provide rich UIs with robust server-side technologies and does so with minimal effort and cost. Flex and Java are proven technologies and have continued to be improved over time and used by many companies around the world.

In chapter 2, we lay a foundation by building a sample Java web application for use throughout the majority of the examples in the rest of this book. This should be useful if you don’t already have an application or need assistance in getting started with setting up a Flex on Java development environment. Setup-type chapters can feel slightly mechanical because of the downloading and installation they cover. We’ve tried to keep it interesting and painless while using popular development environment frameworks that the majority of you will be pleased to see utilized.