📄 3_display.html
字号:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN"><!--NewPage--><html><head><title>Displaying a DOM Hierarchy</title><style type="text/css"><!----></style></head><body BGCOLOR="#ffffff"><table width="100%"> <tr> <td align=left> <ahref="2_anydata.html"><img src="../images/PreviousArrow.gif" width=26 height=26 align=bottom border=0 alt="Previous | "></a><a href="3b_display.html"><img src="../images/NextArrow.gif" width=25 height=26 align=bottom border=0 alt="Next | "></a><a href="../alphaIndex.html"><img src="../images/xml_IDX.gif" width=26 height=26 align=bottom border=0 alt="Index | "></a><a href="../TOC.html"><imgsrc="../images/xml_TOC.gif" width=26 height=26 align=bottom border=0 alt="TOC | "></a><a href="../index.html"><imgsrc="../images/xml_Top.gif" width=26 height=26 align=bottom border=0 alt="Top | "></a> </td> <td align=right><strong><em><a href="index.html">Top</a></em></strong> <a href="../TOC.html#intro"><strong><em>Contents</em></strong></a> <a href="../alphaIndex.html"><strong><em>Index</em></strong></a> <a href="../glossary.html"><strong><em>Glossary</em></strong></a> </td> </tr></table><p> <center> <IMG SRC="../images/shoeline2.gif" ALIGN="BOTTOM" BORDER="0" WIDTH="202" HEIGHT="25" NATURALSIZEFLAG="3"> <img src="../images/shoeline2.gif" align="BOTTOM" border="0" width="202" height="25" naturalsizeflag="3"> </center><blockquote> <blockquote> <hr size=4> </blockquote></blockquote><p> <h2> 3a. Displaying a DOM Hierarchy</h2><table width="40%" border="1" align="right"> <tr> <td> <div align="center"><b><i>Link Summary</i></b></div> </td> </tr> <tr> <td> <dl> <dt><b><i>Exercise Links</i></b></dt> </dl> <ul> <li><a href="work/DomEcho02.java"><code>DomEcho02.java</code></a></li> <li><a href="samples/slideSample01.xml"><code>slideSample01.xml</code></a></li> <li><a href="samples/slideSample01.xml"><code>slideSample10.xml</code></a></li> </ul> <dl> <dt><b><i>API Links</i></b></dt> </dl> <ul> <li><a href="../../api/org/w3c/dom/Node.html">org.w3c.dom.Node</a></li> </ul> <dl> <dt><b><i>External Links</i></b></dt> </dl> <ul> <li><a href="http://java.sun.com/products/jfc/tsc/articles/jtree/index.html">Understanding the TreeModel</a></li> </ul> </td> </tr></table><p>To create a Document Object Hierarchy (DOM) or manipulate one, it helps to have a clear idea of how nodes in a DOM are structured. In this section of the tutorial, you'll expose the internal structure of a DOM. <h3><a name="echo"></a>Echoing Tree Nodes</h3><p>In the first section of the DOM tutorial, you used the XmlDocument <tt>write</tt> method to output the XML data. The output looked pretty much the same as the input, which was good, but the result did not help you visualize the internal structure of a DOM. </p><p>What you need at this point is a way to expose the nodes in a DOM so can see what it contains. To do that, you'll convert a DOM into a JTreeModel and display the full DOM in a JTree. It's going to take a bit of work, but the end result will be diagnostic tool you can use in the future, as well as something you can use to learn about DOM structure now.</p><h3><a name="convert"></a>Convert DomEcho to a GUI App</h3><p>Since the DOM is a tree, and the Swing JTree component is all about displaying trees, it makes sense to stuff the DOM into a JTree, so you can look it. The first step in that process is to hack up the DomEcho program so it becomes a GUI application. </p><blockquote> <p><b>Note:</b><br> The code discussed in this section is in <a href="work/DomEcho02.java"><code>DomEcho02.java</code></a>.</p></blockquote><h4><a name="import"></a>Add Import Statements</h4><p>Start by removing the <tt>import</tt> of XmlDocument. You won't be needing that any more, since you won't be using its <tt>write</tt> operation.</p><blockquote> <p></p> <pre>import java.io.File;import java.io.IOException;<old></old><old><strike>import com.sun.xml.tree.XmlDocument;</strike></old></pre></blockquote><p>Next, import the GUI components you're going to need to set up the application and display a JTree:</p><blockquote> <pre><new><b>// GUI components and layouts</b></new><new><b>import javax.swing.JFrame;</b></new><new><b>import javax.swing.JPanel;</b></new><new><b>import javax.swing.JScrollPane;</b></new><new></new><new><b>import javax.swing.JTree;</b></new> </pre></blockquote><p>Later on in the DOM tutorial, we'll going to tailor the DOM display to generate a user-friendly version of the JTree display. When the user selects an element in that tree, you'll be displaying subelements in an adjacent editor pane. So, while we're doing the setup work here, import the components you need to set up a divided view (JSplitPane) and to display the text of the subelements (JEditorPane):</p><blockquote> <pre><b><new><b>import javax.swing.JSplitPane;</b></new><new><b></b></new>import javax.swing.JEditorPane;</b> </pre></blockquote><p>Add a few support classes you're going to need to get this thing off the ground:</p><blockquote> <blockquote> <p></p> <p> </blockquote></blockquote><blockquote> <blockquote> <p></p> </blockquote> <pre><new><b>// GUI support classes</b></new><new><b>import java.awt.BorderLayout;</b></new><new><b>import java.awt.Dimension;</b></new><new><b>import java.awt.Toolkit;</b></new><new><b>import java.awt.event.WindowEvent;</b></new><new><b>import java.awt.event.WindowAdapter;</b></new> </pre></blockquote><p>Finally, import some classes to make a fancy border:</p><blockquote> <pre><new><b>// For creating borders</b></new><new><b>import javax.swing.border.EmptyBorder;</b></new><new><b>import javax.swing.border.BevelBorder;</b></new><new><b>import javax.swing.border.CompoundBorder;</b></new> </pre></blockquote><p>(These are optional. You can skip them and the code that depends on them if you want to simplify things.) </p><h4><a name="gui"></a>Create the GUI Framework</h4><p>The next step is to convert the app into a GUI application. To do that, the static main method will create an instance of the main class, which will have become a GUI pane.</p><p>Start by converting the class into a GUI pane by extending the Swing JPanel class: </p><blockquote> <p></p> <pre>public class DomEcho02 <new><b>extends JPanel</b></new>{ // Global value so it can be ref'd by the tree-adapter static Document document; ...</pre> </blockquote>While you're there, define a few constants you'll use to control window sizes: <blockquote> <pre>public class DomEcho02 <new>extends JPanel</new><new></new>{ // Global value so it can be ref'd by the tree-adapter static Document document; <new><b>static final int windowHeight = 460;</b></new> <new><b>static final int leftWidth = 300;</b></new> <new><b>static final int rightWidth = 340;</b></new> <new><b>static final int windowWidth = leftWidth + rightWidth;</b></new> </pre> <p> </blockquote><p>Now, in the main method, remove the lines that wrote the XML data out System.out and, in their place, invoke a method that will create the outer frame that the GUI pane will sit in:</p><blockquote> <pre> public static void main (String argv []) { ... DocumentBuilderFactory factory ... try { DocumentBuilder builder = factory.newDocumentBuilder(); document = builder.parse( new File(argv[0]) );<br> <old><strike>XmlDocument xdoc = (XmlDocument) document;</strike></old> <old><strike>xdoc.write (System.out);</strike></old> <b>makeFrame();</b> } catch (SAXParseException spe) { ...</pre></blockquote><p>Next, you'll need to define the <code>makeFrame</code> method itself. It contains the standard code to create a frame, handle the exit condition gracefully, give it an instance of the main panel, size it, locate it on the screen, and make it visible:<blockquote> <p></p> <pre><new> ...} // main<b>public static void makeFrame() {</b></new> <new><b>// Set up a GUI framework</b></new> <new><b>JFrame frame = new JFrame("DOM Echo");</b></new> <new><b>frame.addWindowListener(new WindowAdapter() {</b></new> <new><b>public void windowClosing(WindowEvent e) {System.exit(0);}</b></new> <new><b>});</b></new> <new><b>// Set up the tree, the views, and display it all</b></new> <new><b>final DomEcho02 echoPanel = new DomEcho02();</b></new> <new><b>frame.getContentPane().add("Center", echoPanel );</b></new> <new><b>frame.pack();</b></new> <new><b>Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();</b></new> <new><b>int w = windowWidth + 10;</b></new> <new><b>int h = windowHeight + 10;</b></new> <new><b>frame.setLocation(screenSize.width/3 - w/2, screenSize.height/2 - h/2);</b></new> <new><b>frame.setSize(w, h);</b></new> <new><b>frame.setVisible(true);</b></new><new><b>}</b></new> <b>// makeFrame</b></pre></blockquote><h4><a name="display"></a>Add the Display Components</h4><p>The only thing left in the effort to convert the program to a GUI app is create the class constructor and make it create the panel's contents. Here is the constructor:</p><blockquote> <p></p> <pre>public class DomEcho02 <new>extends JPanel</new>{ ... <new>static final int windowWidth = leftWidth + rightWidth;</new> <new><b>public DomEcho02()</b></new> <new><b>{</b></new> <new><b>} // Constructor</b></new></pre></blockquote><p>Here, you make use of the border classes you imported earlier to make a regal border (optional):</p><blockquote> <p></p> <pre><new>public DomEcho02()</new><new>{</new> <new><b>// Make a nice border</b></new> <new><b>EmptyBorder eb = new EmptyBorder(5,5,5,5);</b></new> <new><b>BevelBorder bb = new BevelBorder(BevelBorder.LOWERED);</b></new> <new><b>CompoundBorder cb = new CompoundBorder(eb,bb);</b></new> <new><b>this.setBorder(new CompoundBorder(cb,eb));</b></new><new>}</new> // Constructor </pre></blockquote>Next, create an empty tree and put it a JScrollPane so users can see its contents as it gets large: <blockquote> <p></p> <pre><new>public DomEcho02()</new>⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -