Beefy Boxes and Bandwidth Generously Provided by pair Networks
good chemistry is complicated,
and a little bit messy -LW
 
PerlMonks  

building an HTML based tree UI

by jptxs (Curate)
on Apr 18, 2001 at 17:36 UTC ( [id://73488]=perlquestion: print w/replies, xml ) Need Help??

jptxs has asked for the wisdom of the Perl Monks concerning the following question:

I'm stumped. I have been tasked with exploring the idea of an "explorer-like" UI for an HTML console. Graphical Hierarchical Tree is a start, but the code seems buggy at best and what I'm looking to do would not involve a DB or be displaying all "threads" at once. It would be a tree of hosts, click on the hosts and get services, click there get graphs from those services, etc. I don't mind framing it and refreshing the frame with the tree every time, but tracking the state and changing it seems to be the trick. Is this possible? Are there resources I'm just missing? I have no code of my own yet or it would be here =)
"A man's maturity -- consists in having found again the seriousness one had as a child, at play." --Nietzsche

Replies are listed 'Best First'.
Re: building an HTML based tree UI
by clemburg (Curate) on Apr 18, 2001 at 18:05 UTC

    There is a Javascript based thingie that works quite well and uses a cookie to manage the state of the tree. This should give you some ideas. You can get a version of it I worked on some time ago. Sorry about the broken images.

    Another good start is to look at the javax.swing.tree package, and port that interface. This has a nice model/view/controller approach that you can use.

    Christian Lemburg
    Brainbench MVP for Perl
    http://www.brainbench.com

Re: building an HTML based tree UI
by suaveant (Parson) on Apr 18, 2001 at 17:45 UTC
    Well... for handling the state of the tree, you can name your tree limbs 000 001 002 003 etc in order, which is basically your key into an array or something, so when it is clicked you can either expand it, collapse it or view its contents. Then a child of 002 is 002000 002001 etc, which makes it easy to maintain hierarchy. Then just maintain your state in either hidden fields or a cookie, or in a file or DB on the server. It's not terribly hard to maintain if you do it right, but I might be misinterpreting your question.
                    - Ant
      that's been the thoughts I've had thus far as well, but the problem is that elements will be variable at all times. meaning when i collapse and expand the different parts of the tree, at one point or another what comes out could be different. The real problem I see with that is that I'll be regenerating what could be a big hash every time. I may have to just live with that, but I'm thinking _someone_ must have done this already =)
      "A man's maturity -- consists in having found again the seriousness one had as a child, at play." --Nietzsche
        Well... I suppose you could give every item you have a unique identifier in advance, something like a 3 char string. That way you could do the same thing, but you would have a more stable way of identifying what you have.
                        - Ant
Re: building an HTML based tree UI
by voyager (Friar) on Apr 18, 2001 at 18:49 UTC

      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.

      actually, I have NO control over the browsers =( That's why I want to do this in perl on the server-side for sure. I should've had said that, you're right.
      "A man's maturity -- consists in having found again the seriousness one had as a child, at play." --Nietzsche
        But the solution will require client-side scripting to give the kind of performance users will expect from folder-like display.

        Unless you have very patient users and a very fast server, you can't afford a trip to the server everytime a user expands/collapses a folder (or tree-node or whatever).

Re: building an HTML based tree UI
by jmcnamara (Monsignor) on Apr 19, 2001 at 13:29 UTC

    Maybe Ron Savage's CGI::Explorer module might be of use. From the readme:
    CGI::Explorer is a support module for CGI scripts. It manages a tree of data, so that the script can display the tree, and the user can click on a node in the tree to open or close that node. Opening a node reveals all children of that node, and restores their open/close state. Closing a node hides all children of that node.
    As an aside for anyone who is interested, Ron's site has lots of interesting Perl material including a series of tutorials.

    John.
    --

    Edit 2001-04-19 by tye

Log In?
Username:
Password:

What's my password?
Create A New User
Domain Nodelet?
Node Status?
node history
Node Type: perlquestion [id://73488]
Approved by root
help
Chatterbox?
and the web crawler heard nothing...

How do I use this?Last hourOther CB clients
Other Users?
Others rifling through the Monastery: (2)
As of 2024-04-20 04:19 GMT
Sections?
Information?
Find Nodes?
Leftovers?
    Voting Booth?

    No recent polls found