I need a way to create a tree in java or javascript that displays a collapsible tree with checkboxes next to each entry. Is there any good free classes to use for this? Also I need a way to dynamically create the tree from a file. What would be the best way to store a tree in a datafile? I was thinking something simple like:

0 Item1
1 SubItem1
1 SubItem2
2 SubItemOfItem2
1 SubItem3

Not sure how easy that would be to parse and convert to a tree view though.

To the second question, the easiest way to store the data is in javascript:

({ name: "Item1", children: [
    { name: "SubItem1" },
    { name: "SubItem2", children: [
        { name: "SubItemOfItem2" }
    ] },
    { name: "SubItem3" }
] })

Then you can just...

var tree = eval(data);
var node = tree;
for(var i = 0; i < node.children.length; i++)
{
    if(node.children<i>.name == "SubItem2")
    {
        node = node.children<i>;
        break;
    }
}
alert("SubItem2 has " + node.children.length + " sub-items");

The code for the tree view itself isn't hard. Just create a small checkbox image in all three states and assign each line (which should be an li element, I imagine) a node as from the code above. When the node is expanded, either add a child list of the end of the current node's list item, or insert list items after the current one.

What about as a jsp page. I forgot to mention that this will be running server side.

The javascript for the tree view will have to be client side, the processing to generate that would be server side.

Not sure why it's putting in the extra spaces. I'm just doing some simple html at the moment to see if I can get the images to line up properly...

<div><img src="images/ix_startm.gif"><input type="checkbox" name="option1" value="Item1">Item1</div>
<div><img src="images/ix_space.gif"><img src="images/ix_list.gif"><input type="checkbox" name="option2" value="SubItem2">SubItem2</div>
<div><img src="images/ix_space.gif"><img src="images/ix_list.gif"><input type="checkbox" name="option3" value="SubItem3">SubItem3</div>
<div><img src="images/ix_space.gif"><img src="images/ix_end.gif"><input type="checkbox" name="option4" value="SubItem4">SubItem4</div>

Well, obviously the check box has a size that is larger than the image

... and how do I resize it?
[edit]
... it's not the checkbox causing the issue, I changed the css to 10px which shrank the checkbox but the gaps still remain.
[/edit]

Open up your DOM Inspector and click all the elements. The one with the blinking border in the wrong spot is causing your problem