Creating a Project

A CloudaIDE application is an Eclipse project. It is created using the project creation wizard. From the main menu of Eclipse Workbench choose File ➜ New ➜ Project ➜ CloudaIDE ➜ CloudaIDE Project or select Create Project from Toolbar button Menu.

Figure 1.

Project creation wizard - first step

Fill in the project name and choose the database system in use. After pressing Next, the second wizard page will be presented.

Figure 2.

Project creation wizard - second step

Fill in an appropriate JDBC URL, user name and password for the design purpose. Take into account, that the user name and the password depending on the database system can be case sensitive. The user name is used in the system for the authentication and the schema specification purposes. Be careful, because, in some databases (e.g. Oracle) user can authenticate case insensitive, but the schema name is case sensitive.

Figure 3.

Project creation wizard - third step

After pressing the Finish button a new application will be created. In the Package Explorer the new Demo_project entry can be seen.

This project contains two things essential to understand CloudaIDE development. One is the mroovka.formica_cfg file in the top folder. This is a text file containing global project configuration information. The syntax and semantics of it is described in the Language Reference. The other item is the mroovka folder. The purpose of it is to hold CloudaIDE form design files. Those files have the formica extension (the Latin word for ant). The AAAMain.formica file is the form which is executed first on application start.

WATCH: APPLICATION CREATION WIZARD IN ACTION

Figure 4.

Package Explorer

Launching Basic Application

After creation of the project the developer receives a "Hello World" application. It can be run in the development mode. To do it the developer has to launch the context (right click) menu at the project node in the Package Explorer and choose Run as ➜ Web Application (Super Dev Mode).

Figure 5.

Running application

After some time, the Eclipse opens the development view with the application run URL. It can be right clicked to display a context menu or double clicked to run the application immediately.

Figure 6.

Running application in a browser

This launches the browser with the initial form displayed.

Figure 7.

CloudaIDE form in the browser window

The CloudaIDE browser window has tree main parts:

1. Form Panel in the center. This is the area where the forms are displayed.
2. Toolbar on the top (initially containing only help icon). The toolbar set of icons is determined automatically by the system. It depends on some system state parameters.
3. Menu (initially empty) on the left side. The contents of the menu is determined by the programmer.

What is the Form?

CloudaIDE Application consists of forms. Form is a means of the user interaction with the application and has many analogs in other frameworks. Forms are files with formica extension that reside in the CloudaIDE folder. Forms are required to bear unique names. The names can consist of letters, digits, underscores, dollar signs and cannot start with digit. The names are case sensitive.

The CloudaIDE folder can contain subfolders, but the names of forms have to be unique within the application. The name of the form file has to match the form name property.

Form Editor

After double clicking on the AAAMain (starting) form, the CloudaIDE Form Editor opens up in the central part of the Eclipse window.

Eclipse lets developers use so-called perspectives to organize tools on screen. CloudaIDE has a perspective of it's own. The main elements of the CloudaIDE Design perspective are:

Figure 8.

CloudaIDE perspective

1. The Form Editor in the central part of the Eclipse Window. This is the part that displays a schematic view of the form screen layout. There can be open many editors at the same time, but only one can be active. Within the editor the Tool Palette can be seen.
2. The Outline View. The outline view consist of two parts – Navigation Tree and the Miniature View. The main purpose of the Navigation Tree is to give the programmer access to those elements of the form that do not have a visual representation. The main purpose of the Miniature View is to show the user what part of the full screen layout is presented in the Form Editor. By means of dragging a selection rectangle the programmer can navigate through a large form in case of necessity.
3. The Properties View. The Properties View displays and lets change the properties of a selected element. The selection of an element in the screen editor is indicated by a blue border. In this particular case we see that the forms name is AAAMain (matches with the file name). The form does not have parameters. It indicates the version of the editor with which the form was last saved. And so on. At the bottom of the screen a status line can be seen. This time it explains what can be entered into the parameters form property.
4. Datasource Explorer. In this particular case obscured by the Outline View. It is a means of access to the underlying database structures for the purpose of speeding up of form design by automatic design of initial screen layout.
5. Palette. The Palette usually displays in the Palette View, that can be accessed by click on the Palette tab in the left top corner of the window, close to the Datasource Explorer. If the view is closed (like in this case) the Palette is displayed on the right side of the Form Editor.

Creating a Form

To create a form the programmer has to use the form creation wizard. It can be done in the following steps:

1. Select the CloudaIDE Project (demo_project)
2. Select File ➜ New ➜ Other ➜ CloudaIDE ➜ CloudaIDE Form
3. Enter a valid form name. For the purpose of this example - Offices
4. Click Finish

or

1. Select the CloudaIDE Project (demo_project)
2. Launch popup menu (right clik)
3. Select CloudaIDE ➜ Create Form
4. Enter a valid form name. For the purpose of this example - Offices
5. Click Finish

Figure 9.

Form creation

Upon completion of this procedure the programmer receives an empty form. The framework shows an error problem marker, that the form does not have any block.

Programmatically Opening a Form

To show the result of our effort in the browser you can make the AAAMain form open offices form as reaction for a button press event.

1. Open the AAAMain form
2. Activate the Outline view
3. Select the MENU block tree node
4. Extend the Items tree
5. Select COMMAND button, change it's name and label to OFFICES and Offices respectively
6. Extend the Triggers tree
7. Click Add new element icon
8. Select BUTTON_PRESSED trigger type (Triggers are pieces of code that execute MT language programs in reaction for events)
9. The Editors script editor activates itself, allowing the user to type the trigger text
10. Change the null; line to open_form(Offices);

The screen should look like this in the Figure 10.

Figure 20.

Trigger definition using CloudaIDE perspective

Press the Save icon, run the project. When the application loads into browser click command button. The newly created form appears. Click the spyglass icon from the toolbar twice. The data is fetched from the database and shown on the screen. The toolbar has some additional icons. The screen looks as on the following figure:

Figure 21.

CloudaIDE form in the browser window displaying data fetched from database

WATCH: OPENING A FORM PROGRAMMATICALLY

Using the Table Layout Element

We obtained a screen with some items within a block nested grid. To present some screen elements in a table use a table element. You can create a table using the Tool Palette.

Figure 22.

Table Layout Element

Click on the table tool, then click on an empty grid cell within a block. An empty table appears. Drag and drop the CODE and CITY items to the table. Five row table appears. Change the "Rows displayed" property of the block to 10. The table grows. Every block can contain at most one own table layout element and unlimited quantity of nested grids, which in turn can contain any element barring table. If the nested element is a block, the block can contain own table.

Change the default order of the OFFICES block to "CODE".

You received a layout where the CODE and CITY items of the Offices block are displayed in a 10 rows table and the other items of the current (highlighted) record are displayed in a grid. You have full CRUD functionality with the Query by Example mechanism out of the box.

WATCH: FORM ENHANCEMENT USING TABLE LAYOUT

What is the Block?

The block has two functions:

1. Data binding

   From this perspective the block is an unlimited array of records. Records consist of items. The block can be database bound (linked with a database view or table) or control block (having client only items). An item of a block is addressed by bind variable syntax :BLOCK.ITEM where BLOCK is the block name and ITEM is the item name.

2. Layout

   From this perspective the block is a grid of cells able to hold other elements. If the element is an item, the item becomes a member of block record. If there is another block within a block layout element, the items within the nested block go to that block of course, not to the outer one.

Master-Detail Block Relationship

For every database item you can set a master item. This way you can define a master-detail relationship of an arbitrary complexity - multi-master, multi-detail, multi-level. The only limitations are the sound reason and resources. Also the relationship between the master and detail block can consist of many items (multipart key).

To establish a master-detail relationship set the "Master Item" property of the detail item. The Fig (based on Orders form of demo application) shows that the master item property of DETAILS.ORDER_ID item is set to ID item of the ORDERS block.

Figure 23.

Definition of the master-detail block relationship

Table Summaries

To automatically show a sum of a table column of a database block you have to set "Fetch All" property of block to "Yes" and set the item property "Has Summary" to "Yes".