Moving past the frameset - Making Web-based applications that do not look like Lotus Notes
Table of contents
In the Notes client, the frameset is used to set up areas for specific purposes. You have a Navigation pane on the left with a view area next to it and possibly a preview pane. It works really nicely. On the Web, it tends to have more problems then benefits. It's hard for users to print because they have to be in the frame to print it. It makes development easier since you have to make only one navigation page. It's also hard on screen readers for those with vision problems.
Since it's easy to simulate, it's slowly going the way of dial-up. It is used just where it's the only way to do it.
You can use the following ways to build pages that have the look of framesets:
- Use HTML div tags and cascading style sheets (CSS) to give your page structure. By using CSS, you can adjust the pages easily and edit them live to see the changes. In addition, you have the ability to separate the content from the layout.
- Use one form that gets a key as a URL parameter and pulls the data that is needed, so that the page doesn't change.
- Don't use tables unless you are building a tabular list. The use of tables for layout is not acceptable.
Here we look at a site layout that uses a framework called Blueprint. Blueprint is a CSS framework that is laid out in a grid format to make working with similar to using tables. You set up the page with HTML div tags. Div tags let you set up the width and height using CSS, so that it looks like a framset. See the Styles and CSS primer section for more information about CSS. When you use a frameset, you define it once. With CSS, you must include style code on each form. This can be done with subforms, includes or copying the code.
In the Riverbend sample database, there is a sample page that has a Header, Navigator, Content and footer defined.
Problems and Solutions:
You have an application that uses a frameset and in the top frame you have a form for the header, and the bottom frame is split with a view on the left and a form on the right. You want to rebuild this application (to not use frameset anymore, because we don't like framesets) to use a page with
based areas and you want the form div to load the form, when the view document gets clicked.
How can this be easily built?
First decide if you want the same look to the site as the frameset based site. This may be that the title header is at the top and the navigation is on the left (that is how this example will be). You will then need to build a basic HTML page with CSS and div tags to give you the same structure. In this example we will take a framed based site and build a non-framed CSS based site using the blueprint CSS framework. This will make the layout and CSS easy to do.
The site that is going to be migrated currently uses navigation done using @dbcolumn, UL tags and CSS, to let the menu automatically grow as new documents are added. The site information such as title, sub-title, url and categories are all maintained on a profile document. The homepage and webpage documents have some fields to categorize and restrict access, with the content contained in a single rich text fields called body. The site currently uses 2 forms for each document type, one is used for Notes client access and one is used for web access. This simplified the design as you only had to deal with one type of access while making changes.
The overall changes will be to the:
- Modify the Homepage form
- Modify the Webpage form
- Add CSS files
- Add a page to redirect web user to homepage form
- Change web launch to the new redirection page.
The layout is simple, a top header that goes across the page, site navigation on the left and the content on the right.
Final look after all changes
Frameset look in designer
The Homepage and the webpage have the same design, this was to allow for a different look on the home page then on all other pages. Computed text fields were used display fields from the form and profile document. Computed fields could have also been used.
The first computed text field gets the title information from the profile document. The next one is used to display the site menu with the following formula:
ClassCache := "Notes":"Cache";
Temp := @DbColumn(ClassCache; Db; View; 3);
Navlist := @If(@IsError(Temp);"";temp);
cat := @Left(@Subset(Navlist;1);"~");
nav := "<li class=\"navlist\">"+cat+"<ul>";
@For(n := 1; n <= @Elements(Navlist); n := n + 1;
tcat := @Left(@Subset(NavList[n];1);"~");
nav:=nav + @If(cat = tcat;
+ tcat + "<ul>"+@Right(NavList[n];
cat := tcat