Published: Wednesday, October 18, 2000
Understanding Windows Script Components, Part 3
By David Power
Read Part 1
Read Part 2
In Part 2 we compared WSC's to compiled components and we started our
examination of the dpCoolBox WSC component. In this part we'll delve into the dpCoolBox
WSC in much more detail!
Component Properties and Methods
The properties of the dpCoolBox component are:
dpCoolBox Properties |
|---|
| Property | Description | Default |
|---|
boxWidth | The width (in pixels) of the external dimensions of the box | 600 |
borderWidth | The thickness (in pixels) of the border around the box | 1 |
borderColor | The color of the border as an HTML hex value | titleBgColor value |
titleBgColor | The background color of the title pane of the box as an HTML hex value | 000000 - black |
titleFontFace | The font face used to display text in the title pane | arial |
titleFontColor | The font color used in the title pane as an HTML hex value | FFFFFF - white |
titleFontSize | The font size for the title pane | 2 |
titleAlign | The horizontal alignment of the title | left |
titleText | The text which appears in the title pane | {TITLE_TEXT} |
titleVisible | A boolean value which determines whether or not the box title is displayed | True |
bodyBgColor | The background color of the body pane as an HTML hex value | FFFFFF - white |
bodyFontFace | The font face used to display text in the body pane | arial |
bodyFontColor | The font color used in the body pane as an HTML hex value | 000000 - black |
bodyFontSize | The font size for the body pane | 2 |
bodyAlign | The horizontal alignment of body text | left |
bodyText | The text to appear in the body pane | {BODY_TEXT} |
bodyVisible | A boolean value which determines whether or not the box body is displayed | True |
The component has two methods, create() and setDefault():
Method: create()
Function: Returns an HTML string formatted with all of the values specified by the component's
properties (described above). The return value can be "written" (i.e. using Response.Write) to
the browser.
Arguments: None
Return Value: HTML dpCoolBox string
Method: setDefault()
Function: Sets all dpCoolBox properties to their default values (as specified in the
property descriptions above).
Arguments: None
Return Value: None
As you can gather from the number of properties the component possesses, a developer has extensive control over
the appearance of the dpCoolBox. All sizes, fonts, colors (both foreground and background) and
alignments can be modified to suit a particular purpose.
The component currently does no error checking on the properties. If you pass an invalid value to a property,
you'll most likely get an ill-formatted dpCoolBox as a result.
Overview of HTML Code
No, we're not going to do an HTML tutorial here but in the interest of completeness let's take a quick look at
the HTML code used to create the dpCoolBox.
In order to create an HTML box which has a colored border, it's necessary to script a nested table (i.e. a
table within a table). Formatted HTML code for the default dpCoolBox would appear as follows:
<table bgcolor=#000000 cellpadding=1 cellspacing=0 border=0 width=600>
<tr>
<td>
<table bgcolor=#FFFFFF cellpadding=3
cellspacing=0 border=0 width=100%>
<tr>
<td align=left bgcolor=#000000>
<font face=arial size=2 color=#FFFFFF>
<b>{TITLE_TEXT}</b>
</font>
</td>
</tr>
<tr>
<td align=left bgcolor=#FFFFFF>
<font face=arial size=2 color=#000000>
{BODY_TEXT}
</font>
</td>
</tr>
</table>
</td>
</tr>
</table>
|
The first or "outer" table contains a single row (<tr></tr>) and a single element
(<td></td>) within that row. The sole purpose of this table is to create the border.
This is done by setting the table's bgcolor attribute to black (i.e. #000000) and then setting the
cellpadding attribute to 1 (i.e. for a 1 pixel border). The result is that any content within the
outer table is padded by one pixel which appears as a narrow border.
Note: If you haven't already guessed, you can make the border invisible either by setting the
borderWidth property to zero or by setting the borderColor property to the same
value as the bodyBgColor property.
The second or "inner" table consists of two rows, each with a single element. The first row contains the title
text while the second contains the body text. The cellpadding attribute of this table is set to
3 simply to create a 3 pixel margin between the text and the edges of the dpCoolBox.
The HTML source returned by the dpCoolBox create() method is not formatted as above when written
to the client browser. Rather, the method returns a single, long, non-spaced string. This is done to make the
component's dynamic creation of HTML far less cumbersome from a coding perspective.
Now that we've looked at the various properties and methods of the dpCoolBox WSC component,
let's look at some source code! The code and conclusion are presented in Part 4!
Read Part 4!
