When you think ASP, think...
Recent Articles
All Articles
ASP.NET Articles
ASPFAQs.com
Message Board
Related Web Technologies
User Tips!
Coding Tips

Sections:
Sample Chapters
Commonly Asked Message Board Questions
JavaScript Tutorials
MSDN Communities Hub
Official Docs
Security
Stump the SQL Guru!
XML Info
Information:
Feedback
Author an Article
ASP ASP.NET ASP FAQs Message Board Feedback
Print this page.
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!

    - continued -

    Component Properties and Methods
    The properties of the dpCoolBox component are:

    dpCoolBox Properties
    PropertyDescriptionDefault
    boxWidthThe width (in pixels) of the external dimensions of the box600
    borderWidthThe thickness (in pixels) of the border around the box1
    borderColorThe color of the border as an HTML hex valuetitleBgColor value
    titleBgColorThe background color of the title pane of the box as an HTML hex value000000 - black
    titleFontFaceThe font face used to display text in the title panearial
    titleFontColorThe font color used in the title pane as an HTML hex valueFFFFFF - white
    titleFontSizeThe font size for the title pane2
    titleAlignThe horizontal alignment of the titleleft
    titleTextThe text which appears in the title pane{TITLE_TEXT}
    titleVisibleA boolean value which determines whether or not the box title is displayedTrue
    bodyBgColorThe background color of the body pane as an HTML hex valueFFFFFF - white
    bodyFontFaceThe font face used to display text in the body panearial
    bodyFontColorThe font color used in the body pane as an HTML hex value000000 - black
    bodyFontSizeThe font size for the body pane2
    bodyAlignThe horizontal alignment of body textleft
    bodyTextThe text to appear in the body pane{BODY_TEXT}
    bodyVisibleA boolean value which determines whether or not the box body is displayedTrue

    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!


  • ASP.NET [1.x] [2.0] | ASPMessageboard.com | ASPFAQs.com | Advertise | Feedback | Author an Article