For the complete experience, please enable JavaScript in your browser. Thank you!

See plans for: businesses photographers students

Get Support

Find answers quickly. Contact us if you need to.
Start now >
Learn the apps

Get started or learn new ways to work.
Learn now >
Ask the community

Post questions and get answers from experts.
Start now >

Adobe is changing the world through digital experiences. Our creative, marketing and document solutions empower everyone — from emerging artists to global brands — to bring digital creations to life and deliver them to the right person at the right moment for the best results.

Subtotal
Promotions
Estimated shipping
Tax	Calculated at checkout

Total

Review and Checkout

Building a data-driven Flex and Java application with WebORB for Java

by Ken Nelson

www.sanclementetech.com

Content

Setting up WebORB for Java
Data management with WebORB
Building and running the Flex application

Created

4 April 2011

Requirements

Prerequisite knowledge

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

weborb_java_src.zip

Additional required other products

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).

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/', '[email protected]', '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.

On the WebORB Management Console select the Data Management tab.
In the lower left corner, click the Add New Database button to start the database connection process.

Figure 2. Configuring the database connection.

In the Database Connection dialog box, select MySQL as the Server Type.
Type the server, port, user id, and password for the database (see Figure 2).
Click Next.

Figure 3. Selecting the database.

Select the desired database schema; for this article it is w4jarticle (see Figure 3).
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:

On the upper left hand side of the screen, locate the Data Models list.
Click Add A New Model.
In the User Data Model dialog box, type a name for the model; for example type WebORB Article (see Figure 4).

Figure 4. Adding a new data model.

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
Select Java as the Server Language.

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.

Click Save to create the data model.
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).

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:

Click the Build button, which looks like a gear.

WebORB will generate the necessary Java and ActionScript code and prepare the application for deployment. (This can take some time.)

Once the build process completes, click the Auto Deploy Server Code button, which resembles the planet Earth with an arrow.

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.

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.

Choose File > New > Flex Project.

Figure 6. Creating the new Flex project.

Type W4jArticle (or another name if you prefer) as the Project Name.
Select J2EE as the Application Server Type and select BlazeDS as the remote object access service (see Figure 6).
Click Next.

Figure 7. Configuring the server.

Set the Root Folder to [Tomcat Home]/webapps/weborb.
Set the Root URL to the Tomcat installation; for example, http:/localhost:8080/.
Set the Context Root to /weborb.
Verify that the output folder is set to the [Tomcat Home]/webapps/weborb/[App name]-debug directory (see Figure 7).
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.
After the configuration is validated, click Next.

Figure 8. Adding library items.

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.
Click Finish.

Copy the generated code to the application

To use the WebORB generated ActionScript classes, follow these steps:

Copy the contents of [Tomcat Home]/webapps/weborb/weborbassets/wdm/output/WebORB Article/client/src to the src directory of the newly created application.
Expand test.w4j.weborb in the src folder in Package Explorer to see the classes (see Figure 9).

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).

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>

    

Save your changes.
To run and test the application, choose Run > Run W4jArticle.

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.

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License. Permissions beyond the scope of this license, pertaining to the examples of code included within this work are available at Adobe.