Services Contacts Clients Downloads News    

ExtJS/4D AppBuilder 1.02

AppBuilder is a simple PHP script, with a small supporting 4D v11 component, that quickly allows you to build an ExtJS web interface (with full read/write/modify/delete capabilities) to your 4D v11 databases. Unlike some similar tools, AppBuilder is a code generator - it generates all the required ExtJS classes for the application, which you can then customize if desired.



AppBuilder requires that each table in your 4D v11 database have a primary key field named "ID", which must be LONGINT. Note that the field must be named "ID" exactly. "id", for example, will not work. In order to run the AppBuilder script you'll also need a webserver with PHP installed.

Installation - Step 1

Download the JSON component and install it into the "Components" folder of your target database.

Download and unzip "":

Place the "appBuilder.4dbase" component from the expanded folder into the "Components" folder of your target database.

Step 2

In the "On Web Connection" method of your 4D database you need to initialize the JSON component and add a call to the "ab_onWebConnection" method:

Step 3

Place the "appBuilderPHP" folder in your web server's document root.

Step 4

Open a web browser and navigate to the "appBuilderPHP" folder:

Enter the appropriate config info for the connection to your 4D database. Also enter the absolute destination path where you would like AppBuilder to generate files. Normally this would be the path to the "WebFolder" of your 4D database, ie: /Users/Smith/Database/WebFolder

Then click "Make" - AppBuilder will generate the application, and list the tables in your target database, ie:

Step 5

Your destination folder will now contain your generated application:

The only thing that remains to do is to copy ExtJS into the folder as well. Name the ExtJS folder "ext", ie:

Step 6

You can now access your generated application:

Note: The ExtJS classes for grids and input forms use the "pre-configured class" pattern. See Writing a Big Application in ExtJS (and Part 2) for more information.