通过VML技术 及 XSLT技术实现WEB图形化处理界面
2008-06-16 09:39
267 查看
C/S结构的程序实现图形化的界面是相对容易的,因为界面的布局 及操作控制均方便很多,WEB程序实现图形化的操作界面最复杂的在于元素定位上,VML的全称是Vector Markup Language(矢量可标记语言)，矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量,结合脚本可以在WEB上实现一些动态的效果.
E8.Net工作流架构下有一个应用产品,E8.HelpDesk FOR ITSM,中展示资产变更历史就用到了这个技术. (呵呵,在一次竟标中,这个图为PK掉了一个国外的产品起到了很大作用)
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>
</style>
<body style="font-size:9pt;" >
<div id='divShowEquShot' style='display: none; position:absolute; width:520px; left: 120; top: 90; z-index:2'>
</div>
<v:group id="flowchartshow" style="position:absolute;width: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; width: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; width:</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; width:100%; height:100%; ">
<tr>
<td style="width: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; width: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://***/productFlow.htm
E8.Net工作流架构下有一个应用产品,E8.HelpDesk FOR ITSM,中展示资产变更历史就用到了这个技术. (呵呵,在一次竟标中,这个图为PK掉了一个国外的产品起到了很大作用)
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>
</style>
<body style="font-size:9pt;" >
<div id='divShowEquShot' style='display: none; position:absolute; width:520px; left: 120; top: 90; z-index:2'>
</div>
<v:group id="flowchartshow" style="position:absolute;width: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; width: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; width:</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; width:100%; height:100%; ">
<tr>
<td style="width: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; width: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://***/productFlow.htm
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 通过VML技术 及 XSLT技术实现WEB图形化处理界面.
- 通过VML技术 及 XSLT技术实现WEB图形化处理界面.
- Web开发中的缓存技术之三：通过ETag实现缓存处理（ASP.NET MVC版）
- 结合ajax技术通过web服务实现dotnet非链式工厂模式
- [转载]Web开发中的缓存技术:通过ETag实现缓存处理（Asp.Net)
- 通过nginx实现内网hadoop集群对外访问web界面
- JAVA与.NET“.NET技术”的相互调用——通过Web服务实现相互调用
- 有了html页面，进行二次显示，通过html、JavaScript、jQuery的ajax三种技术，我可以实现任何界面效果
- Java Web中的分页显示——通过界面实现
- HTML5技术实现Web图形图像处理——WebPhotoshop精简版
- 在Web界面中实现Excel数据大量导入的处理方式
- 一起谈.NET技术，JAVA与.NET的相互调用——通过Web服务实现相互调用
- Android实现图文混排（2） 通过webview实现 并实现点击 图片处理事件
- 安卓通过webview给H5界面实现交互数据
- IOS---通过控件实现界面跳转
- 由JavaScript技术实现的web小游戏（不含网游）
- 自己的web服务器项目-实现多线程处理(三)
- [Jweb] 第一个通过 tomcat 配置，浏览器访问的 web 界面
- 通过一个Socket例子理解Http协议（实战Java Web服务器－－使用HTTP协议和JAVA类实现）
- 转:C#通过WebClient/HttpWebRequest实现http的post/get方法