qooxdoo Beginner's Guide

上QQ阅读APP看书，第一时间看更新

Time for action - integrating with the Java server

One of the qooxdoo contribution projects is RPCJava (http://qooxdoo.org/contrib/project#rpcjava). In early versions of qooxdoo, the server components were also bundled as the backend in the qooxdoo SDK. As it evolved, the server components have been separated into contribution projects to allow those components to grow independently from the qooxdoo client framework.

Let's set up the server development environment. To do so, just follow these steps:

Create the following directories:
- C:\teamtwitter-server
- C:\teamtwitter-server\src
- C:\teamtwitter-server\lib
- C:\teamtwitter-server\classes
- C:\teamtwitter-server\dist
- C:\teamtwitter-server\webapp
Download the GNU tarball of RPCJava from the SourceForge website (http://qooxdoo-contrib.svn.sourceforge.net/viewvc/qooxdoo-contrib/trunk/qooxdoo-contrib/RpcJava/) and extract qooxdoo-contrib-RpcJava.tar.gz to C:\.
Set up RPCJava in the server environment:
- Go to C:\RPCjava
- Copy the contents of C:\RpcJava\trunk\lib to C:\teamtwitter-server\lib
- Copy the contents of C:\RpcJava\trunk\rpc to C:\teamtwitter-server\src
- Copy the contents of C:\RpcJava\trunk\webapp to C:\teamtwitter-server\webapp
- Copy C:\RpcJava\trunk\build.properties.sample to C:\teamtwitter-server\build.properties.sample
- Copy C:\RpcJava\trunk\build.xml to C:\teamtwitter-server\build.xml
- Copy C:\teamtwitter-server\build.properties.sample to C:\teamtwitter-server\build.properties
Download the following tools or software required for the server project and install them:
- Download the Ant tool to run the build file. Either you can download Ant from http://ant.apache.org/ and install it or use the Ant plugin that comes with Eclipse.
- Download the latest stable Java Development Kit (JDK) from http://www.oracle.com/technetwork/java/javase/ downloads/index.html and install it.
- Download the latest stable version of Tomcat from http://tomcat.apache.org/ and install it.
Set the following environment variables in My Computer | Properties | Advanced | Environment Variables:
- Set the ANT_HOME environment variable, as shown in the following screenshot:
- Set the JAVA_HOME environment variable, as shown in the following screenshot:
- Append the bin directory of Ant (C:\apache-ant-1.8.2\bin) in the PATH environment variable.

In C:\teamtwitter-server, edit build.properties to set your details. The following details may differ for your system:

applicationName = teamtwitter
deployDir = C:/softwares/tomcat5.5/webapps
qooxdooDir = C:/qooxdoo-1.2-sdk
clientApplicationDir = C:/teamtwitter

In C:\teamtwitter-server, edit the build.xml file to add the necessary targets to build the Team Twitter client source and server source. The build. xml file reads the properties from build.properties and sets the value for the various directories such as build.dir, dist.dir, application.dist.dir, and web.dir.

The target clean wipes out the old classes and creates classes and dist directories.

The target compile compiles the team twitter server code with the libraries kept under the lib directory. All the output classes are saved under the classes directory.

The following content is from the build.xml file:

<?xml version='1.0'?>
<project name="teamtwitter" default="help" basedir=".">
<property file="build.properties" />
<property name="build.dir" value="${basedir}" />
<property name="dist.dir" value="${basedir}/dist" />
<property name="application.dist.dir" value="${dist.dir}/${applicationName}" />
<property name="web.dir" value="${basedir}/web" />
<target name="clean">
<delete dir="classes" />
<mkdir dir="classes" />
<delete dir="${dist.dir}" />
<mkdir dir="${dist.dir}" />
<mkdir dir="${application.dist.dir}" />
</target>
<target name="compile">
<mkdir dir="classes" />
<javac srcdir="src" destdir="classes" debug="true" target="1.5" source="1.5">
<classpath>
<fileset dir="lib">
<include name="**.jar" />
</fileset>
</classpath>
</javac>
</target>
<target name="client.generate-source">
<exec executable="python" dir="${clientApplicationDir}">
<arg value="generate.py" />
<arg value="source" />
</exec>
</target>
<target name="client.generate-build">
<exec executable="python" dir="${clientApplicationDir}">
<arg value="generate.py" />
<arg value="build" />
</exec>
</target>
<target name="copy.web" depends="compile, client.generate-build">
<!-- copy client application -->
<copy todir="${application.dist.dir}">
<fileset dir="${clientApplicationDir}/build">
</fileset>
</copy>
<mkdir dir="${application.dist.dir}/WEB-INF" />
<!-- copy lib -->
<copy todir="${application.dist.dir}/WEB-INF/lib">
<fileset dir="${build.dir}/lib">
<exclude name="servlet-api.jar" />
</fileset>
</copy>
<!-- copy classes -->
<mkdir dir="${application.dist.dir}/WEB-INF/classes" />
<copy todir="${application.dist.dir}/WEB-INF/classes">
<fileset dir="${build.dir}/classes">
<include name="**/*.class" />
<exclude name="**/*Test.class" />
<exclude name="**/*Tests.class" />
</fileset>
</copy>
<!-- copy WE-INF -->
<copy todir="${application.dist.dir}/WEB-INF">
<fileset dir="${build.dir}/webapp/WEB-INF">
<include name="**/*" />
</fileset>
</copy>
</target>
<target name="dist" depends="copy.web">
<war destfile="${dist.dir}/${applicationName}.war" webxml="${application.dist.dir}/WEB-INF/web.xml">
<fileset dir="${application.dist.dir}" />
</war>
</target>
<target name="deploy">
<copy todir="${deployDir}/${applicationName}">
<fileset dir="${application.dist.dir}">
</fileset>
</copy>
</target>
<target name="help">
<echo message="targets available in this build file are:" />
<echo message="clean" />
<echo message="compile" />
<echo message="client.generate-source" />
<echo message="client.generate-build" />
<echo message="copy.web" />
<echo message="dist" />
<echo message="deploy" />
</target>
</project>

The target client.generate-source generates the development version of the Team Twitter client application.

The target client.generate-build generates the deployment version of the Team Twitter client application.

The target copy.web depends on targets compile and client.generate-source.

After completing the dependency targets, it copies the Team Twitter client application deployment version into the dist directory, creates the WEB-INF directory in the dist directory, copies all the library files except servlet-api.jar under the WEB-INF/lib directory, copies the Team Twitter server classes under the WEB-INF/classes directory, and copies the web.xml under WEB-INF. The servlet-api.jar file will be available in the Tomcat common/lib directory.

The target dist depends on the copy.web target. After completing the dependency target, it creates the Web application ARchive (WAR) file which contains both the client application and server code for the Team Twitter application.

The target deploy deploys the dist directory in the Tomcat webapps directory.

Now, let's build the Team Twitter application. Run the following build command:
```
C:\teamtwitter-server>ant dist
```
- The preceding build command will build everything and generate the web application directory as well as the WAR file. Now, we have the server development environment.
Let's make changes in the Team Twitter client application to integrate with the server code. RPCJava comes with a qooxdoo.test remote service, which implements all the test methods of the qooxdoo RPC server. We can call the echo method from the test remote service to verify the client server communication.
Open the Team Twitter client application JavaScript file (C:\teamtwitter\source\class\teamtwitter\Application.js).
Edit the listener implementation for the button and add the following code to integrate with the RPCJava server.
```
// Add an event listener
button1.addListener("execute", function(e) {
var rpc = new qx.io.remote.Rpc();
rpc.setCrossDomain( false );
rpc.setTimeout(1000);
var host = window.location.host;
var proto = window.location.protocol;
var webURL = proto + "//" + host + "/teamtwitter/.qxrpc";
rpc.setUrl(webURL);
rpc.setServiceName("qooxdoo.test");
rpc.callAsync(function(result, ex, id){
if (ex == null) {
alert(result);
}
else
{
alert("Async(" + id + ") exception: " + ex);
}
}, "echo", "Hello to qooxdoo World!");
});
```
Now, run the build again to rebuild the application:
```
C:\teamtwitter-server>ant dist
```
- The dist target builds the client application code, compiles the server code, and builds the web application.
  Now, run the following command to deploy the Team Twitter web application in Tomcat.
  Let's deploy the application:
```
C:\teamtwitter-server>ant deploy
```
Now, start Tomcat by running the following command (<TOMCAT_HOME> is where you installed the Tomcat server):
```
<TOMCAT_HOME>\bin\startup.bat
```
Let's check the application from the browser. Once the Tomcat server is up and running, try to access the primitive Team Twitter application by accessing the following URL:

http://localhost:8080/teamtwitter/

Click on the First Button button; you'll get a response from the Team Twitter server. The server method just echoes whatever the client passed with the prefix Client said.
In the JSON-RPC call, the following data is sent as the request and received in the response.
The data sent in the request to the server is as follows:
```
{"service":"qooxdoo.test","method":"echo","id":1,"params":["Hello to qooxdoo World!"]}
```

The data received in response from the server is as follows:

{"id":"1","result":"Client said: Hello to qooxdoo World!"}

Time for action - integrating with the Java server

Working with Eclipse IDE

If you want to use any IDE such as Eclipse IDE, carry out the following steps (you can download the Eclipse IDE from http://www.eclipse.org/):

Create a Java project and set the project name as teamtwitter-server. Set the location as C:\teamtwitter-server, which was created earlier in step 1 in the Time for action integrating with the Java server section. Click on the Finish button. It will automatically set everything for the project.
Now, set up the Ant view. If you have not enabled the Ant view, enable it by going to Window | Show View | Ant. In the Ant view of Eclipse, add the build.xml file, which is present in C:\teamtwitter-server. Then, you can run the Ant targets from the Eclipse IDE. The Ant tasks in the server application also build the client application based on the build.properties configuration, generates the final web application, and deploys it in Tomcat:

What just happened?

We have set up the RPCJava server and the server development environment. We have integrated the client application with the server, built the code, deployed the web application, and tested it.

Pop quiz

qooxdoo needs the following tools
a. ActivePython and Cygwin
b. ActivePython or Cygwin
Components in the qooxdoo SDK are
a. The qooxdoo applications for the end users
b. The qooxdoo internal applications used by the framework
Applications in the qooxdoo SDK are
a. The qooxdoo applications for the end users
b. The qooxdoo internal applications used by the framework
qooxdoo is a
a. Client-side framework
b. Server-side framework
c. Both
qooxdoo prefers to send the data for communication between the client and the server in the format of
a. XML
b. Text
c. JSON
The qooxdoo client application can communicate with the server implemented in
a. Java only
b. Java, Python, and Perl
c. Any language abiding to the qooxdoo JSON-RPC server guidelines