• Preview a page in your choice of browser.
• Easily embed views, folders, navigators, and file upload controls (for file attachments support) on a Web page
• Create better navigator images -- you can save text and graphics as one image map, import graphics into the navigator, and create circular hotspots.
• Import background graphics for forms and documents.
• Create buttons on forms with formulas behind them.
• Add computed text to a document or form.
• Do more with HTML -- you can use passthru HTML, specify HTML attributes for design elements and forms via the Programmer's pane, and specify that the contents of a form or view (column text, view line text, and so on) should be treated as HTML.
• Easily hide elements either from the Web or from Notes.
• Display alternate text for graphics and Java applets.
• Create anchor links (hotspots) to any part of a document/page.
• Specify how to launch the first Web page in your database.

Digging into new Web design features
Development of Designer involved three stages of usability testing with users at all levels of experience. The first tests used 4.5 features, the next ones involved individual 4.6 features, and the last ones tested minor 4.6 improvements. "We've been surprised because we ended up solving more problems than expected," says Bill Andreas, lead designer for Designer.

The following sections will give you a taste of the new enhancements, so you can view the usability improvements for yourself. Most of the features require the new Domino 4.6 server.

Preview capabilities
One of the first Designer features you'll want to use when you begin designing a Web application is the new preview capability. Whenever you design a new form, document, view, or navigator, you can now preview how the design will look to Web users by making a simple menu selection (for forms and navigators: Design - Preview in Web Browser, and for documents and views: Actions - Preview in Web Browser). This means you're also able to view all the HTML that is automatically generated by Domino, without leaving the design environment. It makes designing for the Web a seamless process, because you don't need to set up a separate test environment to just preview your work, explains Maureen Leland, developer of the feature.

When you request to preview an object, Designer builds an appropriate URL and sends it to your browser (specified in your Location document). You can preview items in local databases, as well as items in any database residing on a Domino server that is running the HTTP server task. For local databases, Designer actually runs the HTTP task on your client machine. If you select to use the new "Notes with Internet Explorer" browser option, you can preview your page from within the Notes environment. This means you can see your forms, views, and so on, both in Notes and as the HTML equivalent, without having to launch a separate browser.

The following screen shows a form previewed in a Web browser. The form contains both an embedded navigator and embedded view, which you'll learn about next.

Embedded elements
When designing your Web page, you can embed views or navigators to create a "frame" effect that helps users navigate through the Web site, and add visual interest at the same time. With Designer, you'll notice that you can now embed views, folders, file upload controls, or navigators by making a simple menu selection. Previously, you needed to use $$fields to embed these objects. Designer moves beyond the $$fields, so you can now embed objects in documents, as well as forms. (However, the $$fields in existing applications will still be supported.)

To embed a view, choose Create - Web Element - Embedded View, and then select from the list of available views, or select to "Choose a view based on a formula." The "based on a formula" option is useful if you want to display a different view depending on the circumstances. For example, you can display a view based on who a user is (manager or employee) or what the user is doing (reading or editing). Use the same procedure for embedding a folder. Designer then displays a placeholder graphic for the actual view or folder. You can move the placeholder, because its position represents the position on the Web page. After you have embedded an object, you can use the programmer's pane to change which object you want to display. You can embed only one view and/or folder pane per Web page.

You use a similar procedure to create an embedded navigator. Instead of a placeholder, Designer by default displays the navigator's image map. (The "Web browser compatible" checkbox specifies whether Designer should display the image map or a placeholder. By default, this checkbox is selected, so Designer displays the navigator's image map.) You can embed more than one navigator per Web page.

The following screen shows the same form as before, but now in design mode. Notice that the embedded view is represented by a placeholder and is specified in the programmer's pane. The embedded navigator displays just as it would appear on the Web.

Designer also includes a completely new type of embedded element called a file upload control, which allows you to create a field for file attachments on your Web pages. To do this previously, you needed to create a hotspot with the EditInsertFileAttachment command. Now, you can simply choose Create - Web Elements - File Upload Control. Then, when Web users open the page in edit mode, they can attach a file by typing the path and filename in the field, or by clicking Browse to select a file.

Navigators
With Designer, creating a Web-style navigator is now a more streamlined process. Previously, you needed to create your graphics and text elements outside of Notes, copy and paste the complete graphic background image into the navigator, and then create hotspots over the background. Now, you can create the navigator directly in Designer. To specify that you're creating a navigator for the Web, select "Web browser compatible" in the Navigator Properties infobox. You can then use both text and graphics in the navigator, and create hotspots of any shape -- rectangular, polygonal, or circular. When you save the navigator, Domino then creates a single image map replete with hotspots.

To begin building your navigator, you can now import graphics into it, which means that you can maintain the color fidelity you might have lost by copying and pasting from the Clipboard. You can import a variety of file formats, including BMP, GIF, JPEG, PCX, and TIFF 5.0 files. To do this, choose File - Import, and then select to create a "Graphic Background" or "Graphic Button" from the imported image. (You can have one "background" per navigator with multiple "buttons" on that background.)

Once you have your navigator image, you can place text directly on the graphic within Notes. By default, navigator text objects have a transparent background with no border. This means that you won't see a rectangle around your text. After Domino creates a single image map for the navigator, you can still edit the text elements later, and change their properties. This editing capability can save time for designers that need to change their Web pages quite often, points out Darrell Loverin, developer of the feature. The following screen shows an edit being made to text on a navigator.

Background graphics for forms and documents
The capability to import graphics is not just limited to navigators. You can also import graphics to use as the background for forms and individual documents. Again, importing a graphic means that you can maintain better color fidelity than when you paste from the Clipboard. In addition, by importing a transparent .GIF file, you can preserve its transparency. Both Notes and Web users can see transparent background images. To import a background graphic for a form, simply click Import Graphic on the Background tab of the Form Properties infobox.

For documents, Designer gives you more flexibility than before, because you can now override the form's background graphic or color. To allow this document-level flexibility, select the "Allow users to override background properties" checkbox on the Background tab of the Form Properties. Now, when a user creates a document, the document's Properties also contains a Background tab. If a form already contains a background graphic or color, a user can substitute another background for an individual document without changing the default form background. For example, the following screen shows the background color being changed on an individual document.

Buttons and other clickable form elements
For developing interactive applications, Domino 4.6 improves how clickable form elements, such as buttons, action hotspots, and embedded navigators, are handled for Web users. Basically, forms in a Web browser behave more like forms in Notes -- formulas behind the clickable elements are evaluated when a user actually clicks on them, rather than when the document is displayed. This means you can now add multiple submit buttons to a form, add side-effects to a button (like setting fields in documents), and include regions in navigators that can submit documents. All hot regions appear hot, and all action buttons are displayed. If the formula is not supported, then nothing happens when the user clicks it.

One major benefit of this new functionality is that "you can now choose exactly what visual element you want to use for certain actions," says Ned Batchelder, lead developer of the server support for Designer. For example, in the past, you could only use buttons for submitting documents -- it couldn't be a text link, a graphic button, or a navigator region. Now, all of these work, and it's up to you to choose what would look best in your situation. To create your own Submit action, you attach formulas using the @commands FileSave and FileCloseWindow, as shown in the following screen.

The way this works is that when you click on a button or hotspot, Domino appends the JavaScript &Click argument to the URL of the page. This &Click argument contains the location of the formula to be executed. For example, let's say you use ?OpenDocument to display a document with a button. Then, when you click on the button, Domino uses the URL ?OpenDocument&Click for activating the button's formula. In order for the JavaScript formulas to be evaluated, the browser must support JavaScript. Also, you must specify that JavaScript can be generated for the database by selecting "Web access: Use JavaScript when generating pages" in the Database Properties infobox. Without this property set, Domino recognizes only the first button in a document and treats it as a Submit button that closes and saves the document. In other words, the button behavior reverts to the functionality in previous releases, where Domino ignored all button formulas.

You might need to modify existing applications to use this new Domino functionality effectively. For example, Domino automatically hid buttons in previous releases, because it didn't support the button formulas. Now, all buttons will appear, even if they use unsupported formulas. (If a button's unsupported, you can click it and you'll receive an error stating that the @function is not supported in this context.) Therefore, you might want to hide or remove any buttons that use unsupported formulas. For more information on using @functions in Web applications, please see Chapter 10 in the Application Developer's Guide (which is also part of Notes Help). In the opposite case, you could've relied on Domino automatically to create one button per page. Because this will no longer be done, you might need to add a button now.

Computed Text
You can customize your pages even more by adding computed text -- text that is generated by a formula. Previously, you could have created computed fields on a form for this capability, but had no similar option for documents. Now, Designer allows you to add computed text directly inside a rich text field of a document, on a form in design mode. You can even add computed text in the "About" document. Simply choose Create - Computed Text, and enter a formula for evaluating the text you want displayed. Every time a user loads and/or refreshes a document, the formula is evaluated and the results are displayed. For example, the following screen shows how you can add computed text that displays a user's name.

HTML
What would a Web page be without HTML? Designer includes several new ways for you to add HTML to your pages. First, you can use passthru HTML whenever you want to use HTML features that aren't directly supported by the Notes client (such as frames). When serving the page, Domino sends your HTML directly to the browser. You enter passthru HTML code by selecting Text - Pass-Thru HTML, and typing directly into the document or form.

Designer also allows you to enter HTML attributes for fields, forms, and documents. This means that you can add attributes to the default <Body> tag that Domino automatically generates. For fields and forms, you can use the "Event" menu in the programmer's pane. For example, you can define SIZE and MAXLENGTH for a text field, as shown in the following screen. For documents, you can use Edit - HTML Attributes, and then enter attributes in the programmer's pane. Document attributes override any that were set on the form. All of these HTML attributes are stored as a formula.

You can also override the default form tags generated by Domino by specifying the new Form property "Treat documents as HTML." When this property is set, Domino converts all data on the form to HTML, including subforms and document contents. Domino ignores all embedded elements, except for embedded views that have the property "Treat view contents as HTML" selected. When viewed in Notes, documents created with this type of form display the HTML source.

Designer also allows you to override the default settings for a view by specifying that its contents (including column text, view line text, and so on) should be treated as HTML. In other words, this feature gives you a way to control exactly how data is displayed, explains Batchelder. You still get a summarization of the data, but without the components of the Notes view, such as twisties, sortable columns, and so on. Therefore, you must include HTML that defines all formatting and document linking for the view. To enable this feature, select "Treat view contents as HTML" on the Advanced panel of the View Properties infobox.

Hide from Web/Hide from Notes
If you're designing an application for both Web and Notes users, you can now use simple checkboxes to control how your application appears to the different clients. "This makes designing applications a lot faster because you don't have to enter all the complicated formulas that you did for 4.5," explains Schwarz. The new checkboxes, Hide from Notes and Hide from Web, allow you to target your applications for a particular audience. For example, if you create two forms with the same name, and select to hide one from the Web and the other from Notes, the correct form appears automatically in the appropriate environment. You can even hide an element from both client types, which may be useful when the element's under development.

You can hide forms, views, folders, subforms, navigators, and agents. Simply select the design element, and select the appropriate "Hide from" checkbox in the Design Properties infobox (or for agents, Agent Properties). Design elements are always visible in design mode, regardless of their "Hide from" settings. When an element is hidden from Notes, it doesn't appear in the Create menu (and agents don't appear in the Actions menu).

You can also hide parts of a design element, such as text, graphics, fields, layout regions, and action bar buttons. For example, you can hide HTML code from Notes users, and layout regions from Web users. You again use the "Hide from" checkbox in the object's Properties infobox. In addition, you can create different action bar buttons for Web and Notes users, by using the Action Properties infobox. (While designing, you can view paragraphs that are hidden from Notes by selecting View - Show - Hidden from Notes.)

For example, the screens at the beginning of this article showed how the same form appeared for Web users and for Notes users. The following screen shows that form in design mode. Notice that the graphic buttons are hidden from Notes users, and there's a category field specifically for the Web.

Previously, you could've achieved this same "hide when" functionality by using @UserRoles formulas. Designer replaces @UserRoles with the new @ClientType, which returns a text string -- "notes" or "web" -- to differentiate Notes clients from Web clients. While most of the design elements now have Properties box options, you may want to use @ClientType within form formulas, buttons in forms, "hide-when" formulas, or computed subforms.

Alternate text for graphics and Java applets
HTML allows you to set alternate text within <IMG> tags and <APPLET> tags, so the text description displays while graphics are loading, or when graphics or Java applets are turned off in a browser. Designer puts this feature into the interface, allowing you to specify alternate text for an image or applet in its Properties infobox. To display alternate text within the picture placeholder, select the graphic and select "Alternate text for Web and deferred loading" in the Picture Properties infobox. Then, type the descriptive text for the graphic. For applets, select the same option in the Java Applet Properties infobox and type descriptive text that summarizes the applet. You specify for a database to support deferred images by selecting "Display images after loading" in the Database Properties infobox. The following screen shows alternate text being typed in for graphic buttons.

Anchor Links
Designer adds another way for you to create links between Web pages. Previously, you could create links to a database, view, or document. With the new anchor link, you can now create hotspot links to a specific spot on a document. The link can even be to a different spot on the same document. To do this, the process is similar to creating a doclink. Just place your cursor at the point you want to link to, choose Edit - Copy as Link - Anchor Link, name the link, and paste it. Like with doclinks, you should save the document containing the anchor. Then, users can activate the link by clicking the anchor icon, as shown in the following screen. In the next section, you'll learn how you can use an anchor link for launching your Web database.

Launching the first Web page
Once you've finished designing your Web application, you can distinguish how it opens on the Web from how it opens in Notes. In essence, you're now able to better designate a home page, explains Leland. To do this, you can specify separate "On Web Open" options in the Launch tab of the Database Properties infobox. The new option "Launch designated doclink" allows you to display any document when the database is launched from the Web. You just create a doclink for the document (or an anchor link to any point in the document), and click Paste Doclink in the Database Properties box. The link doesn't have to be in the "About" document, although that option is still available. The new "Launch first document in view" allows you to select a view, and then the first document in that view displays when the database is launched. In addition, you can still use the traditional Notes launch options of opening the About document and opening a navigator in a new window.

All of this, and more
When you begin actually using Designer, you'll notice that designing for the Web is easier in even more ways than we've shown you in this article. For example, instead of manually creating horizontal lines, you can now use Create - Horizontal Rule. In addition, you can now designate which columns display as links on the Web. Basically, you get all these enhancements and more -- it's just up to you to begin trying them out!

Copyright 1997 Iris Associates, Inc. All rights reserved.