http://www.admin.adfg.state.ak.

us/confluence/display/Flex/Creating+a+Flex+Java+Oracle+Web+Applic
ation

Creating a Flex Java Oracle Web Application

 Added by Tracy Olson, last edited by Kathleen Jones on Apr 09, 2010  (view change)

Creating a Flex/Java/Oracle Web Application

This tutorial tutorial was started by Ivan Show and added to by Heath Kimball  

Included Materials

BasicFlexTutorial

       Develop and Deploy a Flex-Java-Oracle Application.doc    

http://its.adfg.state.ak.us/BasicFlexTutorial/Develop%20and%20Deploy%20A%20Flex-Java-Oracle
%20Application.doc

       IDE Software

            Apache Tomcat Installer\apache-tomcat-

6.0.20.exe         http://its.adfg.state.ak.us/BasicFlexTutorial/IDE%20Software/Apache%20Tomcat
%20Installer/apache-tomcat-6.0.20.exe

           
BlazeDS\blazeds.war                                                    http://its.adfg.state.ak.us/BasicFlexTutorial/IDE
%20Software/BlazeDS/blazeds.war

            Flex 3 plug in

installer\FB3_WWEJ_Plugin.exe              http://its.adfg.state.ak.us/BasicFlexTutorial/IDE
%20Software/Flex%203%20plug%20in%20installer/FB3_WWEJ_Plugin.exe

            Flash Player

Installer\install_flash_player.exe                  http://its.adfg.state.ak.us/BasicFlexTutorial/IDE
%20Software/Flash%20Player%20Installer/install_flash_player.exe

            Java 6 JDK Installer\jdk-6u17-windows-

i586.exe              http://its.adfg.state.ak.us/BasicFlexTutorial/IDE%20Software/Java%206%20JDK
%20Installer/jdk-6u17-windows-i586.exe

            eclipse-jee-ganymede-SR2-
win32.zip                              http://its.adfg.state.ak.us/BasicFlexTutorial/IDE%20Software/eclipse-jee-
ganymede-SR2-win32.zip

           
Ojdbc14.jar                                                                   http://its.adfg.state.ak.us/BasicFlexTutorial/IDE
%20Software/ojdbc14.jar

       Flex and Java Code

           
BasicFlexTutorialMain.mxml                                         http://its.adfg.state.ak.us/BasicFlexTutorial/Flex
%20and%20Java%20code/BasicFlexTutorialMain.mxml

           
ConnectionHelper.java                                                  http://its.adfg.state.ak.us/BasicFlexTutorial/Flex
%20and%20Java%20code/ConnectionHelper.java

           
DummyData.as                                                            http://its.adfg.state.ak.us/BasicFlexTutorial/Flex
%20and%20Java%20code/DummyData.as

           
DummyDataDTO.java                                                 http://its.adfg.state.ak.us/BasicFlexTutorial/Flex
%20and%20Java%20code/DummyDataDTO.java

           
DummyDataVO.as                                                      http://its.adfg.state.ak.us/BasicFlexTutorial/Flex
%20and%20Java%20code/DummyDataVO.as

           
DummyDataVO.java                                                     http://its.adfg.state.ak.us/BasicFlexTutorial/Flex
%20and%20Java%20code/DummyDataVO.java

            haida-
salmon.jpg                                                          http://its.adfg.state.ak.us/BasicFlexTutorial/Flex%20and
%20Java%20code/haida-salmon.jpg

Software Requirements

JDK 6 Update 17 (Java SE Development Kit (JDK))

 http://java.sun.com/javase/downloads/index.jsp

Eclipse 3.4.2 Ganymede (Eclipse IDE for Java EE Developers)

 http://www.eclipse.org/downloads/download.php?
file=/technology/epp/downloads/release/ganymede/SR2/eclipse-jee-ganymede-SR2-win32.zip

Adobe Flex Builder 3 Professional Eclipse Plug-In

 http://www.adobe.com/cfusion/entitlement/index.cfm?e=flexbuilder3
 If you have not purchased a license for Flex there is a 60 trial.

Adobe Flash Player 10 ActiveX

 Get the latest version here http://get.adobe.com/flashplayer/

Apache Tomcat 6.0.20 (Windows Service Installer)

 http://tomcat.apache.org/download-60.cgi        

Note: ojdbc14.jar must be placed into Tomcat’s lib folder. Tomcat doesn’t include this jar. It is most likely
already in your machine somewhere. Do a search for it or download it from here 

Blaze DS (Stable Build)

 http://opensource.adobe.com/wiki/display/blazeds/download+blazeds+3
Oracle Database

 I created a user account specifically for this tutorial. You should be able to access it without
additional software.   

Installing Software

If you acquire the software on your own, pay attention to where you install everything. Where the software
is saved/installed does not matter as long as you point Eclipse in the right direction.  Should you use the
files I included with this tutorial, place each folder directly into c:\. Otherwise the paths I specify in my
tutorial will be different from your paths. It is important to install the software in the order listed below.

Java – Follow the install wizard.

               Defaults to C:\Program Files\Java

Eclipse – Unzip the root folder where you want. There is no install process.

Flex Builder 3 – Follow the install wizard. When installing the plug-in it will ask you which Eclipse IDE you
wish to install the Flex.

     Defaults to C:\Program Files\Adobe\Flex Builder 3 Plug-in

Flash Player – Run the executable.

Apache Tomcat – Follow the install wizard.

 When you reach the part that asks for Administrator Login leave everything at the default and
click next.
 It asks you for a path to Java 5. The text field should default to your Java 6 path C:\Program
Files\Java\jre6. Click install.
 Defaults to C:\Program Files\Apache Software Foundation\Tomcat 6.0

OJdbc14.jar - Copy and paste ojdbc14.jar into your Apache Tomcat lib folder

       C:\Program Files\Apache Software Foundation\Tomcat 6.0\lib

Blaze DS – Save the Folder to c:\

Oracle – No need to install.  

Creating a Workspace

Step 1.

         Create a new directory for the workspace: c:\FlexTutorialWorkspace

Step 2.

          Start Eclipse (c:\¿\eclipse\eclipse.exe)

         Select the workspace we created.


 File -> Switch Workspace
 Browse to c:\FlexTutorialWorkspace
 Click OK
 Eclipse will close and reopen.
Click the Workbench icon. (Furthest right icon. Curved Arrow.)  

Setting up the Project

Step 1.

 Select File -> New -> Other

 Select Flex Builder -> Flex Project

Note: If Flex Builder is not listed uninstall it and reinstall it.

Step 2.

 Project name: "BasicFlexTutorial"

 Use default location: checked
 Web application: selected
 Application server type: J2EE
 Use remote object access service: checked
 LiveCycle Data Services: selected
 Create combined Java/Flex project using WTP: checked
 Java source folder: java_src
 Click Next

Step 3.

 Target runtime: Click New

 Server's host name: localhost
 Select Apache -> Tomcat v6.0 Server
 Click Next
 Name: Apache Tomcat v6.0
 Tomcat installation directory: (Browse) C:\Program Files\Apache Software
Foundation\Tomcat 6.0
 JRE: Workbench default JRE
 Click Next
 Click Finish
 Select Apache Tomcat v6.0 from Target Runtime dropdown
 Flex WAR file: (browse) c:\BlazeDS\blazeds.war
 Compile application locally in Flex Builder: selected
 Compiled Flex application location: bin-debug
 Click Next
 Main Source folder: flex_src
 Main app file: BasicFlexTutorialMain.mxml
 Click Finish
 Click Yes to switch to Flex Development perspective.
 If you do not have a license for Flex click Continue Trial.
 Project -> Properties
 Java Compiler
 Compiler compliance level: 1.5
 Apply
 Ok
 Project Facets
 Java 5.0
 Apply
  Ok  

Setting up Flex Files

 Copy and paste or type in BasicFlexTutorialMain.mxml

 Navigator pane:  highlight BasicFlexTutorial\flex_src
 Create new folders:  \flex_src\data, \flex_src\script, and \flex_src\assets
 Navigator pane: highlight \flex_src
 Copy and paste haida-salmon.jpg into the folder \assets
 Navigator pane:  highlight \flex_src\data
 Select File -> New -> Other -> Flex Builder -> ActionScript Class
 Package:  data
 Filename:  enter "DummyDataVO"
 Copy and paste or type in DummyDataVO
 Save
 Navigator pane:  highlight \flex-src\script
 Select File -> New -> Other -> Flex Builder -> Actionscript File                     
 Package:  script
 Filename:  enter "DummyData"
 Copy and paste or type in DummyData.as below
 Save
 Navigator pane: Right Click \BasicFlexTutorial\
 Select File -> New -> Folder -> Name: bin-release
 Package Explorer pane:  find and edit WebContent\WEB-INF\flex\remoting-config.xml.  
 Note: If you do not see text be sure you are looking at Source view and not Design view.
Look at the tabs in the bottom left corner of the current view. 
 Add the following just above the <adapters> tag
      <destination id="gateway-dummydata">
               <properties>
                      <source>gateway.DummyDataDTO</source>
               </properties>
      </destination>

Save Setting Up Java Files

 Navigator pane: Right click java_src -> New -> Other -> Java -> Package
 Name: enter “gateway”
 Click Finish
 In the Navigator pane, highlight gateway
 Select File -> New -> Other -> Java -> Class
 Name:  enter "DummyDataVO"
 Leave all other entries as they are
 Click "Finish"
 (Repeat for classes DummyDataDTO and ConnectionHelper).
 Copy and Paste or type in the files:
 DummyDataVO.java
 DummyDataDTO.java
 ConnectionHelper.java
 Note: I removed the username and password from the code.
Contact [email protected] for the information. 
Resulting Directory Structure

 BasicFlexTutorial
 .settings
 bin-debug
 bin-release
 flex_libs
 flex_src
 assets
 haida-salmon.jpg
 data
 DummyDataVO.as
 script
 DummyData.as
 BasicFlexTutorialMain.mxml
 html-template
 java_src
 gateway
 DummyDataDTO.java
 DummyDataVO.java
 ConnectionHelper.java
 WebContent
 META-INF
 WEB-INF
 flex
 lib
 src
 web.xml
 .actionScriptProperties
 .classpath
 .flexproperties
 .project
 Servers
 .settings
 Tomcat v6.0 Server at localhost-config
 .project  Setting up the Server (running app locally)

Step 1.

 Select Window -> Show View -> Other

 Select Server -> Servers
 Click OK

Step 2.

 Click tab on Servers pane

Step 3.

 To start the server in views pane

 Server pane: right-click Tomcat v6.0 at localhost
 Select Start
  (ServerState will change to "Started" when successful)

Step 4.

 Start server
 Server pane: Double-click Tomcat v6.0 Server at localhost
 Click "Use Tomcat installation ..." (second radio button)
 CTRL-S to save
 Close Overview tab

Step 5.

 Stop Server
 Right-click Servers Tab
 Select Add and Remove Projects...
 Highlight BasicFlexTutorial
 Click Add >
 Click Finish

Step 6.

 Start server

Step 7.

 Select BasicFlexTutorialMain.mxml
 Run -> Run As -> Flex Application
 The green circle with a white triangle is the run button. Note: To compile/build every time
you save. Select Project -> Build Automatically  

Deploying and Running

Step 1.

 Select Project -> Export Release Build

 Project: BasicFlexTutorial
 Application: All Applications
 Export to Folder: c:\FlexTutorialWorkspace\BasicFlexTutorial\bin-release
 Click Finish

Step 2.

 Select File -> Export -> Web -> WAR File

 Click Next

Step 3.

 Web Project: BasicaFlexTutorial

 Destination: c:\FlexTutorialWorkspace\BasicFlexTutorial\bin-release\ BasicFlexTutorial.war
 Export source files: unchecked
 Overwrite existing file: checked
 Click Finish

Step 4.

 In Mozilla, goto http://its.adfg.state.ak.us:8195/
 Select Tomcat Manager
  For username & password: Contact [email protected]

Step 5.

 Undeploy old version

Step 6.

 Goto WAR file to deploy

 Browse to
c:\FlexTutorialWorkspace\BasicFlexTutorial\bin-release\BasicFlexTutorial.war
 Click Deploy

Step 7.

 To run, in Mozilla, goto

http://its.adfg.state.ak.us:8195/BasicFlexTutorial/BasicFlexTutorialMain.html   

Other Flex Related Stuff 

SVN (Subversion) - When using SVN be sure to point the Flex compiler to the local copy of the project
you checked out.

 Check out project from SVN

 Right click on the project -> Properties -> Flex Compiler (Left Pane) -> Additional compiler
Arguments -> Update that path 

Cannot create flex project -- Check to see if Flex is installed.

 Control Panel -> Add or Remove Programs

 If Adobe Flex Builder 3 Plug-in is listed remove it and reinstall it.
 If it’s not listed try installing it again. 

Port Error - If you try to start your server from within Eclipse and get an error saying all the ports are in
use you need to close Eclipse and reopen it. Remember to save any changes first. 

Java 5.0 Update 22 (Java SE Development Kit 5.0u22) - If you want to use Java 5.0 you can get it here.

 https://cds.sun.com/is-bin/INTERSHOP.enfinity/WFS/CDS-CDS_Developer-
Site/en_US/-/USD/ViewProductDetail-Start?ProductRef=jdk-1.5.0_22-oth-JPR@CDS-
CDS_Developer 

Converting JRE 6.0 to JRE 5.0 (Vice Versa) - To move from one version of java to the other you must
change the Java Build Path, Java Compiler and Project Facets. These steps explain how to go from 6 to
5. Going from 5 to 6 is the same. Be sure that you have installed the JDK you want to use.

 Java Build Path

 Project -> Properties -> Java Built Path
 Select Libraries Tab
 Highlight JRE 6.0 -> click Remove
 Click Add Library
 JRE System Library
 Installed JREs
 Add
 Standard VM
 Click Directory and navigate to the root folder of JRE 1.5
  JRE System libraries should be populated with 8 jars.
 Finish
 Check JRE 1.5
 Ok
 Java Compiler
 Project -> Properties -> Java Compiler
 Compiler compliance level: 1.5
 Apply
 Project facets
 Project -> Properties -> Project Facets
 Check Java
 Select 5.0 from the drop down menu
 Apply
 Ok 

Questions/Suggestions regarding the tutorial -- Contact [email protected]