2. Scripting
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.
- Dynamically typed
The type of an object can change dynamically. Your object can start its life as a
string of text, it can change its type to an integer and finally transform into a color
type.
This can be a potential pitfall.
- They dont need to be declared
You can start using an object right away, theres no need to define nor declare it.
This really has a potential for pitfalls and some hard ones to find, a small typing error
can result in the creation of a second object, although this was not intended!
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.
public methods
- addRecords (tablename,records)
- removeRecords (tablename, records)
- getKeys (tablename, separator) returns keys
- getField (tablename, key, column index) returns value
- setField (tablename, key, column index, value)
- getSelected () returns key
- setSelected (key)
parameter and return types
- tablename : string
- records: string
- key: string
- keys: string
- column index: integer
- value: string
- separator: string
With these methods you can add/replace/remove records in the following tables:
- entries
- options
- links
- fonts
- images
- internalactions
- externalactions
- selected
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.
example
- <html>
<body bgcolor="#C0C0C0">
<applet CODE="diputab.class" NAME="diputab" WIDTH="400"
HEIGHT="40">
</applet>
<form>
<input TYPE="BUTTON" VALUE="Add tab nr. 1"
onClick="diputab.addRecords('entries','^a|tab nr. 1');">
<input TYPE="BUTTON" VALUE="Add tab nr. 2"
onClick="diputab.addRecords('entries','^b|tab nr. 2');">
<input TYPE="BUTTON" VALUE="Add tab nr. 3"
onClick="diputab.addRecords('entries','^c|tab nr. 3');">
</form>
</body>
</html>
after loading the page

- after pressing the "Add tab nr. 1" button

- after pressing the "Add tab nr. 2" button

- after pressing the "Add tab nr. 3" button

With the removeRecords(tablename,records) method you can remove record(s) from the
applet in the specified table.
Example
- <html>
<body bgcolor="#C0C0C0">
<applet CODE="diputab.class" NAME="diputab" WIDTH="400"
HEIGHT="40">
<param name="entries" value="
^a|tab nr. 1
^b|tab nr. 2
^c|tab nr. 3
">
</applet>
- <form>
<input TYPE="BUTTON" VALUE="remove tab nr. 2"
onClick="diputab.removeRecords('entries','^b');"></p>
</form>
- </body>
</html>
- after loading the page

- after pressing the "remove tab nr. 2" button

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="#C0C0C0">
<applet CODE="diputab.class" NAME="diputab" WIDTH="400"
HEIGHT="40">
<param name="entries" value="
^a|tab nr. 1
^b|tab nr. 2
^c|tab nr. 3
">
</applet>
- <form name="main">
<BR>keys: <input type="text" name="keys"
size="40">
<BR><input TYPE="BUTTON" VALUE="print keys"
onClick="main.keys.value = diputab.getKeys('entries',',');">
</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
- <html>
<body bgcolor="#C0C0C0">
<applet CODE="diputab.class" NAME="diputab" 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 = diputab.getSelected();">
<input type="text" name="getselected"
size="10"></p>
<p><input TYPE="BUTTON" VALUE="set selected"
onClick="diputab.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

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.
exception
You can not edit individual fields in the images table. Just use
addRecords(tablename,records) to add new images to the applet.
examples
- <html>
<body bgcolor="#C0C0C0">
<applet CODE="diputab.class" NAME="diputab" 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="diputab.setField('options','foregroundcolor',1,main.fgcolor.value);">
<input type="text" name="fgcolor" size="10"></p>
<p><input TYPE="BUTTON" VALUE="set font"
onClick="diputab.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 E0E0E0 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
