论文部分内容阅读
[摘 要]根据组态图形软件中不同组件的设计需要，以及用户对软件界面不同风格的需求，本文基于WPF开发技术，利用MVVM模式设计组态图形界面软件解决方案，提高了软件的灵活性、复用性和可移植性，便于软件系统的升级管理。通过设计实例详细介绍了MVVM设计思想。实践证明该模式设计的组态图形界面开发软件独立性强耦合度低，能合理的实现资源配置，以满足用户体验的不同需求。
[关键词]组态图形；MVVM模式；用户界面
中图分类号：TP316；TP311.52 文献标识码：B 文章编号：1009-914X（2014）48-0127-02
引言
在工业控制技术不断向前发展的背景下，工控技术与计算机技术的相互渗透与融合形成了工业计算机控制领域，组态软件就是这类专业性领域的应用产物。组态软件实质上是模块化可自由配置[1]的二次开发平台。工业控制中，用户可以根据自己的需要组合成任意组态[2]，用于对系统或过程进行监视、控制和管理。考虑到组态图形软件对不同组件的设计需要，用户对软件不同界面风格的需求。本文引入设计模式的概念[3]。利用MVVM模式中的数据属性绑定和命令属性绑定的特性实现软件开发中前台界面逻辑与后台业务逻辑的剥离，这种设计特点不仅能够实现软件的即插即用，而且便于程序员的维护以及UI设计人员的完善与改进，满足不同客户需求和节约团队开发成本。
1 MVVM设计模式
MVVM（Model-View-ViewModel）模式[6]总体分为三个层面：视图（View）、视图模型（ViewModel）、模型（Model），模式结构如图1所示。它是由MVC、MVP[4]设计模式与WPF（Windows Presentation Foundation）技术结合的一种新型架构，适用基于WPF或Silverlight项目具有一定规模的程序或精美图形界面的开发。WPF实质是一种模型驱动开发方式，数据是核心，而UI程序就是用Model模型数据来驱动的[5]。
这三层中，View视图层用于封装UI界面与UI逻辑，它为用户提供了丰富的图形化界面与精彩的视觉体验，是用户与程序交互的接口。View层上定义了一切用于人机交互的结构外观，用户可以在该层上进行数据更新和特定操作。Model模型层用于封装业务逻辑和数据，是对数据本身的属性和自身的行為状态进行描述。最关键的是ViewModel视图模型层，它是View和Model联系的通道，在这两者之间起到承上启下的作用。用户和界面之间的交互是双向的，用户可以把操作施加给界面，而界面同样会把数据反馈给用户。在View和ViewModel进行交互时，利用两种不同的属性。第一种是数据属性，它们之间的传递是双向的，数据可以从View传递到ViewModel，而ViewModel的属性也可以传递到View。第二种是用户对View的操作产生的命令属性，命令属性之间的传递是单向的，命令属性只能从View传递到ViewModel，让ViewModel做出相应的反应。
2 MVVM模式的图形界面软件系统架构设计
组态图形开发系统采用“框架+控件模块”的形式进行设计。从结构上大体可分为：主体框架、软件菜单功能管理、工程文件管理、组态设计器、组件属性类管理和图片显示等模块。图2所示为图形软件系统框图。
软件系统框图说明：
软件主体框架：支撑软件运行的平台，程序每次启动运行即是对主体进行实例化的过程。
软件菜单功能管理：对整个软件进行管理控制，主要是通过菜单栏和工具栏中的各个工具来实现。
工程文件管理：对工程文件进行管理，包括工程文件、子文件的创建、删除，重命名等相关功能操作。
组态设计器：对各个图元组件进行编辑，自定义搭建工控组态软件模型，进行组态设计。
图片显示：显示用户所选择的图片内容。
组件属性类管理：对组态设计中的各个图元组件进行编辑，设定合适的属性，以适应组态模型的需求。
基于软件系统框图构建架构显示层模块化的 Views 类、ViewModels类和Models类。将上述软件功菜单能管理模块、工程文件管理模块、组态设计器模块和组件属性类管理模块分别封装在Views视图层下的四个不同类中，这四个模块是与用户交互的控件，通过添加用户控件可以得到。Views层采用层次模块化的方法来构建，一方面可保持同层次Views类之间的独立性，不同的功能模块可以由不同的团队开发、测试和维护[7]。另一方面，当系统需求发生变更时，需要添加或删除某个模块，可以直接从Views类层中更新或下架，层次清晰不易造成程序混乱。ViewModels中封装了对Views的业务逻辑的处理代码，所以相应的建立了与Views对应的四个模块的ViewModels类。对于Models而言，它不依赖于View和ViewModel，Model并不关心如何被显示或是如何被操作，它也不包含任何用户使用的与界面相关的逻辑。
为方便项目开发管理，还建立了项目工程需要的资源Resources文件为系统提供图片存储，以及辅助服务功能Services和数据存储Data等类，为软件系统提供与数据交互操作的接口和功能性实用工具。
在建立MVVM组态图形软件系统工程时，首先把组件、屏幕、文件管理、属性管理等对象抽象出来建立好Models，然后再利用Silverlight提供的INotifyPropertyChanged与ICommand接口，在ViewModels中建立起属性和集合的变更通信机制。从而使用户在视图上所做的操作都可以得到实时通知，让视图模型对象进行正确的业务操作。Models与ViewModels搭建完毕，最后对View层进行设计。MVVM模式的组态图形开发系统架构如图3所示。 3 系统实例分析
3.1 系统MVVM各层次的相关工作内容
Models层：Models中主要是组件Components，它封装了不同组件的各种属性，它们继承自共同的基类ComponentBase，其中包含了共有的数据字段、属性和操作数据的方法。另外，Models中还包含有Screen设计器屏幕属性、Project工程属性、ProjectFileItem工程文件项属性、UserImage用户图片属性以及Emues枚举项等属性类。它们用来对软件的几个主要模块的模型进行描述。
ViewModel层：内含与View相对应的四个ViewModel类，均继承自共有的基类ViewModelBase。另外还有一个ViewModelLocator类，它是ViewModel加载器。这个静态资源Locator定义在App.xaml里。通过在ViewModelLocator的构造函数中注册把各自的View和ViewModel联系起来。如SimpleIoc.Default.Register（）；把主框架的View和ViewModel相联。在ViewModel中提供了ICommand[8]接口，里面封装了各种Command操作命令。
Views层：View中利用 XAML 描述的Binding语句和DataContext语句实现 View 层和 ViewModel 层的关联， 绑定机制[9]将会为系统构建起View 层和 ViewModel 层之间的通信渠道。如MainWIndow中添加组件命令的绑定XAML代码如下：Command="{Binding Command_AddComponent，Mode=OneWay}"CommandParameter="Button">。{Binding Command_AddComponent}是命令绑定操作添加组件，Mode=OneWay表示仅当源属性发生更改时更新目标属性[10]。CommandParameter="Button"表示添加的组件类型参数是Button。所以当搭建好Model和ViewModel以后再来建立View就比较方便简捷。组态图形开发软件实例如4所示。
3.2 MVVM组态图形系统与传统模式的比较
MVVM组态图形开发系统与传统模式开发的组态软件进行比较，优点在于：在视图/逻辑分离的方式下，系统主窗体MainWIndow.cs下的后臺代码都被分解到各层中不同的类里，程序代码修改量相对较小，节约开发维护成本。缺点在于：MVVM模式比较依赖于WPF设计，脱离了WPF的MVVM模式将受制于其特有的Binding引擎特性。ViewModel的设计需要面向业务和数据，层次粒度的划分需根据系统的复杂程度来确定，可能造成文件混乱或臃肿，这也是MVVM的局限性所在。
4 结束语
基于MVVM模式的组态图形开发系统具有“高内聚，低耦合”的特点。其特有的数据绑定机制，能够很好的使界面与业务逻辑相隔离，各模块具有较好层次感和独立性。有效地提高了软件的通用性、灵活性、扩展性。代码复用率高，可移植性强，软件的开发赋有“万变不离其宗”的哲学意味。较大程度上减轻了程序开发人员的代码工作量，有利于团队开发设计和后期系统维护，值得研究应用和推广。
参考文献
[1] 李永科，李建增，田庆民，一种基于组态技术实现通用测试系统[J].计算机测量与控制，2005，13（8）
[2] YIN FEI，DING Weiming.Patterns research in the design of configuration software[J].Computer Measurement and Control，2005，13（3）：298-300.
[3] 陈云云，马建中，蒋泽军，基于插件的组态软件设计与实现[J].计算机测量与控制，2013，21（2）：436-438.
[4] 刘立，MVVM模式分析与应用[J]. Microcomputer Applications，Vol.28，No.12，2012.
[5] Leff A，Rayfield J T.Web-application development using the model/view/controller designpattern [C] / / Proceedings of fifth IEEE international conference on enterprise distributed object computing. [s.l.]：[ s.n.]，2001：118-127.
[6] Sacha Barber，MVVM Diagram Designer [EB/OL]. 2013.http：//www.codeproject.com/Articles/484616/MVVM-Diagram-Desiner.
[7] 李龙澍，华骁飞，Silverligh下的MVVM模式的应用[J].计算机技术与发展，2013，12（12）：204-207.
[8] MacDonald，M.著；王德才 译.WPF编程宝典—C#2010版/（美）[M].北京：清华大学出版社，2011.6.
[9] Building Enterprise Applications with Windows（R） Presentation Foundation and the Model View ViewModel Pattern-New from Microsoft Press. Targeted News Service （Mar 23， 2011）， p. n/a. 2011.
[10] 石怡， WPF 使用 XAML 实现对 SQL Server 数据绑定的方法[J].电脑开发与应用，2011.10：70-71.
[关键词]组态图形；MVVM模式；用户界面
中图分类号：TP316；TP311.52 文献标识码：B 文章编号：1009-914X（2014）48-0127-02
引言
在工业控制技术不断向前发展的背景下，工控技术与计算机技术的相互渗透与融合形成了工业计算机控制领域，组态软件就是这类专业性领域的应用产物。组态软件实质上是模块化可自由配置[1]的二次开发平台。工业控制中，用户可以根据自己的需要组合成任意组态[2]，用于对系统或过程进行监视、控制和管理。考虑到组态图形软件对不同组件的设计需要，用户对软件不同界面风格的需求。本文引入设计模式的概念[3]。利用MVVM模式中的数据属性绑定和命令属性绑定的特性实现软件开发中前台界面逻辑与后台业务逻辑的剥离，这种设计特点不仅能够实现软件的即插即用，而且便于程序员的维护以及UI设计人员的完善与改进，满足不同客户需求和节约团队开发成本。
1 MVVM设计模式
MVVM（Model-View-ViewModel）模式[6]总体分为三个层面：视图（View）、视图模型（ViewModel）、模型（Model），模式结构如图1所示。它是由MVC、MVP[4]设计模式与WPF（Windows Presentation Foundation）技术结合的一种新型架构，适用基于WPF或Silverlight项目具有一定规模的程序或精美图形界面的开发。WPF实质是一种模型驱动开发方式，数据是核心，而UI程序就是用Model模型数据来驱动的[5]。
这三层中，View视图层用于封装UI界面与UI逻辑，它为用户提供了丰富的图形化界面与精彩的视觉体验，是用户与程序交互的接口。View层上定义了一切用于人机交互的结构外观，用户可以在该层上进行数据更新和特定操作。Model模型层用于封装业务逻辑和数据，是对数据本身的属性和自身的行為状态进行描述。最关键的是ViewModel视图模型层，它是View和Model联系的通道，在这两者之间起到承上启下的作用。用户和界面之间的交互是双向的，用户可以把操作施加给界面，而界面同样会把数据反馈给用户。在View和ViewModel进行交互时，利用两种不同的属性。第一种是数据属性，它们之间的传递是双向的，数据可以从View传递到ViewModel，而ViewModel的属性也可以传递到View。第二种是用户对View的操作产生的命令属性，命令属性之间的传递是单向的，命令属性只能从View传递到ViewModel，让ViewModel做出相应的反应。
2 MVVM模式的图形界面软件系统架构设计
组态图形开发系统采用“框架+控件模块”的形式进行设计。从结构上大体可分为：主体框架、软件菜单功能管理、工程文件管理、组态设计器、组件属性类管理和图片显示等模块。图2所示为图形软件系统框图。
软件系统框图说明：
软件主体框架：支撑软件运行的平台，程序每次启动运行即是对主体进行实例化的过程。
软件菜单功能管理：对整个软件进行管理控制，主要是通过菜单栏和工具栏中的各个工具来实现。
工程文件管理：对工程文件进行管理，包括工程文件、子文件的创建、删除，重命名等相关功能操作。
组态设计器：对各个图元组件进行编辑，自定义搭建工控组态软件模型，进行组态设计。
图片显示：显示用户所选择的图片内容。
组件属性类管理：对组态设计中的各个图元组件进行编辑，设定合适的属性，以适应组态模型的需求。
基于软件系统框图构建架构显示层模块化的 Views 类、ViewModels类和Models类。将上述软件功菜单能管理模块、工程文件管理模块、组态设计器模块和组件属性类管理模块分别封装在Views视图层下的四个不同类中，这四个模块是与用户交互的控件，通过添加用户控件可以得到。Views层采用层次模块化的方法来构建，一方面可保持同层次Views类之间的独立性，不同的功能模块可以由不同的团队开发、测试和维护[7]。另一方面，当系统需求发生变更时，需要添加或删除某个模块，可以直接从Views类层中更新或下架，层次清晰不易造成程序混乱。ViewModels中封装了对Views的业务逻辑的处理代码，所以相应的建立了与Views对应的四个模块的ViewModels类。对于Models而言，它不依赖于View和ViewModel，Model并不关心如何被显示或是如何被操作，它也不包含任何用户使用的与界面相关的逻辑。
为方便项目开发管理，还建立了项目工程需要的资源Resources文件为系统提供图片存储，以及辅助服务功能Services和数据存储Data等类，为软件系统提供与数据交互操作的接口和功能性实用工具。
在建立MVVM组态图形软件系统工程时，首先把组件、屏幕、文件管理、属性管理等对象抽象出来建立好Models，然后再利用Silverlight提供的INotifyPropertyChanged与ICommand接口，在ViewModels中建立起属性和集合的变更通信机制。从而使用户在视图上所做的操作都可以得到实时通知，让视图模型对象进行正确的业务操作。Models与ViewModels搭建完毕，最后对View层进行设计。MVVM模式的组态图形开发系统架构如图3所示。 3 系统实例分析
3.1 系统MVVM各层次的相关工作内容
Models层：Models中主要是组件Components，它封装了不同组件的各种属性，它们继承自共同的基类ComponentBase，其中包含了共有的数据字段、属性和操作数据的方法。另外，Models中还包含有Screen设计器屏幕属性、Project工程属性、ProjectFileItem工程文件项属性、UserImage用户图片属性以及Emues枚举项等属性类。它们用来对软件的几个主要模块的模型进行描述。
ViewModel层：内含与View相对应的四个ViewModel类，均继承自共有的基类ViewModelBase。另外还有一个ViewModelLocator类，它是ViewModel加载器。这个静态资源Locator定义在App.xaml里。通过在ViewModelLocator的构造函数中注册把各自的View和ViewModel联系起来。如SimpleIoc.Default.Register
Views层：View中利用 XAML 描述的Binding语句和DataContext语句实现 View 层和 ViewModel 层的关联， 绑定机制[9]将会为系统构建起View 层和 ViewModel 层之间的通信渠道。如MainWIndow中添加组件命令的绑定XAML代码如下：Command="{Binding Command_AddComponent，Mode=OneWay}"CommandParameter="Button">。{Binding Command_AddComponent}是命令绑定操作添加组件，Mode=OneWay表示仅当源属性发生更改时更新目标属性[10]。CommandParameter="Button"表示添加的组件类型参数是Button。所以当搭建好Model和ViewModel以后再来建立View就比较方便简捷。组态图形开发软件实例如4所示。
3.2 MVVM组态图形系统与传统模式的比较
MVVM组态图形开发系统与传统模式开发的组态软件进行比较，优点在于：在视图/逻辑分离的方式下，系统主窗体MainWIndow.cs下的后臺代码都被分解到各层中不同的类里，程序代码修改量相对较小，节约开发维护成本。缺点在于：MVVM模式比较依赖于WPF设计，脱离了WPF的MVVM模式将受制于其特有的Binding引擎特性。ViewModel的设计需要面向业务和数据，层次粒度的划分需根据系统的复杂程度来确定，可能造成文件混乱或臃肿，这也是MVVM的局限性所在。
4 结束语
基于MVVM模式的组态图形开发系统具有“高内聚，低耦合”的特点。其特有的数据绑定机制，能够很好的使界面与业务逻辑相隔离，各模块具有较好层次感和独立性。有效地提高了软件的通用性、灵活性、扩展性。代码复用率高，可移植性强，软件的开发赋有“万变不离其宗”的哲学意味。较大程度上减轻了程序开发人员的代码工作量，有利于团队开发设计和后期系统维护，值得研究应用和推广。
参考文献
[1] 李永科，李建增，田庆民，一种基于组态技术实现通用测试系统[J].计算机测量与控制，2005，13（8）
[2] YIN FEI，DING Weiming.Patterns research in the design of configuration software[J].Computer Measurement and Control，2005，13（3）：298-300.
[3] 陈云云，马建中，蒋泽军，基于插件的组态软件设计与实现[J].计算机测量与控制，2013，21（2）：436-438.
[4] 刘立，MVVM模式分析与应用[J]. Microcomputer Applications，Vol.28，No.12，2012.
[5] Leff A，Rayfield J T.Web-application development using the model/view/controller designpattern [C] / / Proceedings of fifth IEEE international conference on enterprise distributed object computing. [s.l.]：[ s.n.]，2001：118-127.
[6] Sacha Barber，MVVM Diagram Designer [EB/OL]. 2013.http：//www.codeproject.com/Articles/484616/MVVM-Diagram-Desiner.
[7] 李龙澍，华骁飞，Silverligh下的MVVM模式的应用[J].计算机技术与发展，2013，12（12）：204-207.
[8] MacDonald，M.著；王德才 译.WPF编程宝典—C#2010版/（美）[M].北京：清华大学出版社，2011.6.
[9] Building Enterprise Applications with Windows（R） Presentation Foundation and the Model View ViewModel Pattern-New from Microsoft Press. Targeted News Service （Mar 23， 2011）， p. n/a. 2011.
[10] 石怡， WPF 使用 XAML 实现对 SQL Server 数据绑定的方法[J].电脑开发与应用，2011.10：70-71.