基于RIA平台的数据结构多媒体课件的设计

2017-07-01谢运佳赵剑冬

中国信息技术教育 2017年12期

谢运佳+赵剑冬

摘要：RIA兼有B/S结构的灵活性和C/S结构的强交互性，是未来多媒体课件设计的一个趋势。本文结合“数据结构二叉树”一节的内容，论述如何使用FLEX技术开发RIA平台下的多媒体课件，并针对其中的技术难点提出相应的解决方案，希望能够为广大RIA多媒体课件制作者提供一个参考和借鉴的案例。

关键词：富互联网应用；多媒体课件；FLEX；二叉树

中图分类号：G434 文献标识码：A 论文编号：1674-2117（2017）12-0069-03

● 前言

RIA（Rich Internet Applications）是指富互联网应用，它将桌面应用程序的强交互性与传统Web应用的灵活性结合起来，为用户带来全新的体验。目前，市场上RIA的技术平台主要有Flex、XUL、Ajax等。其中，由于Flex有强大的Adobe公司支持，再加上Flash Player播放器的广泛使用，因此它在RIA市场占据着主导地位。

数据结构是计算机科学中一门重要的专业课，二叉树又是其中极为重要的一个知识点。目前，许多数据结构多媒体课件都是通过动画的形式来展示二叉树遍历的过程。如图1所示，这是典型的展示型多媒体课件，它利用Flash的帧动画，动态地呈示二叉树的遍历过程。这与用文字描述的PPT相比，能够更加容易地让学生明白二叉树的遍历过程。但它的缺点是，动画显示的过程只是针对界面上事先设置好的那棵树，如果学生想观察其他的二叉树的遍历过程，显然这个课件是无法满足学生需求的。

为解决上述多媒体课件的缺点，下面，笔者以“数据结构二叉树”一节为例，采用Flex3.0技术，以Adobe Flex Builder 3为开发环境，论述基于RIA平台的多媒体课件的设计与实现。

● 基于RIA平台设计数据结构二叉树多媒体课件

1.课件设计总体目标

笔者以RIA为平台，建构的数据结构二叉树多媒体课件是根据教学大纲的要求并以清华大学出版社出版的《数据结构与算法教程》（第二版）为蓝本进行开发的，其主要目的在于加强课件与学习者之间的交互性，学习者可以根据自己的理解，动态地生成一棵二叉树，并观察它的遍历情况。为了这个目的，该课件会创建一个实验环节，在这个环节中学习者可以按照自己意愿，以括号输入法的形式随意输入不同的二叉树。同时，通过按钮交互，实验平台将会根据学习者所输入的内容呈现不同的二叉树，并按其意愿显示出该二叉树先序、中序、后序和层次四种遍历的演示过程。另外，多媒体课件的建构首先要分析数据结构二叉树遍历的教学目标，具体内容如下页表所示。

2.课件总体框架设计

数据结构二叉树多媒体课件的制作目标是容纳数据结构二叉树所有基础教学内容，利用实验的方式向学习者展示二叉树遍历的原理、过程和结果，并为学习者提供掌握巩固所学内容的强化练习测试。因此，本课件的框架主要分为课件简介、教学大纲、教学计划、教学内容、实验大纲、源码下载、练习测试和帮助文档八个模块。

①课件简介模块：用一个页面对数据结构二叉树多媒体课件的制作原因和目的进行简单的说明。

②教学大纲模块：陈述数据结构这门课程的各章节内容的教学大纲要求。

③教学计划模块：对数据结构这门课程的各章节知识点进行课时安排。

④教学内容模块：展示数据结构这门课程各章节的教学内容。

⑤实验大纲模块：列举数据结构这门课程各章节的实验大纲要求，并对实验大纲中所要求的实验提供模拟实验室的链接。

⑥源码下载模块：提供《数据结构与算法教程》教材里重要的算法源码的下载。

⑦练习测试模块：为学习者提供类型丰富的习题，以巩固其学习效果。

⑧帮助文档模块：为学习者提供课件的使用帮助文档。

为了增强系统的可维护性和可扩充性，该课件的八个模块在内容上都是相互独立的，学习者可以通过导航进入各个模块内部（如图2）。

为了让学习者能够清楚直观地了解二叉树遍历的原理、过程和结果，笔者在实验大纲模块中打造一个数据结构二叉树的实验平台。其设计思想是：实验平台由实验目的、实验步骤、实验室和实验使用帮助四个环节组成。学习者通过实验大纲页面上相应的平台链接进入到数据结构二叉树的实验平台。在实验平台上，学习者可以了解到数据结构二叉树实验的实验目的、实验步骤和实验使用帮助，当了解了这一系列的内容后，学习者就可以进入到实验室。

实验室主要由四个部分组成，一是给予学习者以括号表示法输入二叉树的TextInput输入框，二是给予学习者选择二叉树遍历方式的Button交互按钮，三是文字展示二叉树遍历方法的隐性的Text文本框，四是动画展示二叉树生成与遍历过程的Canvas容器。

在实验室中，学习者可以根据自己的想法用括号表示法的形式在TextInput输入框中输入不同的二叉树，然后点击“OK”按钮，实验室的Canvas容器中就会自动生成该二叉树的逻辑结构图。当二叉树的逻辑结构图生成后，学习者就可以在该二叉树的基础上自主选择先序、中序、后序还是层次遍历，操作方法是单击所选择的遍历所对应的“OK”按钮即可。响应这个交互动作后，Text文本框将由隐性转化为显性，用文字形式展示出该遍历的方法；而Canvas容器中则会通过动态画圆的方法呈现出该二叉树经历的这种遍历过程，并且在Canvas容器的左上方输出该二叉树在经过此种遍历后所得到的遍歷序列。

3.技术难点与解决方案

实验室的制作是数据结构二叉树多媒体课件的技术难点所在。本课件主要通过ActionScript3.0的算法设计来实现这个功能。

首先，设计“init函数”“PreOrderPosi函数”“getNodes函数”和“getHeight函数”等一系列函数，设计这些函数的目的都是分析学习者所输入的内容。

①init函数：判断其输入的内容是否符合根结点不为空的要求，若满足，则通过栈从这些输入的内容中分析出所有的二叉树结点及其左右孩子结点，最后返回树的根结点。