You can use scripts as simple 'command batch files' or as a full fledged 'programming language'.
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 dipu applets for example are a components.
Because scripting is aimed at a big audience the syntax is kept as simple as possible.
The objects of the script are dynamically typed and they dont need to be declared, beware of these 'features' of some scripting languages.
Today there are two standards for scripting in a web document, Javascript and Vbscript.
dipu applets are accessible from both languages.
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 invoke the public methods of an applet.
Before you can invoke a method on an applet, you need to give your applet a name. If not, the browser won't know which applet you are referring to.
In the following examples we will use javascript because both browsers support it.
With these methods you can add/replace/remove records in the following tables:
dipu applets are thread safe, so multiple concurrent accesses to the applet are allowed.
With the addRecords(tablename,records) method you can add record(s) to tha applet in the specified table. If there is already a record with the specified key, then the new record will replace the old record.
<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
With the removeRecords(tablename,records) method you can remove record(s) from the applet in the specified table.
Example
<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
With the getKeys(tablename, separator) method you can retrieve all the keys who are present in a table.
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.
<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
With the getSelected() method you can query the applet for the selected tab. With the setSelected (key) you can programmatically set the selected tab.
Example
after loading the page
after filling in c in the text field
and pressing the "set selected" button
after pressing the "get selected" button
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 the applet is customizable.
You can not edit individual fields in the images table. Just use addRecords(tablename,records) to add new images to the applet.
<form name="main">
<input TYPE="BUTTON" VALUE="set background color"
onClick="diputree.setField('options','backgroundcolor',1,main.bgcolor.value);">
<input type="text" name="bgcolor" size="10">
<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