Components
|
About Components |
Components are reusable objects that you can place on a page or template to perform a certain task.
The behavior and appearance of components are determined by their properties.
Components are actually Java objects called Editor Beans that generate the required HTML and JavaScript code, depending on the environment into which they are dropped. For example, if you drop a form component like PushButton onto a blank page, it is set in a new form, though the same component uses an existing form if dropped onto one. Note that some of the code generated by Editor Beans should not be edited.
Data-Bound Properties
Data-Bound Properties
Some components have properties which allow their behavior and appearance to be controlled at run-time by a servlet. These are called data-bound properties. They only appear on components that have been inserted into a template, as they serve no purpose on a static HTML page.
The following components contain data-bound properties that can be configured to represent data from a servlet for display:
Events
Events
Some components handle some browser events using client-side JavaScript. Events handled by a given component are listed with that component.
Target Window
Target Window
Some components provide hypertext links to load other URLs or call servlets. These components can display the resulting page in the current window or in another window or frame by setting the Target property.
The following values are valid for the Target property:
Consult an HTML reference for more details. More information about HTML and JavaScript can be found on the Netscape DevEdge web site.
Palette Tabs
Palette Tabs
Components appear by default on the following palette tabs:
HTML tab.
Form tab.
JavaScript tab.
Related Topics
|
Components |
Auto-redirect
|
Auto-redirect |
The Auto-redirect component redirects a browser to a different URL when the
page is visited. An example might be to redirect new users from a top-level URL
to a login screen. The target page appears in the same window or frame as the
originating page.
CheckBox
|
CheckBox |
The CheckBox component provides a form field in the form of a checkbox. If
the box contains a check when the form is submitted, the field's value (see the
Value property below) is submitted with the form. Application users can check
or uncheck the box by clicking on it at runtime.
This component can optionally be bound to output data from a servlet..
This component resides on the Form tab by default.
This component responds to the following browser events:
Custom Script
|
Custom Script |
The Custom Script component provides a framework for you to develop your own custom scripts in JavaScript. Drop this component onto your page and then edit it by clicking the Source tab.
You can find more information about client-side JavaScript on the Netscape DevEdge web site.
Data-Bound Image Link
|
Data-Bound Image Link |
The ImageLink component is similar to an Image component, except that it also functions as a hypertext link to another page or to a servlet.
This component can optionally be bound to output data from a servlet.
Property
|
Values
|
Description
|
(Name)
|
String
|
Name of this component.
|
Alignment
|
ABSBOTTOM, ABSMIDDLE, BOTTOM, LEFT, MIDDLE, RIGHT, TEXTTOP, or TOP
|
Image alignment with respect to surrounding text. For details, consult an HTML reference.
|
Alternate Text
|
String
|
Text which appears instead of the specified image on browsers that do not support images. On browsers that do support images, this string often appears as bubble help when the cursor hovers over the image.
|
Alternate Text DataField
|
Field in DataSet
|
Name of the field in the DataSet to display as alternate image text.
|
Border
|
Integer
|
Width of a border surrounding the image, in pixels.
|
Data Field
|
Field in DataSet
|
Name of the field in the DataSet to display as text.
|
DataSet
|
DataSet
|
Name of the servlet query tag used to populate this component. Adding data to this field causes the Data Field and Display Format properties to appear.
|
Destination URL
|
URL
|
Destination of this hyperlink. This URL is loaded when the user clicks the image.
|
Display Format
|
Format
|
Optional format mask for dynamic data.
|
Height
|
Integer
|
Height of the image, in pixels. Specifying this property allows your page to load faster.
|
Horizontal Margin
|
Integer
|
Indentation from the left of the containing page, frame, or table cell to the left side of the image, in pixels.
|
Image Source
|
URL
|
Location of the source file for this image.
|
Image Source DataField
|
Field in DataSet
|
Name of the field in the DataSet to display as the location of the source file for this image.
|
Link Text
|
String
|
Text that appears on the screen next to the image according to the Alignment property. This text is also part of the hyperlink, meaning that it lies inside the <a> container.
|
Target
|
Target Window
|
Name of the window or frame where the results of this hyperlink should appear.
|
Vertical Margin
|
Integer
|
Indentation from the top of the containing page, frame, or table cell to the top of the image, in pixels.
|
Width
|
Integer
|
Width of the image, in pixels. Specifying this property allows your page to load faster.
|
This component responds to the following browser events:
Data-Bound Link
|
Data-Bound Link |
The Link component provides a hypertext link to another page or to a servlet.
This component can optionally be bound to output data from a servlet.
Date Display
|
Date Display |
The Date Display component displays either the current date or the date the
page was last edited (the file's timestamp). Configure the format of the date by
adjusting the component's properties.
Dated Image
|
Dated Image |
The Dated Image component enables an image to expire on a certain date,
after which time it is not displayed. One possible example use for this
component is to display an icon next to a page item indicating that the item is
new, which can disappear automatically whenever the item is no longer new.
This component resides on the JavaScript tab by default.
DropDownLink
|
DropDownLink |
The DropDownLink component defines a set of possible hypertext links in a
drop-down selectable list. When an item is selected, the browser then loads the
page for that item.
This component responds to the following browser events:
Drop-Down List
|
Drop-Down List |
The Drop-Down List component provides a list of values, of which one can be
selected at run-time from a drop-down list box.
This component can optionally be bound to output data from a servlet.
Note that you must set two data bindings, including a set of items (Items DataSet) and the item selected initially (Selection DataSet). To set multiple data fields per option, use Labels Expression and Selection Criteria.
This component responds to the following browser events:
Form
|
Form |
The Form component defines a container to mark an HTML form. This
component holds multiple components for data input and at least one Submit
button, as well as other page elements as necessary.
Note that the Form component itself displays nothing on the page. You must
add other components to the generated form, including a method for
submitting the form, such as the PushButton component.
This component responds to the following browser events:
Horizontal Line
|
Horizontal Line |
The Horizontal Line component places a horizontal rule (<hr>) on your page.
Property
|
Values
|
Description
|
Alignment
|
CENTER, LEFT, or RIGHT
|
Align to the center, left, or right side of the containing page, frame, table cell, or list item.
|
No Shading
|
true or false
|
If false, a dropped shade is applied to the line.
|
Thickness
|
Integer
|
Vertical thickness of the line, in pixels.
|
Width
|
Integer or Percentage
|
Width of the line expressed as either a number of pixels or a percentage of the containing page, frame, table cell, or list item. A value of 100% fills the container horizontally.
|
Image
|
Image |
The Image component defines a graphic image in GIF or JPG format. Note that
this component is not data-bound. For a dynamic version of this component,
use Data-Bound Image Link.
Property
|
Values
|
Description
|
(Name)
|
String
|
Name of this component.
|
Alignment
|
ABSBOTTOM, ABSMIDDLE, BOTTOM, LEFT, MIDDLE, RIGHT, TEXTTOP, or TOP
|
Image alignment with respect to surrounding text. For details, consult an HTML reference.
|
Alternate Text
|
String
|
Text which appears instead of the specified image on browsers that do not support images. On browsers that do support images, this string often appears as bubble help when the cursor hovers over the image.
|
Border Width
|
Integer
|
Width of a border surrounding the image, in pixels.
|
Height
|
Integer
|
Height of the image, in pixels. Specifying this property allows your page to load faster.
|
Horizontal Margin
|
Integer
|
Indentation from the left of the containing page, frame, or table cell to the left side of the image, in pixels.
|
Is Map
|
true or false
|
Specify whether this image is a clickable image map. For more information, consult an HTML reference.
|
Low Res. Source
|
URL
|
Source for a low-resolution (often black and white) version of the image. This version loads and displays first, allowing the user to make decisions and continue without waiting for images to download.
|
Map Name
|
String
|
Indicates the name of a server-side image map. For more information, consult an HTML reference.
|
Source
|
URL
|
Location of the source file for this image.
|
Vertical Margin
|
Integer
|
Indentation from the top of the containing page, frame, or table cell to the top of the image, in pixels.
|
Width
|
Integer
|
Width of the image, in pixels. Specifying this property allows your page to load faster.
|
This component responds to the following browser events:
Note.
These events do not appear on the Events tab in the property inspector. To handle an event, edit the component in Source view and add an appropriate argument to the <img> tag. The following example instructs the image to handle the onLoad event by calling imageLoaded():
<IMG SRC="image.gif" ONLOAD="imageLoaded()">
Label
|
Label |
The Label component defines an element for displaying dynamic text. For
example, this component could reference a servlet which looks up a user's first
name based on a provided ID and password; the resulting name is then
provided to the page by and displayed on the screen.
This component must be bound to output data from a servlet.
Link Target
|
Link Target |
The Link Target component defines a named mid-page URL target, specified
with the HTML code <a name="name">. You can link to this target with a #
separator, with a URL of the form pageURL#name. This component can
optionally define a hypertext link as well.
List
|
List |
The List component defines an HTML ordered list <ol> or unordered list <ul>.
This component can optionally be bound to output data from a servleta servlet.
Property
|
Values
|
Description
|
Data Field
|
Field in DataSet
|
Name of the field in the DataSet to display as list items.
|
DataSet
|
DataSet
|
Name of the servlet query tag used to populate this component. Adding data to this field causes the Data Field and Display Format properties to appear.
|
Display Format
|
Format
|
Optional format mask for dynamic data.
|
List Type
|
Itemized
|
Type of list. List types include:
Bulleted - circles (filled bullets) Bulleted - discs (empty bullets) Bulleted - squares Numbered - Arabic (1, 2, 3) Numbered - Roman capitals (I, II, III) Numbered - Roman lowercase (i, ii, iii) Lettered - capitals (A, B, C) Lettered - lowercase (a, b, c)
|
Maximum Rows
|
Integer
|
The maximum number of rows of data to be displayed.
|
List Box
|
List Box |
The List Box component provides a list of values in a form selector box, of
which one or more can be selected at run-time.
This component can optionally be bound to output data from a servlet.
Note that you must set two data bindings, including a set of items (Items DataSet) and the item selected initially (Selection DataSet). To set multiple data fields per option, use Labels Expression and Selection Criteria.
This component responds to the following browser events:
Mail Link
|
Mail Link |
The Mail Link component sets up a hypertext link which enables a user to send electronic mail to a given address. Set default values for e-mail fields using the properties shown.
New Window Link
|
New Window Link |
The New Window Link component loads a URL into a new browser window.
Customize the new environment by adjusting the properties to show or hide
various browser window features, such as a menu bar or a toolbar. You can
also show a message in the status bar when the cursor is over the component
(see the MouseOver Message property).
PushButton
|
PushButton |
The PushButton component defines a SUBMIT or RESET button for an HTML
form.
This component responds to the following browser events:
Radio Button Group
|
Radio Button Group |
The Radio Button Group component defines a radio-style selector switch with
two or more entries, for use in a form. Only one selection is allowed.
This component can optionally be bound to output data from a servlet.
Note that you must set two data bindings, including a set of items (Items DataSet) and the item selected initially (Selection DataSet). To set multiple data fields per option, use Labels Expression and Selection Criteria.
This component responds to the following browser events:
Rollover Image Link
|
Rollover Image Link |
The Rollover Image Link component places a graphic image on the page and
enables a second image to appear in place of the first when the cursor is over
it. An example use is a highlighted version of the original image.
Property
|
Values
|
Description
|
Alignment
|
ABSBOTTOM, ABSMIDDLE, BOTTOM, LEFT, MIDDLE, RIGHT, TEXTTOP, or TOP
|
Image alignment with respect to surrounding text. For details, consult an HTML reference.
|
Alternate Text
|
String
|
Text which appears instead of the specified image on browsers that do not support images. On browsers that do support images, this string often appears as bubble help when the cursor hovers over the image.
|
Border Width
|
Integer
|
Width of a border surrounding the image, in pixels.
|
Destination URL
|
URL
|
Destination of this hyperlink. This URL is loaded when the user clicks the image.
|
Height
|
Integer
|
Height of the image, in pixels. Specifying this property allows your page to load faster.
|
Image Source (Active)
|
URL
|
Location of the source file for the active alternate image that appears when the cursor is over the component.
|
Image Source (Inactive)
|
URL
|
Location of the source file for the inactive image that appears when the cursor is not over the component.
|
Status Bar Message
|
String
|
Message displayed in the status bar of the browser window when the cursor passes over the component.
|
Target
|
Target Window
|
Name of the window or frame where the results of this hyperlink should appear.
|
Width
|
Integer
|
Width of the image, in pixels. Specifying this property allows your page to load faster.
|
Scrolling Banner
|
Scrolling Banner |
The Scrolling Banner component scrolls a message from left to right in the
browser's status bar.
In order to activate this component, you must call the scroll() method for the banner somewhere in a <script> in the body of your page. For example, if your banner is named Message1, you must have the following line somewhere on your page:
<script>Message1.scroll()</script>
Table
|
Table |
The Table component places a table on the page.
While the Table component itself is not data-bound, its contents can be bound to output data from a servlet. In particular, you can use the Tile component to populate rows of the table dynamically and the Label component to populate individual cells (such as header cells).
Property
|
Values
|
Description
|
Align
|
left or right
|
Alignment of table in relation to the containing page, frame, or table cell.
|
Background Color
|
Color
|
Table background color.
|
Border
|
Integer
|
Width of the border surrounding each cell, in pixels. Set to 0 for no border.
|
Cell Padding
|
Integer
|
Distance between cell border and contents, in pixels.
|
Cell Spacing
|
Integer
|
Distance between individual cells, in pixels.
|
Columns
|
Integer
|
Number of columns in the table, used to speed page layout.
|
Height
|
Integer or Percentage
|
Minimum table height, in pixels or percentage of visible screen.
|
Horizontal Margin
|
Integer
|
Horizontal margin between table and surrounding text, in pixels.
|
Vertical Margin
|
Integer
|
Vertical space between table and surrounding text, in pixels.
|
Width
|
Integer or Percentage
|
Table width, in pixels or expressed as a percentage of the width of the containing page, window, or cell.
|
Text Area
|
Text Area |
The Text Area component displays text and enables multiple-line text entry in a
form.
This component can optionally be bound to output data from a servlet.
This component can optionally be validated when a value is entered.
Property
|
Values
|
Description
|
(Name)
|
String
|
Name of this component, addressable in the parameter list for the calling servlets.
|
DataField
|
Field in DataSet
|
Name of the field in the DataSet to display as the value of the text area initially.
|
DataSet
|
DataSet
|
Name of the servlet query tag used to populate this component. Adding data to this field causes the Data Field and Display Format properties to appear.
|
Display Format
|
Format
|
Optional format mask for dynamic data.
|
Height
|
Integer
|
Height of visible text area, in lines.
|
Validation
|
Itemized
|
Type of validation to perform, or (none) to disable this feature. If (Custom), use the Validation Expression property to perform validation.
|
Validation Expression
|
JavaScript code
|
Custom validation expression. Use if the Validation property is set to (Custom).
|
Value
|
String
|
Initial default value of the component.
|
Value Required
|
true or false
|
If true, form submission is rejected until a value is entered. Combine with Validation to ensure proper values.
|
Width
|
Integer
|
Width of text area, in characters.
|
Wrapping
|
OFF, HARD, or SOFT
|
Method for handling input lines longer than the width of the component. HARD inserts a newline at the end of each line, SOFT indicates that the value is to be treated as one line, and OFF disables text wrapping altogether.
|
This component responds to the following browser events:
TextField
|
TextField |
The TextField component displays text and enables a single line of text entry
on a form.
This component can optionally be bound to output data from a servlet.
This component can optionally be validated when a value is entered.
This component responds to the following browser events:
Tile
|
Tile |
The Tile component represents a repeating row of data from a servlet. The
component replicates itself for each row of data to be displayed. For example,
if a Tile component defines a row in an HTML table, at runtime the table
contains one row for each row of data.
Note that the Tile component itself displays nothing on the page; it only repeats
according to the rules specified by its properties. Insert other components into
the tile to display one or more fields in each row.
This component must be bound to output data from a servlet.
|
|
|