You can add HTML pages to a project by creating them, or by importing existing pages into the project. You can also import image files, and all of the other files that are part of a project. See "Adding Pages and Files to a Project."

You can use the Page Editor to build HTML pages. There are many options for adding components, as well as text, images, links, and other HTML tags to a page, and for formatting and modifying the page. See "Editing Pages."

A number of components are provided with the default distribution of Visual JavaScript, and more can be added or imported. To help you understand and choose components, the built-in components are described briefly in "Overview of Built-in Components", and in more detail in Part 2, "Component Library Reference."

When you have added components to a page, you can customize them using the Inspector, or, in some cases, custom component editors. See "Editing Components." You can also use the Inspector to examine and change the properties of non-component objects such as projects and pages. See "Inspecting Other Objects."

Adding Pages and Files to a Project

• To add a new, blank page, click New in the toolbar or choose New Page from the File menu. In the Create a New Page dialog box, choose Blank Page Template.
• To add an automatically generated database-access page, click New in the toolbar or choose New Page from the File menu. In the Create a New Page dialog box, choose Database Wizard. Use the Database Application Wizard to define the new page or pages. When you have finished, the new page or pages are automatically generated and added to the project. See "Using the Database Application Wizard."
• To add a page built from a template, click New in the toolbar or choose New Page from the File menu. In the Create a New Page dialog box, choose one of the available templates. A new page based on the chosen template is automatically created and added to the current project, along with any associated files such as image files. You can create your own page templates. See "Creating Page Templates."
• If you already have HTML pages that you want to reuse or modify, click Import in the toolbar or choose Import Page(s) from the File menu to import them into your project. Any files that are associated with a particular page are imported along with the page. These files are displayed in the appropriate folder in the Project window.

• The Java Classes folder contains .class files
• The Other Files folder contains .Log files,.jsb files, and other file types
• The JavaScript Files folder contains .js files

Importing Page and Image Files

• Click Import on the toolbar.
• Choose Import Page(s) from the File menu.
• Right-click on the Pages folder in the Project window and choose Import Page(s) from the context menu that appears.
• Right-click the Images folder in the Project window and choose Import Image from the context menu that appears.
• Right-click the Java Classes, JavaScript Files, or Other Files folder in the Project window, and choose Import...File from the context menu that appears.

Figure 4.1    The Import Files to Project dialog box

1. Select the method with which you want to import (file copy or HTTP) from the drop-down list.

2. Specify the complete path to the page or file you want to import. If you are using file copy, you can click Browse to search the file system and select a page or file.
   If you are importing a page, any images or files that are referenced in that page are also imported, as long as they are found in or under the same directory as the page. (You can choose to import images or files from further up the directory structure. See "Importing Additional Related Files" following.)

3. Optionally, select "Import linked pages." When you select this option, additional pages that are linked to the primary page are also imported, as long as they are found in or under the same directory as the page.

4. Click OK to import the page or file. The imported HTML page or file appears in the project tree along with its associated files.

Importing Additional Related Files

C:\MyHost\MyProjects\ProjectA\MyPage.htm
C:\MyHost\MyProjects\globals\picture.jpg

C:\MyHost\MyProjects\

Follow these steps to import files from further up the directory structure:

1. Select the method and page in the Import Files to Project dialog box.

2. In the "Increase scope of import" section, use the Forward and Backward arrow buttons to specify the point in the directory structure from which you wish to find and import files.

3. Optionally, select "Import linked pages." When you select this option, additional pages that are linked to the primary page are also imported, as long as they are found within the scope you specify.

4. Click OK.

Editing Project Files

To edit an image, do one of the following:

• Right-click the image file in the Images folder in the Project window and choose Edit from the context menu.
• Select the image in the Page Editor (making sure the Page Editor window has the keyboard focus) and click Image Editor from the Tools menu.

• Double-click a .jsb file in the DataFiles folder or a .js file in the JavaScript Files folder to view the source file in read-only mode.
• Right-click a .jsb file in the DataFiles folder, and choose JSB Editor from the context menu that appears.
• Right-click a .js file in the JavaScript Files folder, and choose JavaScript Editor from the context menu that appears.

See "Using an HTML Editor to Edit Pages" for information on editing HTML files directly.

Editing Pages

Tip You can place form elements in an existing form by dropping them onto the form, which is highlighted in blue when the mouse cursor is properly positioned. However, if you drop a form element onto a blank area of a page, a form is automatically created to contain it. §

You can type directly into the Page Editor to add text, then edit and format the text using the toolbar and Format menu. See "Editing Text in the Page Editor." In addition, you can add text into components such as buttons and tables, in various ways. See "Editing Text in Components" and "Editing HTML Tables."

You can add images and links by dragging Image and Link components from the Palette, then editing their properties to specify the reference, or you can drag pages or images to the Page Editor from the Project window. See "Adding Images and Links to Pages."

You can also use another WYSIWYG editor such as Composer to edit your pages, or edit the HTML source directly in a text editor such as Wordpad. See "Using an HTML Editor to Edit Pages."

Editing Text in the Page Editor

Text that you enter directly into the Page Editor corresponds to blocks of text in the HTML version of the page. You can select a block of text in either the Layout view or Structure view. In the Layout view, you can edit the text directly. When you select a block of text in the Structure view and inspect it, the Inspector displays a multiline text editor in which you can modify the text. (See "Using Custom Component Editors.")

You can select any block of text in either the Layout or Structure view of the Page Editor, and use the Cut, Copy, and Paste commands from the Edit menu, the right-click context menu, or standard Windows keyboard shortcuts (Control-x, Control-c, and Control-v).

You can apply formatting styles to selected text from the style toolbar or the Format menu. Formatting styles include standard HTML heading levels, color, font size and style, bulleted and numbered lists, indentation, right or left justification, and centering.

Editing Text in Components

• The text in a button (Button, Submit Button, or Reset Button) is controlled by the Button Label property.
• The default text in a text entry component (Text Field or Multi-line Text Field) is controlled by the Value property.
• Check Box and Radio Button HTML components do not include text. To label them, type text labels next to them in the Page Editor.
• Use the Server Label component to compute text for a label at run time.
• The label of a JavaScript Check Box component is controlled by the Text to Display property. The labels for each button in a JavaScript Radio Button Group component are listed with semicolons between them in the Text Options property.
• The options that appear in selection lists are specified in different ways, depending on the type of component. See "Configuring Selection Components."
• The text that appears in database-access components is generated from data values at run time.
• You can edit the text in the cells of an HTML table directly in the Page Editor.

NOTE: The Name or ID property is the identifier for the component object and does not correspond to any visible text in the component. §

• Add or delete columns, rows, or cells
• Cut, copy, and paste columns, rows, or cells

To specify other aspects of the table's appearance, set the table's properties in the Inspector. For example, to set the size relative to the screen width, instead of to an absolute pixel value, set the Width or Height property to a percentage value, such as 50%.

In the Structure view you can see the HTML tags contained in a table. Rows correspond to the <TR> tag, and cells to the <TD> tag. Notice that columns do not correspond directly to an HTML tag. The Page Editor provides this abstraction for convenience. You can select the HTML tags in the Structure view and edit their properties in the Inspector. You can, for example, set the height or width of an individual cell or row in this way.

The Table Builder

Adding Images and Links to Pages

If you have imported an image file into the project, you can drag the image icon from the Project window onto a page in the Page Editor. The image appears on the page; that is, an Image component is automatically added to the page with a reference to the image file. (See "Importing Page and Image Files" for more information.)

When you add a Link component to a page from the Component Palette, you must edit the Destination URL property so that it refers to the URL of the page to which you are linking. The URL can be absolute, or it can be relative to the location of the current page (the project directory).

You can drag a page from the Pages list in the Project window onto a page in the Page Editor to create a link to it. A Link component is created and added to the page in the Page Editor, with a reference to the page from the Project window.

Using an HTML Editor to Edit Pages

Important If you are using Composer, you must use Communicator 4.0 (Composer module) to edit pages or data loss may result. §

• Display the page in the Page Editor (making sure the Page Editor window has the keyboard focus) and click Layout Editor on the toolbar, or choose HTML Layout Editor from the Tools menu.
• Right-click a page in the Project window and choose Edit from the context menu.

You can also choose to edit the source code for an HTML page directly in a text editor of your choice. To edit the source code for a page, do one of the following:

• Display the page in the Page Editor (making sure the Page Editor window has the keyboard focus) and choose HTML Source Editor from the Tools menu.
• Right-click a page in the Project window and choose Edit Source from the context menu.

Overview of Built-in Components

The following tables describe the components that are found by default on each of the default Palette tabs. Since the Component Palette is extensible, you might have additional components and tabs available to you, and new components might be made available in future.

Form Tab

Note that when you drop a form element component on a page where no form is selected, a form is automatically created to contain the form element.

Table 4.1 The Form tab

Component	Definition Language	Brief Description
Form	HTML	A standard HTML form: <FORM> HTML tag. (See "Connecting Forms.")
Text Field	HTML	A text entry form input field: <INPUT TYPE=TEXT> HTML tag
Password Field	HTML	A password entry form input field: <INPUT TYPE=PASSWORD> HTML tag
Hidden Field	HTML	A non-visible form element, used to pass information when the form is submitted: <INPUT TYPE=HIDDEN> HTML tag
Multi-line Text Field	HTML	A scrolling, multi-line text entry field: <TEXTAREA> HTML tag
Scrolling List	HTML	A selection list form control: <SELECT> HTML tag. (See "Configuring Selection Components")
Drop-down List	HTML	A drop-down selection list form control, that is, a selection list in which only one option is shown until the user clicks: <SELECT> HTML tag. (See "Configuring Selection Components")
Check Box	HTML	A check box form control: <INPUT TYPE=CHECKBOX> HTML tag
Radio Button	HTML	A radio button form control: <INPUT TYPE=RADIO> HTML tag
Button	HTML	A button form control: <INPUT TYPE=BUTTON> HTML tag
Submit Button	HTML	A special-purpose button that submits the containing form: <INPUT TYPE=SUBMIT> HTML tag
Reset Button	HTML	A special-purpose button that resets the containing form: <INPUT TYPE=RESET> HTML tag
Validated Form	JavaScript	A form that can contain ValidatedText elements, whose values are validated when the user submits the form.
Validated Text Field	JavaScript	A text field element in a ValidatedForm component, whose value can be tested against specified criteria.
JavaScript Select List	JavaScript	A multiple-choice Select list form element that supports property connections. (See "Configuring Selection Components")
JavaScript Radio Group	JavaScript	A radio button group form element that supports property connections.
JavaScript Check Box	JavaScript	A labeled check box form element that supports property connections.
File Upload	HTML	A form element that allows the user to enter or browse for a path and file name: <INPUT TYPE="FILE" SIZE=<x> MAXLENGTH=<y> NAME="<name>"> HTML tag

HTML Tab

Table 4.2 The HTML tab

Component	Definition Language	Brief Description
Image	HTML	An image reference: <IMG> HTML tag
HTML Table	HTML	A default HTML table with two columns and two rows: <TABLE> HTML tag, containing two <TR> tags that each contain two <TD> tags
Link	HTML	A hypertext link: <A> HTML tag
Mail-to Link	JavaScript	A link which, when clicked, displays the mail composition window.
Server Label	JavaScript	A text label that can be computed with JavaScript code.
Server Script	HTML	A placeholder for arbitrary Server-side JavaScript code: <SERVER> HTML tag
Client Script	HTML	A placeholder for arbitrary Client-side JavaScript code: <SCRIPT> HTML tag

Database Tab

Table 4.3 The Database tab

Component	Definition Language	Brief Description
LiveWire DBPool	JavaScript	A server-side JavaScript component that establishes a database connection.
LiveWire Cursor	JavaScript	A server-side JavaScript component that creates a LiveWire database cursor based on the query defined in the SQL Query property.
JavaScript Client Cursor	JavaScript	A JavaScript cursor component that runs code on both the server and the client. Creates a LiveWire database cursor based on the query specified in the SQL Query property, and constructs a buffer for the result set in client JavaScript.
Java Client Cursor	Java	A client-side Java component that creates a LiveWire database cursor based on the query specified in the SQL Query property.
Simple Server Table	JavaScript	A server-side JavaScript component that creates an HTML table which automatically displays data retrieved by the specified SQL Query, through the specified LiveWire DBPool component. The data is only displayed. You cannot use this component to update data in the database.
Custom Server Table	JavaScript	A server-side JavaScript component that creates a customizable HTML table containing query results when connected to a server-side cursor component through the DataSource property.
Database Form Handler	JavaScript	A server-side JavaScript component that processes a form submission and inserts, updates, or deletes a row in a database table. The component does not appear visually in the end-user interface. (See "Using Forms in Database Applications.")
Database Select List	JavaScript	A server-side JavaScript multiple-choice selection list form element. The contents are generated automatically from data. A connection is established through the specified LiveWire DBPool component. A query is automatically generated from the Table and Filter Column specifications. (See "Configuring Selection Components")

Other Tab

Table 4.4 The Other tab

Component	Definition Language	Brief Description
Server Send Mail	JavaScript	A server-side JavaScript component that creates a mail message on the server and sends it. This component is not visible in the end-user interface.
Date Display	JavaScript	A client-side JavaScript component that displays the current date or document last-modified date.
Nervous Text	Java	A client-side Java component that displays text in which the letters "dance". This component supports property connections.
Scrolling Message	JavaScript	A client-side JavaScript component that displays a scrolling message in the Navigator status bar.
Coffee Table	Java	A Java client-side table component that supports direct and property connections. This table can be used to display data from a database, but is also suitable for displaying dynamic data from other sources.
PopChart Lite	Java	A Java client-side graphing component that supports direct and property connections. Creates bar, area, and pie graphs. This component has a custom component editor.

Test Tab

Table 4.5 The Other tab

Component	Definition Language	Brief Description
Java Dummy Cursor	Java	A sample client-side database cursor, intended for demonstration and testing purposes. The component accesses "dummy" data to mimic the behavior of a Java Client Cursor without requiring a server or a database connection.
JS Dummy Cursor	JavaScript	A client-side JavaScript component that displays the current date or document last-modified date.
Java Form	Java	A sample client-side form that supports direct and property connections from client-side cursors.

Choosing Client or Server Components

However, when a component includes behavior implemented in Java or JavaScript, that code must run either on the server or on the client. If it runs on the client, the end user must have a Java- or JavaScript-enabled browser.

To give you a full array of choices for your delivery environment, some of the included components provide similar functions but differ in how the functions are implemented. The description of each component in the reference section of this manual includes information about the language used by the component, and also specifies whether it runs on the server or the client. Some components (the JavaScript Client Cursor, for example) have code that runs on both sides.

If you cannot guarantee that the delivery environment will always have a browser with the proper language enabled, choose server-side or HTML components to build your application. If you know that your clients will be using a particular browser, you can take advantage of the additional features that come with client-side Java and JavaScript components.

Editing Components

Selection components, such as the HTML Scrolling List, are associated with Option objects, which specify the selections in the list. See "Configuring Selection Components" for more information.

You can create a style by setting the visual properties of a component to default values, so that every time you add that component to a page, its visual features are the same. You do this by editing the component in the Component Palette, rather than an instance on a page. See "Creating Default Values for Components" for more information.

Some components that have a complex presentation come with custom editors that are tailored to their special editing needs. When a component has a custom editor, it appears automatically when you inspect the component. See "Using Custom Component Editors" for more information.

In addition to customizing the visual appearance of components, you can specify the behavior of your application by connecting components to one another in various ways, connecting user events to methods or code, and specifying JavaScript and SQL code as property values. For more information, see Chapter 5, "Adding Behavior to an Application."

You can also connect data-display components to data from a database, either directly or through a database cursor. For more information, see Chapter 6, "Developing Database Applications."

Configuring Selection Components

For any select box, you must specify the list of options to be displayed. Each option has both a display string, which is shown in the selection list, and a value, which is submitted for the selected option when the containing form is submitted. (See "Connecting Forms" for more information on submitting forms.)

The selection option display strings and values are specified differently for the different types of components:

• Drop-down List and Scrolling List
When you inspect one of these list components, the Inspector displays a custom property editor in which you can specify the list options. Right-click in the Text section to see a context menu that allows you to add and delete options. Type into the Text column to enter or edit the label of an option. Type into the Value column to enter or edit the value submitted with the form when an options is selected. Click the Selected flag to indicate that an option is initially selected when the list appears.
Click Inspector to see the properties of the component. Click Customizer to switch back to the option editor.
• JavaScript Select List
Specify the selection options in the Text Options property, with semicolons between each display string. For example, type the following in the Inspector:

Cat; Dog; Fish

These strings are displayed in the list box. When the form containing the component is submitted, the value of the selected option is submitted with it. To specify the value of each option, set the value of the Value Options property to a list of values, separated by semicolons. For example:

1; 2; 3

This sets the value of Cat to 1, of Dog to 2, and of Fish to 3. If the user selects Cat and submits the form, a value of 1 is passed for the select element.
• Database Select List
This server-side component is connected directly to a database, and the selection options are generated automatically from the downloaded data. Set the DBPool property to establish a database connection. A query is automatically generated from the Table and Filter Column property values, and each row of the result set is displayed as a selection option.
This component is used by the Database Application Wizard to display master-detail relationships. See "Master-Detail Applications" for more information.

When you modify a property value in a Palette component, the value is retained when you drop that component onto a page. Once the component is on a page, you can choose to retain the default values or modify the individual instance.

Using Custom Component Editors

To switch between a custom editor and the usual property-display mode of the Inspector, click the buttons at the top of the Inspector window.

• Click Customizer to activate the custom editor.
• Click Inspector to examine any changes made to the properties by the custom editor.

Inspecting Other Objects

• Projects
From the Project window, select the project name to display the project object in the Inspector. The properties of the project specify default deployment information. When you a deploy a project, the values you set here appear as default values in the Deploy Project to Server dialog box. See "Deploying and Compiling Applications."
You can set deployment preferences, which determine the default values of these properties for new projects. See "Deployment Preferences."
• Pages
Select a page in the Pages folder of the Project window. The page object is displayed in the Inspector.
You can rename a page by editing the value of its Name property.
To specify the character code used by a page, set the value of the Content Type property. To view a page that uses a character code other than the default, you must set an application preference. See "Palette and Application Preferences" for more information.
• Data sources
Select a data source in the Data Source folder of the Project window. The data source object is displayed in the Inspector. The read-only properties of the data source show information about the source database. You can edit the values of the Design Time User Name and Design Time Password properties. The system uses these values at login, unless you select Prompt for Password Every Time? in the Create Data Source dialog box. See "Identifying Data Sources" for more information.
You can expand a data source to see its tables (or data views), and expand a table to see its columns. Select a column to display it in the Inspector and see its data type.
• HTML tags
You can select a specific HTML tag in the Structure view of the Page Editor and display it in the Inspector. The properties of HTML tags are listed and described in detail in HTML documentation

Last Updated: 11/06/97 13:24:50