基于AppCan地跨平台手机英语学习系统地设计与实现.docVIP

基于AppCan的跨平台手机英语学习系统的设计与实现-英语论文 基于AppCan的跨平台手机英语学习系统的设计与实现 余勃1，2，郭宏1，2，栗忠强1，2，徐景1，2，张若凡1，2 （1.武汉科技大学计算机科学与技术学院，湖北武汉430065；2.智能信息处理与实时工业系统湖北省重点实验室，湖北武汉430065） 摘要：随着移动互联网的发展，移动应用成为移动智能终端上不可缺少的部分。充分利用碎片时间来满足实际的需求是移动应用的重要方向。本文以实际应用需求为基础，设计了基于AppCan的跨平台手机英语学习系统，具有丰富的功能，实现了在Android和iOS等主流系统上的跨平台使用。来自用户的使用体验表明，该系统达到了设计目标。 关键词 ：移动互联网；AppCan；英语学习；移动智能终端 中图分类号：G642.0 文献标志码：A 文章编号：1674-9324（2014）46-0276-03 一、问题的提出 随着移动互联网的发展，使用移动智能终端进行互联网接入是当前主要的接入方式。由于移动智能终端在硬件资源上的不断提升，为软件的发展提供了强大的支撑，移动应用不断丰富，成为移动智能终端上不可缺少的部分。使用移动智能终端来获取信息、充分利用碎片资源已经成为移动应用的重要方向。如何解决移动应用的创新设计，是当前亟待解决的问题。 作为移动应用的一个重要方向，通过充分利用碎片时间来提高英语学习的效率是移动应用设计开发的重要方向。以跨平台的移动应用为目标，设计并实现了基于AppCan进行的移动端英语学习系统（以下简称“英语随身听”）。英语随身听可在Android和iOS等不同的移动终端系统平台上运行，为用户提供服务。该系统能够充分利用移动互联网的优势，随时获取来自网络的信息，并充分利用碎片时间来进行英语学习，提高英语学习的效率。 二、英语随身听的设计 英语随身听的设计核心是在移动智能终端上实现对英语学习资源的高效管理和应用，并提供良好的用户交互体验。移动智能终端上的主要设计功能如图1所示，在于要实现在移动智能终端上对资源的高效管理和使用。包括：英语学习、交流讨论、等级测试、更多选项。其中英语学习包括英语的词汇、句型、语音和视频等，交流讨论主要包括了发布和回复，等级测试包括初级、中级、高级、专家级测试，更多选项中包括修改密码、意见反馈、清除聊天记录、清除缓存等。 为支持移动应用、提供服务，在服务器端的数据库中设计了如下数据表来提供数据支持，如图2所示。 三、英语随身听的实现与测试 在AppCan平台的UI框架中，使用了组合的概念。 例如对一个按钮的样式，通过多个CSS类来定义它，如下面的代码： div class=“ub-f1 uinn5 us umar-a uc-a1 c-red tx-c c-m2” ontouchstart=“zy_touch（‘btn-act’）” onclick= “register_click（）”注册/div 此处的class属性中定义了按钮的各种样式，如ub-f定义了不同的box-flex属性值，类别使用数字编号，定义不同的元素空间大小分配比例，ub-f1数字编号为1，即定义box-flex为1；uinn5定义了元素的内边距；前缀us代表UI SHADOW，定义了元素的外阴影；前缀umar代表元素的外边距，umar-t代表上边距，umar-b代表下边距，umar-l和umar-r分别代表左边距和右边距，umar-a则代表上下左右四个边的边距；前缀uc定义了元素的圆角类别；c-red代表元素的填充颜色为红色；前缀tx代表文字的对齐方向，tx-c即居中对齐；c-m定义了背景的遮盖类别。通过这些属性的设置，设计出一个按钮样式。 为了适配不同屏幕分辨率的手机，使用AppCan平台推出了UI2.0框架，其设计来源于css3.0的弹性盒子模型，即在指定大小的父容器中按比例为子元素分配空间。如下面的代码所示： div style=‘display：-webkit-box；width：200px；bor der：1px solid blue’ div style=‘-webkit-box-flex：1；background： #E00’hello/div div style=‘background：#0E0’HELLO/div /div 在上面的代码中，我们设置第1行的div元素使用BOX方式布局子元素。并指定这个div宽200px。第3行的div的宽度由内容撑开，可以认为是一个指定宽度的div，通过模拟器可以看到宽32p