Building the help system
Here are the steps we followed to build this sample:
- 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.
- 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.
- 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.
- 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.
- Connect the components together:
- Bind the tree to the NodeId column of the data set, so selection in the tree
navigates the data set.
- Bind the editor pane to the URL and HtmlPage columns of the data set.
- In the navigation listener for the data set, load the editor pane using the current
row's URL.