Building the help system

Here are the steps we followed to build this sample:
  1. Design the user interface: We built our UI in JBuilder's UI Designer in the usual way: we dropped components, set their properties, created the skeletons of event handlers, and so on. You can open HtmlViewerHelpDialog.java in design and examine the component tree and the component's property settings.Our UI depends heavily on JSplitPane and JScrollPane and TableScrollPane, so we include tips for working with these container components.

  2. Create data for the tree and data set: The data in our tree and data set is hard-coded in HtmlViewerHelpDialog.java in an array of arrays called nodeData. For each node, there is text that describes the node and a URL. The text is in two parts: the "caption" you see in the tree, and the node's parentage. This parentage information is just the caption for each node from the root down to the node's parent, separated by backslashes. We call this text - all the captions from the root down to and including the current node - an "ID" because it will always be unique for every node. Nodes are organized in a hierarchicy but URLs aren't - all the HTML pages are in the same directory. So we need to store both text and URL. We put just the text - including both parentage information and the node's caption - in the tree. We both both text and URL in the data set, in the NodeId and URL columns.

  3. Load the data: We load the tree and table components in a custom method called setup() . Setup() is called in HtmlViewerHelpDialog's constructor just after jbInit(). The work of loading the tree is delegated to a separate class, TreeModelMaker.java. Loading the data set is easier; we just loop through nodeData.

  4. Add the cell renderer: We store an "ID" in each node, but we only display a "caption". We do this by replacing the default tree cell renderer with our own, HtmlViewerTreeRenderer.java. Our renderer is a simple extension of the default; when our getTreeCellRendererComponent() method is called, we just insert the node's caption as the value to be painted and pass the call on to the superclass. We wrote a line of code in jbInit() to set our tree's cellRenderer property to an instance of HtmlViewerTreeRenderer.

  5. Connect the components together: