If you don't know what a frame is, it is an independently scrollable section (also known as a pane) within the larger application window. This larger window is normally a Web browser. Frames bring advanced layout and user interface capabilities to the Web, because each pane can display its own HTML page. For example, the Lotus Web site uses frames.

A frameset is a collection of frames. As a Web application developer, you can use framesets to create easy navigation through a Web site. You can leave one page displayed in a frame and include links to other frames from within that frame. The new Frameset Designer in R5 makes creating frames easy and fun.

To show you just how much time you can save using the Frameset Designer, we'll take you through the design of a Web application and show you how to create it with the Frameset Designer. The Frameset Designer features are based on the HTML 4.0 specification and therefore, not all browsers support all of these features, nor do they support them in the same way. (For more information on Domino Designer R5 features, see the article "Domino Designer R5 Sneak Preview.")

Note: Framesets created with R5 do not work with previous releases.

Planning your application
Before you start designing an application with a frameset, you should first decide what you want your frameset to look like. To show you how framesets work in R5, we decided to re-design "The History of Notes and Domino," found on Notes.net and originally designed using the R4.6 Frameset template. (For more information on the R4.6 Frameset template, see the article "Designing Domino 4.6 sites using frames.") The R4.6 design used pass-thru HTML and JavaScript to make it work. Now, you'll see that you don't need to know HTML or JavaScript to design the same application in R5. This is how the frameset for the "History of Notes and Domino" appears today using the R4.6 design:

When you move your cursor over the buttons that show each release, in the left frame, the buttons change color. When you click on a button, that section of the document is displayed in the right frame. Now we'll show you how to create this application in R5.

Creating a frameset
The Frameset Designer appears in the Design pane of Domino Designer, as follows:

To create a frameset, select Framesets in the Design pane, and click the New Frameset button. The Create New Frameset dialog box appears:

Here you can select the arrangement of the frames and the number of frames you want to use. As you can see, we chose to use three frames. You can choose two, three, or four frames. Once you create your frameset, Designer displays it:

No content appears in any of the frames, but you will select content later. At any point, while you design your frameset and application, you can choose Actions - Preview in Web Browser and choose the browser where you want to check your work. The browser displays within the Designer environment with the current design element in it.

From within the Frameset Designer, you can choose the buttons along the top of the screen to refine the design of your frameset. You can select a frame within the frameset and click:

• Split into Columns to divide the frame into two frames vertically
• Split into Rows to divide the frame into two frames horizontally
• Delete Frame to remove the frame
• Remove Frame Contents to delete the contents of the frame, but leave the frame in place

• Frame Properties, which brings up the Frame Properties infobox
• Frameset Properties, which brings up the Frameset Properties infobox
• The Split commands described above
• The Delete Frame command described above
• The Refresh Frame Content command. This command reloads the content of the currently selected frame (the one with the dark border around it). For example, if you have a page in a frame, and then you go back and change that page, you can use this command to refresh the frame content. The page reloads into the frame and you'll see the changes in the frameset.
• The Remove Frame Content command described above

To name your frameset, choose Frame - Frameset Properties to open the Frameset Properties box:

In the Basics tab, enter a name. You can also give your frameset an alias and enter any comments about the frameset. The Frameset title is equivalent to the <TITLE> tags in HTML. This is what appears in the menu bar of the browser or in the Window tab of the Notes client. Since it is a formula, you can enter text in quotes, or use a formula. For example, you can simply type "The History of Notes and Domino" for the frameset title, or use a formula to display today's date and time, or the last time a document was modified along with the title. If you don't use a title, the frameset displays "untitled," so we recommend that you use one.

You should also name each frame at this time, so you can create the links between each frame when you create pages and outline entries. Select a frame and choose Frame - Frame Properties. For "The History of Notes and Domino" application, we chose to name our frames, right, left, and topBanner.

Creating and specifying frame content
Now you have your frameset. The next step is to choose the contents of each frame. The Frameset Designer allows you to specify three different types of content:

• A link to a Notes document or view
• A URL
• A named element

• View
• Document
• Anchor

If you choose a Named Element as your content type, you can choose one of the following types of Named Elements:

• Page
• Form
• Frameset
• View
• Folder
• Navigator

In addition, once you define a frameset and create pages, you can launch a specific form or page directly into one of the frames. For example, open an individual page and open the Launch tab in the Page Properties box. In the Frameset field, we chose the history frameset and then specified the frame (right, left, or topBanner) in which the page should display in the Frame field. Now your application knows that whenever you open this page, a frameset goes with the page. Using this feature allows users to bookmark a page buried within a frameset, and still be able to launch it with the frameset "decoration" around it.

To create the page that appears in our left "navigation" frame, we first created an outline with the navigation functionality. Then we put the outline on a page, and placed that page in the frameset. To create an outline, click the Outlines design element from the Design pane and click the New Outline button. We created outline entries that correspond to each button on the navigation bar, as follows:



In the Outline Entry Properties box, each entry has a label corresponding to the appropriate release number (or page) it would bring up when the user clicks on that entry. We then specified the Named Element as a page and left the Frame field empty. You can specify a target frame in the Frame field so that when the user selects the outline entry, it changes the content in a specific frame. However, we didn't need to do this because one of the benefits of the Frameset Designer is that it allows you to set all the links for one frame at once. You simply open the Frame Properties box and enter a target frame in the "Default target for links in this frame" field. In our case, we opened the Frame Properties box for the frame called left and specified right as the target frame. You would set the target frame for individual outline entries if you wanted to override the default for any of them.

Next, open the Outline Properties box, give your outline a name, and save it. After you create an outline, you need to place it on a page before you can use it as a source in your frameset. In the Outline Designer, click the Use Outline button at the top of the screen. Your outline appears on an untitled page, as follows:

Now you can adjust the formatting of the embedded outline. We adjusted the size of the Outline, the fonts and colors of our labels, and added an image as the background for each entry, until our outline appeared as follows:

To make these types of formatting changes, open the Outline Properties box. From the Info tab, you can adjust the size of the embedded outline. The Font tab allows you to control how the text labels appear. This tab also allows you to specify that you want the color of the text to change when a user selects the text or even just moves their mouse over the text. For example, we chose that the letters on each button should change to yellow in both of those cases by selecting the following options:

On the Background tab, we used an image as the blue button that users select to view each release. Since all of our labels are top-level labels (because we didn't indent any of our outline entries), we could select Top-Level Background and select the yellow folder icon to view the images stored under Images in the Resources design element. We selected the image hist_blank.GIF, as follows:

As you can see, you can choose to have this image repeat. Also, if you choose not to use an image, this tab allows you to control the background color for each level of the outline entry.

You can do the majority of your formatting using the Layout tab. This tab allows you to specify the offset and height of outline entries, and the alignment and offset of the outline entry label and image. To learn more about using outlines, see "Domino Designer R5: The Outline Designer".

To view the results in your frameset, save the page, and open the Frameset Designer. Then, select the frame where you want this page to appear, and specify the page as a named element in the Frame Properties box.

Other frame properties
The Frame Properties box allows you to set additional attributes for each frame. You've already seen how you can set the name, source, and target frame in the Basics tab. You can also control the size of your frame using the Size tab. Of course, if you want to make it even easier for yourself, you can control the size by dragging the border between the frames to a different size. If you change the width and height of a frame, the width and height of any bordering frames does not automatically change. You can set the width and height of a frame according to:

• The percent of the entire window you want it to occupy
• The relative amount of the window you want it to occupy
• The number of pixels you want it to have

In this tab, you can also specify whether or not you want the frame to scroll if the user opens the application in a window that is too small to display the entire frame contents. You can set this option to On, Off, Auto, or Default. Setting the option to On means that scroll bars appear regardless of how big or small the user's window is. Setting it to Off means that scroll bars never appear. Setting the option to Auto means that the scroll bars appear when the window is too small to display the entire application window. Setting the option to Default is the same as setting the scroll bars to Auto. The Allow Resizing option allows you to control whether or not users can re-size the frame by dragging the borders.

The Border tab gives you the ability to display or turn off the borders around each frame. You also have the option of setting the borders to On or Off for every frame within the frameset. By default, the border width is set to seven and the border color is the system background color, but you have the option to change both of these settings.

The Advanced tab allows you to set the Frame Spacing, which is the amount of space between the frame and any bordering frames. By default, this is set to zero. It also allows you to specify the margin height and margin width within the frame. This helps you control the appearance of text or graphics within your frame. Margin height indicates the amount of pixels between the top and bottom of a frame and the contents of the frame. Margin width specifies the pixels to the right and left.

In the HTML tab, you can specify ID, Class, Style, Title, and Other. These are common attributes found in HTML 4.0. Domino places these attributes into the <FRAME> and <FRAMESET> tags. These are all used with HTML style sheets, except for the Other field. The ID attribute is used for scripting too. The Title attribute is usually used for informational purposes, although on some elements, Internet Explorer displays a tool tip pop-up with this information (but not for framesets). The Other field is for any additional HTML. When you set the properties for your frameset, there is also a frameset HTML tab that is identical to this tab. You can use it in the same way, but for the entire frameset.

Controlling your target frame
You've seen how you can specify the target frame for all the links within a particular frame using the Frame Properties box. We specified that all the links in our frame called left would change the information in the frame called right. You should enter the target frame of any links clicked within the frame in the "Default target for links in frame" field. If you don't specify this, by default, the browser opens any links in the same frame as the document that contains the link.

In our frameset, since the frame named topBanner contains the navigation bar for Notes.net, we specified the target frame as _top. This is a reserved HTML keyword and indicates that all links clicked in this frame should replace the entire frames page with the linked-to page. However, what if we wanted just one of the links to change the information in the frame called top? You can override the target setting in the Frame Properties box by specifying a target for a link or an outline entry. To specify a target for a link, create the hotspot as you normally would, by choosing Create - Hotspot - Link Hotspot on the page. Then select the hotspot and open the Hotspot Properties box. In the Display tab, enter the name of the target frame in the Frame field. In the example above, you would enter top.

In general, when a user clicks a link within a frameset application, Designer first looks to see if there is a target for the link and if there is one, uses that target. If not, it checks to see if a target is set for the frame and uses that target. If that isn't set, it follows the default standard for the browser and displays the linked information in same frame as the link source document.

Getting your application ready to use
When you finish designing and testing your frameset and all the links within it, you'll want to make sure that users see the frameset as soon as they launch your application. To make sure this happens, open the Launch tab of the Database Properties box:

In the On Database Open and On Web Open fields, choose "Open designated frameset" and enter the name of the frameset in the Frameset field. Now we'll open the new R5 version of the "History of Notes" in a browser:

Conclusion
The Frameset Designer has another feature that you can use to design great applications even though we didn't use it to design "The History of Notes and Domino." You can determine the content of a frame on-the-fly. For example, you can display different pages in a frame based on the type of client a user uses to view your application. You could also use this feature for security reasons and display a page based on UserRoles.

Now that you've seen how easy it is to develop a multi-pane application in R5, are you ready to change the framework of your future applications? You have seen how quickly we re-designed our "History of Notes and Domino" in R5. Now you don't even need to know a programming language to set up a flashy interactive Web site. All you need is Designer R5.