通过VML技术及 XSLT技术实现WEB图形化处理界面.

       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) }

</style>

</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>

<tr>

<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

E8软件提升企业战略执行力
http://www.chinae8.net
流程银行QQ群 :74080032
【流程管理】微信公众号：e8flow

通过VML技术 及 XSLT技术实现WEB图形化处理界面.

通过VML技术及 XSLT技术实现WEB图形化处理界面.