zoukankan      html  css  js  c++  java
  • Visual Studio DSL 入门 6DSL的图形表示1

         到现在为止,我们还是只是介绍模型相关的东西,还没有接触到Dsl的模型的展现,对于一个Dsl来说,没有图形展现也是可行的,不过对于一个开发工具来说,要提供一种方式来操作我们的元数据,Visual Studio DSL在图形展现这方面提供了不错的支持,不过对于复杂的Dsl来说,图形的展现往往需求很复杂,现在的图形化支持在一定程度上也未必能够满足一些特定的需求, 有总比没有好,期望微软会在这方面会有所加强。 
        还是以我们创建的LanguageSm项目为例,我们大概介绍一下界面表示相关的概念,打开DslDefinition.dsl文件,这次我们看泳道(也就是树线)的右边:
       2010-2-9 22-39-46
       一. 图表
           我们看最下面的LanguageSmDiagram,这就是图表元素,它是存储形状和连接器映射的容器,代表设计界面自身,映射到模型的根域类(图形元素Diagram Elements都是与模型相对应的),也就是映射到我们例子里的ExampleModel,我们来看一下图表的属性:
           2010-2-10 0-12-07 
         在这里,我们可以对图表的外观,代码,文档,公开样式属性,资源几个方面进行属性设置,Dsl会收集设置的这些信息,然后根据T4模板,在Dsl项目的Generate Code文件夹下面生成Diagram类,我们也可以对这个类进行扩展,实现图表方面的一些自定义,比如设置背景图,显示网络等。如果你想实现Dsl模型的自己的界面表示方式,也需要实现自己的图表元素Diagram类.

       二.编辑器
          编辑器分为两种类型:(图形)设计器和自定义编辑器.编辑器的定义在Dsl资源管理器(Dsl Explorer)中的“编辑器”(editor)节点下,这里的定义的属性用于生成EditorFactory类(熟悉VSX的应该知道,我们会在后面介绍),工具箱等,我们来看一下默认的设计器的属性:
          2010-2-10 0-27-41

         这里需要提示一下,在dsl设计的过程中,有很多时候需要dsl浏览器和属性对应操作使用,可以通过右键属性来进行设置。
         属性里设置了编辑器对应的图表元素,编辑器的GUID,根域类,以及存储Dsl模型的文件扩展名,与文件关联的图标。或许你不太明白这些属性代表什么意义,没有关系,以后会明白的。
         我们在第一节就说过, Dsl模型并不一定要有图形编辑器的,我们也可以在这里添加我们自定义的编辑器,你可以右键删除默认的Editor,然后在根结点LanguageSm上右键添加自定义编辑器,然后设置上面说的那些属性,然后实现自己的DocView,在这里有详细流程,具体的方法我们也会在后面详细介绍.
       

        三.形状
         形状是Dsl图形符号的重点,因为形状和模型元素一一对应(前面说的ExampleShape是一个几何形状,和根域类对应),可以使模型元素形象化,这也是Vs.Net DSL图形化DSL的特点. 形状又分为以下五个不同的类型,这五个形状在工具箱上都有,可以直接拖动到图形区域创建对应的形状,建议现在没有必要太去细化,而只需要记住他们的样式,能够按需所有,具体怎么设置还是到使用的时候再去研究:
         1.几何形状(GeometryShape)
             2010-2-10 1-24-52 
            左侧为形状的模型,右侧为调试后运行的显示模型,形状中的文本装饰器NameDecorator就是用来控制我们显示图形中的文本,你可以查看装饰器的属性,控制文本的显示,包括文本,显示位置等.
    2010-2-10 1-33-26
    对于几何形状,除了文本装饰器以外,你还可以添加IconDecorator(装饰图形上显示图标),ExpandCollapseDecorator(装饰图形的展开收缩)
         2.隔间形状(CompartmentShape)
            隔间形状是带有隔间的几何形状,一个隔间形状有可以有多个隔间:
            2010-2-10 1-48-58
           同样,对于隔间形状,你也可以象几何形状那样添加其它的装饰器.
         3.图像形状(ImageShape)
            图像形状是显示图形非轮廓的形状:
    2010-2-10 1-54-12
            可以看到,图像形状显示的和我们普通的几何形状是不一样的,我们可以针对图象开关设置显示的图像和图标资源,我们来看一下上面的图像形状的属性,在最下面我们定义了显示的图标:
            2010-2-10 2-01-08
         4.端口(PortShape)
          端口是依附在形状轮廓上,并只能绕轮廓移动的特殊形状,除此之外,和普通的几何形状没有区别。
          2010-2-10 2-10-18  
         5.泳道(Swimlane)
          泳道用来将图表分割成行或例,我们看下面的状态流程图:
          2010-2-10 2-05-02

    参考资源
          1. Visual Stuido DSL 工具特定领域开发指南
          2.Using WPF As The Designer Surface In DSL Tools   Gokhan Altinoren

    作者:孤独侠客似水流年
    出处:http://lonely7345.cnblogs.com/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  • 相关阅读:
    《全体育·瑜伽》
    PowerDesigner使用教程
    Android基础之——startActivityForResult启动界面并返回数据,上传头像
    数据仓库与数据挖掘的一些基本概念
    php实现求二进制中1的个数(右移、&、int32位)(n = n & (n
    批量发短信的平台浏览总结
    php资源集
    js进阶正则表达式5几个小实例(原样匹配的字符在正则中原样输出)(取反^)
    js进阶正则表达式方括号(方括号作用)(js正则是在双正斜杠之中:/[a-z]/g)
    js进阶正则表达式修饰符(i、g、m)(var reg2=/html/gi)
  • 原文地址:https://www.cnblogs.com/lonely7345/p/1666906.html
Copyright © 2011-2022 走看看