This article demonstrates some of
the possibilities of using web-based interfaces in Visual Basic
projects. There are some advantages in using HTML based
interface components. One of the most obvious is the ease of
resizing elements on screen. The range of standard form
elements is quite small but it is surprising what can be achieved
with a little imagination. Many elements can have their style
attributes changed in a way that is just not possible in visual
The TableCell holding each example has it's background colour
(bgColor) set to 'threedface' which is the HTML equivalent to Visual
Basic's 'vbButtonFace' constant. You can stop the cursor
appearing as an I-beam by using the style attribute 'cursor' set to
Note: As this is aimed at VB programmers, vbScript has
been used for familiarity.
Netscape: The examples use Internet Explorer's system
color codes. In Netscape, 'threedface' appears as green - so this page
will look quite strange. The scroll-bar example will not be
Toolbar and Flat Buttons
Demonstrates a typical 'flat
button' where the border appears only when the mouse is moved
The border style of the button is
changed when the 'onmouseenter' and 'onmouseleave' events are
triggered. The 'className' property of the button is
changed to the appropriate style to either show or hide the
border. The 'blur' method is used when the 'onfocus' event
is fired to ensure that the focus rectange and the default
button border are not activated. The 'title' property of
each button is used to display tooltips.
Demostrates a single width border
text box. When active the border style changes.
Numbers cannot be entered into the textbox.
Unlike the flat button example, we
change the '.style.borderStyle' property directly. When
the textbox receives focus ['onfocus'] the 'borderStyle' is
changed to 'inset'. When focus is lost ['onblur'] the
'borderStyle' is changed to 'solid'.
Sectioned Listbox and colour
Demonstrates using style properties
in the ListBox and ComboBox.
The 'background-color' and 'color'
styles are set for each option. In the 'onclick' event
the script checks to see if the selected item has a 'heading'
class and if so moves to the next item.
Each <OPTION> has the
'background-color' set to a chosen colour. When the
'onChange' event fires the focus is sent to the list above -
otherwise the focus on the combobox would be the 'highlight'
Demonstrates using tables to create
an advanced checklist.
Allow multiple line
entries Like this.
Use Multiple columns - this
example has 3 columns.
Use different fonts, colours and
The checklist is a DIV element with
a 3 column Table. The DIV element's height property is
fixed. The vertical scrollbar appears automatically
because the table is larger than the area of the DIV.
Edit specific Text
Demonstrates editing items within a
larger non-editable piece of text. Click on the [Name]
area of the example text and edit the contents. Press
Tab to move to the [Age] area.
Edit Text Example
My name is [Name]
and I am [Age]
The [Name] and [Age] items in the
line of text are held within SPAN elements. These have
their 'contenteditable' attributes set. The 'onfocus'
event for each element changes the 'borderStyle' property of
the SPAN to inset and the 'backgroundColor' to white to
imitate a textbox. Although the 'Enter' key is not
trapped, the 'overflow' style of the SPAN element has been set
Demonstrates effects you can use on
the scrollbar of the webbrowser control or scrollable elements
on the page. To change the scrollbar for the webbrowser,
set the style properties for the 'BODY' element.
The 'Single' and 'Flat' example
change the 'scrollbar-highlight-color' and the
'scrollbar-shadow-color' to 'threedface' to give the
impression that there is a single width border around the
elements. The 'Color' example changes the
'scrollbar-base-color' and this adjusts the highlight and
shadow colours to hues of the base-color.
Demonstrates displaying a large
piece of information or interface within a smaller scrollable
Edit Text Example
The scrollbar on the right
allows you to access further interface elements in this
This is the bottom of the
The DIV element in the example has
it's 'height' style property set to 100 pixels. The
'overflow' style property has been set to 'auto'.