程序可视化的观察者架构

理论计算机科学电子笔记178（2007）153-160www.elsevier.com/locate/entcs程序可视化的观察者体系结构Amruth Kumar1 和 斯特凡·卡萨博夫Ramapo College of New Jersey505，Ramapo Valley RoadMahwah，NJ，美国摘要我们提出了观察者架构的程序可视化。Observer体系结构的原则是模块化的、模型驱动的可视化，具有单向耦合、层次化委托、消息传递和可视化工具存档。该架构是可扩展的。由此产生的可视化可以独立于模型进行分发和修改。Observer体系结构已经在编程的在线导师中实现，称为problets。保留字：程序可视化，Observer架构1引言研究人员发现，在解决问题的迁移任务[11]中，带有叙述的动画优于只有动画，只有叙述，或动画前的叙述。同样，在回忆任务中，带有视觉呈现的叙述优于视觉呈现前的叙述[1]。这些结果支持了双重编码假说[15]，即刺激和表征之间存在两种类型的联系：刺激和相应表征（言语和视觉）之间的表征联系，以及言语和视觉表征之间的参照联系。计算机科学研究人员也得出类似的结论，可视化必须伴随着文本解释，以便在教学上有效[12][17]。学习者可以通过阅读来了解他们所看到的东西[3]。在最近的一项研究中，用解释补充可视化是提高可视化效果的11项建议之一[13]。事实上，一位研究人员说：1 电子邮件地址：amruth@ramapo.edu1571-0661 © 2007 Elsevier B. V.在CC BY-NC-ND许可下开放访问。doi：10.1016/j.entcs.2007.01.045154A. 库马尔，S.Kasabov/Electronic Notes in Theoretical Computer Science 178（2007）153Fig. 1. 包含指针算法可视化事实上，这是我们所做的：我们的编程导师已经提供了程序一步一步执行的文本解释[9]。我们现在已经用程序可视化补充了文本解释。我们在之前的可视化研讨会上提出了一个基于模型的可视化方案[7]。在本文中，我们将描述由此产生的架构，称为观察者架构。在Observer体系结构中，程序的可视化是由对其执行的观察驱动观察者架构依赖于执行程序的可观察模型的可用性。我们将在第2节中介绍这种模型的细节。我们将在第3节中介绍观察者可视化架构的原理，并提供一个在我们为编程开发的在线导师中实现的示例，称为problets（www.problets.org）。我们将在第4节中列举Observer可视化的优点，并在第5节中结束讨论。第二章领域模型我们的编程导师，称为problets，自动构建每个问题中出现的程序模型[8]。该模型由程序的结构和对象组成。结构描述了编程对象和构造，以及它们在程序中是如何相互连接的。行为描述了程序中使用的构造的执行语义。考虑以下带有嵌套块的C++指针代码：void main（）{int* ptr;{intcount = 5;ptr = count;}* ptr;<<}这个程序的域模型的结构如图1所示。在图形、变量（如全局变量）和函数（如main（））是程序的组成部分。指针变量ptr和一个块是函数main（）中的组件。 变量count是块的一个组成部分。 的A. 库马尔，S.Kasabov/Electronic Notes in Theoretical Computer Science 178（2007）153155变量的行为被建模为状态图，声明、赋值和引用为节点/状态，可能的操作（如赋值）为弧。Problets为每个程序构建这样的模型，并模拟它以生成1）程序的输出;2）程序中的语义和运行时错误（如果有的话）; 3）程序逐步执行的叙述[9]。程序可视化的观察者体系结构的3个原则在程序可视化的Observer体系结构中，程序模型中的每个组件都是一个可观察对象。这些对象中的每一个都与一个Observer对象相耦合，Observer对象的职责是跟踪和可视化可观察对象的状态变化。 可视化对象的整体结构与模型的结构同构。这种架构的灵感来自于用于图形用户界面构造的模型-视图-控制器模式[5]。观察者可视化背后的原则是：• 模型驱动：每个可视化对象都由一个称为模型的域对象驱动，可以模拟该域对象以派生模型的行为。可视化和模型是具有互斥职责的独立对象• 模块化：每个可视化对象只负责可视化与之耦合的模型。• 单向耦合：可视化对象通过首先咨询与其耦合的模型来呈现自身，检测模型状态的任何变化，并在其呈现中反映这种变化。换句话说，视觉-可视化对象遵循相应的模型;可视化对象不观察模型中的变化;模型不主动驱动可视化，并且甚至可能不知道可视化对象的存在• 分层委托：每个可视化对象在呈现自身之前委托其组件呈现自身，例如，main（）的函数可视化工具委托指针可视化工具和块可视化工具呈现它们自己然后再呈现自己。• 用于协调的消息传递：由于每个可视化对象是模块化的，因此通常需要在两个或更多个可视化对象之间进行协调例如，当动画化一个变量的值到另一个变量的赋值时或者描述一个指针的赋值指向一个变量或堆对象。消息传递用于这种协调。在消息传递中，需要与另一个可视化对象协调的可视化对象在可视化层次结构中上下传递消息。如果接收消息的可视化对象是消息的预期目标，则该对象对其进行操作，如果不是，则将其向前• 存档：可视化对象维护其模型的状态变化的历史，以供学习者将来检查，例如，变量可视化工具维护一个156A. 库马尔，S.Kasabov/Electronic Notes in Theoretical Computer Science 178（2007）153图二、Program模型的可视化如图1所示。所有以前分配给变量的值的历史记录这种设计简化了模型，允许它只关注程序执行的语义其中一些原则，即，Matrix框架提出了模型与视图分离、模型与视图单向耦合的算法可视化构建方法[6]。我们的工作可以看作是矩阵结构的延伸，因为我们提出了分级授权、协调和档案职能的信息传递。虽然Matrix架构中使用静态存储库由problet为图1所示的程序模型中的组件创建的可视化对象如图2所示。虚线箭头将模型中的可观察对象连接到可视化层次结构中相应的观察者虚线箭头的方向表示数据从可观察对象流向观察者的方向。程序的可视化是通过渲染观察者对象来实现的。图3显示了problets使用Observer体系结构为一个涉及多层嵌套块和指针的C++程序生成的可视化快照。在快照中，正在执行的程序的数据空间被示为由全局空间、堆栈和堆组成。函数main（）的激活记录显示在堆栈中，嵌套块的变量显示为嵌套在这个激活记录中。可视化工具使用消息传递来绘制将referencePointer连接到可变权重的箭头。 请注意，变量可视化工具提供了左右滚动控件，以便学习者可以检查每个变量的存档值。作为可视化环境的典型，在底部提供了以下四个学习器控件：1）向前一步; 2）向后一步; 3）快进到结尾;以及4）倒回到开始。由于交互是有效可视化的关键之一在左面板中的程序代码的逐步执行的可视化（当前执行的行A. 库马尔，S.Kasabov/Electronic Notes in Theoretical Computer Science 178（2007）153157图三. 具有多层嵌套块代码以红色突出显示）与右侧面板中的数据空间可视化（由当前执行的行以橙色突出显示的变量）相协调。观察者架构的4个Observer可视化架构有几个优点：• 观测器架构是模型驱动的，即，可视化由可以模拟的域的模型驱动。模型驱动的可视化能够捕获更多的被建模领域的语义[14]。它们支持自定义输入数据集，这是提高可视化效率的方法之一[13] -在程序可视化的情况下，这包括可视化学习者编写的程序。它们减少了教师的开销，这是采用和使用可视化的障碍之一[13]，因为教师可以指定需要可视化的程序，而不是指定可视化，并让模型驱动的观察器架构自动为程序创建可视化。• 该架构是可扩展的-当新的构造被添加到域中时，可以通过在可视化层次结构中添加相应的观察者对象并根据模型的规定组合它们来扩展可视化。这有助于可视化系统的增量开发，这在处理诸如编程之类的大型领域158A. 库马尔，S.Kasabov/Electronic Notes in Theoretical Computer Science 178（2007）153• 最近的一项研究表明，消除可视化工具和程序模型之间的紧密耦合可能有助于在这种情况下，我们一直在与匹兹堡大学合作，为代码可视化开发分布式客户端-服务器架构[10]。由于Observer体系结构中程序模型和可视化工具之间的耦合是单向的，因此该体系结构非常适合分布式客户机-服务器部署。• 图3中的可视化是为初级/高级编程语言课程的学生设计的，因此提到了堆栈、堆和全局空间，程序执行期间数据空间的所有组件。由于该架构定义了可观察对象和观察者对象之间的明确分离，因此我们可以通过简单地开发替代观察者对象来开发同一程序的替代可视化，例如，一种用于计算机科学I的可视化，其中，变量被示为可视化空间中的独立对象，而不是嵌入范围对象中的组件。换句话说，可视化可以独立于模型进行修改-观察者架构享有模型-视图-控制器模式的好处[5]。• 适应用户的知识水平是最近一项研究中提出的提高可视化效率的建议之一[13]。自适应可视化我们的前提是，适应应该规定，而不是禁止。这意味着：1）不必要的细节应该隐藏，而不是删除; 2）学习者应该始终有查看任何和所有隐藏的细节的选择。我们提出了一个对象/事件本体的自适应域对象和事件被用作基础，用于确定是否显示或隐藏的可视化细节。通过域对象/事件索引可视化细节允许可视化的连续适应。由于观察者架构是模型驱动的，并且对象/事件可以在域模型中轻松识别，因此观察者架构非常适合可视化的规范和持续适应5讨论我们提出了观察者架构的可视化。该体系结构是通用的，与领域无关的-只要有合适的模型，它就可以用于算法可视化以及程序可视化。这可能被视为观察者架构的一个缺点：程序可视化所需的模型是一个语言解释器，构建它可能是一项艰巨的任务。最著名的模型驱动程序可视化系统是Jeliot 3 for Java [2]。它使用修改过的源代码解释器DynamicJava（www.k oala.ilog.fr/djava）作为模型。它使用中间代码和中间代码的解释器来协调模型与可视化工具。中间代码解释器中的对象（诸如Value和Variable）维护对其对应的可视化对象的引用，所述可视化对象被称为Actor，诸如Value。A. 库马尔，S.Kasabov/Electronic Notes in Theoretical Computer Science 178（2007）153159Actor和VariableActor因此，Jeliot 3DynamicJava维护一个与执行程序的实际数据空间不同构的集中式模型，例如，它为变量、运算符等维护单独的堆栈。相反，problets中使用的模型忠实于程序的实际运行时环境，并且可视化是与模型一对一地编排因此，可视化与专家的心理模型之间的指称匹配度[16]促进心智模型向学习者的有效转移，特别是在编程语言课程中。最后，在Jeliot3中，导演集中协调所有动画。在problets中，可视化被分层地委托给各个组件。Problets由参数化模板驱动。用户可以通过简单地将其模板输入到problet中来执行 和 可 视 化 新 程 序 。 通 过 定 义 observable 和 observer 对 象 之 间 的 明 确 分 离 ，Observer架构使开发人员可以轻松地提供编程结构的多种可视化当开发人员提供替代可视化时，用户可以像从菜单中选择一样轻松地在其中进行选择。用户将能够在各个可视化对象允许的范围内定制可视化，例如，变量的可视化可以允许用户改变其外观或动画方案。 由于可视化对象是由 为了构建整体可视化，用户可以独立于其它对象的可视化来定制每种类型的程序对象我们计划在2006年秋季评估problets中的可视化。我们想评估的有效性的可视化与没有文字解释的编程问题。除了本文中报道的数据空间的可视化之外，目前，我们还在开发控制流程的可视化，其中，程序中的控制结构被描述为流程图中的元素，并且流程图被动画化以可视化程序中的控制流程。我们的目标是提供三个协调的可视化相同的程序，除了文本解释：1）代码可视化-突出显示正在执行的代码行- 参见图3中的左侧面板; 2）如图3中的右侧面板中所呈现的数据可视化;以及3）根据流程图的控制可视化。这些多视图有望提高可视化的有效性[13]。最后，我们计划使可视化适应学习者的需求。我们在模型中有必要的对象/事件基础设施。我们需要扩展我们的观察者对象来考虑适应性。确认国家科学基金会的教育创新计划（CNS-0426021）和拉马波学院基金会为这项工作提供了部分支持160A. 库马尔，S.Kasabov/Electronic Notes in Theoretical Computer Science 178（2007）153引用[1] Baggett，P.，视觉和听觉材料的时间重叠在形成双媒体协会的作用，教育心理学杂志76（1984），页。408-417.[2] Ben-Ari，M.，N. Myller，E. Sutinen和J. Tarhio，Jeliot的程序动画透视：在diehl，s。（编辑）软件可视化。LNCS2269（2002），pp.31比45[3] Brusilovsky，P.，教育编程环境中的解释性可视化：将示例与一般知识相连接，见：第四届人机交互国际会议论文集，EWHCI202-212.[4] Brusilovsky，P. and H.苏，基于分布式网络的自适应教育系统，在：第六届智能教学系统国际会议论文集2002年，pp.第229-238页。[5] 伽马，E.，R.赫尔姆河Johnson和J.Vlissides，[6] 科霍宁A.和L. Malmi，算法动画和仿真的设计模式，第一次程序可视化研讨会论文集，2001年，pp. 八九比一百[7] 库马尔，A.，基于模型的动画程序可视化，在：第二次程序可视化研讨会的会议记录，2002年，pp。37比44[8] 库马尔，A.，基于模型的推理领域建模在基于Web的智能教学系统，以帮助学生学习调试C++程序，在：智能教学系统（ITS 2002年），2002年，页。792-801[9] 库马尔，A.，逐步执行作为程序分析问题反馈的解释，以及基于模型的问题解决导师的生成，技术，教学，认知和学习（TICL）期刊（待发表）。[10] Loboda，T.，A. Frengov，A.Kumar和P.Brusilovsky，自适应解释性可视化的分布式框架，在：第四次程序可视化研讨会论文集，2006年，pp.11比16[11] 迈耶，E.和R.安德森，动画需要叙述：双重编码假设的实验测试，教育心理学杂志83（1991），第103页。484-490.[12] 纳普斯，J. L.C.和L.诺顿，Jhave-一个环境，积极参与学生在基于网络的算法可视化，在：第31届SIGCSE技术研讨会，奥斯汀，得克萨斯州，2000年，页。109比113[13] 纳普斯，R. Fleischer，M.McNally，G.罗斯林角Hundhausen，S.Rodger，V.Almstrum，A.科尔霍宁，J. Velazquez-Iturbide，W. Dann和L. Malmi，探索可视化和参与在计算机科学教育中的作用。，SIGCSEBulletin35（2003），pp.131-152.[14] 纳普斯，G. Rossling，P.Brusilovsky，J.英语，D.Jarc，V.卡拉维尔塔角Leska，M.麦克纳利A.莫雷诺河Ross和J. Urquiza-Fuentes，开发基于XML的工具以支持用户与算法可视化的，SIGCSE Bulletin37（2005），pp.123-138[15] Paivio，A.，心理表征：双重编码方法，纽约：牛津大学出版社（1990）。[16] Roschelle，J.，设计认知沟通：认知或调解合作调查，计算机，沟通和心理模型。D.L.戴和D.K. Kovacs（编辑），Taylor and Francis，London（1996），pp. 13-25[17] Stasko，J.，A. Badre和C.算法动画有助于学习吗？实证研究与分析。，在：INTERCHI 93计算机系统中人为因素会议记录，阿姆斯特丹，1993，pp. 61-66号。