Now that you know how to develop large applications on the World Wide Web using JavaScript, it would be useful to have sophisticated development tools for JavaScript applications similar to the large number of powerful HTML editors, validators, and assistants.
Although there are currently no editors or development tools specifically designed for JavaScript, Netscape has developed Navigator Gold. This product brings together the Navigator browser with a comprehensive editing environment for developing Netscape-specific Web pages that support all the major features of Navigator, including JavaScript.
In this chapter we take a look at Navigator Gold as a development tool, both for HTML and for JavaScript. We discuss the following:
This chapter describes the features of Navigator Gold 2.0, which was in release version when this book was written. At that time, Navigator Gold 3.0 was in beta development.
Navigator Gold could be seen as the advanced version of the Navigator Web browser. Whereas Netscape is trying to position Navigator as the complete Web browser and Internet tool for the Internet user, Navigator Gold is being positioned as a key application for users to develop Web applications that take advantage of the special features of Navigator.
These are the main features of Navigator Gold:
Navigator Gold adds a new editing window accessible from the File menu and from a new button on the Web browser's toolbar. Using the editor, it is possible to develop Web pages in a WYSIWYG (what you see is what you get) environment. The editor makes it easy to apply HTML tags in such a way as to completely avoid the intricacies of HTML tags. Figures 13.1 and 13.2 show what the same document looks like in the Web browser window and the editor window.
Figure 13.1 : Navigator Gold 2.0 supports standard browsing features found in Netscape Navigator.
Figure 13.2 : In addition to browsing capabilities, documents can be opened in a built-in editor.
Netscape has implemented drag-and-drop support throughout Navigator Gold. It is possible to drag images or links from the Web browser window to the editor window to develop pages quickly.
Netscape has indicated that Navigator Gold will include a feature called One Button Publish, which will enable the simple uploading of Web pages developed with Navigator Gold to Internet Service Providers that support this feature.
Netscape claims that Navigator Gold provides the industry's first JavaScript program editor. The built-in editor window will provide specific features and options particularly designed for JavaScript programming.
Netscape's promotions for Navigator Gold include several on-line services. These include the Netscape Page Starter Site, which offers resources on the Web for page authors and the Net-scape Page Wizard, which guides a novice developer through Web creation using simple questions, style guides, and pre-designed artwork. For more information about these, check out the Navigator Gold handbook at
http://home.netscape.com/eng/mozilla/Gold/handbook
In order to take advantage of the features of Navigator Gold, it is necessary to understand the relationship between the browser and editor windows.
As with Navigator, the default window is the browser window. From the browser window, there are several ways to get to the editor window:
The editor window is similar to the browser window. The document is displayed in a WYSIWYG mode similar to the browser window, and the user can specify the color of text, links, and other page elements.
Unlike the browser window, the editor window does not offer the same toolbar, location field, and directory buttons. Instead, the editor window offers the File/Edit toolbar, the Paragraph Format toolbar, and the Character Format toolbar, each of which can be individually displayed or hidden by the user.
The File|Edit toolbar provides buttons to perform the main file and editing functions, including opening and saving documents, switching to the browser window, cutting, copying and pasting, and printing documents. The File|Edit toolbar looks like Figure 13.3. Table 13.1 describes each button.
Figure 13.3 : The File/Edit toolbar.
| Button | Function |
| New | Opens a new document for editing |
| Open | Opens an existing document in a new editor window |
| Save | Saves the current document |
| Browse | Opens the current document in a new browser window |
| Cut | Cuts the selected items/section and saves it in the Clipboard |
| Copy | Copies the selected items/section to the Clipboard |
| Paste | Pastes the Clipboard contents into the current document |
| Prints the current document | |
| Search | Searches for text in the current document |
| Web Page Starter | Displays information about Web content creation |
The Paragraph Format toolbar provides the basic buttons for applying HTML formatting tags to text. A drop-down list offers the main paragraph formats, including various header formats. Buttons offer a range of features, including unnumbered and numbered lists and paragraph alignment. The Paragraph Format toolbar looks like Figure 13.4. Table 13.2 describes each button.
Figure 13.4 : The paragraph Format toolbar.
| Button | Function |
| Unnumbered List | Create or change to an unnumbered list |
| Numbered List | Create or change to a numbered list |
| Increase Indent | Increase paragraph indent by one level |
| Decrease Indent | Decrease paragraph indent by one level |
| Left | Align text to the left |
| Center | Align text to the center |
| Right | Align text to the right |
The Character Format toolbar offers buttons to set the font size tag, the style of type including bold, italic, and fixed-width, as well as setting font color, creating links, and inserting images and horizontal rules. The Character Format toolbar looks like Figure 13.5. Table 13.3 describes each button
Figure 13.5 : The Character format toolbar.
| Button | Function |
| Decrease Font | Decrease the font size |
| Increase Font | Increase the font size |
| Bold | Apply a bold style |
| Italic | Apply an italic style |
| Fixed Width | Make the type monospaced (fixed width) |
| Font Color | Select a font color |
| Link | Create a new link or modify an existing one |
| Clear | Clear all styles |
| Image | Insert an image |
| Rule | Insert a horizontal line |
| Properties | Open the object properties dialog box for the selected object |
The other key feature of the editor window is context-sensitive pop-up menus. Pop-up menus on different objects provide quick access to a list of relevant commands and frequently used functions. Most objects in a document generate different pop-up menus, including links, images, and horizontal rules. Pop-up menus are accessed by right clicking on an object in the editor window.
In order to understand better how the editor window works, you are going to create a new document using Navigator Gold.
The document you create will include an image, a horizontal rule, a link to another page, as well as header and body text and highlighted text using different character styles and different color text. The final page should look like the one in Figure 13.6.
Figure 13.6 : You are going to create this page using Navigator Gold 2.0
The editor preferences dialog box can be opened from the Options menu. It offers the user the opportunity to set general options, as well as default display colors and backgrounds for the editor.
The two pages of the editor preferences dialog box look like Figures 13.7 and 13.8.
Figure 13.7 : General preferences
Figure 13.8 : Default Colors/Backgrounds.
The general options include the default author of documents, as well as two options: Keep images with document (to copy all images to your local hard disk) and Maintain link integrity (to adjust links to work regardless of whether the file is saved locally or published to a Web site on the Internet).
For this document, select both Keep images with document and Maintain link integrity.
The Default Colors/Backgrounds screen also enables the user to set the colors used by the editor to display everything from normal text to link text, as well as the background.
As mentioned earlier, you can create a new document by selecting New Document from the File menu in the browser window. This opens a new editor window with a blank document but will not close the existing browser window.
Once the file is created, you can give it a filename by saving it-this can be done in the File menu or by choosing the save button on the File/Edit toolbar. It is important to save the file for many of Gold's link-related features to function correctly.
The document properties dialog box (in the Properties menu) enables you to set up several features of your HTML document, including header information, such as the title and the color and background information for the BODY tag.
The information in the dialog box is divided into two pages which can be selected by tabs: header (document) information and color/background information.
The document properties dialog box looks like Figures 13.9 and 13.10.
Figure 13.9 : Header information.
Figure13.10 : Colors/Background.
The Document Information screen allows the user to set information to include in the header of the HTML document. This includes the title of the document and the author.
For your document, you want to set the Title to Example 13.1 and the background color to whatever color you prefer.
There are two ways you can insert the desired image-drag an existing image from the browser window or insert a new image by choosing Image from the Insert menu (which is the same as clicking on the insert image button on the Character Format toolbar). You will use the latter.
When you choose to insert an image, you are presented with an image properties dialog box like the one in Figure 13.11.
The image properties dialog box allows you to specify the image file, an alternate image file, and alternate text. In addition, the alignment of the image relative to the neighboring text, the size of the border, and the blank space around the image can be controlled.
The dialog box contains two browse buttons-one for the image file and one for the alternate image file.
If you want to, you could specify alternate text for text-based browsers, as well as the space around the image and the width of the border. If you want to make the image a link, you could select a link as well.
You can insert a horizontal line by selecting the horizontal line button on the Character Format toolbar or by selecting Horizontal Line from the Insert menu. Once the line is inserted, you can right click on it to get a pop-up menu and then select Horizontal Line Properties to get the horizontal line properties dialog box, which looks like Figure 13.12.
Figure 13.12 : The horizontal line properties dialog box.
The horizontal line properties dialog enables you to specify the alignment, width, height, and other properties of a horizontal line.
You aren't selecting anything special for this example except to choose a center alignment.
By clicking next to the horizontal line you just inserted and pressing return, you can type in the text of the header.
Next you need to apply the appropriate paragraph format. Paragraph formats apply to all paragraphs in a selection. If no text is selected, then the format applies to the paragraph where the cursor is.
By leaving the cursor in the paragraph you have just written, you can simply select the header style you like from the drop-down list on the Paragraph Format toolbar.
You also want to change the words "Netscape Navigator Gold" in the paragraph to italics and change the color to red. You can do this using character formatting features.
In order to apply character formats to selected text, you need to select the text you want to work with. Next, you can select the italic style from the Character Format toolbar. Then you can add the color red by clicking the color button on the toolbar or selecting Font Color from the Properties menu.
When you do, you get the font color dialog box, which looks like Figure 13.13.
Figure 13.13 : The font color dialog box.
Next you can click after the header you have just created, hit return, and enter the body text. You need to select the normal paragraph format from the drop-down list in the Paragraph Format toolbar to switch from the header style to normal text. You also need to turn off italics by clicking on the italics button in the Character Format toolbar and set the color back to black before you start typing.
You want to turn the text here into a link to Netscape's home page. You can do this by selecting the text and clicking on the link button in the Character Format toolbar. When you do this, you get the modify/insert links dialog box like the one in Figure 13.14.
Figure 13.14 : The modify/insert links dialog box.
In this dialog box, you can specify a link. You can select a link by clicking on the Browser button or by typing a URL. In this case, you can enter the URL http://home.netscape.com/.
Now you can save the document by selecting the save button on the File|Edit toolbar or by selecting Save from the File menu.
If you want to view the source code of the document you have just created, select Document Source from the View menu. This opens a view source window, which looks like Figure 13.15.
Figure 13.15 : You can view the source code of any project.
Then you can view the document by selecting the browser button in the File|Edit dialog box. The document will be opened in the browser window.
In the release version of Navigator Gold that is currently available, the JavaScript features of Gold are limited. Still, Navigator Gold does offer the first integrated tools for working with both HTML and JavaScript and offers a few basic editing features especially well-suited to JavaScript editing.
For instance, when you indent a line using the Tab key, the editor remembers the level of indent and the next line will also be indented to the same point. The Shift+Tab combination enables you to back out to a higher level (that is, indent less). This feature can be useful in maintaining well-structured, easy-to-read JavaScript programs.
In addition, JavaScript code is treated as a character style, so you can type a script without the SCRIPT tags. Then, you can highlight the text and select JavaScript (client) from the character submenu of the Properties menu, and the SCRIPT tag will be inserted (but not displayed), and the color of the script text will change.
One drawback of the editor is that you need to hit Shift+Return (a soft return) at the end of each line. Otherwise, each line of your script will be contained in separate SCRIPT container tags.
Even so, in the current beta version of Navigator Gold, it is not practical to create new JavaScript pages using the editor window. Not only is there no direct way to put scripts into the header of the document, but it is not possible to add event handlers to various HTML tags.
Nonetheless, you can to use the editor to edit an existing JavaScript application by loading the page in the browser and then switching to the editor window by clicking on the Edit button. Then all of your SCRIPT containers will appear, and if you edit the existing files, they will remain properly contained in SCRIPT container tags.
Even so, event handlers in JavaScript tags will not appear, and it will be difficult to work with forms because Gold's form handling, especially related to JavaScript, is less than perfect in the current beta. Nonetheless, these aspects of editing and creating integrated JavaScript and HTML documents should be worked out by a later release of Navigator Gold.
In addition to promising to offer JavaScript editing capabilities, Navigator Gold includes, or will include in a later version, several other advanced functions that can ease the Web page development process. These features include a one-button publish feature that will publish your page or pages to your service provider's Web server along with all related images and linked files.
Navigator Gold also promises to include the ability to create client-side image maps, include audio files, and provide basic document management capabilities.
In this chapter, you learned the basics of using Navigator Gold to create HTML pages, and we discussed how future versions of Gold will allow for integrated development of JavaScript scripts. Navigator Gold provides a separate WYSIWYG editing window, which enables drag-and-drop editing and provides tools for easy adjustment of object properties in a page through properties dialog boxes and toolbars.
In Chapter 14, "From JavaScript to Java-Looking into the Future," you are going to take a look at the relationship between JavaScript and Java, how to move from JavaScript to Java, how to bring Java and JavaScript together in an HTML document, and future developments of JavaScript.
| Q | I have seen products that manage complete Web sites-not just pages. They track links between files and manage the directory structure. Can Navigator Gold do this for me? |
| A | No. Navigator Gold is not a site management tool. It is a browser with an integrated editor. Navigator Gold does have features for managing the relationship between HTML files and inline images, and can handle the conversion of relative and absolute links in files. |
| Q | If I have Navigator Gold, is there any reason for me to have Navigator as well? |
| A | Not really. Navigator Gold includes the complete Navigator Web browser with the addition of an editor. You shouldn't find any need for Navigator as well. |