|
|
|
|
|
|
|
|
|
|
|
|
|
|
CATEGORIZED VIEWS
Advanced building of DHTML views with Internet Explorer
By Matt Holthe
In part one of this series (found at http://www.dominopower.com/issues/issue200008/dhtml0800001.html), I mentioned how one of the things I don't like about using categorized views from a browser is the fact that every time you expand or collapse a category, a request is made to the server. I noted that with the Java view applet, this round trip is eliminated, but there's an initial load time that must be accounted for. Plus, I have some customers who block external Java through their firewall, so the applet is no the solution for them.
Using DHTML, however, you can have a categorized view where the categories can be expanded and collapsed on the client, which solves both problems. In part one, we started looking at how this is done, starting with a view with only one category. Now, let's get more advanced. Let's say you have two categories.
Expanding the DHTML view
First, add a field called "Category2" to your form and modify the documents so they contain both categories. Change the Notes view and add a second categorized column between the two existing columns with a value of Category2.
OK, let's think about what we want the browser view to do. When a top-level category is clicked, the subcategories should be shown. And when a subcategory is selected, the documents should be shown. Furthermore, when a top-level category is collapsed, the subcategories should also be collapsed. (That's the way the Notes client works.)
Fortunately, @DocNumber gives us an indented value for subcategories. For example, "1.1" means the first subcategory under the first category. So, you would think that we would just duplicate the first column into the second column, changing "Category1" to "Category2." Well, that's actually pretty close. What actually happens if you do this is the subcategories start out with a </div> tag, so they actually close the <div> tag from the top-level category. This means that all categories are shown, whether they are top-level or not.
"Ok, just remove the </div> tag from the sub-level categories," you say. But that won't quite work either. The documents need to be grouped in their own <div>, and that grouping needs to be closed out. So the </div> is needed. What we want to do instead is to add an empty <div> tag to the end of the top-level categories. This will be closed by the first sub-category's </div> tag. But doing this means we'll be off on the number of <div> </div> pairs, so we have to add a </div> tag to the start of the top-level categories. And this means we want another empty <div> tag at the start of our view template to even out the </div> tags in the first category. Phew! So, now the first column has a value of:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-- 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. |
|
|
|
|
|
|
|
|
|
|
