📄 jaxpdom6.html
字号:
<?xml version="1.0" encoding="ISO-8859-1"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>Constructing a User-Friendly JTree from a DOM</title> <link rel="StyleSheet" href="document.css" type="text/css" media="all" /> <link rel="StyleSheet" href="catalog.css" type="text/css" media="all" /> <link rel="Table of Contents" href="J2EETutorialTOC.html" /> <link rel="Previous" href="JAXPDOM5.html" /> <link rel="Next" href="JAXPDOM7.html" /> <link rel="Index" href="J2EETutorialIX.html" /> </head> <body> <table width="550" summary="layout" id="SummaryNotReq1"> <tr> <td align="left" valign="center"> <font size="-1"> <a href="http://java.sun.com/j2ee/1.4/download.html#tutorial" target="_blank">Download</a> <br> <a href="http://java.sun.com/j2ee/1.4/docs/tutorial/information/faq.html" target="_blank">FAQ</a> <br> <a href="http://java.sun.com/j2ee/1.4/docs/tutorial/information/history.html" target="_blank">History</a> </td> <td align="center" valign="center"><a accesskey="p" href="JAXPDOM5.html"><img id="LongDescNotReq1" src="images/PrevArrow.gif" width="26" height="26" border="0" alt="Prev" /></a><a accesskey="c" href="J2EETutorialFront.html"><img id="LongDescNotReq1" src="images/UpArrow.gif" width="26" height="26" border="0" alt="Home" /></a><a accesskey="n" href="JAXPDOM7.html"><img id="LongDescNotReq3" src="images/NextArrow.gif" width="26" height="26" border="0" alt="Next" /></a><a accesskey="i" href="J2EETutorialIX.html"></a> </td> <td align="right" valign="center"> <font size="-1"> <a href="http://java.sun.com/j2ee/1.4/docs/api/index.html" target="_blank">API</a> <br> <a href="http://java.sun.com/j2ee/1.4/docs/tutorial/information/search.html" target="_blank">Search</a> <br> <a href="http://java.sun.com/j2ee/1.4/docs/tutorial/information/sendusmail.html" target="_blank">Feedback</a></font> </font> </td> </tr> </table> <img src="images/blueline.gif" width="550" height="8" ALIGN="BOTTOM" NATURALSIZEFLAG="3" ALT="Divider"> <blockquote><a name="wp64732"> </a><h2 class="pHeading1">Constructing a User-Friendly JTree from a DOM</h2><a name="wp64733"> </a><p class="pBody">Now that you know what a DOM looks like internally, you'll be better prepared to modify a DOM or construct one from scratch. Before going on to that, though, this section presents some modifications to the <code class="cCode">JTreeModel</code> that let you produce a more user-friendly version of the <code class="cCode">JTree</code> suitable for use in a GUI. </p><a name="wp64735"> </a><h3 class="pHeading2">Compressing the Tree View</h3><a name="wp64736"> </a><p class="pBody">Displaying the DOM in tree form is all very well for experimenting and to learn how a DOM works. But it's not the kind of "friendly" display that most users want to see in a <code class="cCode">JTree</code>. However, it turns out that very few modifications are needed to turn the <code class="cCode">TreeModel</code> adapter into something that <span style="font-style: italic">will</span> present a user-friendly display. In this section, you'll make those modifications. </p><hr><a name="wp64737"> </a><p class="pNote">Note: The code discussed in this section is in <code class="cCode"><a href="../examples/jaxp/dom/samples/DomEcho03.java" target="_blank">DomEcho03.java</a></code>. The file it operates on is <code class="cCode"><a href="../examples/jaxp/dom/samples/slideSample01.xml" target="_blank">slideSample01.xml</a></code>. (The browsable version is <code class="cCode"><a href="../examples/jaxp/dom/samples/slideSample01-xml.html" target="_blank">slideSample01-xml.html</a></code>.) </p><hr><a name="wp64739"> </a><h4 class="pHeading3">Make the Operation Selectable</h4><a name="wp64740"> </a><p class="pBody">When you modify the adapter, you're going to <span style="font-style: italic">compress</span> the view of the DOM, eliminating all but the nodes you really want to display. Start by defining a boolean variable that controls whether you want the compressed or uncompressed view of the DOM:</p><div class="pPreformattedRelative"><pre class="pPreformattedRelative">public class DomEcho extends JPanel{ static Document document; <code class="cCodeBold">boolean compress = true;</code> static final int windowHeight = 460; ...<a name="wp64741"> </a></pre></div><a name="wp64743"> </a><h4 class="pHeading3">Identify Tree Nodes</h4><a name="wp64744"> </a><p class="pBody">The next step is to identify the nodes you want to show up in the tree. To do that, add the code highlighted below:</p><div class="pPreformattedRelative"><pre class="pPreformattedRelative">...import org.w3c.dom.Document;import org.w3c.dom.DOMException;<code class="cCodeBold">import org.w3c.dom.Node;</code>public class DomEcho extends JPanel{ ... public static void makeFrame() { ... } // An array of names for DOM node-type static final String[] typeName = { ... }; <code class="cCodeBold">static final int ELEMENT_TYPE = Node.ELEMENT_NODE; // The list of elements to display in the tree static String[] treeElementNames = { "slideshow", "slide", "title", // For slideshow #1 "slide-title", // For slideshow #10 "item", }; boolean treeElement(String elementName) { for (int i=0; i<treeElementNames.length; i++) { if ( elementName.equals(treeElementNames[i]) ) return true; } return false; }</code> <a name="wp73404"> </a></pre></div><a name="wp64746"> </a><p class="pBody">With this code, you set up a constant you can use to identify the <code class="cCode">ELEMENT</code> node type, declared the names of the elements you want in the tree, and created a method tells whether or not a given element name is a "tree element". Since <code class="cCode">slideSample01.xml</code> has <code class="cCode">title</code> elements and <code class="cCode">slideSample10.xml</code> has <code class="cCode">slide-title</code> elements, you set up the contents of this arrays so it would work with either data file. </p><hr><a name="wp73483"> </a><p class="pNote">Note: The mechanism you are creating here depends on the fact that <span style="font-style: italic">structure</span> nodes like <code class="cCode">slideshow</code> and <code class="cCode">slide</code> never contain text, while text usually does appear in <span style="font-style: italic">content</span> nodes like <code class="cCode">item</code>. Although those "content" nodes may contain subelements in <code class="cCode">slideShow10.xml</code>, the DTD constrains those subelements to be XHTML nodes. Because they are XHTML nodes (an XML version of HTML that is constrained to be well-formed), the entire substructure under an <code class="cCode">item</code> node can be combined into a single string and displayed in the <code class="cCode">htmlPane</code> that makes up the other half of the application window. In the second part of this section, you'll do that concatenation, displaying the text and XHTML as content in the <code class="cCode">htmlPane</code>.</p><hr><a name="wp73496"> </a><p class="pBody">Although you could simply reference the node types defined in the class, <code class="cCode">org.w3c.dom.Node</code>, defining the <code class="cCode">ELEMENT_TYPE</code> constant keeps the code a little more readable. Each node in the DOM has a name, a type, and (potentially) a list of subnodes. The functions that return these values are <code class="cCode">getNodeName()</code>, <code class="cCode">getNodeType</code>, and <code class="cCode">getChildNodes()</code>. Defining our own constants will let us write code like this:</p><div class="pPreformattedRelative"><pre class="pPreformattedRelative">Node <code class="cCodeBold">node</code> = nodeList.item(i);int <code class="cCodeBold">type</code> =<code class="cCodeBold"> node.getNodeType()</code>;if (<code class="cCodeBold">type == ELEMENT_TYPE</code>) { ....<a name="wp73523"> </a></pre></div><a name="wp73561"> </a><p class="pBody">As a stylistic choice, the extra constants help us keep the reader (and ourselves!) clear about what we're doing. Here, it is fairly clear when we are dealing with a node object, and when we are dealing with a type constant. Otherwise, it would be fairly tempting to code something like, <code class="cCode">if (node == ELEMENT_NODE)</code>, which of course would not work at all.</p><a name="wp64749"> </a><h4 class="pHeading3">Control Node Visibility</h4><a name="wp64750"> </a><p class="pBody">The next step is to modify the <code class="cCode">AdapterNode's</code> <code class="cCode">childCount</code> function so that it only counts "tree element" nodes--nodes which are designated as displayable in the <code class="cCode">JTree</code>. Make the modifications highlighted below to do that: </p><div class="pPreformattedRelative"><pre class="pPreformattedRelative">public class DomEcho extends JPanel{ ... public class AdapterNode { ... public AdapterNode child(int searchIndex) { ... } public int childCount() {<code class="cCodeBold"> if (!compress) { // Indent this</code> return domNode.getChildNodes().getLength(); <code class="cCodeBold"> } int count = 0; for (int i=0; i<domNode.getChildNodes().getLength(); i++) { org.w3c.dom.Node node = domNode.getChildNodes().item(i); if (node.getNodeType() == ELEMENT_TYPE && treeElement( node.getNodeName() )) { ++count; } } return count;</code> } } // AdapterNode<a name="wp64751"> </a></pre></div><a name="wp64752"> </a><p class="pBody">The only tricky part about this code is checking to make sure the node is an element node before comparing the node. The DocType node makes that necessary, because it has the same name, "slideshow", as the <code class="cCode">slideshow</code> element.</p><a name="wp64754"> </a><h4 class="pHeading3">Control Child Access</h4><a name="wp64755"> </a><p class="pBody">Finally, you need to modify the <code class="cCode">AdapterNode's</code> <code class="cCode">child</code> function to return the Nth item from the list of displayable nodes, rather than the Nth item from all nodes in the list. Add the code highlighted below to do that:</p><div class="pPreformattedRelative"><pre class="pPreformattedRelative">public class DomEcho extends JPanel{ ... public class AdapterNode { ... public int index(AdapterNode child) { ... } public AdapterNode child(int searchIndex) { //Note: JTree index is zero-based. org.w3c.dom.Node node = domNode.getChildNodes()Item(searchIndex);<code class="cCodeBold"> if (compress) { // Return Nth displayable node int elementNodeIndex = 0; for (int i=0; i<domNode.getChildNodes().getLength(); i++) { node = domNode.getChildNodes()Item(i); if (node.getNodeType() == ELEMENT_TYPE && treeElement( node.getNodeName() ) && elementNodeIndex++ == searchIndex) { break; } } }</code> return new AdapterNode(node); } // child} // AdapterNode<a name="wp64756"> </a></pre></div><a name="wp64757"> </a><p class="pBody">⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -