2004469.htm

UML基础(好)

	…
</g>
<set id="object" xlink:href="http://…/slide_1.svg"/>
</FONT></CODE></PRE></TD>
          </TR>
        </TBODY>
      </TABLE>
      <P><SPAN class=atitle3>* 分层与图分解</SPAN><BR>
        现在的系统越来越复杂，直接导致UML图也变得越来越复杂，在一张纸上绘制整个图已经是无能为力了。UML中提供了包的概念来解决这个问题，在SVG中则可以使用分层以及图分解来显示我们感兴趣的部分。属性childNodes、firstChild等可以访问分组节点的子节点，借助于它们可以完成图层管理功能。 
        </FONT></P>
      <P>我们可以在XHTML页面中加入一些Checkbox，用于显示/隐藏非兴趣区域，也可实现SVG自己的Checkbox来完成这项工作，下面就是相关代码： 
        </FONT></P>
      <P> 
      <TABLE cellSpacing=0 cellPadding=5 width="592" bgColor=#cccccc border=1>
        <TBODY>
          <TR> 
            <TD width="602" class="content">
<PRE><CODE>
&lt;script&gt;&lt;![CDATA[
var kclick = false;
function check(evt) {
var SVGDoc = evt.getTarget().getOwnerDocument();
var check_off = SVGDoc.getElementById(&quot;check_off&quot;);
var check_on = SVGDoc.getElementById(&quot;check_on&quot;);
var off_style = check_off.getStyle();
var on_style = check_on.getStyle();
	
if (kclick)		
{
off_style.setProperty(&quot;visibility&quot;, &quot;visible&quot;);
  	on_style.setProperty(&quot;visibility&quot;, &quot;hidden&quot;);
}
else
{
off_style.setProperty(&quot;visibility&quot;, &quot;hidden&quot;);
on_style.setProperty(&quot;visibility&quot;, &quot;visible&quot;);
}
kclick = !kclick;
}
]]&gt;&lt;/script&gt;

&lt;g id=&quot;check_off&quot; onclick=&quot;check(evt)&quot;&gt;
&lt;rect width=&quot;10&quot; height=&quot;10&quot; stroke-width=&quot;1&quot; stroke=&quot;rgb(100,100,100)&quot; fill=&quot;white&quot;/&gt;
&lt;/g&gt;
&lt;g id=&quot;check_on&quot; visibility=&quot;hidden&quot; onclick=&quot;check(evt)&quot;&gt;
&lt;rect width=&quot;10&quot; height=&quot;10&quot; stroke-width=&quot;1&quot; stroke=&quot;rgb(100,100,100)&quot; fill=&quot;white&quot;/&gt;
&lt;line x1=&quot;1&quot; y1=&quot;1&quot; x2=&quot;9&quot; y2=&quot;9&quot; stroke=&quot;black&quot;/&gt;
&lt;line x1=&quot;1&quot; y1=&quot;9&quot; x2=&quot;9&quot; y2=&quot;1&quot; stroke=&quot;black&quot;/&gt;
&lt;/g&gt;
&lt;text x=&quot;20&quot; y=&quot;10&quot;&gt;Check Box 1&lt;/text&gt;
</FONT></CODE></PRE></TD>
          </TR>
        </TBODY>
      </TABLE>
      <P>要显示/消隐其它的组也可以直接放在check函数中if语句范围内来实现。 </FONT></P>
      <P>点击UML中的包或其它需要详细描述的单元，显示其中的内容，就能实现将大图分解为小图的功能。这部分代码与上面Slide 
        Show的代码如出一辙，改动很少，在这里就不再赘述了。 </FONT></P>
      <P><SPAN class=atitle3>* 后台实时更新</SPAN><BR>
        元数据在UML图中扮演着重要的角色，元数据经常会发生变动。实时地将更新的元数据信息发布在网上，是必要的活动。在C/S体系结构下，装有SVG 
        Viewer的客户端要完成SVG文件实时更新，需要得到后端服务器中存储的数据。如果使用Adobe SVG Viewer和Batik的话，就能借助SVG标准之外的扩展函数getURL得到服务器中的数据。 
        </FONT></P>
      <P> 
      <TABLE cellSpacing=0 cellPadding=5 width="623" bgColor=#cccccc border=1>
        <TBODY>
          <TR> 
            <TD width="609" class="content">
<PRE><CODE>
function go() {
getURL('/2004/2/data.1',fn)；
}
function fn(obj) {
alert(obj.content)；
setTimeout('go()',5000)；
}
</FONT></CODE></PRE></TD>
          </TR>
        </TBODY>
      </TABLE>
      <P>当然了，后端服务器中数据源也可以是数据库。SVG API提供了克隆或生成新元素插入现有DOM的方法，我们可以编写Java程序访问服务器中的数据库，将元信息取出，生成新的SVG文件，或在现有SVG 
        DOM中进行修改，反映出元信息的变化。下面的代码是生成SVG文件的一个框架。 </FONT></P>
      <P> 
      <TABLE cellSpacing=0 cellPadding=5 width="624" bgColor=#cccccc border=1>
        <TBODY>
          <TR> 
            <TD width="610" class="content">
<PRE><CODE>
import org.apache.batik.dom.svg.SVGDOMImplementation;
import org.w3c.dom.Document;
import org.w3c.dom.Element;

DOMImplementation impl = SVGDOMImplementation.getDOMImplementation();
String svgNS = SVGDOMImplementation.SVG_NAMESPACE_URI;
Document doc = impl.createDocument(svgNS, &quot;svg&quot;, null);

// 得到SVG根元素
Element svgRoot = doc.getDocumentElement();

// 设置根元素的width和height属性值
svgRoot.setAttributeNS(null, &quot;width&quot;, &quot;400&quot;);
svgRoot.setAttributeNS(null, &quot;height&quot;, &quot;450&quot;);

// 访问数据库中的元信息，结合底层UML模板元件，生成新的SVG元素
……

// 把新元素连接在SVG根元素上
svgRoot.appendChild(…);
</FONT></CODE></PRE></TD>
          </TR>
        </TBODY>
      </TABLE>
      <P>其中，访问数据库部分内容被省略掉，在这里，关键是要结合UML模板元件，这样就可快速准确地生成新的SVG组元素。 
        </FONT></P>
      <P>SVG还支持一些其它的功能，例如滤镜、声音等，也可以用来描述UML图，在这里就不再多说了，有兴趣的读者可以翻阅相关书籍，这里仅仅是提出一些想法，实现时还需要不厌其烦地关注一些细节信息。 
        </FONT></P>
      <P><A name=5><SPAN class=atitle2>五、相关工具</FONT></SPAN></A><BR>
        现有的UML建模工具中，已有许多可以直接输出SVG格式，如Visio 2003就可以输出SVG文件。另外，Adobe的Illustrator9中也内嵌了SVG输出功能，Corel 
        Draw9提供输出SVG文件的插件，这些工具本身并不是UML建模工具，只是通用矢量绘图工具，使用它们进行UML建模，会比较吃力一些。而且，这些工具不能对复杂的交互功能建模，因此可作为基本绘制工具来使用。 
        </FONT></P>
      <P>常见的SVG浏览工具有Adobe、CSIRO和Corel的SVG Viewer，Bitstream Viewer，它们都是浏览器的插件。IBM也用Java语言制作了一个浏览SVG文件的工具SVG 
        View。除了IE以后，Amaya和Mozilla浏览器都内嵌支持SVG。 </FONT></P>
      <P>下表是常见的可以导出SVG格式的UML建模工具以及可用于UML建模的SVG编辑工具。 </FONT></P>
      <TABLE borderColor=#000000 cellSpacing=0 cellPadding=5 width="660" align=center border=1>
        <TBODY>
          <TR class="content"> 
            <TD width="213"><B>软件名称</FONT></B></TD>
            <TD width="421"><B>功能</FONT></B></TD>
          </TR>
          <TR class="content"> 
            <TD width="213"><A href="javascript:if(confirm('http://argouml.tigris.org/  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://argouml.tigris.org/'" tppabs="http://argouml.tigris.org/">ArgoUML</FONT></A></TD>
            <TD width="421">一种基于Java的开源UML OO建模工具，Argo是古希腊英雄Jason的战船。ArgoUML支持软件设计者的认知需求，广泛地支持开放标准，如UML、XMI、SVG、OCL等。</FONT></TD>
          </TR>
          <TR class="content"> 
            <TD width="213"><A href="javascript:if(confirm('http://xml.apache.org/batik/index.html  \n\nThis file was not retrieved by Teleport Pro, because it is addressed on a domain or path outside the boundaries set for its Starting Address.  \n\nDo you want to open it from the server?'))window.location='http://xml.apache.org/batik/index.html'" tppabs="http://xml.apache.org/batik/index.html">Batik 
              1.1 SVG Toolkit</FONT></A></TD>
            <TD width="421">Apache Batik工具包提供JAVA组件创建（SVGGraphics2D）、浏览（JSVGCanvas）和转换（Transcoder）SVG。</FONT></TD>