![Close [x]](http://dw1.s81c.com/i/c.gif){kind=small}
Have you ever wondered if there is an easy way to use the Notes default view navigation bar within frames? Now there is. This tip shows you how you can use JavaScript to access embedded in invisible GIF files, and make the default view navigation bar work in frames. The technique involves three forms. The first form defines the frameset. The second form contains the view navigation bar that you're already familiar with, except that this one will be hidden from users. The reason is that this navigation bar contains five invisible GIFs. Finally, the third form contains the navigation bar that users do see. It uses JavaScript to access the invisible GIFs in the hidden navigation bar. Your completed application would have the following layout:
Figure 1. Layout of your application in frames
Step 1. Create the frameset form
First, you need to create a form that defines your frameset using standard HTML. For example, we declared our frameset with the following code:
<HTML> <!-- Lotus-Domino (Build v4.6.2_h - June 29, 1998 on Windows NT/Intel) --> <HEAD> <FRAMESET ROWS=100,*> <FRAME SRC=http://web.notes.net/framed.nsf/documents/ htmlviewnav?OpenDocument NAME=HTMLViewNav> <FRAME SRC=http://web.notes.net/framed.nsf/ documents?OpenView NAME=view> </FRAMESET></HEAD> <BODY TEXT="000000" BGCOLOR="ffffff"> </BODY> </HTML> |
Step 2. Create the form with the hidden navigation bar
Next, you need to create a form that contains the hidden navigation bar (frame 2 in the illustration above). To do this, you should create a view template form for displaying the content (documents) that make up your Web site. Then, create an embedded view on the form, which will contain the hidden navigation bar. The only difference between this navigation bar, and the one you would use for any other Domino Web application, is that this navigation bar is a series of invisible GIFs. Each GIF has a hotspot on it that contains the standard formulas you would use with a view navigation bar. For example, we used the following HTML for each of the five invisible GIFs, corresponding to the five standard links in a view navigation bar on the form:
<IMG BORDER=0 WIDTH=1 HEIGHT=1 SRC=/icons/ecblank.gif>
The invisible GIF ecblank.gif is located in the icons directory of your Domino server. We used this invisible GIF because we didn't want our users to see these GIFs. If we had used a hide when formula (the more common way of not displaying an image), Domino would not have published the information contained in each hotspot we created. If Domino didn't publish the information, then the JavaScript that we will show you how to create in Step 3, wouldn't work correctly. These GIFs allow us to publish the information, yet make sure it is invisible to the user.
We then selected each GIF and chose Create - Hotspot - Action Hotspot to apply an action-hotspot to it. We entered each of the following formulas one by one, for each action-hotspot:
@DbCommand("Domino"; "ViewPreviousPage")
@DbCommand("Domino"; "ViewNextPage")
@Command([ViewExpandAll])
@Command([ViewCollapseAll])
@Command([ViewShowSearchBar]) |
Step 3. Create the form with the "live" navigation bar
Finally, create the form that displays the "live" navigation bar (frame 1 in the illustartion above), with links that users actually access. This form uses JavaScript to:
- Look up the link on the corresponding invisible GIF
- Set the result as the new location for the view frame, thus changing the content in the frame
Domino automatically generates the correct links in our "live" navigation bar, because we linked the invisible images in the hidden navigation bar with Domino action-hotspots.
At the top of your form, create a field to declare the script language as JavaScript and declare a function call dovoid:
<script language=javascript>
function dovoid() {}
</script> |
The "dovoid()" function ensures that the URL resulting from the former location change is not shown as text in the navigation frame, because dovoid returns no data to the frame (You could also use "void(0)", but this is not supported by all browsers).
Next, we use JavaScript code to "look up" the links in the hidden navigation bar. The order of the images/text-links in the JavaScript must be the same as the order of the formulas in the hidden navigation bar. For example, if the formula that asks Domino for the previous page is first, as it is above, the JavaScript below must have the previous page HREF listed first. The following JavaScript queries the GIFs in the hidden navigation bar and brings back the URL associated with the information in the view frame.
<A HREF="javascript:{parent.frames[1].location=parent.frames[1].
document.links[0].href;dovoid()}"><B>image/text previous page</B></A>
<A HREF="javascript:{parent.frames[1].location=parent.frames[1].
document.links[1].href;dovoid()}"><B>image/text next page</B></A>
<A HREF="javascript:{parent.frames[1].location=parent.frames[1].
document.links[2].href;dovoid()}"><B>image/text expand all</B></A>
<A HREF="javascript:{parent.frames[1].location=parent.frames[1].
document.links[3].href;dovoid()}"><B>image/text collapse all</B></A>
<A HREF="javascript:{parent.frames[1].location=parent.frames[1].
document.links[4].href;dovoid()}"><B>image/text search</B></A> |
When a user clicks on Previous Page in the frame that has this JavaScript, the JavaScript accesses the information contained in the formula of the invisible GIF, and knows to switch to the previous page the user viewed. More specifically, the JavaScript automatically assigns a number to each frame. It looks at the parent frame, which is the whole frameset, and finds frame[1], which in this case is the view frame. It sets the location of this frame equal to the href property of links[0]. Link[0] is the first link in the invisible GIFs, and it's href property is a URL that Domino dynamically creates. This means that Domino executes the formula in the invisible GIF, and what the URL of the current page is and can therefore change the content of the frame to the previous page.
Florian Vogler is the manager of development at BAT - Business Automation Team, a leading Lotus Business Partner in Austria. BAT is an Integrator that provides solutions within and around Domino and Notes: Custom Notes-, Intranet- and Internet-solutions, telephony services (phone, voicemail, fax, telex), Workflow, Document Management, and integration of various other systems (for example relational databases and SAP). Services include Consulting, Development and Training.
Table of contents
Next steps from IBM
Tags
Use the slider bar to see more or fewer tags.
For articles in technology zones (such as Java technology, Linux, Open source, XML), Popular tags shows the top tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), Popular tags shows the top tags for just that product zone.
For articles in technology zones (such as Java technology, Linux, Open source, XML), My tags shows your tags for all technology zones. For articles in product zones (such as Info Mgmt, Rational, WebSphere), My tags shows your tags for just that product zone.
Popular article tags |
My article tagsSkip to tags list
Popular article tags |
My article tags
