C/S结构的程序实现图形化的界面是相对容易的,因为界面的布局 及操作控制均方便很多,WEB程序实现图形化的操作界面最复杂的在于元素定位上,VML的全称是Vector Markup Language(矢量可标记语言)，矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量,结合脚本可以在WEB上实现一些动态的效果.
E8.Net工作流架构下有一个应用产品,E8.HelpDesk FOR ITSM,中展示资产变更历史就用到了这个技术. (呵呵,在一次竟标中,这个图为PK掉了一个国外的产品起到了很大作用)
主要实现的思路就是是利用VML结合XSLT输出 及 E8.NET工作流架构提供的一些基础组件,非常方便的就实现了.
C#代码如下:
long lngID = 0; if (this.Request.QueryString["id"] != null) lngID = long.Parse(Request.QueryString["id"]); XmlDocument xmlDoc = new XmlDocument(); Equ_DeskDP ee = new Equ_DeskDP(); string sXml = ee.GetEquAllHistoryXml(lngID, 125, 500, 1500, 1000); xmlDoc.LoadXml(sXml); XPathNavigator nav = xmlDoc.DocumentElement.CreateNavigator(); XslTransform xmlXsl = new XslTransform(); xmlXsl.Load(Server.MapPath("../xslt/EquImageHistory.xslt")); XsltArgumentList xslArg = new XsltArgumentList(); xmlXsl.Transform(nav, xslArg, Response.OutputStream);XSLT代码如下:
<?xml version="1.0" encoding="UTF-8" ?><xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:ms="urn:schemas-microsoft-com:xslt" xmlns:v="urn:schemas-microsoft-com:vml"> <xsl:template match="/"> <html> <style>
v\:* { Behavior: url(#default#VML) }
v\:
</style> <body style="font-size:9pt;" > <div id='divShowEquShot' style='display: none; position:absolute; 520px; left: 120; top: 90; z-index:2'> </div> <v:group id="flowchartshow" style="position:absolute;1000px;height:1000px;" coordsize="15000,15000"> <xsl:apply-templates select="EQURELATION/EQU"> </xsl:apply-templates> <xsl:apply-templates select="EQURELATION/LINK"> </xsl:apply-templates> </v:group> </body> </html> </xsl:template> <xsl:template match="EQU"> <xsl:call-template name="EQU_Text"> </xsl:call-template> <xsl:choose> <xsl:when test="IMAGESRC!=0"> <xsl:call-template name="EQU_Image"> </xsl:call-template> </xsl:when> </xsl:choose> </xsl:template> <xsl:template match="LINK"> <v:PolyLine filled="false" style="position:absolute"> <xsl:attribute name="POINTS"> <xsl:for-each select="EXTRAPOINTS/POINT"> <xsl:value-of select="@X"></xsl:value-of> <xsl:text>,</xsl:text> <xsl:value-of select="@Y"></xsl:value-of> <xsl:text> </xsl:text> </xsl:for-each> </xsl:attribute> <v:stroke> <xsl:attribute name="dashstyle"> <xsl:value-of select="_DRAWSTYLE"></xsl:value-of> </xsl:attribute> </v:stroke> </v:PolyLine> <v:Line style="position:absolute; "> <xsl:attribute name="from"> <xsl:value-of select="EXTRAPOINTS/POINT[count(../*)-1]/@X"></xsl:value-of> <xsl:text>,</xsl:text> <xsl:value-of select="EXTRAPOINTS/POINT[count(../*)-1]/@Y"></xsl:value-of> </xsl:attribute> <xsl:attribute name="to"> <xsl:value-of select="EXTRAPOINTS/POINT[last()]/@X"></xsl:value-of> <xsl:text>,</xsl:text> <xsl:value-of select="EXTRAPOINTS/POINT[last()]/@Y"></xsl:value-of> </xsl:attribute> <v:stroke dashstyle="solid"> <xsl:attribute name="dashstyle"> <xsl:value-of select="_DRAWSTYLE"></xsl:value-of> </xsl:attribute> <xsl:attribute name="StartArrow"> <xsl:value-of select="_ARROWDST"></xsl:value-of> </xsl:attribute> </v:stroke> </v:Line> <xsl:if test="TEXT"> <v:Rect filled="f" stroked="f"> <xsl:attribute name="style"> <xsl:text>position:absolute; z-index:100; height:3000; 2500; left:</xsl:text> <xsl:value-of select="TEXT/@X"></xsl:value-of> <xsl:text>; top:</xsl:text> <xsl:value-of select="TEXT/@Y"></xsl:value-of> </xsl:attribute> <v:Textbox inset="0,0,0,0"> <xsl:attribute name="onclick"> <xsl:text>javascript:LookChangeDetail('</xsl:text> <xsl:value-of select="@FLOWID"></xsl:value-of> <xsl:text>');</xsl:text> </xsl:attribute> <xsl:attribute name="id"> <xsl:text>EquTD</xsl:text> <xsl:value-of select="@EQUID"></xsl:value-of> </xsl:attribute> <a> <xsl:attribute name="href"> <xsl:text>#</xsl:text> </xsl:attribute> <xsl:attribute name="name"> <xsl:text>EquLnk</xsl:text> <xsl:value-of select="@FLOWID"></xsl:value-of> </xsl:attribute> <xsl:value-of select="TEXT"></xsl:value-of> </a> <xsl:value-of select="@TEXTSAVE"></xsl:value-of> </v:Textbox> </v:Rect> </xsl:if> </xsl:template> <xsl:template name="EQU_Text"> <v:Rect filled="f" stroked="f"> <xsl:attribute name="style"> <xsl:text>position:absolute; z-index:30; </xsl:text> <xsl:value-of select="@WIDTH"></xsl:value-of> <xsl:text>;height:</xsl:text> <xsl:value-of select="@HEIGHT + 30"></xsl:value-of> <xsl:text>;left:</xsl:text> <xsl:value-of select="@LEFT"></xsl:value-of> <xsl:text>;top:</xsl:text> <xsl:value-of select="@TOP"></xsl:value-of> <xsl:text>; </xsl:text> </xsl:attribute> <table style="font-size:9pt; 100%; height:100%; "> <tr> <td style="100%; height:100%; color:blue; text-align:center; vertical-align:bottom; "> <xsl:attribute name="onmouseover"> <xsl:text>javascript:GetEquShot(this,'</xsl:text> <xsl:value-of select="@EQUID"></xsl:value-of> <xsl:text>','</xsl:text> <xsl:value-of select="@VERSION"></xsl:value-of> <xsl:text>');</xsl:text> </xsl:attribute> <xsl:attribute name="onmouseout"> <xsl:text>javascript:hideMe("divShowEquShot","none");</xsl:text> </xsl:attribute> <xsl:attribute name="onclick"> <xsl:text>javascript:LookEquDetail(this,'</xsl:text> <xsl:value-of select="@EQUID"></xsl:value-of> <xsl:text>','</xsl:text> <xsl:value-of select="@VERSION"></xsl:value-of> <xsl:text>');</xsl:text> </xsl:attribute> <xsl:attribute name="id"> <xsl:text>EquTD</xsl:text> <xsl:value-of select="@EQUID"></xsl:value-of> </xsl:attribute> <a> <xsl:attribute name="href"> <xsl:text>#</xsl:text> </xsl:attribute> <xsl:attribute name="name"> <xsl:text>EquLnk</xsl:text> <xsl:value-of select="@EQUID"></xsl:value-of> </xsl:attribute> <xsl:value-of select="TEXT"></xsl:value-of> </a> </td> </tr> </table> </v:Rect> </xsl:template> <xsl:template name="EQU_Image"> <v:image> <xsl:attribute name="id"> <xsl:text>IMG</xsl:text> <xsl:value-of select="@EQUID"></xsl:value-of> </xsl:attribute> <xsl:attribute name="src"> <xsl:value-of select="IMAGESRC"></xsl:value-of> </xsl:attribute> <xsl:attribute name="style"> <xsl:text>position:absolute; z-index:20; 480; height:480; left:</xsl:text> <xsl:value-of select="@LEFT + @WIDTH div 2 - 240"></xsl:value-of> <xsl:text>; top:</xsl:text> <xsl:value-of select="@TOP + 15"></xsl:value-of> </xsl:attribute> </v:image> </xsl:template></xsl:stylesheet>E8.Net工作流平台为企业应用开发提供了一个起点，欢迎访问 ：http://www.feifanit.com.cn/productFlow.htm