The rest of the qooxdoo development process remains the same, with the only difference being how the required JavaScript is created.
Unzip this file anywhere you want; no installation is needed.
On Windows you may need to first install Ruby. The small Ruby installer without Devkit from here is sufficient.
On Linux, you can install Sass directly with this: sudo apt-get install ruby-sass
Unzip this file anywhere you like; no installation is needed.
Unzip this file anywhere you like; no installation is needed.
python ~/Tools/qooxdoo-5.0.2-sdk/tool/bin/create-application.py --name=simple --type=mobileThis will create a qooxdoo mobile app and directory named simple. (The source for this app is also included in the PnJ .zip.)
If you have the qxotica package installed in Lazarus, you can also use File | New to create the qooxdoo app.
If you have npm installed, the current version of qooxdoo (5.0.2) will also create Gruntfile.js, package.json, package-lock.json, and node_modules in the top level of the app's directory. You can delete these as well. If you're using the trunk version of qooxdoo, these files won't be created.
program Application;
uses
JS,
qx.ui.mobile,
MainPage;
var
manager : TPage_Manager;
aMainPage : TMainPage;
begin
manager := TPage_Manager.New(False);
aMainPage := TMainPage.New;
manager.addDetail(aMainPage);
aMainPage.show(nil);
end.
This code is pretty simple: create a page manager and the main page, add the page to the manager, show the page.
unit MainPage;
interface
{$modeswitch externalclass}
uses
JS,
qx,
qx.ui.mobile;
type
TMainPage = class external name 'simple.MainPage' (TPage_NavigationPage)
end;
implementation
procedure Construct;
begin
TMainPage(JSThis).base(JSArguments, nil); //call ancestor's constructor
TMainPage(JSThis).setTitle('Simple App');
end;
procedure Initialize;
begin
TMainPage(JSThis).base(JSArguments, nil); //call ancestor's method
end;
procedure Destruct;
begin
end;
initialization
TQx_Class.define('simple.MainPage',
new(['extend', TPage_NavigationPage,
'construct', @Construct,
'events',
new([]),
'properties',
new([]),
'members',
new(['_initialize', @Initialize]), //override
'destruct', @Destruct]));
end.
Because JavaScript is not an OOP language, qooxdoo introduces its own system for adding OOP to JavaScript, using a "closed form" of class declaration. You can read more about that here if you're interested. Instead of declaring the class's structure, the class is defined completely by calling define. In the example code, this is done in the unit's initialization section to ensure that the class is defined before it's used.
Note how the class is also declared as an external class at the top of the unit. Since everything has to be declared in Pascal, this is needed so the class's inherited methods can be referenced in Application.pas.
The define call illustrates two language features that are used routinely in JavaScript and qooxdoo. The first is the JavaScript object (or "map" in qooxdoo terminology). Anytime you need to pass a group of key-value pairs in JavaScript, you use an object ( {} ). You can create a JavaScript object in Pascal with the new function. In this example, a map of six keys is passed to define.
The other recurring JavaScript language feature is anonymous functions, useful for on-the-fly function declarations. With qooxdoo, this allows the function's code to appear immediately after the key it's associated with. Since Pas2JS does not support anonymous functions, the example code uses named functions Construct, Initialize and Destruct.
The Construct and Initialize procedures show how to work with another important JavaScript language feature: the this keyword that's part of all functions and which qooxdoo uses to implement polymorphism. JSThis is the Pas2JS equivalent, which is typecast to the type (TMainPage) of the object passed to the function so the object's methods can be called.
#!/bin/sh
set -e
pas2jsdir=~/Tools/pas2js/bin
qxunitsdir=~/Tools/pnj/packages/qooxdoo
$pas2jsdir/pas2js -Jirtl.js -JiRunMobileApp.js -Jc -JoUseStrict- -Tbrowser -Fu$qxunitsdir Application.pas
python generate.py sourceThe first time you run generate.py, it creates a cache; this may take a couple minutes, but subsequent runs will only take seconds. When complete, load index.html (in the app's source directory) into your browser to run the app.
Note that if you created the app in Lazarus with qxotica, you can also run generate.py by opening simple.lpi in Lazarus and choosing Run | Compile.
To generate a final deployment version:
python generate.py buildThis minimizes and obfuscates the app's JavaScript code and includes only the qooxdoo classes that the app uses. You can copy the contents of the app's build directory to your Web server. No other files are needed to deploy the app.
To generate the app from the example files supplied with PnJ, edit the simple app's config.json file and change QOOXDOO_PATH so it points to where you unzipped the qooxdoo SDK.