frameworker

August 1, 2008

TreeBuilder

Filed under: Uncategorized — frameworker @ 3:19 am

FF37591F-F729-46D0-A25B-D8DE27DCCB77.jpg

Programs are made by fools like me,
But only God can build a tree.

(with apologies to Joyce Kilmer)

Overview

TreeBuilder is a Macintosh Classic program that makes it easy to draw tree graphs with text boxes as the nodes. The trees may be used as organization charts or for visual maps to navigate text-based material, hypermedia or multimedia.

63FC8622-8E49-4FCE-A33E-30BB01A3F909.jpg

Creating a tree is an intuitive process, giving you the shortest, simplest path to visualizing hierarchic models. You lay out trees by manipulating them directly: sketching trees; selecting, resizing and dragging nodes. To build a tree you create a new document containing a root node and sketch or paste branches and subtrees. Hierarchic orientation is top-down with children beneath their parents. You can type or paste text into the tree’s nodes, then style that text using any font available on your system. You can automatically clean up tree layout at any time.

A number of specific operations exploit the property of hierarchy. Subtrees may be selected, dragged, cut, copied, cleared or pasted within TreeBuilder documents. Subtrees may be collapsed and expanded.

TreeBuilder fully supports the Clipboard and supports one level of Undo for all pertinent commands. Written with MacApp, TreeBuilder strives for ease of use and for robust and reliable operation on the Macintosh.

Fly-Through

Constructing a tree graph with TreeBuilder is quick and easy. Build the tree described in this fly-through, and you will understand the basics.

Double-click on the TreeBuilder icon to start the program. An untitled document will appear in a new window. The new document contains one box. This will be the “root” node of your tree. The node is selected already, as you can see from the black squares at its corners. Those squares are “handles” you can use to change the size of the box. If you have unselected the box—for example, by clicking somewhere else in the window—select it again by moving the mouse cursor over it and clicking once.

D3FC7284-7B35-4D81-B4A8-30076A513DC3.jpg

Now set the type format for the tree. Defaults are already set, but let’s change them. Click the Font menu and choose “Times”. Click the Size menu and choose “10”. Click the Justification menu and choose “Center justified”. These selections will become the new default for your document, but you can change all or part of the text in any node by highlighting it and making new choices in the Font, Size, Style and Justification menus.

Move the mouse cursor over the box and you will see it turn into an I-beam text cursor.

F3A8152D-AD27-4290-BEC5-C2940BBF96E8.jpg

Click anywhere inside the box, and a blinking vertical bar—the text-insertion point—will appear.

85F808D3-FA9F-491B-96E0-5996FDFA2F07.jpg

Type in “The Big Cheese.” You’ll notice that there is not room for all the text. To make enough room, click a corner of the box and drag it to make the box larger. Even though the selection handles aren’t visible when you’re in text editing mode, you can resize the node you are working in, just as you can when the handles are visible.

649F1B82-1674-4EB0-96C9-31AD24F3A9F5.jpg

Hit the Return key to start a new line. (Text does not wrap to the next line when it reaches the edge of the text area inside a node.) Type in “A world of healthy food.”

8C0A11B3-8922-4CDB-81AD-773F17A711CB.jpg

Now let’s emphasize the first line—the one that says “The Big Cheese.” Move the I-beam cursor just to the left of the T, click and hold the mouse button, then drag the cursor until all of the first line is highlighted. Click the Size menu and choose 12. Click the Style menu and choose Bold.

861096C6-D615-4728-B6EE-DBB6C8B391A2.jpg

Now let’s put some branches on the tree. At the bottom of the node, you’ll see a small diamond called the clone control. Click the clone control with the mouse pointer and it turns black to show it is active. Move the cursor down below the top node and it turns into a “+” sign. This lets you know you are in an area where you can draw a new node. Click and hold the mouse button as you drag the cursor to create the box for a new node. Don’t worry too much about the exact size and position of the node. In a few minutes we’ll use an automatic feature of TreeBuilder to clean up the layout.

CBDE424F-7B60-4672-87A0-B30A663ED97D.jpg

There is a text insertion point blinking inside the new node you’ve just created. Type in “Snack Items.”

Now click the clone control at the bottom of the Snack Items node. Repeat the process you used a minute ago and draw a new node below and to the left of the Snack Items node. Type “Cheese Crackers” into that new node. Now move the cursor just to the right of the Cheese Crackers node. You’ll see the “+” cursor, and the clone control on the Snack Items node is still black. This shows you that you can create another node, and it will be a “child” of the Snack Items node.

DF3E20B1-129F-4C08-AFBD-78F91BF3D902.jpg

So make a node to the right of the Cheese Crackers box and type in “Cheese Spread.”

To save a bit of work, we want to select the whole Snack Items subtree and copy it. Double-click on the Snack Items box and you’ll see selection handles at the corners of all the boxes in that tree, indicating that all three nodes are selected.

F6672035-CF73-4316-93BB-0AA96091EF47.jpg

Click the Edit menu and choose Copy. This stores the subtree on the clipboard. If you want to be sure it’s there, look at the clipboard by clicking the Edit menu and choosing Show Clipboard. Make a second branch under The Big Cheese. Click the clone control on the The Big Cheese node. Click and drag to create a new node to the right of the Snack Items node. You don’t want to type any text here yet, so click on the work area outside the node to deselect it. Now click once on the new node; the handles will appear to indicate the node is selected. From the Edit menu, choose Paste and a copy of the Snack Items subtree will appear, replacing the node you just created. The pasted tree will be selected.

1341E791-5E19-476B-B282-79C5277A4269.jpg

If the new subtree is overlapping the old one, you can move the whole subtree by clicking inside any box on the subtree and holding the mouse button down while you drag the subtree to a new position.

Hold down the Shift key and double-click the copy of the Snack Items node to deselect the whole subtree. Now move the cursor over the copied Snack Items box, click and drag over the text to highlight it, and type in “The Real Thing.” Use the same procedure to change the copied Cheese Crackers to “The Whole Wheel” and Cheese Spread to “Quick Chunks.” Click anywhere in the work area to deselect all the nodes.

Our fly-through graph is just about finished. We just want to clean it up and dress it up a bit. Click the Layout menu and choose Clean Up Tree. TreeBuilder will make all the boxes the same size—big enough to hold the largest block of text—and line them up neatly on the page. Now from the Layout menu choose Hide Tree State, then go back to the Layout menu and choose Shadowed Borders.

81C03D0A-E5D9-4346-8D07-C991F7645445.jpg

From the File menu, choose Save and save the graph as Big Cheese. To print out a copy, go to the File menu and choose print. If you want to include your graph in a document created in a different program, double-click on the The Big Cheese node to select the entire tree, then go to the Edit menu and choose Copy. This puts the graph on the Clipboard. Switch to the document where you want to use the graph, choose Paste from the Edit menu of the second program, and the graph will be pasted in as a PICT graphic.

You can download TreeBuilder and its User’s Guide here.

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: