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
"
]);
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
XmlDocument xmlDoc
=
new
XmlDocument();
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
Equ_DeskDP ee
=
new
Equ_DeskDP();
string
sXml
=
ee.GetEquAllHistoryXml(lngID,
125
,
500
,
1500
,
1000
);
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
xmlDoc.LoadXml(sXml);
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
XPathNavigator nav
=
xmlDoc.DocumentElement.CreateNavigator();
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
XslTransform xmlXsl
=
new
XslTransform();
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
xmlXsl.Load(Server.MapPath(
"
../xslt/EquImageHistory.xslt
"
));
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
XsltArgumentList xslArg
=
new
XsltArgumentList();
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
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
>
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
v\:
*
{ Behavior: url(#default#VML) }
</
style
>
<
body style
=
"
font-size:9pt;
"
>
<
div id
=
'
divShowEquShot
'
style
=
'
display: none; position:absolute; width:520px; left: 120; top: 90; z-index:2
'
>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
</
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
>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<
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
>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<
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
>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<
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
>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<
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
>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<
xsl:attribute name
=
"
onmouseout
"
>
<
xsl:text
>
javascript:hideMe(
"
divShowEquShot
"
,
"
none
"
);
</
xsl:text
>
</
xsl:attribute
>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<
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
>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
</
tr
>
</
table
>
</
v:Rect
>
</
xsl:template
>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
<
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
>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
</
xsl:stylesheet
>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
E8.Net工作流平台为企业应用开发提供了一个起点,欢迎访问 :
http://***/productFlow.htm
E8.Net工作流平台 提升企业战略执行力
ITIL与ITSM QQ群4:
58342347 .NET企业应用开发与工作流QQ群:
17110384 53284682(已满) 42302450(已满)
http://***/