安装Silverlight

开发Silverlight

chegan 的blog

使用silverlight构建一个工作流设计器(二十)-增加标签(上)

源代码下载:http://www.shareidea.net/opensource.htm
在线演示:http://www.shareidea.net/workflow.htm

视频教程: http://www.shareidea.net/video/sharedesigner/sharedesigner.html

QQ群:85444465

最近不断出差,设计器功能更新很慢,抱歉。今天把新增的标签功能说一下吧。

在规则中,为了对规则进行说明,可以给规则类增加一个TextBlack来对规则进行注释,之前的程序也是这么做的,如下图所示:

但是这样的注释有一个缺点,不能手动调整位置,而是只能根据规则的位置自动设置本文的位置,有时候这个自动设置的位置不是我们希望的位置。为了解决这个问题,我们对工作流的配置增加一个“标签”类,这个类是独立于规则之外的,专门用于对规则进行注释说明的类。另外,这个标签只是用于工作流图形的显示,并不涉及到流程属性,因为不需要做存储到数据库的方法,只保存在xml配置文件里面就可以了。

20.1 增加标签类
在vs.net中新建一个xaml文件,将文件名称修改为Label.xaml,这个类就是我们的标签类,这个类中有两个主要的内容,如下所示:

自贺获得DEV-WOW 2009微软开发者大赛开发奖

今早收到微软邮件,得知获得DEV-WOW 2009微软开发者大赛开发奖,内容如下:

您好!恭喜您在DEV-WOW 2009微软开发者大赛中脱颖而出,凭借“基于silverlight的工作流设计”作品,获得了我们的开发大奖——微软无线鼠标1个。

为了能够及时准确地将礼品邮寄到您的手中,请认真并详细的将联系方式按附件模板要求进行提交,我们会在收到您的确认后的2个工作日内安排邮寄,谢谢!

任何问题,请联系我们devwow@microsoft.com,谢谢!

特留念自贺。相关系列文章如下:
文章连接:使用silverlight构建一个工作流设计器
源代码下载:http://www.shareidea.net/opensource.htm

在线演示:http://www.shareidea.net/workflow.htm

视频教程: http://www.shareidea.net/video/sharedesigner/sharedesigner.html

QQ群:85444465

使用silverlight构建一个工作流设计器(十九)-规则与活动的交点的平滑移动

源代码下载:http://www.shareidea.net/opensource.htm
在线演示:http://www.shareidea.net/workflow.htm

视频教程: http://www.shareidea.net/video/sharedesigner/sharedesigner.html

QQ群:85444465

19.1 规则和活动交点的平滑移动
在之前的版本中,规则和活动的关联,如果活动图形是矩形或者菱形,那么系统只定义了4个关联点,分别在上下左右,如下图所示:

这样的关联设定也可以用,但还不是很完美,经过改进,现在实现为两个活动的中间连线与活动的相交点。如果拖动活动或者规则,那么这个交点就会平滑的移动,不会像之前那样在4个点之间跳动了,如下图所示:

这个功能的实现不复杂,主要是分析好各种关系就可以了。下面以矩形图活动为例,具体描述一下相应的思路和代码。如下图所示:

现在已知起始点坐标与终点坐表,以及活动A的长和宽,求从起始点到终点的连线和活动A的交点。这是一个很简单的平面几何算数题,我们需要注意的是当起始点坐标和终点坐表的相对位置不同时(例如,起始点在终点的左上、左下、右上、右下),计算公式稍有变化。下面的代码具体描述了计算方法。

使用silverlight构建一个工作流设计器(十八)-持久化数据到数据库—服务器段功能实现

源代码下载:http://www.shareidea.net/opensource.htm

在线演示:http://www.shareidea.net/workflow.htm

视频教程: http://www.shareidea.net/video/sharedesigner/sharedesigner.html

QQ群:85444465

十八、保存到数据库—服务器段功能实现

17.3 服务器端代码实现
服务器端的功能是将数据保存到数据库,以及从数据库中取出xml描述文件返回给客户端。本文使用LINQ to Sql Classes的方法对数据库进行操作。如下图所示,增加一个linq的类

然后在左边的数据库链接管理器中,增加一个数据库链接,如下图所示:

剩下的工作就是编写更新和获取工作流xml描述的代码了。

l 获取工作流xml描述

///

/// 获取工作流xml描述

///

///
流程ID

///

使用silverlight构建一个工作流设计器(十七)-持久化数据到数据库—设计webservices接口

源代码下载:http://www.shareidea.net/opensource.htm

在线演示:http://www.shareidea.net/workflow.htm

视频教程: http://www.shareidea.net/video/sharedesigner/sharedesigner.html

QQ群:85444465

在开始之间,先说下程序增加的一个小功能,就是给容器增加网格线的功能,使得容器看上去类似下面的样子

当然可以有两种方法来实现,一种就是使用背景图片,但本文一贯的原色就是少用图片,多用silverlight的画图功能来实现,这些网格都可以使用xaml中的Line对象来实现。为此我们需要动态设定一个Canvas,然后把这些动态生成的Line对象添加到Canvas中,最后再把Canvas添加到容器里面,这里讲的比较简单,但是在程序中,还需要考虑回滚,Zindex的影响。下面的代码描述了动态增加网格线的功能。

Code
GridLinesContainer.Children.Clear();
SolidColorBrush brush = new SolidColorBrush();

使用silverlight构建一个工作流设计器(十六)-持久化数据到数据库—数据库结构

源代码下载:http://www.shareidea.net/opensource.htm

在线演示:http://www.shareidea.net/workflow.htm

视频教程: http://www.shareidea.net/video/sharedesigner/sharedesigner.html

QQ群:85444465
一些小的修改:

l 增加对Ctrl +Y(重复) 的支持

l 修改删除对象后右键菜单的bug

l 修改多文化支持的一些bug

16.1 数据结构

目前的流程信息没有保存到任何一个可持久化的环境中,根据网友建议,增加存储工作流xml文件的功能。这个功能使用数据库来实现,您也可以有更多的持久化方式。

根据工作流引擎的实现不同,有些引擎只需要xml文件配置就可以了,有些引擎需要建立数据库的模型。在本文中,假设工作流引擎是跟数据库相关的。

整个持久化流程是这样的:

l 从使用webservices从服务器下载相应的流程xml描述(或者新建一个流程)

l 在客户端使用流程设计器进行流程设计或者修改,此时任何修改都在本地完成

使用silverlight构建一个工作流设计器(十五)(缩放流程图)

源代码下载:http://www.shareidea.net/opensource.htm

在线演示:http://www.shareidea.net/workflow.htm

视频教程: http://www.shareidea.net/video/sharedesigner/sharedesigner.html

QQ群:85444465

当流程过于复杂,流程环节过多时,在一个屏幕中不能完全显示整个流程图,需要拖拽滚动条来显示。这对于了解整个流程的概况有些不便,联想到一些看图软件的缩放功能,如果可以给流程增加缩放,那么就可以很好的解决流程图过于复杂而不便查看的问题了。

十、增加流程图缩放功能
流程缩放要考虑活动和规则的缩放,对于活动和规则,他们的缩放方式稍有不同。

对于活动,缩放会影响两个地方,一个是活动的位置,也就是相对于容器的Top和Left属性。另一个是活动本身的图形的大小。

对于规则,缩放只会影响到规则的位置。如果规则关联到活动,那么规则的位置不进行缩放计算,而是跟随关联的活动进行位置的改变。

首先要给IElement接口增加一个缩放方法,void Zoom(double zoomDeep),这个方法中的参数zoomDeep说明了缩放的比例。下面分别在活动和规则中实现这个方法。

10.1 活动缩放

使用silverlight构建一个工作流设计器(十四)(动态生成流程图片下载_下)

代码下载:http://www.shareidea.net/opensource.htm

在线演示:http://www.shareidea.net/workflow.htm

视频教程: http://www.shareidea.net/video/sharedesigner/sharedesigner.html

QQ群:85444465

在上篇文章中,韦恩卑鄙提出了silverlight3.0版本中增加了本地动态生成图片的方法,我又搜索了一下,的确可以了,您可以访问http://developer.51cto.com/art/200903/115552.htm查看详细信息,特此感谢韦恩卑鄙。

上文已经搭建除了一个生成图片的框架,但是还没有完成具体的代码,本章将继续上一章的内容。本章内容很简单,如果您不想往下继续看了,请下载源代码看一下实际效果吧。

九、动态生成流程图片
9.4 生成图片
为了动态生成图片,我们需要使用到两个主要的类:

l Bitmap:是用于处理由像素数据定义的图像的对象,它封装 GDI+ 位图,此位图由图形图像及其属性的像素数据组成。

l Graphics:它封装一个 GDI+ 绘图图面。我们主要使用这个提供的各种方法来绘制矩形,椭圆,直线,文字等。

使用silverlight构建一个工作流设计器(十三)(动态生成流程图片下载_上)

首先庆祝一下源代码在codeplex上下载量超过1000

另外本演示程序放在微软免费的silverlight hosting上面,您也可以申请免费的空间。

地址在http://silverlight.live.com/

技术支持QQ群:85444465

源代码下载:http://www.shareidea.net/opensource.htm

在线演示:http://www.shareidea.net/workflow.htm

视频教程: http://www.shareidea.net/video/sharedesigner/sharedesigner.html

9.1问题描述
今天有网友问,这个工作流设计器能不能生成对应的图片呢?我想不出生成图片能有什么作用,如果想用图片,我们大可以使用拷屏的方法保存到画图中,然后再保存在系统文件夹。不过作为一种尝试,不妨去试着去实现这个功能。

9.2遇到的困难
动态生成图片,首先想到的就是使用System.Drawring相关的类,但在silverlight中并没有提供对System.Drawring的支持,网上查了一下,得到的答案是微软并没有打算在silverlight中提供对System.Drawring的支持。

另外,在silverlight中无法直接进行文件的保存操作。

使用silverlight构建一个工作流设计器(十二)(附源代码下载、在线演示、视频教程)

源代码下载:http://www.shareidea.net/opensource.htm

在线演示:http://www.shareidea.net/workflow.htm

视频教程: http://www.shareidea.net/video/sharedesigner/sharedesigner.html

技术支持QQ群:85444465

本章包含以下内容:

l 新的活动图形,图形更加清晰漂亮.

l 增加对上下左右键的支持(选中活动或者规则后,使用方向键进行移动,按住Ctrl时,每次移动的距离加大).不过有一个问题,无法捕获方向键的按下事件,却能捕获松开鼠标事件,不知为何

l 实现我们第十章讲到的变化皮肤的方法。

本章上面的两点更新没有什么值的要说的,下面实现我们在第十章讲的变幻皮肤的方法,

如果您还不了解变幻皮肤的原理,请参考第十章的内容。

八、实现更换皮肤功能
我们对Activity.Xaml类来做试验,步骤如下: