基于AIR的电子教案系统的设计与实现

摘要：针对目前常见电子教案开发工具开发效率不高、演示时字号不易调整、数据不易共享等问题，作者尝试设计并实现基于AIR的电子教案系统。本文首先对系统框架、功能、数据存储等进行设计，然后详细介绍系统实现过程中的关键技术。通过试用表明该系统达到预期设计目标。

关键词：电子教案；AIR；设计

电子教案是借助计算机将教学材料进行有机的归类、链接和合成，以便在课堂教学中进行演示、查阅及打印输出的教案[1]。电子教案已经广泛应用于大学及中小学课堂教学之中。目前，常见的电子教案制作工具有PowerPoint、Authorware等，这些工具具有操作简便、应用范围广等特点，但由于不是专门为编辑电子教案所设计，教师在使用这些工具时容易出现编辑教案效率低，实现复杂交互比较困难等问题。例如，PowerPoint就存在播放时不能实现按需放大字号的问题；另外，这些工具还普遍存在系统的跨平台性比较弱和教案数据不方便为第三方共享、复用率比较低等问题。

为解决上述工具中的不足，本文设计并实现了一个基于AIR(Adobe Integrated Runtime)技术的电子教案系统。该系统是一个电子教案编辑与演示的可视化操作平台，主要提供电子教案的新建、导入、编辑、演示、保存以及打印等功能。系统将电子教案中常见的内容展现形式和交互动作封装成不同组件，提高了电子教案的制作效率，同时将电子教案的数据存储到XML文件和对应的媒体资源文件夹中，有利于实现资源的共享和复用。系统的特色之一是实现了大段文本的图文混排编辑以及演示时按需调整字号大小等功能。

本文将首先介绍基于AIR的电子教案系统的总体设计以及各功能模块；其次，论述在实现该系统过程中的若干关键技术；最后，总结本系统的成果并提出进一步完善的工作。

系统设计

系统基于AIR进行开发，AIR是一个跨操作系统的运行环境，它利用Web技术（Flex，Ajax等）来构建富Internet应用程序并部署为桌面程序[2]。基于AIR的系统既具备桌面程序的强交互特性又具备Web程序的跨平台特性，能极大地提高用户体验。

设计模式好坏、系统功能的设置是否合理以及数据是否易读取是衡量一个系统优劣的重要标准。下面从系统架构、系统功能模块和数据存储格式三个方面阐述系统设计。

1.系统架构设计

为了实现电子教案素材，如文本、图片、音视频等数据与用户业务逻辑的分离，数据与界面呈现形式的分离，系统采用MVC模式架构系统，分为模型(Model)视图(View)和控制器(Controller)三个部分，如图1所示。模型用于封装与应用程序相关的数据和业务逻辑，该系统模型定义了系统整个电子教案的结构以及常见交互组件的模型，图1中Courseware模型用于记录电子教案的名称、路径以及定义教案数据存取的方法，Choice模型用于记录选择题的题干、选项、正确答案、已选答案等状态；视图是模型的外在表现，一个模型可以对应多个视图，系统中的数据模型就对应了编辑和演示两个视图，视图一般是通过组合设计模式实现的，通过组合可以实现系统整体视图和子视图具有一致性，图1中视图部分就是由教案系统，Syspanel、CoursewareMenu、ChoiceComp等子视图组合而成；控制器是模型和视图沟通的桥梁，用于处理用户的行为事件和数据模型的更新事件，当模型加载数据完成时，系统会抛出COMPLETE事件，由控制器通知视图更新。

2.系统功能模块划分

编辑电子教案的一般流程为：首先新建教案，接着编辑教案，然后演示(预览)教案，最后保存教案，在编辑与预览环节往往需要做适当的调整。通过分析此流程并结合教案使用者的需求，可将基于AIR的电子教案系统划分为教案编辑和教案演示两大模块。系统具体功能模块如图2所示。主要模块具体功能如下。

系统操作模块主要用于控制电子教案的输入输出，包括教案的新建/导入、保存/另存、打印以及退出。

电子教案在演示的过程中一般以分页的形式展现，因此本系统的教案编辑以页为基本单位，它分为结构编辑和内容编辑两部分。

结构编辑模块主要用于用户设计电子教案的结构以及一些整体样式的设置，包括电子教案页面的添加、删除、排序、分组以及背景等整体样式的设置。

内容编辑模块主要用于对每页内容的编辑，包括文本、图形、声音、视频以及常见的交互题型如选择题、连线题等的插入、移动、复制、粘贴、删除等。

导航模块主要是在演示提供页面导航的功能。导航模块将教案的结构信息解析为导航菜单，并控制显示菜单形式。

内容演示模块主要提供页面的展示功能，并控制页面中内容的展现方式以及交互方式。

电子白板模块主要是用于教案演示时给教案添加注释，辅助教师教学。电子白板的功能包括内容书写、添加标记、加亮文字等。

3.电子教案数据存储格式设计

电子教案数据存储形式的好坏将直接影响到教案的共享复用效果。数据存储一般可以选用DOC、XLS、XML和数据库文件等多种格式，但是考虑到数据的共享性、可复用性以及扩展性，通常选用数据库文件格式或者XML格式存储数据。分析电子教案的结构可知，一份教案一般有若干部分(Part)组成，每部分又由多个页面(Page)和Part组成，每个页面上又包含若干交互内容(item)，整个电子教案内容结构呈现树形，XML相对于数据库更能方便直观地表现这种结构，因此本系统选择XML为存储电子教案数据的格式。

系统在设计时并没有将电子教案的所有内容存储在一个XML文件中，而是将其存储为一个记录电子教案结构的主索引文件和若干个表示教案每一页内容的文件。这样存储数据有两个好处：一是使整个电子教案的数据结构更加清晰，查找数据更加方便；二是数据共享复用时方式更加灵活，如当第三方仅仅只想借用电子教案的一页或几页内容时，只需加载相关的页文件，从而避免了因加载整个电子教案文件产生的数据冗余，提高了文件的使用效率。

电子教案数据的主索引文件为main.xml，其中包含两类节点，一类为part节点，用于定义教案的层次结构以及导航信息；一类为page节点，用于记录页面的索引信息。

main.xml的结构如下所示：

… …

… …

记录页面内容的XML数据包含在main.xml中page节点的ref指向的索引文件中，记录页面内容的XML文件结构可以分为三个层次：page、body、item。page为根节点，其中除包含一个body节点外，还定义了一个页面的样式属性节点informationDeclaration用于记录页面的样式信息。每个page仅包含一个body，body中可以包含多个item，item定义的是教案中交互组件的信息，如类型、位置、大小以及内容等。每个item都含有一个type属性用于定义组件的类型，如文本组件的属性为type="text"、选择题组件的type="choice"。页面数据的XML结构如下所示：

… …

… …

var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-22575914-1']);_gaq.push(['_setDomainName', '.省略']);_gaq.push(['_trackPageview']);(function () {var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'www') + '.省略/ga.js';var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);})();var _userid = '';var _siteid =708;var _istoken = 1;var _model = 'Model01'; WebPageSpeed =313; UrchinTrack();

系统实现中的关键技术

在确定系统的框架及主要功能模块的基础上，通过MVC模式和Flex技术实现了基于AIR的电子教案系统，开发所使用的语言为ActionScript3。本系统中两个重要的功能是大段文本的图文混排编辑和字号调整。这是系统的特色之一，也是技术的难点之一。现就这两个功能的实现概述如下。

本系统中的图文混排功能是在TLF2.0(Text Layout Framework 2.0)的基础上实现的。TLF2.0是ActionScript 3上的高质量、富文本文字排版框架。TLF2.0中包含了一组支持复杂文本、高级排版和布局功能的组件。电子教案系统中的文本题型组件通过继承TLF中的RichEditableText，实现insertInlineGraphic()和modifyInlineGraphic()接口，实现了文本的编辑、图片的插入和编辑功能。

2.字号调整功能的实现

该功能需求主要来自于教师在教案演示时需要调整字号，使学生能够更清楚地看到教案上的内容。在系统中，显示大段文字的组件PassageComp中图文的显示也是在TLF2.0文本框架下实现的。但是TLF框架本身没有提供字号调整的接口，不支持文字字号的调整。

在TLF框架下SpanElement类表示应用了一组格式属性的一串文本。SpanElement对象包含段落中的文本。一个简单的段落(ParagraphElement) 包含一个或多SpanElement对象[3]，SpanElement中的fontSize属性用于控制文本字号大小。因此可通过调整Passage中所有的SpanElement的fontSize属性实现组件中所有文本字号的调整。

具体实现步骤如下：首先遍历PssageComp中的所有SpanElement，然后取出SpanElement的fontSize值，最后根据教案使用者的需求修改fontSize的值，实现字号调整。

总结

随着技术的发展，人们对电子教案编辑工具的跨平台性、内容数据的可共享性和对电子教案演示的灵活性等的要求越来越高，AIR技术的出现为满足这些需求提供了一种全新的解决方案。本文所设计的系统增强了图文混排和按需调整字号的功能，实现了教案数据的可共享性，为教案内容的复用提供了便利，也为演示播放时按用户需要随时调整字号等提供了便利。

当然，该系统也存在一些问题，如在安装系统前，必须先安装AIR运行环境，这会给刚接触AIR程序安装的人员带来一些困惑。

参考文献:

[1]张宝.基于Flex平台的电子教案系统的设计和开发[D].安徽：中国科学技术大学，2011.

[2]维基百科[EB/OL]. zh.省略/wiki/Adobe_AIR.

[3]ActionScript3语言参考[EB/OL].help.省略/zh_CN/FlashPlatform/reference/actionscript/3/.

[4]乜勇，张慕华.电子教案在课堂教学中有效运用探究[J].现代教育技术，2009(19):133-136.

[5]林文龙，刘业政.基于XML的网络课件模型研究及实现[J].计算机工程与应用，2005 (14):164-167.