The best way to handle this (since you're asking on a Perl list) is really a mixture of Perl and JavaScript.

You'll probably want to write your code in such a way as to have Perl populate the tree and then let the JS handle both display and current status.

There are several ways to handle this, and you'll have to pick the one that best reflects your needs, but one way would be this:

  1. This is one place where frames could be an advantage... if you need to support NS4.x. As voyager pointed out, IE's DOM really does handle this kind of thing better since you can simply show/hide elements and the document will reflow accordingly. If you need to support NS4.x you'll need to do one of two things:
    1. Use DHTML to move the pieces of the tree around -- for this you'd need absolute positioning and DIVs
    2. Save state in a different frame and then refresh the tree frame when you open or close a branch
  2. Note that you would want to define the browser-specific display code in the JS file, if possible -- e.g. assign tree.refreshView to a Netscape or IE-specific JS function depending on the browser. That way IE browsers will simply show/hide, and Netscape browsers will reload or move DIVs around.
  3. As far as adding elements to the tree go, I wouldn't rely on a numbering scheme too much -- a better approach might be to use path emulation: /home/foo.html, /home/bar/foo.html and so on, and then have perl split on the '/' and add these by *node*.

By node I mean that a tree basically has nodes and branches, and you want to define a nice JS OO interface where you can basically say: 'Add this node to this branch' and have JS take care of the rendering and keep track of where everything belongs and what it's current state is.

I have seen code that does this, and perhaps some of the examples above will cover it, but I don't have anything to hand.

If you don't want to use frames, then another way to handle this might be via some form of SSI (note: I think that this would be inefficient, but I have a thing against frames on the whole) whereby your JS tree serializes its state using a cookie that gets passed back to the server. The server reads the cookie and could modify as necessary. It's ugly, but it might work.

Part of your JS code should also handle dynamically adding and removing nodes from the tree -- shouldn't be too hard if you've got a good interface.

In reply to Re: Re: building an HTML based tree UI by jreades
in thread building an HTML based tree UI by jptxs

Title:
Use:  <p> text here (a paragraph) </p>
and:  <code> code here </code>
to format your post, it's "PerlMonks-approved HTML":


  • Posts are HTML formatted. Put <p> </p> tags around your paragraphs. Put <code> </code> tags around your code and data!
  • Titles consisting of a single word are discouraged, and in most cases are disallowed outright.
  • Read Where should I post X? if you're not absolutely sure you're posting in the right place.
  • Please read these before you post! —
  • Posts may use any of the Perl Monks Approved HTML tags:
    a, abbr, b, big, blockquote, br, caption, center, col, colgroup, dd, del, details, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, ins, li, ol, p, pre, readmore, small, span, spoiler, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, wbr
  • You may need to use entities for some characters, as follows. (Exception: Within code tags, you can put the characters literally.)
            For:     Use:
    & &amp;
    < &lt;
    > &gt;
    [ &#91;
    ] &#93;
  • Link using PerlMonks shortcuts! What shortcuts can I use for linking?
  • See Writeup Formatting Tips and other pages linked from there for more info.