Using the DBML layout editor

DBML is a simple langauge to markup basic forms by embedding SQL into an HTML document. Implemented using JavaScript and ajax the easiest way to use DBML is to use the layout editor built into jSQL. This allows you to drag interface componets onto a page then wire them up to create form based and master/detail data browsers.

An example of how to use DBML with the Sybase "pubs" database is available on the demo site. You can double click on the background to enter edit mode which enables the inspectors. Drag an element off the Palette to move it onto the interface. Drag on the lower right hand side of an element to resize it. The purpose of a few of the basic components is described below:

Table Element:
Form Element:
The fundamental interface component is the table (the blank square on the palette). To use a table, drag one of the palette onto the page and double click on it to open it's inspector. Enter the SQL you would like to execute into the form and close it. Then drag a "Query" button onto the page and make sure the "target" in the form button's inpector is equal to the "Id" of the table you would like to fetch. Close it's inspector and press the button and the SQL will be fetched into the table. Click on column headings to locally sort the data.

To create simple master-detail browsers, drag another detail table onto the page and enter the SQL you would like to execute replacing any value you would like to qualify by with '$col_name' from the master table. Then, set the "target" of the master table to be the "Id" of the detail table and, as you click on rows of the master table the detail SQL will be fetched substituting the column value you specified.

Field Element:
The query button mentioned above is actually the Submit button of an HTML form which you can expand and then drag field elements onto it. Fields have two inspectors, one when you double click on the title to the left of the input field and one for the text input field itself. The text input field inspector allows you to give the field a name which can be referred to in queries as above using the '$field_name' syntax above. A field can be used to qualify search queries displayed in table elements as described in the preceeding paragraphs.

A form element can also have it's own SQL and be a "target". The columns in the first row of the results for the SQL will be used to populate the field values according to the column name. There is more that can be done with forms, popup boxes etc. which will be documented in this file on the demo site.

John H,
10/2010