Requirements 

     
Prerequisites
General experience developing applications with Adobe Flash Builder is recommended. It is also recommended, but not mandatory, that you have some knowledge of development techniques using Tomcat, Java, and MySQL.
 
User level
Intermediate
Required products
Flash Builder (Download trial)
 
Sample files  

   

 
Additional required other products

 
Apache Tomcat 5.5 or greater
 
MySQL Community Edition 5.0 or greater
 
WebORB for Java
In this article I will show you how to build a data driven application in Flex using WebORB for Java. You will learn how to connect WebORB to your database, use WebORB for Java to generate your database access code, and integrate the generated code with your Flex project.
 

 
Setting up WebORB for Java

WebORB for Java allows RIA developers to quickly and easily build and deploy robust data driven applications. WebORB provides a runtime environment with very easy to use data management APIs that allow the developer to focus on creating business solutions rather than getting bogged down in the implementation intricacies. For more information on WebORB features, visit the WebORB for Java website.
 
 
Installing WebORB for Java on Tomcat
Before you continue, you’ll need to install Apache Tomcat if it is not already running on your server. After you download the WebORB for Java installer, start the installation by running weborb.installer.jar. The installer will guide you through a six step installation process. To keep things simple, just accept all the default values and click the Next button in each step until the installer is done.
 
Once the installation process has completed you will need to copy the weborb.war file (not to be confused with the weborb.jar file) from the install location to your Apache Tomcat webapps directory. Assuming that Tomcat is currently running, WebORB for Java will be automatically deployed. If Tomcat is not currently running, start Tomcat to deploy WebORB.
 
 
Getting familiar with the WebORB Management Console
WebORB for Java provides a console to manage your WebORB server configuration, data (including generating code), and services to test the code that was generated. To access the WebORB Management Console open a browser and point to the weborb application on your Tomcat installation; for example, http://localhost:8080/weborb.
 
The WebORB Management Console includes tabs labeled Services, Data Management, Messaging Server, Server Configuration, and Help/Resources (see Figure 1).
 
The WebORB for Java Management Console
Figure 1. The WebORB for Java Management Console
You’ll be working first with the Data Management tab.  The Services tab enables you to test drive the services created by WebORB. The Messaging Server and Server Configuration tabs are outside the scope of this article, but you may want to explore the Server Configuration tab to become familiar with it. Use the Help/Resources tab to find documentation on WebORB for Java as well as links to articles and other WebORB resources.
 

 
Data management with WebORB

The first step in creating an application that uses WebORB for Java is to make a connection to the target database. You’ll then select the tables you are interested in modeling, and finally create the model.
 
 
Loading the sample database
To start, you need a database. Open MySQL Workbench and use the following script to create a schema, create a table, and then load sample data into the table.
 
SET @OLD_UNIQUE_CHECKS=@@UNIQUE_CHECKS, UNIQUE_CHECKS=0; SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0; SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='TRADITIONAL'; DROP SCHEMA IF EXISTS `w4jarticle` ; CREATE SCHEMA IF NOT EXISTS `w4jarticle` DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci ; USE `w4jarticle` ; -- ----------------------------------------------------- -- Table `Contact` -- ----------------------------------------------------- DROP TABLE IF EXISTS `Contact` ; CREATE TABLE IF NOT EXISTS `Contact` ( `Id` INT NOT NULL AUTO_INCREMENT , `FirstName` VARCHAR(50) NOT NULL , `LastName` VARCHAR(50) NOT NULL , `WorkPhone` VARCHAR(20) NULL , `MobilePhone` VARCHAR(20) NULL , `BlogUrl` VARCHAR(255) NULL , `EmailAddress` VARCHAR(255) NULL , `LinkedInUrl` VARCHAR(255) NULL , `SkypeAccount` VARCHAR(255) NULL , `TwitterUrl` VARCHAR(255) NULL , `WebsiteUrl` VARCHAR(255) NULL , PRIMARY KEY (`Id`) ) ENGINE = InnoDB; SET SQL_MODE=@OLD_SQL_MODE; SET FOREIGN_KEY_CHECKS=@OLD_FOREIGN_KEY_CHECKS; SET UNIQUE_CHECKS=@OLD_UNIQUE_CHECKS; -- ----------------------------------------------------- -- Data for table `Contact` -- ----------------------------------------------------- SET AUTOCOMMIT=0; USE `w4jarticle`; INSERT INTO Contact (`Id`, `FirstName`, `LastName`, `WorkPhone`, `MobilePhone`, `BlogUrl`, `EmailAddress`, `LinkedInUrl`, `SkypeAccount`, `TwitterUrl`, `WebsiteUrl`) VALUES (NULL, 'Ken', 'Nelson', '(949) 533-2536', '(949) 533-2536', 'http://sanclementetech.com/site/kens-blog/', 'ken@sanclementetech.com', 'http://www.linkedin.com/in/sanclementetech', 'sanclementetech', 'http://twitter.com/sanclementetech', 'http://www.sanclementetech.com'); INSERT INTO Contact (`Id`, `FirstName`, `LastName`, `WorkPhone`, `MobilePhone`, `BlogUrl`, `EmailAddress`, `LinkedInUrl`, `SkypeAccount`, `TwitterUrl`, `WebsiteUrl`) VALUES (NULL, 'Kathleen', 'Erickson', NULL, NULL, 'http://mcoderkat.wordpress.com/', NULL, 'http://www.linkedin.com/in/kathleenerickson', NULL, 'http://twitter.com/mcoderkat1', 'http://www.themidnightcoders.com'); INSERT INTO Contact (`Id`, `FirstName`, `LastName`, `WorkPhone`, `MobilePhone`, `BlogUrl`, `EmailAddress`, `LinkedInUrl`, `SkypeAccount`, `TwitterUrl`, `WebsiteUrl`) VALUES (NULL, 'Mark', 'Piller', NULL, NULL, 'http://blog.themidnightcoders.com/', NULL, 'http://www.linkedin.com/in/markpiller', NULL, NULL, 'http://www.themidnighcoders.com'); COMMIT;
 
Connecting to your database
Now that you have a database, you need to make WebORB aware of it.
 
  1. On the WebORB Management Console select the Data Management tab.
  2. In the lower left corner, click the Add New Database button to start the database connection process.
Configuring the database connection
Figure 2. Configuring the database connection.
  1. In the Database Connection dialog box, select MySQL as the Server Type.
  2. Type the server, port, user id, and password for the database (see Figure 2).
  3. Click Next.
Selecting the database
Figure 3. Selecting the database.
  1. Select the desired database schema; for this article it is w4jarticle (see Figure 3).
  2. Click OK.
You should now see the w4jarticle schema in the Databases list.
 
 
Adding your data model
Follow these steps to add you data model:
 
  1. On the upper left hand side of the screen, locate the Data Models list.
  2. Click Add A New Model.
  3. In the User Data Model dialog box, type a name for the model; for example type WebORB Article (see Figure 4).
Adding a new data model
Figure 4. Adding a new data model.
  1. Type the package namespace you would like to use for the Java (Server) code and then for the ActionScript (Client) code; for example, type test.w4j.weborb
  2. Select Java as the Server Language.
  3. Note: Leave the Generate Test Drive option deselected for this tutorial. You may want to try it some other time to create a fully functional CRUD application that you can import into Flash Builder and run.
     
  4. Click Save to create the data model.
  5. Once the data model is saved, drag the contact table from the database list to the data model workspace.
You should see the new data model appear in the Management Console (see Figure 5).
 
The Management Console showing the new data model
Figure 5. The Management Console showing the new data model.
 
Validating your data model
To validate your data model, click the Validate Model button (the green check mark). This will check for duplicate attributes, relationships, and so on.
 
 
Building and deploying generated code
Building the data model and getting it ready for deployment is a straightforward process:
 
  1. Click the Build button, which looks like a gear.
  2. WebORB will generate the necessary Java and ActionScript code and prepare the application for deployment. (This can take some time.)
     
  3. Once the build process completes, click the Auto Deploy Server Code button, which resembles the planet Earth with an arrow.
  4. This will deploy a JAR file with the generated and compiled Java code to the server. You can verify this by looking at the [Tomcat Home]/webapps/weborb/WEB-INF/lib directory. There you should see the WebORB Article.jar file.
     
    The deployment will also place the JAR file as well as a zip file in the [Tomcat Home]/webapps/weborb/weborbassets/wdm/output directory. If you created the data model using the WebORB Article name, then you should see a WebORB Article.jar file and a WebORB Article.zip file.
     
  5. Unzip the WebORB Article.zip file.
Unzipping the zip file will create a directory with client, server, and support subdirectories. You can look at the generated Java (server) code if you like, but when creating the Flash Builder application you are more interested in the client code. In the next section, after you create the Flash Builder application, you’ll copy the contents of the client/src directory to the Flash Builder application src directory. You’ll also add the client/libs/weborb.swc file to the Flex build path as you create the project.
 

 
Building and running the Flex application

Now you’re ready to create the Flex project in Flash Builder.
 
  1. Choose File > New > Flex Project.
Creating the new Flex project
Figure 6. Creating the new Flex project.
  1. Type W4jArticle (or another name if you prefer) as the Project Name.
  2. Select J2EE as the Application Server Type and select BlazeDS as the remote object access service (see Figure 6).
  3. Click Next.
Configuring the server
Figure 7. Configuring the server.
  1. Set the Root Folder to [Tomcat Home]/webapps/weborb.
  2. Set the Root URL to the Tomcat installation; for example, http:/localhost:8080/.
  3. Set the Context Root to /weborb.
  4. Verify that the output folder is set to the [Tomcat Home]/webapps/weborb/[App name]-debug directory (see Figure 7).
  5. Click Validate Configuration. Flash Builder will display a warning message stating “Server root is not pointing to a BlazeDS server root folder.” This is OK; you can continue to the next step.
  6. After the configuration is validated, click Next.
Adding library items
Figure 8. Adding library items.
  1. Click Add SWC and add weborb.swc to the build path. The location of the weborb.swc file is [Tomcat Home]/webapps/weborb/weborbassets/wdm/weborb.swc.
  2. Click Finish.
 
Copy the generated code to the application
To use the WebORB generated ActionScript classes, follow these steps:
 
  1. Copy the contents of  [Tomcat Home]/webapps/weborb/weborbassets/wdm/output/WebORB Article/client/src to the src directory of the newly created application.
  2. Expand test.w4j.weborb in the src folder in Package Explorer to see the classes (see Figure 9).
The generated classes in Package Explorer
Figure 9. The generated classes in Package Explorer.
 
Add visual components
WebORB for Java supplies the data access code that will be used to create, retrieve, update, and delete data from the MySQL database. To enable a user to interact with WebORB, you’ll need to create some visual components that can display the data (such as a DataGrid component).
 
  1. Replace the code in your project’s main MXML file (in this case W4jarticle.mxml) with the following:
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="this.refresh()" viewSourceURL="srcview/index.html"> <fx:Script> <![CDATA[ import mx.controls.Alert; import mx.rpc.AsyncToken; import mx.rpc.Responder; import mx.rpc.events.FaultEvent; import test.w4j.weborb.ActiveRecords; import test.w4j.weborb.Contact; import weborb.data.ActiveCollection; import weborb.data.DynamicLoadEvent; [Bindable] private var recset:ActiveCollection; private function refresh():void { this.recset = ActiveRecords.Contact.findAll(); this.recset.addEventListener(DynamicLoadEvent.LOADED, handleFindAllSuccess, false, 0, true); this.recset.addEventListener(FaultEvent.FAULT, handleFault, false, 0, true); } private function handleFindAllSuccess(event:DynamicLoadEvent):void { this.recset.removeEventListener(DynamicLoadEvent.LOADED, handleFindAllSuccess, false); this.recset.removeEventListener(FaultEvent.FAULT, handleFault, false); } private function add():void { var contact:Contact = new Contact(); contact.firstName = "[Enter First Name]"; contact.lastName = "[Enter Last Name]"; var token:AsyncToken = ActiveRecords.Contact.create(contact); token.addResponder(new mx.rpc.Responder(handleAddComplete, handleFault)); } private function handleAddComplete(contact:Contact):void { this.refresh(); } private function save():void { var cnt:int = this.recset.length; for(var i:int = 0; i < cnt; i++) { if((this.recset.getItemAt(i) as Contact).IsDirty) { (this.recset.getItemAt(i) as Contact).save(); } } } private function remove():void { if(null != this.dataGrid.selectedItem) { (this.recset.getItemAt(this.dataGrid.selectedIndex) as Contact).remove(); } } private function handleFault(fault:FaultEvent):void { Alert.show(fault.fault.message, "WebORB Fault"); } ]]> </fx:Script> <mx:DataGrid id="dataGrid" left="10" right="10" top="10" bottom="50" dataProvider="{recset}" editable="true"> <mx:columns> <mx:DataGridColumn headerText="First Name" dataField="firstName" editable="true" /> <mx:DataGridColumn headerText="Last Name" dataField="lastName" editable="true" /> <mx:DataGridColumn headerText="Linked In" dataField="linkedInUrl" editable="true" /> <mx:DataGridColumn headerText="Twitter" dataField="twitterUrl" editable="true" /> <mx:DataGridColumn headerText="Website" dataField="websiteUrl" editable="true" /> </mx:columns> </mx:DataGrid> <s:HGroup left="10" right="10" bottom="10"> <s:Button id="btnAdd" label="Create" click="this.add()" /> <s:Button id="btnRefresh" label="Retrieve" click="this.refresh()" /> <s:Button id="btnSave" label="Update" click="this.save()" /> <s:Button id="btnRemove" label="Delete" click="this.remove()" /> </s:HGroup> </s:Application>
  1. Save your changes.
  2. To run and test the application, choose Run > Run W4jArticle.
The application showing data retrieved from MySQL
Figure 10. The application showing data retrieved from MySQL.
When the application launches you should see data from the MySQL database (see Figure 10). Try the buttons beneath the DataGrid control to test the other functionality of the application.
 

 
Where to go from here

This article has demonstrated how to set up and use WebORB for Java with Adobe Flash Builder to create a database enabled application.
 
If you want to explore other things you can do with WebORB for Java, see RTMP Data Push from Java to Flex. To learn more about using Flex and WebORB with other server-side technologies, read Accessing remote shared objects from Flex with WebORB .NET.