Using HTML in Domino Designer

Now that you understand basic HTML, it's time to see how it can be applied to Domino Designer. You can add HTML to a number of objects, such as hotspots, buttons , fields, views, forms, and pages. Beginning with Release 4.5, the "hooks" for HTML in a Domino database have increased, and in R5 and now Domino 6, you can add HTML to documents, pages, forms, fields, views, and many different objects. Some of these objects, such as fields and hotspots, have an Extra Field HTML tab on the properties box.

Converting Forms, Pages, and Subforms to HTML

A great new feature in Domino 6 allows designers to convert some or all content on a page, form, or subform directly into HTML on the fly. Designers then can use the HTML Editor to make changes to the HTML source code directly. Here's how:

1. Open a page, form, or subform in Domino Designer.
2. Select the contents of the page, form, or subform that you want to convert to HTML.
3. Choose Edit, Convert to HTML. The selected contents are converted into HTML source code, as shown in Figure 20.5. Because not everything in Notes has an exact equivalent in HTML, the conversion to HTML is an approximation . You should always check your conversion results.

   Figure 20.5. Converting page, form, or subform content to HTML.

   

   TIP

   If part of your design is mistakenly converted to HTML, choose Edit, Undo Delete to recover your design. Do not choose Edit, Convert to Notes. The reconversion is not exact: Buttons that have Web or client JavaScript associated with the Click event are converted to HTML as expected. However, it is recommended that you not to convert buttons that do not have Web or client JavaScript associated with the Click event as a precaution.

4. To use the HTML Editor, place the cursor anywhere in the newly created HTML source code and choose View, HTML Pane. The screen splits . The page, form, or subform appears in the top pane (in an embedded Internet Explorer browser control), and its HTML source code appears in the bottom pane.
5. You can edit the HTML source code in the bottom pane. Click Refresh to see the results in the top pane of your HTML changes, as shown in Figure 20.6.

   Figure 20.6. Viewing the HTML pane in Domino Designer.

   

6. Press Esc to exit the HTML Editor.

Importing HTML

Importing HTML code into Domino is very easy to do. To import HTML, you must first save the document that contains the HTML code you want to import.

1. Open a page, form, or subform.
2. Choose File, Import.
3. Select the file containing the HTML you want to import, and click OK. Designer translates the HTML and then adds it to the page, form, or subform.

You can then edit the HTML code directly in the Domino HTML editor via the HTML pane (View, HTML Pane) with your page, form, or subform.

Adding HTML Head Content

Open a database in the Domino Designer and follow these instructions:

1. In the Programmer's pane, click the Objects tab.
2. Select the HTML Head Content event.
3. Enter the HTML in the script area of the Programmer's pane. Enclose your code with quotes, as in this example:

   "This is my bold text"
   

4. Click the green check mark or perform a save (Ctrl+S) to validate your entry.

Adding HTML Attributes to a Field

Domino provides two places for designers to attach HTML to a field: The Field Extra HTML tab on the Field properties box and the HTML Attributes field event in the Objects pane.

To add HTML attributes, using the Field properties box, follow these steps:

1. Double-click the field you want to format.
2. The field's properties box displays. Select the last tab, Field Extra HTML, on the Field properties box.
3. In the Other HTML tag field, enter the HTML code (without quotes). For example, to resize a text field from its default size of 20, enter the following in the Other HTML tag field:

   SIZE=80 MAXLENGTH=100
   

   The maxlength value defines the length of the text content a user can enter into the field. It is generally good practice to keep the maxlength value approximately 30% larger than the size value, to enable a user to completely fill a field with text.

4. Save the form.

To add HTML attributes using the field's HTML Attributes event:

1. Click the field you want to format.
2. On the Objects tab of the info list in the Programmer's pane, select the HTML Attributes event for the field.
3. Write the HTML code in quotes in the script area. For example, to define a rich-text field's properties, you would use this:

   "ROWS=10 COLS=50"
   

4. Save the form.

A rich-text field accepts ROWS and COLS tags to define the number of rows (height) and columns (width) that the browser displays for the field. For example, the following attribute sets the number of rows to 20 and the columns to 60 (see Figure 20.7):

"ROWS=20 COLS=60"

Figure 20.7. The HTML attributes of text and rich-text fields can be used to control the display of the field to a Web client.

Adding the ROWS and COLS attributes to a rich-text field controls both the width ( COLS ) and the height ( ROWS ). Figure 20.8 shows the effects of setting the HTML attributes on text and rich-text fields.

Figure 20.8. Setting the HTML attributes of fields defines the way the field is displayed by the browser.

The HTML tab of the Field properties box is shown in Figure 20.8. This tab enables you to define several different aspects of an object. Table 20.5 describes each of the settings on the

tab.

Table 20.5. The

Tab of the Field Properties Box

Attribute	Description
Name	Names the object, which can be referenced by JavaScript or with a style sheet
Id	Used to reference the object by JavaScript or with a style sheet
Class	Used to apply a class from a style sheet
Style	Applies a specific style to an object from a style sheet
Title	Used to provide a tip or a prompt to a user
Other	Adds other attributes (don't use quotes) for the object

The Name attribute is preset for fields but is available for other objects, such as buttons. The Id attribute is similar to the Name attribute, and both are used to reference the object with JavaScript or a Cascading Style Sheet. Class and Style are used to apply styles from a style sheet. The Title attribute (at least in Internet Explorer) provides a little prompt box with the text you include when the mouse passes over the field or object (see Figure 20.9). Trick: Some designers also use this tag to pass field help or hints to the Web user.

Figure 20.9. Adding text (without quotes) to the Title attribute of an object produces a floating box in Internet Explorer; note the box Rich Text Field.

CAUTION

The Title attribute appears to function only in Internet Explorer. It does not work in Netscape 4.51 or in the Notes browser.

You can use the Other property to add additional HTML attributes to objects. For the most part, you can get at all the HTML attributes you'll ever need, so you'll rarely use this property. In the Other field, unlike the remaining fields on this tab, you must use quotation marks and identify the attribute. The syntax is as follows :

Attribute = "value"

Attributes entered into the HTML tab are incorporated into the document when it is presented to a Web client.

Using HTML in Forms and Pages

In addition to the techniques discussed previously, there are other ways to use HTML in forms, pages, and subforms. On the Advanced tab of the Form properties box is the setting Web Access: Treat Document Contents as HTML. Pages have a similar setting for Web Access Treat Page Contents as HTML on the Page Info tab. You can click this setting for either a page or a form, and then you can add HTML to the design object.

Pass-thru HTML became much more functional in R5 and Designer 6. In R4.6, pass-thru HTML wasn't very "sticky." That is, it didn't always stay set to pass-thru HTML; if you modified a form, the setting often disappeared. Now the text you've selected for pass-thru HTML shows up with a gray background so you always know when it's set.

CAUTION

If you try to create an HTML document with and other form tags, Domino produces an error message: Documents treated as HTML cannot be edited .

Because Domino creates all the necessary elements to create a basic HTML documentthat is, the

tags,

tags, appropriate JavaScript, and so onit doesn't make that much sense to completely re-create an HTML document from scratch within a page or a form. To get around this, select On Access Content Type to Notes and then select the option Generate HTML for All Fields on the Defaults tab of the form's InfoBox.

Using Reserved Fields

At present, three fields are reserved for HTML: $$HTMLHead, $$Return, and HTML. $$HTMLHead is a leftover from earlier versions of Notes and Domino. This field enables you to insert tags into the HEAD of an HTML document. It is not really needed any longer because forms and pages contain the HTML Head Content event. As with the HTML Head Content event, $$HTMLHead can take all sorts of tags, such as ,