2004469.htm

UML基础(好)

      <P>也可以嵌套在网页中使用，如下：</FONT></P>
      <P> 
      <TABLE cellSpacing=0 cellPadding=5 width="650" bgColor=#cccccc border=1>
        <TBODY>
          <TR> 
            <TD width="952" class="content">
<PRE><CODE>
&lt;embed width=&quot;320&quot; height=&quot;240&quot; type=&quot;image/svg-xml&quot; id=&quot;svg&quot; pluginspage=&quot;http://www.adobe.com</FONT></CODE></PRE>
              <PRE><CODE>/svg/viewer/install/&quot; src=&quot;default.svg&quot; &gt;
&lt;/embed&gt;
</FONT></CODE></PRE></TD>
          </TR>
        </TBODY>
      </TABLE>
      <P>一般说来，在绘制UML图的时候，主体很少会用中文进行描述，但在注释中就难免需要使用中文。SVG目前还不支持中文编码，在遇到中文字符的时候，需要使用UTF-8编码，这样就可以有效避免不同的语言环境下的字符编码问题。下面就绘制UML图的过程中，SVG技术带来的一些好处进行探讨。 
        </FONT></P>
      <P><SPAN class=atitle3>* 动态显示注解信息</SPAN><BR>
        对UML图进行注解是有必要的。我们可以在UML图下面写上整段整段的注解，但这样做似乎针对性不强，不容易把事物讲清楚。现在好的方法是把事物按照组成部分细分，并针对性地进行说明。就如通用软件的工具提示一样，我们也可以利用SVG在UML图上实现近似功能。 
        </FONT></P>
      <P>SVG把图元看作一个个对象，并且提供DOM接口可直接访问对象及其属性，SVG亦提供了事件响应函数可获取界面、鼠标以及一些自定义的事件消息。有了这些支持，再加上SVG的对象分组功能（&lt;g&gt;分组标签）以及JavaScipt或Java绑定，就可以顺利地完成动态显示注解信息的功能。 
        </FONT></P>
      <P>以前面的包代码为例，来看一下如何利用JavaScipt动态显示注解信息。 </FONT></P>
      <P> 
      <TABLE cellSpacing=0 cellPadding=5 width="666" bgColor=#cccccc border=1>
        <TBODY>
          <TR> 
            <TD width="652" class="content">
<PRE><CODE>
&lt;script&gt;&lt;![CDATA[
function show_note(evt) {
var SVGDoc = evt.getTarget().getOwnerDocument();
var note = SVGDoc.getElementById(&quot;note&quot;);
var style = note.getStyle();
		
style.setProperty(&quot;visibility&quot;, &quot;visible&quot;);
}
]]&gt;&lt;/script&gt;
	
	&lt;g id=&quot;package&quot; onclick=&quot;show_note(evt)&quot;&gt;
		包模板代码，此处省略
	&lt;/g&gt;
	&lt;g id=&quot;note&quot; x=&quot;100&quot; y=&quot;100&quot; style=&quot;visibility:hidden&quot; desc=&quot;note info&quot;&gt;
		注解代码，此处省略
	&lt;/g&gt;
</FONT></CODE></PRE></TD>
          </TR>
        </TBODY>
      </TABLE>
      <P>在上面这段代码中，包含两个分组对象，一个是待注解的对象，另外一个是注解本身。前面的一段JavaScript代码的功能是处理待注解对象的点击事件，显示注解对象。注解对象可以选择点击注解对象本身或再次点击待注解对象进行关闭，代码与此段JavaScript代码相似。 
        </FONT></P>
      <P>另外，还可以在待注解对象与注解对象之间建立一条虚线，表示两者之间有关系。 </FONT></P>
      <P> 
      <TABLE cellSpacing=0 cellPadding=5 width="667" bgColor=#cccccc border=1>
        <TBODY>
          <TR> 
            <TD width="749" class="content">
<PRE><CODE>
&lt;path d=&quot;M5,5 C5,45 45,45 45,5&quot; style=&quot;stroke:red; fill:none; stroke-linecap:but; stroke-dash</FONT></CODE></PRE>
              <PRE><CODE>array:5,3,2&quot;/&gt;
</FONT></CODE></PRE></TD>
          </TR>
        </TBODY>
      </TABLE>
      <P>其中路径中的M表示Moveto（移动到），C表示Curve（贝赛尔曲线控制）。虚线也可跟随注解对象同时显示或消隐。 
        </FONT></P>
      <P><SPAN class=atitle3>* 以Highlight + Slide方式讲解UML图</SPAN><BR>
        有时我们需要给别人讲解UML图，那么除了具备上面的注解功能之外，还需拥有高亮以及幻灯显示等功能，SVG可以轻松地做到这一点。 </FONT></P>
      <P> 
      <TABLE cellSpacing=0 cellPadding=5 width="1" bgColor=#cccccc border=1 height="370">
        <TBODY>
          <TR> 
            <TD width="1064" height="358" class="content">
<PRE><CODE>
&lt;script&gt;&lt;![CDATA[
function highlight(evt) {
var object = evt.getTarget();
var style = object.getStyle();
		
style.setProperty(&quot;fill&quot;, &quot;red&quot;);
}
function restore(evt) {
var object = evt.getTarget();
var style = object.getStyle();
		
style.setProperty(&quot;fill&quot;, &quot;#ffffff&quot;);
}
]]&gt;&lt;/script&gt;
&lt;rect x=&quot;14&quot; y=&quot;14&quot; width=&quot;90&quot; height=&quot;21&quot; style=&quot;fill:#ffffff;stroke:#ffffff;stroke-width:1&quot; 
onmouseover=&quot; highlight(evt) &quot; onmouseout=&quot;restore(evt)&quot;/&gt;
&lt;/rect&gt;
</FONT></CODE></PRE></TD>
          </TR>
        </TBODY>
      </TABLE>
      <P>也可以这样：</FONT></P>
      <P> 
      <TABLE cellSpacing=0 cellPadding=5 width="526" bgColor=#cccccc border=1>
        <TBODY>
          <TR> 
            <TD width="672" class="content">
<PRE><CODE>
&lt;rect x=&quot;14&quot; y=&quot;14&quot; width=&quot;90&quot; height=&quot;21&quot; style=&quot;fill:#ffffff;stroke:#ffffff;stroke-wid
th:1&quot; /&gt;
&lt;set attributeName=&quot;fill&quot; from=&quot;#ffffff &quot; to=&quot;red&quot; begin=&quot; mouseover&quot; end=&quot; mouseout&quot;/&gt;
&lt;/rect&gt;
</FONT></CODE></PRE></TD>
          </TR>
        </TBODY>
      </TABLE>
      <P>幻灯片都是以Slide方式一页一页进行演示的，我们如果要讲解一个软件系统，或者说交付系统设计方案，也可以直接使用SVG来完成。在SVG中，结合&lt;a&gt;标签或&lt;set&gt;标签，和xlink:href 
        属性一起可以建立一个链接，这个功能使得Slide方式得以实施。结合JavaScript函数setTimeout可实现自动Slide Show。 
        </FONT></P>
      <P> 
      <TABLE cellSpacing=0 cellPadding=5 width="611" bgColor=#cccccc border=1>
        <TBODY>
          <TR> 
            <TD width="597" class="content">
<PRE><CODE>
&lt;svg&gt;
&lt;a xlink:href=&quot;http://…/slide_1.svg&quot;/&gt;
	…
&lt;/a&gt;
&lt;/svg&gt;
</FONT></CODE></PRE></TD>
          </TR>
        </TBODY>
      </TABLE>
      <P>或</FONT></P>
      <P> 
      <TABLE cellSpacing=0 cellPadding=5 width="613" bgColor=#cccccc border=1>
        <TBODY>
          <TR> 
            <TD width="599" class="content">
<PRE><CODE>
&lt;g id=&quot;object&quot;&gt;