8 Scripting with diputree

8.1 It's a programming language

Scripting is a type of programming. A program contains actions (code) and the objects on which the actions are performed (data).

Because scripting is aimed at a big audience the syntax is kept as simple as possible.

Some refer to scripting as ‘the glue’ that connects different components together. A component is a collection of code and data that represents a ‘higher level’ of functionality. The diputree applet for example is a component.

The objects of the script are dynamically typed and they don’t need to be declared, this results in easier and shorter code.

8.2 Web scripting

Today there are two standards for scripting in a web document, Javascript and Vbscript.
diputree is accessible from both languages.

Refelection

If you load a web document in your browser, all the elements contained in your document are ‘reflected’ in the scripting environment. This means that all elements (such as all html tags) that are contained in your document are mapped to objects in your scripting environment.

This is also the case for applets. In Netscape navigator 3 or greater and in Microsoft Internet Explorer 4 or greater you can simply use the public methods of an applet.

In the following examples we will use javascript because both browsers support it.

8.3 diputree's methods

public methods of diputree:

parameter and return types:

With these methods you can add/replace/remove records in the following tables:

diputree is thread safe, so multiple concurrent accesses to diputree are allowed.

8.3.1 Adding/replacing records

With the addRecords(tablename,records) method you can add record(s) to diputree in the specified table. If there is already a record with the specified key, then the new record will replace the old record.

Example

<html>
<body BGCOLOR="#FFFFFF">
<applet CODE="diputree.class" NAME="diputree" WIDTH="300" HEIGHT="100">
</applet>
<form>
<input TYPE="BUTTON" VALUE="Add root entry" onClick="diputree.addRecords(‘entries’,’^root|javascripting with diputree|-start-|c|o’);">
<input TYPE="BUTTON" VALUE="Add an entry" onClick="diputree.addRecords(‘entries’,’^one|an entry|root’)">
<input TYPE="BUTTON" VALUE="Add another entry" onClick="diputree.addRecords(‘entries’,’^two|another entry|root’)">
</form>
</body>
</html>

after loading the page

after pressing the "Add root entry" button

after pressing the "Add an entry" button

after pressing the "Add another entry" button

8.3.2 Removing records

With the removeRecords(tablename,records) method you can remove record(s) from diputree in the specified table. With diputree version 2 you can only remove records from the entries and images tables.

Recursively removing entries

If you remove an entry, you automatically remove all entries that are descendants of this entry.
So if you delete the root entry you effectively remove all entries from diputree.

Example

<html>
<body BGCOLOR="#FFFFFF">
<applet CODE="diputree.class" NAME="diputree" WIDTH="300" HEIGHT="100">
<param name="entries" value="
^root|this is the root|-start-|c|o
^child|I’m a child|root|c|o
^grandchild|I’m a grandchild|child
">
</applet>

<form>
<input TYPE="BUTTON" VALUE="Remove children" onClick="diputree.removeRecords(‘entries’,’^child’);">
<input TYPE="BUTTON" VALUE="Remove all" onClick="diputree.removeRecords(‘entries’,’^root’);">
</form>
</body>
</html>

after loading the page

after pressing the "Remove children" button

after pressing the "Remove all" button

8.3.3 Getting the keys from a table

With the getKeys(tablename, separator) method you can retrieve all the keys who are present in a table.

Array String.split (separator)

The javascript function split operates on a String value, takes a separator as an argument and returns an Array. This gives you an easy way to convert the result string from the getKeys function to an Array.

Example

<html>
<body BGCOLOR="#FFFFFF">
<applet CODE="diputree.class" NAME="diputree" WIDTH="400" HEIGHT="100">
<param name="entries"
value="

^root|this is the root|-start-|c|o
^child|I'm a child|root|c|o
^grandchild|I'm a grandchild|child
">
</applet>

<form name="main">
<p>keys: <input type="text" name="keys" size="40"> <input TYPE="BUTTON" VALUE="print keys"
onClick="
main.keys.value = diputree.getKeys('entries',',');"> </p>
</form>
</body>
</html>

after loading the page

after pressing the "print keys" button

 

8.3.4 Getting and setting the selected entry

With the getSelected() method you can query diputree for the selected entry. With the setSelected (key) you can programmatically set the selected entry.

Example

<html>
<body bgcolor="#C0C0C0">
<applet CODE="diputree.class" NAME="diputree" WIDTH="400" HEIGHT="40">
<param name="entries"
value="

^a|tab nr. 1 (key = a)
^b|tab nr. 2 (key = b)
^c|tab nr. 3 (key = c)
">
</applet>

<form name="main">
<p><input TYPE="BUTTON" VALUE="get selected"
onClick="
main.getselected.value = diputree.getSelected();">
<input type="text" name="getselected" size="10"></p>

<p><input TYPE="BUTTON" VALUE="set selected"
onClick="
diputree.setSelected(main.setselected.value);">
<input type="text" name="setselected" size="10"></p>
</form>
</body>
</html>

after loading the page

after filling in c in the text field
and pressing the "set selected" button

after pressing the "get selected" button

8.3.5 Getting and setting individual fields in a record

With the getField(tablename, key, column index) method you can fetch any field value from a record. With the setField (tablename, key, column index, value) method you can set any field value in a record

Now every property of diputree is customizable.

Example

<html>
<body bgcolor="#C0C0C0">
<applet CODE="diputree.class" NAME="diputree" WIDTH="400" HEIGHT="40">
<param name="entries" value="
^a|tab nr. 1
^b|tab nr. 2
^c|tab nr. 3
">
</applet>

<form name="main">
<p><input TYPE="BUTTON" VALUE="set foreground color"
onClick="
diputree.setField('options','foregroundcolor',1,main.fgcolor.value);">
<input type="text" name="fgcolor" size="10"></p>

<p><input TYPE="BUTTON" VALUE="set font"
onClick="
diputree.setField('fonts','defaultfont',1,main.font.value);">
<input type="text" name="font" size="20"></p>
</form>
</body>
</html>

after loading the page

after filling in C0C0C0 in the text field
and pressing the "set foreground color" button

after filling in Monospaced in the text field
and pressing the "set font" button