📄 magnitudetree-4-4.html

📁 构建定制的树型视图
💻 HTML
📖 第 1 页 / 共 2 页
字号:
上一页 12
        bottomnextsectionout.src="../i/nextsection.gif";
        bottomnextsectionover.src="../i/h-nextsection.gif";
      }
      function iOut(image)
      {
        if (browser=="N3")document[image].src=eval(image + "out.src");
      }
      function iOver(image)
      {
        if (browser=="N3")document[image].src=eval(image + "over.src");
      }
     // --></script><!-- <script src="../i/emailfriend.js" language="javascript"></script> --><a href="#navskip"><img border="0" alt="跳至主要内容" src="../i/c.gif"></a>
        <table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#006699">
<td><table width="300" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#006699">
<td width="150"><img src="../i/mast_logo.gif" alt="IBM" width="150" height="25"/></td>
<td width="150" background="../i/mgradient.gif"><font size="2" color="#99ccff" face="宋体"><b>中国</b></font><br /> <img src="../i/c.gif" width="150" height="1" alt=""/></td>
</tr></table> 
</td>
<td align="left"><table width="300" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100"><a href="/cgi-bin/click.p?url=http://www.ibm.com/cn/shop"><img border="0" src="../i/shopibm.gif" width="100" height="25" alt="购物"/></a></td>
<td width="100"><a href="/cgi-bin/click.p?url=http://www.ibm.com/cn/support"><img border="0" src="../i/support_chs.gif" width="100" height="25" alt="技术支持"/></a></td>
<td width="100"><a href="/cgi-bin/click.p?url=http://www.ibm.com/cn/support/product"><img border="0" src="../i/downloads_chs.gif" width="100" height="25" alt="免费下载"/></a></td></tr></table>
</td></tr></table>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr bgcolor="#000000">
<td><table width="600" border="0" cellspacing="0" cellpadding="0">
<tr><td bgcolor="#006699" width="150"><img src="../i/mast_lnav_sp.gif" width="150" height="21" alt=""/></td>
<td colspan="4" bgcolor="#000000"><table border="0" cellspacing="0" cellpadding="0" height="21">
<tr>
<td height="21" bgcolor="#000000" width="79" align="center"><a class="nav" style="color: #ffffff;" href="/cgi-bin/click.p?url=http://www.ibm.com/cn"><font size="2" color="#ffffff" face="宋体"><b>IBM 主页</b></font></a></td>
<td bgcolor="#959595" width="1"><img src="../i/c.gif" width="1" height="1" alt=""/></td>
<td height="21" bgcolor="#000000" width="74" align="center"><a class="nav" style="color: #ffffff;" href=/cgi-bin/click.p?url=http://www.ibm.com/cn/products><font size="2" color="#ffffff" face="宋体"><b>产品</b></font></a></td>
<td bgcolor="#959595" width="1"><img src="../i/c.gif" width="1" height="1" alt=""/></td>
<td height="21" bgcolor="#000000" width="81" align="center"><a class="nav" style="color: #ffffff;" href="/cgi-bin/click.p?url=http://www.ibm.com/cn/services"><font size="2" color="#ffffff" face="宋体"><b>咨询</b></font></a></td><td bgcolor="#959595" width="1"><img src="../i/c.gif" width="1" height="1" alt=""/></td>
<td height="21" bgcolor="#000000" width="81" align="center"><a class="nav" style="color: #ffffff;" href="/cgi-bin/click.p?url=http://www.ibm.com/cn/industry"><font size="2" color="#ffffff" face="宋体"><b>行业</b></font></a></td>
<td bgcolor="#959595" width="1"><img src="../i/c.gif" width="1" height="1" alt=""/></td>
<td height="21" bgcolor="#000000" width="57" align="center"><a class="nav" style="color: #ffffff;" href="/cgi-bin/click.p?url=http://www.ibm.com/cn/news"><font size="2" color="#ffffff" face="宋体"><b>新闻</b>
                                                </font></a></td>
<td bgcolor="#959595" width="1"><img src="../i/c.gif" width="1" height="1" alt=""/></td>
<td height="21" bgcolor="#000000" width="78" align="center"><a class="nav" style="color: #ffffff;" href="/cgi-bin/click.p?url=http://www.ibm.com/cn/ibm"><font size="2" color="#ffffff" face="宋体"><b>关于 IBM</b>
                                                </font></a></td></tr></table></td></tr></table></td></tr></table><TABLE border="0" cellpadding="0" cellspacing="0" width="100%"><TR><TD width="150" height="1" bgcolor="#ffffff"><IMG alt="" height="1" width="150" src="../i/c.gif"></TD></TR><TR><TD width="150" height="3" bgcolor="#cc6633"><IMG alt="" height="3" width="150" src="../i/c.gif"></TD></TR><TR><TD width="150" height="1" bgcolor="#333333"><IMG alt="" height="1" width="150" src="../i/c.gif"></TD></TR><TR><TD width="150" height="1" bgcolor="#000000"><IMG alt="" height="1" width="150" src="../i/c.gif"></TD></TR></TABLE><table border="0" cellpadding="0" cellspacing="0" width="100%"><tr><td><font face="Verdana, sans-serif" size="-1"><a href="/cgi-bin/click.p?url=http://www.ibm.com/cn">IBM</a> : <a
href="/developerWorks/">developerWorks 中国</a> : <a
href="/developerWorks/java/">Java</a> : <a
href="/developerWorks/education/java/">教学 - 在线课程</a></font><br x="7"><img src="imagemaster/masthead.jpg" alt="构建定制的树型视图"></td><td width="*" valign="bottom" align="right"><a border="0" href="../MagnitudeTree.zip"><img alt="下载教程 zip 文件" border="0" src="../i/icon-zip.gif"></a><a href=../MagnitudeTree_eng/index.html target=_blank><img alt="英文原文" border="0" src="../i/icon-source.gif"></a></td></tr><tr><td height="2" colspan="2"><img height="2" width="1" src="../i/c.gif"></td></tr></table><TABLE border="0" cellpadding="0" cellspacing="0" width="100%"><TR><TD width="150" height="1" bgcolor="#000000" colspan="6"><IMG alt="" height="1" width="150" src="../i/c.gif"></TD></TR><TR><TD background="../i/sw-gold.gif"><a border="0" href="index.html" onMouseOver="iOver('topmain'); iOver('bottommain'); self.status=mainblurb; return true;" onMouseOut="iOut('topmain'); iOut('bottommain'); self.status=''; return true;"><img alt="主菜单" border="0" src="../i/main.gif" name="topmain"></a></TD><TD background="../i/sw-gold.gif"><a border="0" onMouseOver="iOver('topsection'); iOver('bottomsection'); self.status=sectionblurb; return true;" onMouseOut="iOut('topsection'); iOut('bottomsection'); self.status=''; return true;" href="index4.html"><img alt="章节菜单" border="0" src="../i/section.gif" name="topsection"></a></TD><TD background="../i/sw-gold.gif"><a border="0" onMouseOver="iOver('topfeedback'); iOver('bottomfeedback'); self.status=feedbackblurb; return true;" onMouseOut="iOut('topfeedback'); iOut('bottomfeedback'); self.status=''; return true;" href="MagnitudeTree-7-4.html"><img alt="提交反馈意见" border="0" src="../i/feedback.gif" name="topfeedback"></a></TD><TD width="100%" background="../i/sw-gold.gif"><img src="../i/c.gif"></TD><TD background="../i/sw-gold.gif"><a border="0" onMouseOver="iOver('topprevious'); iOver('bottomprevious'); self.status=previousblurb; return true;" onMouseOut="iOut('topprevious'); iOut('bottomprevious'); self.status=''; return true;" href="MagnitudeTree-4-3.html"><img alt="上一屏" border="0" src="../i/previous.gif" name="topprevious"></a></TD><TD background="../i/sw-gold.gif"><a border="0" onMouseOver="iOver('topnext'); iOver('bottomnext'); self.status=nextblurb; return true;" onMouseOut="iOut('topnext'); iOut('bottomnext'); self.status=''; return true;" href="MagnitudeTree-4-5.html"><img alt="下一屏" border="0" src="../i/next.gif" name="topnext"></a></TD></TR></TABLE><table bgcolor="ffffff" cellspacing="0" cellpadding="2" border="0" height="400" width="100%"><tr valign="bottom"><a name="navskip"></a><td height="25" colspan="4"><img border="0" height="25" width="562" src="imagemaster/titlebar4.jpg" alt="4. 定制绘制"></td></tr><tr><td bgcolor="ffffff" width="15">&nbsp;</td><td bgcolor="ffffff" width="12">&nbsp;</td><td valign="top" align="left" bgcolor="ffffff" width="*"><p><br x="7"><table cellspacing="0" cellpadding="0" border="0"><tr><td width="90%"><font size="4" face="Verdana, Arial, Helvetica"><b>MagnitudeNodeRenderer 类</b></font></td><td width="200" align="right"><font size="1" face="Verdana, Arial, Helvetica"><nobr>    第 4 页（共 7 页）</nobr></font></td></tr></table><br x="7"><br x="7"></p><font size="2" face="Verdana, Arial, Helvetica"><p>
我们的要求是显示每个节点的相对数量信息。不必显示精确值，只要节点之间有可识别的差异。图像较文本更适合这个目的，所以我们必须找到一种方法可以在 DefaultTreeCellRenderer 显示的标准图标和文本之间再增加一个数量图像。
          </p><p>
传达相对数量的合适方法也许是饼图、栏形图或任何数量的其它表示法。要提供灵活性，就不应该固定所使用的图像。事实上，定制的
TreeCellRenderer 将接受表示各种相对数量的图像。下一页中将更详细地描述这一方面。
          </p><img alt="定制的树节点" src="images/PieNode.gif"><p>
给出了一组数量图像之后，除了标准节点图标和文本之外，还必须显示适当的图像。为支持本教程而创建的下一个定制组件是 <b>MagnitudeNodeRenderer</b>。</p><p>
由于 DefaultTreeCellRenderer 扩展了 JLabel，因此扩展
DefaultTreeCellRenderer 将为进一步修改 JLabel 的绘画行为提供一个机会。以下做法是明智的：将定制的绘画限制到最小，并且除 JLabel 绘画之外，保留提供状态重点的 DefaultTreeCellRenderer 绘画。
          </p><p>
DefaultTreeCellRenderer 应用的重点只绘制在 JLabel 文本的背后，而不是 JLabel 图标。通过增加图标和文本之间的间隔，就空出了空间以便将数量图像绘制到这两者之间。JLabel 支持改变图标和文本之间的间隔，允许按以下方式调整：
</p><pre><code style="font-family: Courier New, Courier, monospace; font-size: 12">
<span class="comment">// Constant for space between magnitude image and icon/text.
// This constant is derived by experimentation.</span>
<span class="keyword">private</span> <span class="keyword">static</span> <span class="keyword">final</span> <span class="type">int</span> <span class="variable-name">SPACE</span> = <span class="constant">4</span>;

<span class="comment">// Magnitude image for the current node;</span>
<span class="keyword">private</span> <span class="type">Image</span> <span class="variable-name">fMagnitudeImage</span>;

<span class="comment">// Override DefaultTreeCellRenderer.getTreeCellRenderer().</span>
<span class="keyword">public</span> <span class="type">Component</span> <span class="function-name">getTreeCellRendererComponent</span>(<span class="type">JTree</span> <span class="variable-name">tree</span>,
                                               <span class="type">Object</span> <span class="variable-name">value</span>,
                                               <span class="type">boolean</span> <span class="variable-name">selected</span>,
                                               <span class="type">boolean</span> <span class="variable-name">expanded</span>,
                                               <span class="type">boolean</span> <span class="variable-name">leaf</span>, <span class="type">int</span> <span class="variable-name">row</span>,
                                               <span class="type">boolean</span> <span class="variable-name">hasFocus</span>)
{
  <span class="comment">// Pass parameters to the superclass.</span>
  <span class="variable-name">super</span>.<span class="function-name">getTreeCellRendererComponent</span>(<span class="variable-name">tree</span>, <span class="variable-name">value</span>, <span class="variable-name">selected</span>, <span class="variable-name">expanded</span>,
                                      <span class="variable-name">leaf</span>, <span class="variable-name">row</span>, <span class="variable-name">hasFocus</span>);

  <span class="comment">// Set space between node icon and node text such that we can
  // render the magnitude image in between them.</span>
  <span class="function-name">setIconTextGap</span>(<span class="variable-name">fMagnitudeImage</span>.<span class="function-name">getWidth</span>(<span class="constant">null</span>) + <span class="variable-name">SPACE</span> + <span class="variable-name">SPACE</span>);

  <span class="keyword">return</span> <span class="variable-name">this</span>;
}
          </code></pre><p>
在以上代码中，假设 <code
style="font-family: Courier New, Courier, monospace; font-size:
12">fMagnitudeImage</code> 数据成员已设置成适当的数量图像；下一页中将说明这是如何完成的。已覆盖 <code style="font-family: Courier New,
Courier, monospace; font-size: 12">getTreeCellRendererComponent()</code>
方法，并且调用了超类以获取用于绘制节点的 JLabel 以及所有正确状态值集合。然后代码调用 <code style="font-family: Courier New, Courier, monospace; font-size:
12">JLabel.setIconTextGap()</code> 以确保间隔足够容纳数量图像，而且还略有剩余。
          </p><p>
已经为数量图像留出了空间，将以下列方式进行绘制：
</p><pre><code style="font-family: Courier New, Courier, monospace; font-size: 12">
<span class="comment">// Override DefaultTreeCellRenderer.paint().</span>
<span class="keyword">public</span> <span class="type">void</span> <span class="function-name">paint</span>(<span class="type">Graphics</span> <span class="variable-name">g</span>)
{
  <span class="comment">// Get the tree node icon and text painted first, then paint the
  // magnitude image in between them.</span>
  <span class="variable-name">super</span>.<span class="function-name">paint</span>(<span class="variable-name">g</span>);
  <span class="variable-name">g</span>.<span class="function-name">drawImage</span>(<span class="variable-name">fMagnitudeImage</span>,
              <span class="comment">// Horizontal position determined by icon width and
              // SPACE constant.</span>
              <span class="function-name">getIcon</span>().<span class="function-name">getIconWidth</span>() + <span class="constant">SPACE</span>,
              <span class="comment">// Center vertically.</span>
              (<span class="function-name">getHeight</span>() - <span class="variable-name">fMagnitudeImage</span>.<span class="function-name">getHeight</span>(<span class="constant">null</span>)) / <span class="constant">2</span>,
              <span class="constant">null</span>);
}
          </code></pre><p>
由于数量图像要在 JLabel 图标和文本的基础上绘制，因此首先调用超类方法进行绘制。然后绘制数量图像。水平位置根据取决于 JLabel 图标宽度，垂直位置取决于 JLabel 高度和数量图像高度。
          </p><p>
下一页中要讨论确定要绘制哪一个数量图像的过程。
          </p><br x="7"></font></td></tr></table><TABLE border="0" cellpadding="0" cellspacing="0" width="100%"><TR><TD background="../i/sw-gold.gif"><a border="0" href="index.html" onMouseOver="iOver('topmain'); iOver('bottommain'); self.status=mainblurb; return true;" onMouseOut="iOut('topmain'); iOut('bottommain'); self.status=''; return true;"><img alt="主菜单" border="0" src="../i/main.gif" name="bottommain"></a></TD><TD background="../i/sw-gold.gif"><a border="0" onMouseOver="iOver('topsection'); iOver('bottomsection'); self.status=sectionblurb; return true;" onMouseOut="iOut('topsection'); iOut('bottomsection'); self.status=''; return true;" href="index4.html"><img alt="章节菜单" border="0" src="../i/section.gif" name="bottomsection"></a></TD><TD background="../i/sw-gold.gif"><a border="0" onMouseOver="iOver('topfeedback'); iOver('bottomfeedback'); self.status=feedbackblurb; return true;" onMouseOut="iOut('topfeedback'); iOut('bottomfeedback'); self.status=''; return true;" href="MagnitudeTree-7-4.html"><img alt="提交反馈意见" border="0" src="../i/feedback.gif" name="bottomfeedback"></a></TD><TD width="100%" background="../i/sw-gold.gif"><img src="../i/c.gif"></TD><TD background="../i/sw-gold.gif"><a border="0" onMouseOver="iOver('topprevious'); iOver('bottomprevious'); self.status=previousblurb; return true;" onMouseOut="iOut('topprevious'); iOut('bottomprevious'); self.status=''; return true;" href="MagnitudeTree-4-3.html"><img alt="上一屏" border="0" src="../i/previous.gif" name="bottomprevious"></a></TD><TD background="../i/sw-gold.gif"><a border="0" onMouseOver="iOver('topnext'); iOver('bottomnext'); self.status=nextblurb; return true;" onMouseOut="iOut('topnext'); iOut('bottomnext'); self.status=''; return true;" href="MagnitudeTree-4-5.html"><img alt="下一屏" border="0" src="../i/next.gif" name="bottomnext"></a></TD></TR><TR><TD width="150" height="1" bgcolor="#000000" colspan="6"><IMG alt="" height="1" width="150" src="../i/c.gif"></TD></TR></TABLE><TABLE cellpadding="0" cellspacing="0" border="0"><TR><TD width="182"><TABLE cellpadding="0" cellspacing="0" border="0" width="182">
            <TR bgcolor="#000000"><TD align="center" width="60" class="mast"><a style="text-decoration: none; color: #ffffff;" class="nav" href="http://www.ibm.com/privacy/"><font face="Arial, Verdana" size="2">隐私</font></a></TD>
            <TD width="1" bgcolor="#959595"><img alt="" border="0" height="20" width="1" src="../i/c.gif"></TD>
            <TD align="center" width="60" class="mast"><a style="text-decoration: none; color: #ffffff;" class="nav" href="http://www.ibm.com/legal/"><font face="Arial, Verdana" size="2">法律</font></a></TD>
            <TD width="1" bgcolor="#959595"><img alt="" border="0" height="20" width="1" src="../i/c.gif"></TD>
            <TD align="center" width="60" class="mast"><a style="text-decoration: none; color: #ffffff;" class="nav" href="http://www.ibm.com/contact/"><font face="Arial, Verdana" size="2">联系</font></a></TD>
            <TD width="1" bgcolor="#959595"><img alt="" border="0" height="21" width="1" src="../i/c.gif"></TD></TR><TR bgcolor="#ffffff"><TD><img alt="" border="0" height="1" width="1" src="../i/c.gif"></TD></TR></TABLE></TD><TD width="100%"><TABLE cellpadding="0" cellspacing="0" border="0" width="100%"><TR height="21" bgcolor="#000000"><TD><img alt="" border="0" height="21" width="1" src="../i/c.gif"></TD></TR><TR bgcolor="#ffffff"><TD><img alt="" border="0" height="1" width="1" src="../i/c.gif"></TD></TR></TABLE></TD></TR></TABLE></body></html>
上一页 12
⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -