[Contents] [Previous] [Next] [Last]

Chapter 10
HTML Components

This chapter lists and describes all of the built-in HTML components and the properties, methods, and events of each.

These components are defined in HTML and JavaScript, and correspond directly to specific HTML tags. The components generate pure HTML on the client-side at run time and do not require a Java- or JavaScript-enabled browser in the runtime environment. The HTML tags corresponding to these components are described in detail in HTML documentation

The HTML form elements can be connected via a property connection from a Java Client Cursor component, a JavaScript Client Cursor component, or either of the dummy cursors. You can make a property connection between a propertyChange event in one of these cursors and an HTML form element's Value property, so that the form element displays the current data for a specific row and column.

To view descriptive source files (component.hi) for most HTML components, see the palomar/hi directory in your Visual JavaScript installation.

A few components listed here differ from other HTML components in that they are fragments of HTML code, rather than simple tags, and are defined in the Palette archive. This type of "Palette component" (a fragment of HTML treated as a component) is also the result when you select a block of HTML in the Page Editor's Structure view and drag it to the Palette.

Components are presented below alphabetically. The properties are listed alphabetically by the display name with which they are presented in the Inspector. Note that these differ from the actual property names that are used to access property values in code.

These are the built-in HTML components:

Button

The Button component is a general-purpose button form element that corresponds to the <INPUT TYPE=BUTTON> HTML tag. It is a client-side component. The text label of the button is specified in the Button Label property. To add behavior to a Button component, connect a script or method to its click event.

A descriptive source file for this component is install dir/palomar/hi/button.hi

Properties

Button  
Property Description
Button Label

The text displayed in the button. For the Submit Button, the default value is "Submit." For the Reset Button, the default value is "Reset."

Property name: value

Value type: string

Name

The name of the component.

Property name: name

Value type: string

Methods

Button  
Method Description
blur

Removes keyboard focus from button.

Arguments: none

Return value: none

click

Simulates a click on the button.

Arguments: none

Return value: none

focus

Give keyboard focus to the button.

Arguments: none

Return value: none

Events

Button  
Event Description
onBlur

Occurs when the button loses keyboard focus.

onClick

Occurs when the button is clicked.

onFocus

Occurs when the button is given keyboard focus.

Check Box

The Check Box component is an HTML check box form element that corresponds to the <INPUT TYPE=CHECKBOX> HTML tag. It is a client-side component. (Compare the JavaScript Check Box, which supports property and event connections.)

A descriptive source file for this component is install dir/palomar/hi/checkbox.hi

Properties

Check Box  
Property Description
Checked

When set to true, the check box is selected by default; when set to false the check box is deselected (clear) by default. Default value is false.

Property name: checked

Value type: boolean

Name

The name of the component.

Property name: name

Value type: string

Value

Specifies the value returned by the check box if it is selected when the form is submitted.

Property name: value

Value type: string

Methods

Check Box  
Method Description
blur

Removes keyboard focus from the check box.

Arguments: none

Return value: none

click

Simulates a click on the check box.

Arguments: none

Return value: none

focus

Give keyboard focus to the check box.

Arguments: none

Return value: none

Events

Check Box  
Event Description
onBlur

Occurs when the check box loses keyboard focus.

onClick

Occurs when the check box is clicked.

onFocus

Occurs when the check box is given keyboard focus.

propertyValueChange

Occurs when the Value property changes.

Client Script

The Client Script component is a client-side HTML component that corresponds to the <SCRIPT> HTML tag. It is a client-side component. The tag contains arbitrary client-side JavaScript code that you provide. To create or edit the code, edit the JavaScript Code property of the component. Alternatively, specify a file containing JavaScript code. The code is run on the client when the page is requested.

The component has no methods or events.

This component is an HTML fragment defined in the Palette archive. A descriptive source file for this Palette component is install dir>/palettes/ClientJS_pe.html

Properties

Client Script  
Property Description
Language

Version of the JavaScript language used for the script. This is the LANGUAGE attribute of the <SCRIPT> tag.

Value type: string (JavaScript 1.0, JavaScript 1.1, JavaScript 1.2)

JavaScript Code

Client-side JavaScript code that is run when the containing page is loaded. This is the content of the <SCRIPT> tag.

Value type: string

Source File

A filename for a file containing client-side JavaScript code. When a source file is specified, the Text Value property is not considered. This is the SRC attribute of the <SCRIPT> tag.

Value type: string

Drop-down List

The Drop-down List component is an HTML selection list form element that corresponds to the <SELECT> HTML tag. It is a client-side component. A selection list contains a number of options, each of which corresponds to a different return value for the element. (Compare the JavaScript Select List, which supports property and event connections.)

The Drop-down List component is identical to the Scrolling List component except that in the Drop-down List the Size property has a default value of 1, so that it displays a single item until the user clicks it to activate a drop-down list. When the value is greater than 1, the component displays multiple items, through which the user can scroll.

A Drop-down List (or Scrolling List) component can have one or more Option sub-components, representing the options displayed by the component. When you inspect the component, the Inspector displays an option editor that lists all the options in the component. To add a new option, right-click an option in the Text column to display the context menu. You can choose Insert Option Before, Insert Option After, or Delete This Option. Each option has a text label, a return value, and a selected flag that specifies whether the option is selected by default when the component is displayed. By default, the component has three options with labels one, two, and three, of which the first is selected.

The properties, methods, and events of the Drop-down List are the same as those of the Scrolling List.

A descriptive source file for this component is install dir/palomar/hi/select.hi

Properties

Drop-down List  
Property Description
Multiple

When set to true, more than one option can be selected in the list. When set to false, the selection of an option automatically deselects all other options. Default value is false.

Property name: multiple

Value type: boolean

Name

The name of the component.

Property name: name

Value type: string

Size

Number of options visible. When set to 1, there is a drop-down menu of options. When the value is greater than one, the list shows that number of options and contains scroll bars. Default value is 1.

Property name: size

Value type: number

Methods

Drop-down List  
Method Description
blur

Removes keyboard focus from the list.

Arguments: none

Return value: none

focus

Gives keyboard focus to the list.

Arguments: none

Return value: none

Events

Drop-down List  
Event Description
onBlur

Occurs when the list loses keyboard focus.

onChange

Occurs when the user selects or deselects an item.

onFocus

Occurs when the list is given keyboard focus.

File Upload

The File Upload component is an HTML form element that corresponds to the following HTML tag:

<INPUT TYPE="FILE" SIZE=<x> MAXLENGTH=<y> NAME="<name>">
You use this component to allow the user to enter or browse for a path and filename. It appears as a text field with a Browse button next to it. The user can either enter a path directly in the text field or click the button to display a file chooser; the path of the selected file is inserted in the text field.

The file specified in the text field is submitted with the form. The path value returned by this component cannot be used unless the containing form's Encoding property is set to Multipart/Form-data and its Method property is set to Post. You must create some logic on the server-side to handle the submitted file.

A descriptive source file for this component is install dir/palomar/hi/file.hi

Properties

File Upload  
Property Description
Name

The name of the component.

Property name: name

Value type: string

Value

The value returned by the component when the form is submitted.

Property name: value

Value type: string

Methods

File Upload  
Method Description
blur

Removes keyboard focus from the text field.

Arguments: none

Return value: none

focus

Gives keyboard focus to the text field.

Arguments: none

Return value: none

select

Selects all text in the text field.

Arguments: none

Return value: none

Events

File Upload  
Event Description
onBlur

Occurs when the text field loses keyboard focus.

onChange

Occurs when the value changes, either when the user types in the text field or selects a file by browsing.

onFocus

Occurs when the text field is given keyboard focus.

propertyValueChange

Occurs when the Value property changes.

Form

The Form component is an HTML container component for all form elements. It corresponds to the <FORM> HTML tag. It is a client-side component.

Submit a form by calling the Form component's submit method. When you put a Submit Button on a form, that button's click event automatically calls the submit method of the containing form.

When a Form is submitted, the page identified in its Action property is loaded, and the values of the form's elements are passed to the page via the LiveWire request server object. (Compare the JavaScript Validated Form, which allows validation of user-entered data before it is submitted.)

A descriptive source file for this component is install dir/palomar/hi/form.hi

Properties

Form  
Property Description
Action

The URL to which the form is to be submitted. This URL can be absolute or relative to the page containing the component.

Property name: action

Value type: string

Encoding

The encoding method used for form data.

Property name: enctype

Value type: string (application/x-www-form-urlencoded, multipart/form-data)

Method

The technique for submitting the form. When set to POST, the component contacts the URL specified in the Action property, then sends the form values in a separate transmission. When set to GET, form values are URL encoded and sent in a single transmission to the URL specified in the Action property. Must be set to GET for use with the Database Form Handler component.

Property name: method

Value type: string (GET, POST)

Name

The name of the component.

Property name: name

Value type: string

Target

The name of the frame or window in which the results of submitting a form should be displayed. If not specified, the current window or frame is used.

Property name: target

Value type: string

Methods

Form  
Method Description
reset

Resets each of the input elements of the form to their default values.

Arguments: none

Return value: none

submit

Submits the form to the URL specified in the Action property, by the method specified in the Method property.

Arguments: none

Return value: none

Events

Form  
Event Description
onReset

Occurs just before the elements of the form are reset.

onSubmit

Occurs just before the form is submitted.

Hidden Field

The Hidden Field component is an HTML form element that does not appear visually at run time. It corresponds to the <INPUT TYPE=HIDDEN> HTML tag. It is a client-side component. It is used to submit a value to a server without any display. The component has no methods.

A descriptive source file for this component is install dir/palomar/hi/hidden.hi

Properties

Hidden Field  
Property Description
Name

The name of the component.

Property name: name

Value type: string

Value

Specifies arbitrary data to be transmitted to the server when the form is submitted. This data is never visible to the user.

Property name: value

Value type: string

Events

Hidden Field  
Event Description
property value change

Occurs when the Value property changes.

HTML Table

The HTML Table component is a general-purpose table form element. By default, the table has two rows and two columns, and corresponds to the <TABLE> HTML tag, containing two <TR> tags, each with two <TD> tags.

Some of the visual features of the table are controlled by the HTML Table properties. Other features, such as the number of rows or cells and the text content of cells, can be edited directly in the Page Editor or through the properties of the HTML tags. You can select these tags in the Structure view of the Page Editor and display their properties in the Inspector.

This component is an HTML fragment defined in the Palette archive. A descriptive source file for this Palette component is install dir/palettes/Table_pe.html

Properties

HTML Table  
Property Description
Align

The alignment of text in the table.

Property name: align

Value type: string (LEFT, RIGHT)

Background Color

The background color of the table. The color is expressed as a color name or an RGB hex triplet.

Property name: bgColor

Value type: color

Border

The width, in pixels, of the border around the table. When the value is set to 0, no border is drawn. Default value is 1.

Property name: border

Value type: number

Cell Padding

Number of pixels between cell border and contents.

Property name: cellPadding

Value type: number

Cell Spacing

Number of pixels between cells.

Property name: cellSpacing

Value type: number

Height

The height, in pixels, of the table.

Property name: height

Value type: number

Horizontal Margin

Horizontal space, in pixels, between the table borders and the text.

Property name: hSpace

Value type: number

Vertical Margin

Vertical space, in pixels, between the table borders and the text.

Property name: vSpace

Value type: number

Width

The width of the table in pixels, or as a percentage of the window width (when expressed as n%). Default value is 100%.

Property name: width

Value type: number

Image

The Image component is an HTML component displaying an embedded image. It corresponds to the <IMG> HTML tag. It is a client-side component. The properties determine how the image is displayed. The image file is specified in the Source property. You can import the image file into the project and specify only the filename, or you can specify an absolute URL for the image.

You cannot define event handlers for an Image component in the Connection Builder. Use an HTML source editor to define event handlers in the HTML tag. Refer to HTML documentation for details.

The component has no methods and no events.

A descriptive source file for this component is install dir/palomar/hi/image.hi

Properties

Image  
Property Description
Alignment

The alignment of the image with respect to surrounding text.

Property name: align

Value type: string (ABSBOTTOM, ABSMIDDLE, BOTTOM, LEFT, MIDDLE, RIGHT, TEXTTOP, TOP)

Alternate Text

Text to display when the image is not displayed (also displayed in tool tip in Communicator).

Property name: alt

Value type: string

Border Width

The width, in pixels, of the border around an image.

Property name: border

Value type: number

Height

The height, in pixels, of the image.

Property name: height

Value type: number

Horizontal Margin

The amount of extra horizontal space, in pixels, inserted on the left and right of the image.

Property name: hspace

Value type: number

Is Map

When set to true, clicking the image sends the click coordinates to a server-side image map. Default value is false.

Property name: ismap

Value type: boolean

Low Res. Source

The URL of an alternate image, suitable for display at low resolution. This URL can be absolute or relative to the page containing the component. If specifying a relative URL (filename only), import the image file into the project.

Property name: lowsrc

Value type: string

Map Name

The name of a client-side image map (a <MAP> tag) defined on this page, to be associated with this image.

Property name: usemap

Value type: string

Name

The name of the component.

Property name: name

Value type: string

Source

Specifies the URL of the image to be displayed (a .GIF or .JPG file). This URL can be absolute or relative to the page containing the component. If specifying a relative URL (filename only), import the image file into the project.

Property name: src

Value type: string

Vertical Margin

Specifies the amount of extra vertical space, in pixels, inserted above and below the image.

Property name: vspace

Value type: number

Width

Specifies the width, in pixels, of the image.

Property name: width

Value type: number

Link

The Link component is an HTML hyperlink component that corresponds to the <A> HTML tag. It is a client-side component. Replace the default text of the link by selecting the text in the Page Editor (Layout or Structural view) and typing over it.

A descriptive source file for this component is install dir/palomar/hi/a.hi

Properties

Link  
Property Description
Destination URL

The URL to which to link. This URL can be absolute or relative to the page containing the component.

Property name: href

Value type: string

Name

The name of the component.

Property name: name

Value type: string

Target

The name of a window client-side JavaScript object (such as a frame or a top-level browser window) in which the content of the linked URL is displayed.

Property name: target

Value type: string

Methods

Link  
Method Description
click

Simulates a click on the link.

Arguments: none

Return value: none

mouseOut

Simulates the user moving the cursor off the link.

Arguments: none

Return value: none

mouseOver

Simulates the user moving the cursor over the link.

Arguments: none

Return value: none

Events

Link  
Event Description
onClick

Occurs when the user clicks the link.

onMouseOut

Occurs when the user moves the cursor off the link.

onMouseOver

Occurs when the user moves the cursor over the link.

Multi-line Text Field

The Multi-line Text Field component is an HTML multi-line text field form element with scrollbars. This component corresponds to the <TEXTAREA> HTML tag.

A descriptive source file for this component is install dir/palomar/hi/textarea.hi

Properties

Multi-line Text Field  
Property Description
Height

The height, in rows, of the field. Default value is 3.

Property name: rows

Value type: number

Name

The name of the component.

Property name: name

Value type: string

Text Value

The initial text displayed.

Property name: textvalue

Value type: string

Value

Specifies the value sent to the server when the containing form is submitted.

Property name: value

Value type: string

Width

The width, in columns, of the field. Default value is 10.

Property name: cols

Value type: number

Wrapping

Specifies whether lines that do not fit into the text area wrap to the next line. You can specify one of three values:

Property name: wrap

Value type: string (OFF, SOFT, HARD)

Methods

Multi-line Text Field  
Method Description
blur

Removes the keyboard focus from the field.

Arguments: none

Return value: none

focus

Sets the keyboard focus to the field.

Arguments: none

Return value: none

select

Highlights all the text in the field Land enters a special mode so that future input replaces the highlighted text.

Arguments: none

Return value: none

Events

Multi-line Text Field  
Event Description
onBlur

Occurs when the field to loses the keyboard focus.

onChange

Occurs when the user changes the value in the field and moves the keyboard focus elsewhere.

onFocus

Occurs when the field gains the keyboard focus.

property value change

Occurs when the Value property changes.

Password Field

The Password Field component is an HTML editable text-field form element that corresponds to the <INPUT TYPE=PASSWORD> HTML tag.

The Password Field component differs from the Text Field component in that the value is not displayed visually in the end-user interface, or echoed to the screen as the user types into it. The properties, methods, and events are the same as those of the Text Field component.

A descriptive source file for this component is install dir/palomar/hi/password.hi

Properties

Password Field  
Property Description
Maximum Length

The maximum number of characters the user is allowed to enter in the text field.

Property name: maxlength

Value type: number

Name

The name of the component.

Property name: name

Value type: string

Size

The width, in columns, of the text field.

Property name: size

Value type: number

Value

Specifies the value sent to the server when the containing form is submitted.

Property name: value

Value type: string

Methods

Password Field  
Method Description
blur

Removes the keyboard focus from the field.

Arguments: none

Return value: none

focus

Sets the keyboard focus to the field.

Arguments: none

Return value: none

select

Highlights all the text in the field, and enters a special mode so that future input replaces the highlighted text.

Arguments: none

Return value: none

Events

Password Field  
Event Description
onBlur

Occurs when the field loses the keyboard focus.

onChange

Occurs when the user changes the value in the field and moves the keyboard focus elsewhere.

onFocus

Occurs when the field gains the keyboard focus.

property value change

Occurs when the Value property changes.

Radio Button

The Radio Button component is an HTML radio button form element that corresponds to the <INPUT TYPE=RADIO> HTML tag. It is a client-side component. Give several Radio Button components the same Name property value to make them a radio button group. Within a radio button group, selection of a button deselects all other buttons in the group. (Compare the JavaScript Radio Group component, which supports property and event connections.)

A descriptive source file for this component is install dir/palomar/hi/radio.hi

Properties

Radio Button  
Property Description
Checked

When set to true, the button is selected by default; when set to false, the button is deselected (clear) by default. Default value is false.

Property name: checked

Value type: boolean

Name

The name of the component or button group.

Property name: name

Value type: string

Value

Specifies the value returned by the radio button if it is selected when the containing form is submitted.

Property name: value

Value type: string

Methods

Radio Button  
Method Description
blur

Removes keyboard focus from the radio button.

Arguments: none

Return value: none

click

Simulates a click on the radio button.

Arguments: none

Return value: none

focus

Gives keyboard focus to the radio button.

Arguments: none

Return value: none

Events

Radio Button  
Event Description
onBlur

Occurs when the radio button loses keyboard focus.

onClick

Occurs when the radio button is clicked.

onFocus

Occurs when the radio button is given keyboard focus.

Reset Button

The Reset Button component is a special-purpose button form element intended to be used with a form connected to a database. It has predefined behavior, which clears all current values from other elements in the containing form, and a predefined label, "Reset." You can change the label by setting the Button Label property.

This component corresponds to the <INPUT TYPE=RESET> HTML tag. It is a client-side component. The properties, methods, and events are the same as for the Button component.

A descriptive source file for this component is install dir/palomar/hi/reset.hi

Properties

Reset Button  
Property Description
Button Label

The text displayed in the button. The default value is Reset.

Property name: value

Value type: string

Name

The name of the component.

Property name: name

Value type: string

Methods

Reset Button  
Method Description
blur

Removes keyboard focus from button.

Arguments: none

Return value: none

click

Simulates a click on the button.

Arguments: none

Return value: none

focus

Give keyboard focus to the button.

Arguments: none

Return value: none

Events

Reset Button  
Event Description
onBlur

Occurs when the button loses keyboard focus.

onClick

Occurs when the button is clicked.

onFocus

Occurs when the button is given keyboard focus.

Scrolling List

The Scrolling List component is an HTML selection list form element that corresponds to the <SELECT> HTML tag. It is a client-side component. A selection list contains a number of options, each of which corresponds to a different return value for the element. (Compare the JavaScript Select List, which supports property and event connections.)

When the Size property has a value of 1, the component displays a single item until the user clicks it to activate a drop-down list. When the value is greater than 1, the component displays multiple items, through which the user can scroll. (Note that the Drop-down List component is identical except that the Size property has a default value of 1.)

A Scrolling List (or Drop-down List) component can have one or more Option subcomponents, representing the options displayed by the component. When you inspect the component, the Inspector displays an option editor that lists all the options in the component. To add a new option, right-click an option in the Text column to display the context menu. You can choose Insert Option Before, Insert Option After, or Delete This Option. Each option has a text label, a return value, and a selected flag that specifies whether the option is selected by default when the component is displayed. By default, the component has three options with labels one, two, and three, of which the first is selected.

A descriptive source file for this component is install dir/palomar/hi/select.hi

Properties

Scrolling List  
Property Description
Multiple

When set to true, more than one option can be selected in the list. When set to false, the selection of an option automatically deselects all other options. Default value is false.

Property name: multiple

Value type: boolean

Name

The name of the component.

Property name: name

Value type: string

Size

Number of options visible. When set to 1, there is a drop-down menu of options. When the value is greater than one, the list shows that number of options and contains scroll bars. Default value is 6.

Property name: size

Value type: number

Methods

Scrolling List  
Method Description
blur

Removes keyboard focus from the list.

Arguments: none

Return value: none

focus

Gives keyboard focus to the list.

Arguments: none

Return value: none

Events

Scrolling List  
Event Description
onBlur

Occurs when the list loses keyboard focus.

onChange

Occurs when the user selects or deselects an item.

onFocus

Occurs when the list is given keyboard focus.

Server Script

The Server Script component is a server-side HTML component that corresponds to the <SERVER> HTML tag. The tag contains arbitrary server-side JavaScript code that you provide. To create or edit the code, edit the JavaScript Code property of the Server Script component. The code is run on the server when the page is requested.

The component has no methods or events.

This component is an HTML fragment defined in the Palette archive. A descriptive source file for this Palette component is install dir/palettes/ServerJS_pe.html

Properties

Server Script  
Property Description
JavaScript Code

Server-side JavaScript code that is run when the containing page is requested. This is the content of the <SCRIPT> tag.

Value type: string

Submit Button

The Submit Button component is a special-purpose button form element intended to be used with a form connected to a database. It has predefined behavior, which submits the containing form, and a predefined label, Submit. You can change the label by setting the Button Label property.

This component correspond to the <INPUT TYPE=SUBMIT> HTML tag. It is a client-side component. The properties, methods, and events are the same as for the Button component.

A descriptive source file for this component is install dir/palomar/hi/submit.hi

Properties

Submit Button  
Property Description
Button Label

The text displayed in the button. The default value is Submit.

Property name: value

Value type: string

Name

The name of the component.

Property name: name

Value type: string

Methods

Submit Button  
Method Description
blur

Removes keyboard focus from button.

Arguments: none

Return value: none

click

Simulates a click on the button.

Arguments: none

Return value: none

focus

Give keyboard focus to the button.

Arguments: none

Return value: none

Events

Submit Button  
Event Description
onBlur

Occurs when the button loses keyboard focus.

onClick

Occurs when the button is clicked.

onFocus

Occurs when the button is given keyboard focus.

Text Field

The Text Field component is an HTML editable text-field form element that corresponds to the <INPUT TYPE=TEXT> HTML tag. It is a client-side component.

A descriptive source file for this component is install dir/palomar/hi/text.hi

Properties

Text Field  
Property Description
Maximum Length

The maximum number of characters the user is allowed to enter in the text field.

Property name: maxlength

Value type: number

Name

The name of the component.

Property name: name

Value type: string

Size

The width, in columns, of the text field.

Property name: size

Value type: number

Value

Specifies the value sent to the server when the containing form is submitted.

Property name: value

Value type: string

Methods

Text Field  
Method Description
blur

Removes the keyboard focus from the field.

Arguments: none

Return value: none

focus

Sets the keyboard focus to the field.

Arguments: none

Return value: none

select

Highlights all the text in the field, and enters a special mode so that future input replaces the highlighted text.

Arguments: none

Return value: none

Events

Text Field  
Event Description
onBlur

Occurs when the field loses the keyboard focus.

onChange

Occurs when the user changes the value in the field and moves the keyboard focus elsewhere.

onFocus

Occurs when the field gains the keyboard focus.

property value change

Occurs when the Value property changes.


[Contents] [Previous] [Next] [Last]

Last Updated: 11/07/97 14:09:05


Copyright © 1997 Netscape Communications Corporation