Developing Java & Flex 3 webservice application

What you need?
     - Eclipse
     - JDK (Java development kit required by Tomcat)
     - Apache Tomcat (free open source server)
     - Axis (protocol engine for tomcat server)
     - Flex builder 3

Optional
     - Apache Tomcat plugin for Eclipse IDE
     - Flex builder 3 plugin for Eclipse IDE
Installation guide

     Installing Tomcat.
     http://roseindia.net/webservices/axis2/apache-axis2-tomcat.shtml

     Installing Axis2 to Tomcat.
     http://codediaries.blogspot.com/2009/02/setting-up-axis2-with-tomcat-6.html

Software download link to be installed in sequent

     1- Eclipse, http://www.eclipse.org/downloads/index.php
     - Eclipse IDE for Java EE Developers
     - Eclipse IDE for Java Developers

     2- JDK (Java development kit required by Tomcat), http://java.sun.com/javase/downloads/index.jsp

     3- Apache Tomcat 6, http://tomcat.apache.org/download-60.cgi
      Test if the Tomcat is install properly by running the program Tomcat Monitor.
      A Tomcat notification icon will appears in the taskbar (bottom right corner of the screen).
      Right click the icon, and select "Start Service" to run the Tomcat.
      Open a web-browser and go to the following URL "http://localhost:8080/"
      Localhost is the same as the ip address of your local machine. Port: 8080 is the default port serve by the Tomcat.
      You should see the Tomcat start up webpage if the tomcat is installed correctly.

     4- Apache Axis2, http://ws.apache.org/axis2/
      Download & Copy the axis2.war file to C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\
      The \webapps\axis2 folder will be generated if Tomcat is running. This means that the axis2 servlet is installed to tomcat.
      Do not delete the axis2.war file. Test the axis2 servlet using the browser with the following
      URL "
http://localhost:8080/axis2/"

     5- Adobe Flex 3 builder, http://www.adobe.com/products/flex/features/flex_builder/

Reading Reference

     Flex Builder 3
     - Adobe Flex 3.0 for Dummies (recommended as your first book for learning flex)
     - Flex 3 : a beginner's guide (good reference)
     - Flex 3 Bible (more detail information inside)
     - Java and Flex Integration Bible (more detail information inside)

Webservice programming with Apache Axis2 & Eclipse IDE

A webservice is similar to a function/method call. If you are familiar with programming, function/method should be a very familiar term to you. A function is like a black box where we call it to execute some process. Sometimes we may need to pass some information to this black box. At the end of the process, we expect some return result or a process to be executed.

Functions helps to organise or consolidate our codes. Design functions so that they can reuse in future. As a programmer, we should have a lazy mindset. Lazy not for now nor the past. You want a lazy life for the future. Design and artitacte your codes in a way, such that your programming effort become lesser and lesser as you progress. Programming should be getting easier & easier to write as your codes gets larger. If you are not experiencing that, it just means that there is more that needs to be understood about the concept of programming.

Nowadays the codes seems so easy to write. For a line of codes, you can get a pop up window to do all the work for you. In fact, all the hardwork is already done for us, through the years of collective experience & software evolution. They have written libraries of functions that are so easy to use by many programmer. The progress is good because programming is getting less and less effort. Let us go back to webservice again.

What is the difference between Webservice and function/method call? Webservice is located at a remote server. Meaning, it is a function call to a remote server. The remote server provide functions for other devices on the network. We call them services.

There are many protocol standards that are design to provide such remote services (function call) across the network. One of them is call CORBA which I am aware of. There are many many more... which I do not know.

The most important benefit of using webservice technology as compare to other protocols is that it is in a readable form. The protocol is formated using ascii coded XML tags. The XML format allows developers from various operating system platform or programming languages to be able to connect the shared services, quick and easy. The protocol itself is self documentated, meaning that any developer can easily read and use the webservice for their own implementation. This is similar to the HTML tags that we have for accessing and displaying our web content. Evolving and becoming popular worldwide in such a short period of time.

In a summary, webservice is a function call from remote server using ascii texts in the format of XML tag. Apache Axis2 provides the open source library/method that implement the standard webservice. It is a ready written engine, a servlet application running under Tomcat server. Webservices written in module by module will be hosted under Axis 2 servlet.

The following sections will demonstrate a short example to illustrate the process of building a webservice.


1) Setup Axis in Eclipse. Axis plugin is already built into Eclipse by default, but a bit of configuration is still required. The axis2 module will helps to automate files generation that are required by the apache axis2 to run webservice.

Apache Axis2 (webservice)

- Go to Apache website & download the apache axis2 Standard Binary Distribution and unzip to the directory "c:\program files\".
- In eclipse, go to Window>Preferences>Web Services.
Axis2 Preferences>Axis2 Runtime>Axis2 runtime location: "C:\Program Files\axis2-1.5.1"
- Set to the axis program directory.
Server and Runtime, Server: Tomcat v6.0 Server
Web service runtime: Apache Axis2
- Go to Apache website & download the apache axis2 Standard Binary Distribution and unzip to the directory "c:\program files\".
- In eclipse, go to Window>Preferences>Web Services.
Axis2 Preferences>Axis2 Runtime>Axis2 runtime location: "C:\Program Files\axis2-1.5.1"
- Set to the axis program directory.
Server and Runtime, Server: Tomcat v6.0 Server
                    Web service runtime: Apache Axis2
2) Open a new webservice project, - File>>New>>Others...>>Web>>Dynamic Web Project
Ensure that Server: Tomcat v6.0 Server at localhost
            Web service runtime: Apache Axis2
3) Write a new java class using the Eclipse IDE. - Right click the project>>New>>Class

public class DoesMagic
{
    public String doBasicStuff(String message)
    {
        return "This is your message: " + message;
    }
}
4) Generate the folder/files for implementing the axis2 webservice

Axis2 is a opensource java servlet program that process
webservice protocol. Axis2 is run under Tomcat.
- Right click the new java class file DoesMagic.java>
Webservices>Create Webservice
- A new folder/directory will be generate for webservice.
project\WebContent\WEB-INF\services\DoesMagic

- Copy the java webservice folder to the Tomcat\axis2.
from:
project\WebContent\WEB-INF\services\DoesMagic
to:
C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\axis2\WEB-INF\services\DoesMagic

- Take Note!!! For all resource files (example *.properties, *.log) used in a typical Java project (files loaded through the classloader()).
The files are usually store under \project\resource folder to store config, log, or properties.
They should be copied to the service/project root directory as follows,
C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\axis2\WEB-INF\services\DoesMagic
Common resource file to be accessed by all the services under axis2 (for example log4j.properties),
should be copy to the following axis2 directory,
C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\axis2\WEB-INF\classes\
This is the directory for axis program. The files has to be store under axis for the file retrieval.

5) Run the Tomcat server.


To see the wsdl info: From web browser (Key in the following web address),  http://localhost:8080/axis2/services/DoesMagic?wsdl
To see the services available: From web browser (Key in the following web address), http://localhost:8080/axis2/services/listServices
To execute the java method created From web browser (Key in the following web address),
http://localhost:8080/axis2/services/DoesMagic/doBasicStuff?message=123


If the webservice cannot have access to your java project's configuration/resource files, the following message may be return as the webservice result.

This XML file does not appear to have any style information associated with it. The document tree is shown below.
<soapenv:Reason>
     <soapenv:Text xml:lang="en-US">unknown</soapenv:Text>
</soapenv:Reason>



Flex 3 client access to webservice

Now that the webservice is properly setup, I am going to create a flex project to allow the client to access the webservice that we have created.




1) Install Flex builder 3 development software.


2) Create a new flex project. Under the menu File>New>Flex project.


3) Under the menu, select Data>Import Webservice (WSDL)...>
and select the flex project src folder, click next.
WSDL URI: "http://localhost:8080/axis2/services/DoesMagic?wsdl"
-The URI is the webservice that we have created earlier, running on tomcat server.
-Choose the service
    Service: "DoesMagic"
    Port: "DoesMagicHttpSoap11Endpoint"
    Operation: tick what ever method to be used by the flex mxml file
    Package: "generated.webservices" (default: where are the *.as files will be generated)
    Main class: "DoesMagic" (default: class name)
-a new folder generated.webservices will be generated with *.as actionscript files. These actionscript object & mthods are generated to allow access to the webservice. The access to these webservice will be as simple as a function call from our flex/actionscript. To the programmer it appear as the function call is executed locally but in fact is accessing the webservice.


4) The example on the right demonstrate how the actionscript in a flex project access the webservice after the webservice actionscript has been auto generated programmer use. The actionscript is accessing the class's method DoesMagic.doBasicStuff, which is the webservice that we have created earlier. Example of how actionscript access the webservice:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
    creationComplete="funcxyz()">
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import generated.webservices.*;
           
            public function funcxyz():void
            {
                var myService:DoesMagic=new DoesMagic();
                myService.doBasicStuff("123");               myService.adddoBasicStuffEventListener(myResultHandlingFunction);
            }
           
            public function myResultHandlingFunction(data:DoBasicStuffResultEvent):void
            {
                Alert.show(data.result.toString());
            }
        ]]>
    </mx:Script>
</mx:Application>
5) Although the flex project is able to run properly in the flex builder IDE, it does mean it can be deploy properly. There will be still many things to troubleshoot. Next we will generate the html & flex necessary for our web deployment.


6) Deploy the flex project to the webserver
choose File>Export>Release Build...
Project: "your flex project name"
Application: "your main *.mxml file"
Export to folder: "bin-release"
A new bin-release will be generated.
Copy the files in the folder into the server's html hosting directory.
You can test if the build is working by clicking on it's html file. If you receive an error message stating that there is a security setting
violation or that the application can’t access a resource or asset, then you will need
to add a compiler setting that will allow you to access resources from the local file
system. Use the following steps to add the compiler setting.
In Flex Builder, right click on the flex project and select Properties from the menu.
• Select the Flex Compiler menu.
• Add a space and then -use-network=false to the complier arguments.
Redo the build process and test again.


7) Copying the web files to the following Tomcat web hosting directory.
C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\StarhomeWidget\pcadmin\Main.html





Deploy the html files to the WAMPSERVER.
WAMPSERVER is typically used for hosting static HTML pages for port80. It also has a php (script) engine running. This is unlike a Tomcat server where it is used for hosting static webpage & servlet. WAMPSERVER can be deployed as the front end server, and be used to conceal link/mapped to other server service accessible from other communication port.

The root directory for the web hosting
is located at D:\wamp\www\index.html
When we access a web domain for example
http://starhome.i2r.a-star.edu.sg/,
the index.html file will be loaded.

The default file to load can be configured
in the following file,
D:\wamp\bin\apache\Apache2.2.11\conf\httpd.conf

<Directory "D:/wamp/www/">
</Directory>
<IfModule dir_module>
    DirectoryIndex index.html index.htm index.php index.php3
</IfModule>

These define the root directory and also the default file
to load if it is not specified.
For website, the default file is usually index.html





Setting up LCDS (LiveCycle Data Services) for Flex project
1) copy "ds-console.war" & "lcds.war"
to C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\
2) Execute C:\Program Files\Apache Software Foundation\Tomcat 6.0\bin\tomcat6.exe
Project folders will be setup under C:\Program Files\Apache Software Foundation\Tomcat 6.0\webapps\
- ds-console.war
- lcds.war