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

Add some components to the table

Just as the Object Reference was added to the Page "Address" by selecting the appropriate button in the Palette Pane, and then clicking on a Construction Rivet, the same method may be used to add objects to the Table Object "tabAddress".

This Table Object is going to become the main input screen for the Employee Address Book application.

Most jBASE Web Builder screens are designed as Tables instead of Pages for two main reasons. Firstly, there is more flexibility in a Table Object, and secondly, by using a Table Object, there is a chance that the table layout could be re-used on another HTML Page.

Firstly, locate a Label Object on the Palette Pane. This can be identified in one of two ways. Either by it's icon, which has the text "abc", or by the tooltip that appears when hovering over it, which has the text "(syslabel) HTML Text Label".

Once the label button has been depressed, clicking on the Construction Rivet in the Preview Pane will result in a label, and three new Construction Rivets appearing in the Preview Pane.

Labels, by default have no text, so it is important to change the text property in the Property Pane. This particular label should have the text Employee Number. Once the text property has been entered, click on the Update button in the Property Pane to apply the changes.

Add two more labels in the same way, beneath the Employee number label. Give these labels text properties of Employee Name and Employee Address respectively.

The Labels which appear on the Employee Address Book application are there to tell the users of the application about what the application is displaying. There also needs to be some way of displaying data, and allowing the user to change the data stored in the ADDRESS file that was created and populated in Step 1.

Normally, this function is implemented through the use of Textboxes. A Textbox can be found on the Palette Pane by either looking for an icon representative of a text box, or by locating the button which shows a tooltip of "(systextbox) FORM Text Box".

So far, there are three labels on the table, one each for Employee number, Name and address. Each will require a corresponding Textbox.

Click on the Textbox icon on the Palette Pane, and then click on the Construction Rivet to the right of the Employee Number label. A Textbox should appear to the right of the Employee Number Label.

Add more textboxes in the same way to the right of the Name and Address labels so that there are now three textboxes in the Preview Pane, one for each label.

To customise the Textboxes, their properties need to be changed. To change the properties of an object, first click on the object that needs to be changed. The properties related to that object will then appear in the Properties Pane. Changes can then be made by changing the required value and applied using the Update button at the top of the Properties Pane. If applicable, the Preview Pane will automatically refresh.

Click on the textbox next to the Employee Number label. Its properties will appear in the Properties Pane. Find the Data field property, which should be blank. Change the value to 0 (zero), then find the Text width property, and enter the value 10. Click on the update button. The Textbox should shorten in the Preview Pane to reflect the change to the Text width property.

Click on the Name Textbox. The Properties Pane should update to show the properties for the object. Find the Data field property, and change it to 1. Click on the update property. This time, because the Data field property does not affect the appearance of the table, the Preview Pane does not refresh.

Click on the Address Textbox. Again, the Properties Pane should display the relevant properties. Change the Data field property to 2. Find the "Display delimiter as carriage return" property. Check the check box. Change the Text width to 30, and Text height to 4. Click the update button, and the Preview Pane should now appear as shown.

The purpose of the Text height and width properties should be fairly obvious from what happened in the preview pane, but the other properties probably need some explanation. The Data field property is used to map an item on the table to an attribute in the Associated file (Address). 

The Name Textbox is now associated with attribute one in the file, and the Address Textbox is associated with attribute 2. The "Display delemters as carriage return" property is used to make an object multi-value aware. In the case of a Textbox, this means that each new line in the text box will be treated as a value when it is saved away to the Associated file.

Find the Button object in the Palette Pane either by looking for the tooltip: "(sysbutton) FORM button" or by the icon showing a button containing "".

Click on the button, and then click on the Construction Rivet to the right of the Employee number Textbox. A button should appear on the Preview Pane, and the Properties Pane should refresh to show the button's properties.

Make sure that the Properties Pane is showing the properties of the Button object that has just been added to the Table. If it is unclear, clicking on the Button will make sure.

Find the Button type property, and select Submit from the pull down list. Change the Caption property to Open. Find the Trigger type property and select Sub from the options available. Change the Trigger option property to be sysfileopen. Click on the Update button at the top of the Properties pane.

The purpose of the Caption property is fairly self-evident. The other properties determine how the button is going to behave when the page is run. The Button type property dictates how the button behaves. By choosing the submit option, jBASE Web Builder will run code on the server.

The Trigger Type property tells Web Builder which sort of code to run. Because Sub has been chosen, jBASE Web Builder is going to run a subroutine on the server. The value in the Trigger Option parameter tells jWB which subroutine to run. "sysfileopen" is one of the subroutines built in to jBASE Web Builder.

To view the contents of the "sysfileopen" subroutine, click on the button beside the Trigger Option property displaying "". A window will display showing the contents of the subroutine. The text of the subroutine is listed below. The subroutine is written in jBC or BASIC.

SUB sysfileopen(html)
*--- include the common block
INCLUDE sysbp syscommon
*--- open the requested file
CALL sysopen(sysfile,filevar,html)
IF html # "" THEN RETURN
*--- read the record
READ sysdata FROM filevar,sysid ELSE
syserr = 1
syserrmsg = \Item not found\
sysdata = ""
CALL sysnavrefresh(html)
*--- re-draw the page
syshidden = ""
sysreserved = ""
CALL syscreate(syspage,html)
*--- return to calling routine

To close the window, either click on the "X" button in the top right of the window, or click on the button in the top left marked "Close". 

There is now enough on the page to be able to see it in action. At the top of the Palette Pane, there is a button marked "Preview". By clicking on this button, it is possible to see how jBASE Web Builder intends to display the Object. Viewing a Table in isolation is not very useful, because a Table object doesn't have any context. It doesn't know anything about the Associated Table for example, or anything about any stylesheet that may have been applied to the page. 

Usually, it is much more useful to Preview a Page object. By Previewing a Page, not only does the Page object get displayed, but also, all the Objects contained within the page are displayed. As long as it hasn't been closed, there should be an Editing window with the Page in it left over from before. 

If this window isn't there, open it up by clicking on the "HTML Page" menu item under the Tutorial Development Module, and then click on the button marked "" to the left of the Address page. Once this window is displayed, click on the preview button. 

A new window should open displaying the contents of your Page. Type 1 into the Employee Number Textbox and click on the Open button. If all goes well, the application should have looked up the value 1 in the ADDRESS file, retrieved the data and displayed the results on screen. 

There are some common pitfalls. If when the screen is previewed, a "File not found ()" error is displayed, it means that the Associated file Property of the page object has not been set to ADDRESS. If one or more of the fields don't contain any data, it's likely that the Datafield Properties for the Textboxes have not been set.

Next step >>