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/
    本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

  • 相关阅读:
    题解 CF171G 【Mysterious numbers
    题解 P1157 【组合的输出】
    题解 P3955 【图书管理员】
    题解 P2036 【Perket】
    题解 CF837A 【Text Volume】
    题解 CF791A 【Bear and Big Brother】
    题解 CF747A 【Display Size】
    题解 P1332 【血色先锋队】
    题解 P2660 【zzc 种田】
    题解 P4470 【[BJWC2018]售票】
  • 原文地址:https://www.cnblogs.com/lonely7345/p/1666906.html
Copyright © 2011-2022 走看看