jBASE Web Builder Tutorial
Intro Step 1 Step 2 Step 3 Step 4 Step 5 Step 6 Step 7

Create a page and add a table

When the main development has been refreshed, upon opening the development objects sub menu, the newly created Tutorial module should have its own submenu. Opening the Tutorial sub menu will show an empty list of objects. Select the "HTML Page" menu option. Web builder will build a list of all the HTML page objects in the tutorial application module. This list will be empty, because we have only just created the module. Click on the "Add a new object to this grouping" button at the top of the screen to add a new page.

 

Where prompted for the name of the page, enter the name "Address" and click on the OK button. 

The Web Builder Integrated Development Environment (IDE) will open showing the page that has just been created. 

There are three distinct areas on the page. At the top of the page, the object palette and status information can be found. On the left is the design pane, and on the right is the properties pane.

The properties pane currently shows the properties for the HTML Page "Address". Find the property called "Associated File", type in "Address" and click on the update button at the top of the properties window. By setting this property, the page is now linked to the file that was created in step 1.

NOTE - it is very important to click the update button after making changes as changes are not applied until this button is pressed.

The objects available in the Palette pane can be placed on the page by clicking on the relevant icon, and then clicking on the round dot in the Preview Pane. The round dot is known as a Construction Rivet. When an object is added in this way, the Preview Pane will be refreshed to show a design time representation of the object concerned, and the Property Pane will reflect the properties of the object that has just been added.

Pages start with only a single Construction Rivet, and as objects are added, more Construction Rivets appear as the page grows both downwards and to the right.

The only object needed on the Address page is an object reference. An object reference may be added by clicking on the relevant icon in the Palette Pane. The icon for an object reference can be identified, either by the tooltip that appears when hovering over it, or by locating the icon that looks like a large "X".

Once the Object Reference button has been depressed, it can be place on the page by clicking on the single Construction Rivet on the page. The page will then refresh, and show a design time representation of the Object Reference (an "X"). The Properties Pane will also refresh to show the properties of the Object Reference. The screen should then look like this:

Locate the Object property in the Properties Pane. Type in the value "tabAddress" and click on the update button. This has told jBASE Web Builder the name of the Object that the Object Reference refers to.

Make sure that the class property is of the type "systabmain". This is the class name for a Table object.

Click on the button labelled "Edit Object" in the Properties Pane. A new window should be created similar to the window that showed the design time representation of the HTML Page, but this time, it shows the design time representation of the "tabAddress" Table object.

The screen should look like this:

 

Next step >>