The component model allows you to assemble applications by collecting and connecting the ready-made components, which already have behavior programmed into them. In a visual programming environment, much of the work of building an application consists of selecting the components you want and placing them together into a window that represents a single HTML page of your finished application. All of the tasks of application building are accessible through the menu bar and toolbar in the main application window. (See "Main Application Window.")

In Visual JavaScript, a project keeps track of the pages and other source files that make up your application. The Project window shows you the contents of your current project and lets you open, add, or remove pages. (See "Project Window.")

When you open a page to work on, it is displayed in a Page Editor window, where you can add components and create the layout of the visual elements that your end user will work with. (See "Page Editor.") You add components by dragging them onto the page from the Component Palette. (See "Component Palette.")

When you have chosen components, you must customize their appearance and behavior, and connect them together to form your specific application. You do this by setting their properties in the Inspector, and making connections in the Connection Builder. (See "Inspector," and "Connection Builder.") You can then test the behavior either by previewing individual pages of the application on the client side, or deploying it on the server and using the JavaScript Debugger to identify problems. (See "JavaScript Debugger.")

As you use these windows to develop your crossware application, you will also encounter a number of other special builders and editors that help you with programming tasks. These tools can even eliminate tasks by generating parts of your application entirely automatically. (See "Additional Tools.")

Main Application Window

A number of working windows appear within the main window as you create and inspect the parts of your application. You can be size and place these windows however you choose. Figure 2.1 shows a convenient layout.

Figure 2.1    The Visual JavaScript main application window

In addition to the toolbar and menu bar, many of the working windows have context menus that appear when you right-click an object or the background of the window. The context menus give you access to frequently used commands, which usually apply to the currently selected object in the window. Additional help is often available through the What's This? or More Info commands on the context menu.

The individual working windows are described in the sections that follow.

Project Window

When you create or select a project on start-up or by using the File menu, it is displayed in the Project window, as shown in Figure 2.2. You can also invoke the Project window by choosing Project from the Window menu.

Figure 2.2    The Project window

Each HTML page in your project is listed under Pages in the Project window, where you can double-click it to display it in a Page Editor. As you add components to your pages, the required source files for those components are automatically added to the project and listed in the Project window.

Although data sources are not part of an individual project, the Project window also shows you which data sources are available on the deployment server and allows you to identify new ones. (See "Identifying Data Sources" for more information.) You can click the "+" icon to open a data source and see the tables and columns defined in it.

You can use the Project window to import specific files into your project. You can import existing HTML pages into the project in order to re-use them, modify them, or incorporate elements of them into your application. You can also import image files, so that they are available locally and delivered with the application. (See "Adding Pages and Files to a Project" for more information.)

When you move the cursor over a file in the Project window, a tool tip appears, showing the full file name. For image files, the tool tip shows a thumbnail version of the image.

Page Editor

The Layout view that first appears shows your components visually. For visual components, this view shows approximately how the finished page will look to the end user. This is the view in which you do most of the work of building the page. However, you can display the page using any of three views: Layout, Structure, or Source. To see and work with a structured view of the HTML code that is generated as you build the page visually, select the Structure view. To see the actual HTML source code, choose the Source view.

Select a view in any of the following ways:

• Click one of the layout icons at the far right of the Page Editor toolbar.
• Select a view from the View menu.
• In the Structure or Source view, right-click on the Page Editor window, and select a view from the context menu.

Tip Split the Page Editor window, as shown in Figure 2.3, to display more than one view at a time by choosing Split from the Window menu. A new pane appears at the bottom of the window, displaying the same page using the view you choose. To remove a pane, click the bar between the panes and drag the cursor all the way to the top or bottom of the window. §

Figure 2.3    Layout and Structure views of the same page in different Page Editor panes

You can add a component to the page by dragging it from the Component Palette into the Layout view of the Page Editor. You can also enter text directly into the Layout view at the cursor location to create labels and descriptions. You can insert carriage returns from the keyboard to create new lines, add HTML elements using the Insert menu, format text using the Format menu or formatting toolbar, and drag components to existing lines in order to change their positions. For a more complete description of your options for editing pages, see "Editing Pages."

Structure View

When you select a page element in the Layout view, the corresponding HTML tag is selected in the Structure view. When you select an HTML tag in the Structure view, the corresponding page element is selected in the Layout view. The cursor is inserted in text to indicate selection. Selected objects in the Structure view also appear in the Inspector, where you can examine and change their properties.

Source View

NOTE: Direct editing is not supported in the Source view for this release; however, you can choose any other editor to edit the HTML source directly. See "Using an HTML Editor to Edit Pages" for more information. §

To display the Component Palette, click Palette in the toolbar or choose Palette from the Window menu. Move the cursor over a Palette item to display a tool tip that describes the component. Double-click a Palette item to call the Inspector and display the component's properties.

A default set of components is available that includes HTML form elements, JavaScript components, LiveWire database-access components, and Java components. Components of different types are organized into tabs. The Form tab of the Component Palette is shown in Figure 2.4.

Figure 2.4    Default Form components on the Component Palette.

Form. Standard HTML form elements, such as text fields, check boxes, and buttons. (See "Form Tab.")

HTML. Components such as Table, Image, and Link, that are made of standard HTML tags or blocks. (See "HTML Tab.")

Database. JavaScript and Java components that let you connect to specified databases and make use of the LiveWire database functionality. (See "Database Tab.") These include:

• The LiveWire DBPool that manages your database connections
• Cursors that keep the result set of a query and contain the methods for navigating within a result set
• Components that both access and display data, such as the Database Select List

Test. Sample components intended for testing or learning about database access pages. These include the Java Dummy Cursor, the JavaScript Dummy Cursor, and the Java Form. (See "Test Tab.")

Each of the built-in components is described in detail with a list and description of all properties, methods, and events in Part 2, "Component Library Reference."

You can customize and extend the Component Palette in a number of ways:

• Drag and drop Palette components between the tabs to modify the default organization, as well as back and forth between the Page Editor and the Palette.
• Cut, copy, and paste components between tabs.
• Add, delete, and change the order of the tabs.
• Load and save Palette tabs in the Palette archive.
• Install new components on the Palette.

For more information, see Chapter 8, "Customizing the Development Environment."

Inspector

• Double-click a component in the Page Editor or Component Palette, or a project or page in the Project window.
• Select an object in the Project Window, Page Editor, or Component Palette and choose Inspector from the Window menu.
• Select an object in the Project Window, Page Editor, or Component Palette and click Inspector in the tool bar.

Figure 2.5    Inspection of a selected Form component

The Inspector generally displays properties, events, and methods for the selected component. For selection-list components, it also displays the selection options. Project properties specify deployment information such as deployment location and project name. Component properties specify such things as the component name, contents, and appearance.

Inspecting Properties

When a property is read-only, you can inspect the value but cannot edit it. For editable properties, you can type text directly into the value cell to change the value of the property.

At the right edge of the value cell there can be one or more buttons: an ellipsis (...), an equal-sign (=), or a downward-pointing arrow. These buttons bring up a custom property editors suitable to the property.

• Click the arrow to choose from a drop-down list of available values for the property. You can also type a value into the cell, but choosing from the list guards against typing errors.
• Click the equal-sign to bring up the Expression Editor. This editor helps you build a JavaScript expression that is evaluated at run time to derive the property value. This feature is available for the properties of JavaScript components. (See "Creating JavaScript Expressions.")
• Click the ellipsis to bring up a custom property editor suitable to the property. The following types of property editors are available:
• Multi-line Text Editor. You cannot include line-break or return characters in a value that you type directly into the value cell.
• SQL Query Editor. This editor helps you build a valid SQL query. (See "Creating SQL Queries.")
• DBPool Editor. This editor automatically selects an existing LiveWire DBPool component or creates a new one if needed. (See "Connecting to the Database.")

NOTE: If you have created a component of your own that includes its own custom editor (called a Bean Customizer), the Inspector will automatically make it available when you inspect the component. §

The Inspector displays the methods that are defined for each component, with any parameters and type information. When you make a component the target of an Event connection in the Connection Builder you can choose to call a method in response to the source event. The methods of the target component are listed. When you select a method that has parameters, you can specify them in a dialog box. (See "Connecting Components.")

Connection Builder

There are three ways to bring up the Connection Builder:

• In the Inspector, click the ellipsis (...) next to an event.
• Select the source component in the Layout view of the Page Editor and choose Connection Builder from the Tools menu.
• Select the source component and target component interactively in the Layout view of a page, as follows:
1. Move the cursor to connection point (the small box in the upper-right-hand corner) of the source component. (After the connection is made, the connection point is filled in to indicate that a connection exists.)
2. Press and hold the left mouse button, and begin dragging. The cursor changes to "plug" icon to let you know that the tool is in connection mode.
3. Drag the plug to a second component on the page. When the cursor is positioned correctly over a component, the target component is highlighted by a green border.
4. Drop the connector onto the target component. The Connection Builder appears, displaying information about the connection you are defining.

Figure 2.6    The Connection Builder

NOTE: The Connection Builder always shows the currently selected object as the source component, as long as it is a connectable object. If you click another connectable component in the Page Editor, that becomes the current selection, and the new source component. If you are in the middle of building a connection, a message appears to warn you that the current connection information will be discarded. §

• For a direct connection, you simply choose a target component and specify whether the connection works both ways.
• For a property connection, you can choose the property to be changed in the target component. This type of connection can also work both ways.
• For an event connection, you specify a JavaScript event handler. You can select a method to be called or a property to be set in the target component, or you can enter event-handler code directly.

NOTE: The Connection Builder makes only client-side connections. To make connections to or between server-side components, you can set properties to refer to other components or property values. For more information, see Chapter 5, "Adding Behavior to an Application." §

To start the Debugger with the current page loaded, click Debugger on the toolbar or choose Debugger from the Tools menu.

See "Testing and Debugging Applications."

Additional Tools

Database Application Wizard

• Data display. A table displays the contents of all rows for the tables and columns that you specify.
• Data update. A form displays the contents of a single row for the tables and columns that you specify. The user can move forward and backward through the data, and, if you choose, enter new values and update the database.
• Data entry. A form displays the tables and columns that you specify. Initially, all values are blank. The user can enter values and add new rows to the database.

Custom Editors

• The Script Builder helps you build JavaScript event handlers that call methods or set properties in components. Access it from the Connection Builder when you create or edit an Event connection. See "Specifying an Event Connection."
• The SQL Query Builder helps you build a valid SQL statement to access your database. Access it from an SQL Query property in the Inspector. See "Creating SQL Queries."
• The Expression Editor helps you build JavaScript expressions to use as property values or parts of SQL queries. Access it from any property of a JavaScript component in the Inspector or from the SQL Query Builder. See "Creating JavaScript Expressions."
• The DBPool Editor helps you connect a component to a database, finding or generating a LiveWire DBPool component as needed. Access it from a DBPool property in the Inspector. See "Connecting to the Database."
• The Table Builder helps you create an HTML table according to your specifications. Access it by choosing Table from the Insert menu. See "Editing HTML Tables."
• Custom component editors are available for some components. When a component has a custom editor, it comes up automatically when you inspect the component. See "Using Custom Component Editors."

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