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 large number of powerful HTML editors, validators and
assistants.
Although there are currently no editors or development tools specifically designed for JavaScript, Netscape has begun development of Navigator Gold 2.0 (which was in public beta in the spring of 1996). This product promises to bring together the
Navigator 2 browser with a comprehensive editing environment for developing Netscape-specific Web pages that support all the major features of Navigator 2, including JavaScript.
In this chapter we take a look at Navigator Gold 2.0 as a development tool, both for HTML and for JavaScript. We discuss the following:
Navigator Gold 2.0 could be seen as the advanced version of the Navigator 2.0 Web browser. Where Netscape is trying to position Navigator 2.0 as the complete Web browser and Internet tool for the
Internet user, Navigator Gold 2.0 is being positioned as a key application for user to develop Web applications which take advantage of the special features of Navigator 2.0.
Netscape expects to complete Navigator Gold 2.0 in the first half of 1996 and has indicated they intend to sell the product for a retail price of US$79.
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 2 Gold. It is possible to drag images or links from the Web browser window to the editor window to quickly develop pages.
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 which support this feature.
Netscape claims that Navigator 2 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 2 Gold include several on-line services. These include the Netscape Page Starter Site, which offers resources
on the Web for page authors and the Netscape 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 2.0 handbook at
http://home.netscape.com/eng/mozilla/Gold/handbook
In order to take advantage of the features of Navigator Gold 2, it is necessary to understand the relationship between the browser and editor
windows.
As with Navigator 2, 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 |
|
|
|
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 |
|
|
|
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 |
|
|
|
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 2.0.
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. We are going to create this page using Navigator Gold 2.
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 to be 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.
Figures 13.10. Colors/Backgrounds.
The Header/Information screen allows the user to set information to be included in the header of the HTML document. This includes the title of the document and the author.
For the document, you want to set the Title to Example 13.1 as well the background color to whatever color you prefer.
There are two ways you can insert the desired image—to drag an existing image from the browser window or to insert a new image by choosing Image from the Insert menu
(which is the same as clicking on the insert image button on 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.
Figure 13.11. The image properties dialog box.
The image properties dialog box allows the user 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 the example page 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 <A HREF="http://home.netscape.com/"> http://home.netscape.com/.</A>
Now you can save the document by selecting the save button on the File/Edit tool bar 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 present version of Navigator Gold 2.0 that is currently available, the JavaScript features of Gold are limited.
Still, Navigator Gold 2.0 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, it is possible 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 be 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 (one of the new features in Navigator 2), include audio files, and provide basic document management capabilities.
At the current time, Navigator Gold is still in an early public beta release and is not complete. In this state, it has several limitations which limit its usefulness as a complete HTML and
JavaScript development tool:
In addition to these shortcomings, many of which should be fixed by the release of the final version of Navigator Gold 2.0, there are several other limitations of the product, including:
In this chapter, you learned the basics of using Navigator Gold 2 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, as well as providing 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 of 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 2.0 do this for me?
A: No. Navigator Gold is not a site management tool. It is a
browser with an integrated editor. Still, 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: What I see in the editor window doesn't match the browser
window. Why?
A: The beta version of Navigator Gold currently available doesn't
have a complete editor. Specifically, the editor window can't
display some of the HTML tags supported by the browser window,
including image alignment attributes and frames.
Q: If I have Navigator Gold 2.0, is there any reason for me to
have Navigator 2.0 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.
