qooxdoo Beginner's Guide

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

Time for action - creating a simple qooxdoo application

qooxdoo is a client-side framework and allows you to create the client application only. The qooxdoo framework also provides RPC API to communicate with the server. In this section, we will learn how to create the client application and the following sections will explain how the data is passed from client to server and how to communicate with the server.

Open a command window, go to C:\qooxdoo-1.2-sdk\tool\bin, and run the create-application.py command. That will show you the usage and the options of the create application script. If you have installed ActivePython, you can just type create-application.py, as the .py file type is already associated with Python application. If you have installed Python from any other source, that is, either from Cygwin or from python.org, you will have to associate the .py file type with the Python application or run Python with the .py file (python create-application.py).

Tip

To avoid typing python every time, it is recommended to associate the Python application with the .py files. You can do so by right-clicking and opening a .py file. It will ask you to choose a program; just browse to the Python location. If you have any issues, run the Python application for the .py files. To avoid all this, it is recommended to use ActivePython.
- Run the following command in the command prompt:
```
C:\qooxdoo-1.2-sdk\tool\bin>create-application.py
```
- This will display a list of options of the create application script. Two of them are explained as follows:
  - --name or the n option is for the name of application
  - --out or o is for the output location
    Other options have default values. See the other options in the console output.
Now, let's create the Team Twitter application. For creating this application, you can type any one of the following commands in the command prompt:
- create-application.py --name teamtwitter --out C:\
- create-application.py -n teamtwitter -o C:\
  The preceding command creates the Team Twitter client application in the C drive.
Now, open the C:\teamtwitter\source\index.html page in the browser. It will show you the message Application not yet ready!. We need to build the application before running the application. In a command window, go to C:\teamtwitter and run the generate.py source command. This generates the development version of the application. Now, reload the C:\teamtwitter\source\index.html page in the browser. You'll see the first button; click on the button and say hello to qooxdoo world!
Now, let's generate the build version of the application. Go to C:\teamtwitter and run the generate.py build. This generates the deployment version of the application. Now load the page C:\teamtwitter\build\index.html in the browser. You'll see the First Button button; click on this button and say hello to qooxdoo world!

Now, let's explore the directory structure of the qooxdoo application:

Time for action - creating a simple qooxdoo application

What just happened?

We have created a simple application with qooxdoo, built it, and said hello to qooxdoo world! Let's see the directories and important files that are generated on creation of the application.

Source

The source directory contains the development version of the application. The directories and files that come under the source directory are as follows:

class: This directory contains all the code of the application. qooxdoo follows a complete object-oriented programming approach with a proper namespace system. You'll work under this directory most of the time to write the JavaScript classes for the application.
resource: This directory contains the resource files, that is, the image files for the application. Resources also follow namespace. You can use the images that come with the qooxdoo framework. No need to copy those images from the qooxdoo framework directory to this directory. Place only the additional resource files in the application resource directory. qooxdoo framework images will be copied automatically by the generator.
script: This directory contains the generated development version of the JavaScript file. It is a loader file that includes all other JavaScript files. This is generated when you run the generate.py source.
translation: This directory contains the localization files to support internationalization of the application. If you are supporting multiple languages in your application, you need to place the .po files for languages other than English.

index.html: This is the only HTML file (which is also simple) required for the entire qooxdoo application. This HTML file just loads the generated application JavaScript file under the script directory. The content of this file is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>teamtwitter</title>
<script type="text/javascript" src="script/teamtwitter.js"></script>
</head>
<body></body>
</html>

Build

The build directory contains the deployment version of the application. This whole directory's content is generated when you run the generate.py build. The directories and files that come under the build directory are listed as follows:

resource: This directory contains the resource files. It contains the resources added in the application and also the resources that came with the qooxdoo framework.
script: This directory contains the generated build version of the JavaScript file. It will be a single, optimized JavaScript file that contains the content from all the source JavaScript files. If your application is huge, you can split this one single JavaScript file into many by modularizing your application into parts, which gets loaded on demand.
index.html: This is identical to the development version.

Manifest.json

The Manifest.json file contains meta information about the application. This is in the JavaScript Object Notation (JSON) format. It has two parts, namely, info, which is for the human eye and provides, which is used by the generator for build processing.

config.json

The config.json file contains the configuration used by the generate.py script for the build operations.

generate.py

The generate.py script is the proxy for the qooxdoo framework's generator.py script located in the tool/bin directory. This script generates the development and deployment version of the application.