|
|
|
|
|
|
|
|
|
|
|
|
|
|
Using dynamic HTML and JavaScript in Domino (continued)
If Not ((qs$ = "") Or (Ucase$(qs$) = Ucase$("openform"))) Then
htmlScript = htmlScript + | top.header.changeDisplay('| & Cstr(qs$) & |')|
End If
|
The JavaScript within the Script subroutine is straightforward and does not interact with Notes. The last bit of HTML in the Script subroutine is a layer with a URL to a Domino view. This view is the key for the list of project name acronyms and the project's actual name. But it is categorized. The client did not want the users to be able to collapse and expand the key view. So, using a layer and the number of projects in the docArray[], I created a thin vertical bar that lays on top of the categorized view but below the Roadmap graphic and icon layers.
{<LAYER ID="blocktwistie" LEFT=525 TOP=0 HEIGHT =} & Cstr(g *50) & { WIDTH=26 BGCOLOR="white">}
|
The charts
There is one subroutine for each chart. Each subroutine has essentially the same LotusScript structure: a string with JavaScript chart-specific functions, a string with LAYER tag definitions configuring the chart, and a while loop building one layer for each project.
Example: the portfolio
We developed two different views of the portfolio, as shown in Figure E, to overcome the problem of displaying two or more projects that may overlap because they have similar or exactly the same x and y values. The first view shows the projects organized into a four-by-four square grid. The user can then switch to a different "view" of the same data showing projects plotted on the grid corresponding to x and y values.
FIGURE E
 
You can see the difference in project alignment. Roll over picture for a larger image.
The Portfolio subroutine begins with a LotusScript string containing JavaScript code, functions, and arrays and CSS style definitions. The JavaScript code determines the layout of the chart grid and the placement of projects on the grid. The functions allow the user to switch between the organized view and exact view. It continues with a definition of the layers needed to layout the chart.
Then the subroutine loops through the projects.
{<LAYER
ID="s} & Cstr(g) & {"
Z-INDEX=100} & Cstr(g) & {
LEFT=} & Cstr(clOffset% + Cint(docarray(g,7))) & {
TOP=} & Cstr(ctOffset% + Cint(docarray(g,6))) & vis$ & {
onMouseOut='pMouseOut("} & docarray(g,5) & {")'>
<IMG
BORDER=0
SRC="} & imagePath & Cstr(docarray(g,2)) & Cstr(docarray(g,1)) & Cstr(docarray(g,10)) & {.gif">
<LAYER
ID="p} & Cstr(g) & {"
Z-INDEX=10} & Cstr(g) & {
LEFT=} & bold$ & {
<A
HREF="javascript:pMouseOver('chart','} & docarray(g,5) & {')">} & itStat$ & _
Cstr(docarray(g,8)) & Cstr(docarray(g,9)) & {</SPAN></A>
</LAYER>
</LAYER>}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-- Advertisement --
Learn Notes and Domino 8 at your place and pace!
Learn Notes and Domino in your office and/or home! TLCC's highly acclaimed distance learning courses for users, developers, and admins will enhance your career and your resume.
The many included activities and demos will make you a pro! Expert instructor help is a click away.
Click here to try a FREE demo course!! |
-- Advertisement --
Mark your calendar for in-depth Lotus training, May 12-14, Boston
Join experts and peers May 12-14 in Boston for educational and networking events that deliver real-world Lotus training so you can increase productivity and efficiency in your company, advance your skills, and squeeze the most from your current environment. One registration gets you into THE VIEW's Admin2010 and Lotus Developer2010.
Register by April 10 to save $200. |
|
|
|
|
|
|
|
|
|
|
