# Using JavaScriptBean Builder

Preliminary Draft - Preview Release 1

1. Introduction to JavaScriptBean Builder
   - System Requirements
   - What You Should Already Know
2. Understanding the JavaScriptBean Builder Interface
3. Creating a New JavaScript Component
4. Working in Component View
5. Working in Source View

Note: This document discusses how you can use JavaScriptBean Builder to create JavaScript components for Visual JavaScript. For technical information on JavaScript components, refer to the Visual JavaScript Component Developer's Kit (CDK) documentation or the Netscape TechNote, Creating JavaScript Components.

## Introduction to JavaScriptBean Builder

JavaScriptBean Builder is a visual tool developed by Acadia Software that is available for Windows 95 and Windows NT. It is intended to be used by Visual JavaScript developers who want to build ready-to-use JavaScript components that can be easily dropped into the Visual JavaScript palette. JavaScript (JS) components (sometimes referred to as "JavaScript beans") are packages of JavaScript code that have a well defined interface of properties, events, and methods. A component is defined using HTML-like tags to describe its structure and stored in a .JSB file.

Major features of JavaScriptBean Builder include:

- Visual environment for developing JS components
- Visual assembly of a component's interface (properties, methods, events, and so on) without working with metatags themselves
- Fully-functional editor supporting color syntax highlighting, Auto Indent, bookmarks, etc.
- Built-in JavaScript 1.2 object model and language reference tree
- File drag-&-drop functionality (drag-&-drop .JSB files from Windows Explorer into the JavaScriptBean Builder window).

### System Requirements

- Windows 95 or Windows NT
- 16MB of RAM
- 2MB of hard disk space

### What You Should Already Know

This documentation assumes you have some background in the following areas:

- Understanding of the Internet and World Wide Web (WWW)
- Working knowledge of the JavaScript language and of the Visual JavaScript development environment
- Understanding of JS components and their architecture

## Understanding the JavaScriptBean Builder Interface

The user interface of JavaScriptBean Builder is task-oriented and is divided into two separate "views" or modes:

- Component View. Define your JS component interface using Component View (shown in Figure 1.1). Use the Component pane to add properties, events, methods, method parameters, and interfaces to your component. Use the Attribute pane to define properties associated with a component descriptor.

Figure 1.1. Component View of JavaScriptBean Builder

- Source View. Write your JS constructor function and other supporting code using Source View (See Figure 1.2). All of the code entered into the source editor will be placed inside the <JSB_CONSTRUCTOR> tag.

Figure 1.2. Source View of JavaScriptBean Builder

## Creating a New JavaScript Component

To create a new JavaScript component, follow the steps provided below after running the JavaScriptBean Builder.

1. Create a new component description file.

   Click the New button on the toolbar (or choose New/Component from the File menu). The New JavaScript Component dialog box appears.

2. Name the component.

   Enter a name for the new component in the dialog box. The value you enter should be a fully qualified name for the component. Like Java classes, it is recommended that you organize your JS components into packages to avoid name collisions with other components. (See CDK documentation for more information on naming conventions of JS components.)

   JavaScriptBean Builder will display your new component in Component View.

3. Define component attributes.

   In the Attributes pane, define the descriptor attributes for the JS component. The attributes you define will be placed in the <JSB_DESCRIPTOR> tag.

4. Add component descriptors.

   Add properties, methods, events, and interfaces to the component by clicking on the associated toolbar button (or selecting New/xxx from the File menu).

   Tip: Use the right mouse button in the Component pane to display a popup menu to access the New commands.

   When you add a new descriptor, it will be added to the Component pane with the name of "Untitled". Change the name to something meaningful and click the Enter key to keep the name. Press the Tab key to move to the Attributes pane and around its fields.

5. Write constructor function.

   When you have finished defining the component interface, click the Source View tab to display the source code editor. Define the constructor function and any other supporting functions in the editor. All of the code entered will be contained in the <JSB_CONSTRUCTOR> tag when the component is saved to a .JSB file.

6. Save the component.

   When you are ready to save, click the Save button on the toolbar (or choose Save from the File menu). You will be prompted for the name of the .JSB file. Click OK to save. JavaScriptBean Builder will save your component definition using HTML-like metatags in a .JSB file.

You are now ready to install the JS component to the Visual JavaScript palette or place into a JAR file using the JAR Packager.

## Working in Component View

In addition to adding component descriptors and attributes, you can also perform the following tasks in Component View:

### Renaming a Component or Component Descriptor

To rename a component or a component descriptor:

1. Select the desired element in the Component pane.
2. Press F2 to enter edit mode in the treeview. (Or right-click and choose the Rename command from the popup menu.)
3. Enter a new name in the box provided and click Enter to keep changes.

Tip: Alternatively, you can change the Name field in the Attributes pane. The Component pane will automatically update.

### Deleting a Component Descriptor

To delete a component descriptor:

1. Select the desired component descriptor in the Component pane.
2. Press the Delete key. (Or right-click and choose the Delete command from the popup menu.)
3. You will be asked to confirm the delete. If you choose Yes, the component descriptor and its attributes will be removed from the component definition.

## Working in Source View

Source View is used to write the component's constructor function and related support functions. While in Source View, you can perform the following tasks:

### Using the JavaScript Language Reference

The JavaScript Reference tree can be used by the component developer when writing the Constructor function. The JS Reference provides support for JavaScript 1.2 as well as the latest server-side LiveWire language extensions. You can use the reference tree to locate the desired JavaScript language element or construct or view the interrelationships of the objects in the JS object hierarchy.

Note for PR1: For this release, the JavaScript Language Reference tree is for display only. You cannot drag-&-drop elements from the treeview into your source code.

### Setting Editor Preferences

You can set source editor preferences in the Preferences dialog box. You can access this dialog box by choosing Preferences from the Edit menu.

### Finding Text

You can search for text in the active source file by choosing Find from the Search menu (or by clicking the Find button on the toolbar).

Use the Find dialog box as follows:

- Enter the text you wish to locate in the Find what box.
- Check Match whole word only to locate text only if it matches a whole word.
- Check Match case to locate text only if it exactly matches the capitalization of the text to find.
- Specify the direction to search from the insertion point by selecting Up or Down in the Direction box.
- Click the Find Next button to locate the next match.
- Click the Close button to end the Find command.

Tip: After you have closed the Find dialog box, you can search for the same text by choosing Find Next from the Search menu or by clicking F3.

### Replacing Text

You can replace text in the active source file by choosing Replace from the Search menu.

Use the Replace dialog box as follows:

- Enter the text you wish to replace in the Find what box.
- Enter the replacement text in the Replace with box.
- Check Match whole word only to locate text only if it matches a whole word.
- Check Match case to locate text only if it exactly matches the capitalization of the text to find.
- Click the Find Next button to locate the next match.
- Click the Replace button to replace the most recently found text with the replacement text.
- Click the Replace All button to replace all instances of the find text with the replacement text.
- Click the Close button to end the Replace command.

Tip: To undo replacements that have already occurred, close the Replace dialog box and choose Undo from the Edit menu. If you have performed incremental replace operations, you will need to choose Undo for each of these actions. If you replaced all instances using Replace All, a single Undo will restore your changes.

### Finding Matching Brace

JavaScript uses brackets {} to encapsulate portions of code, such as a complete function or the if portion of an if..else statement. Each open bracket { must have a matching end bracket } or else you will get a syntax error. To determine a bracket's match, use the Find Matching Brace from the Search menu (or click F4).

### Setting a Bookmark

You can set a bookmark anywhere in the active source window by choosing Set Bookmark from the Search menu. This setting will mark the current location and return to it when you choose the Find Bookmark menu option.

Note: A bookmark remains in effect until you set a new bookmark or you close the source file window.

### Finding a Bookmark

Choose Find Bookmark from the Search menu to locate the bookmark that you previously set using the Set Bookmark command.

### Jumping to a Line Number

You can jump to a specific line number in the active source file by choosing Goto Line from the Search menu. The Goto Line Number dialog box prompts you for the line number you want to find. When this dialog box is displayed, the current line number is shown in the box.

Last modified: June 12, 1997
Copyright ©1997 Acadia Software, Inc.