论文部分内容阅读
【摘 要】随着下一代移动通信技术汹涌而来，智能终端设备得到普及，基于智能终端应用开发的需求也越来越大。在校园生活中，移动互联网模式的发展趋势，为校园师生的学习、生活带来极大的便利。本文提供一种全新的web应用体验方式，为师生创建校园生活轨迹内容并允许他们获取当前用户所在地理位置的坐标信息。同时，用户还可以浏览生活轨迹列表，如果记录的生活轨迹内容保存着当前地理位置信息，浏览时便以地图的方式展示，否则以文本形式显示。
【关键词】HTML5 校园生活轨迹 智能终端 Google maps
Abstract： With the next generation of mobile communications and other new technologies coming， The Intelligent terminal gain popularity. Based on the smart client application development is also growing demand， In campus life， the development trend of mobile Internet model， bring great convenience for teachers and students on learning and life. This paper provides a coordinate information of the web application of new experience for teachers and students to create campus life content and allow them to get the current user’s location. At the same time， the user can browse the life track list. if the life track record with the current location information， it is browsing and display in the way of map. Other wise， it showed in the form of text.
Keywords：HTML5 campus life Trajectory intelligent terminal Google maps
一、移动应用终端发展现状及趋势
随着智能手机的价格越来越便宜，以及3G和4G网络的发展，移动手机用户正在快速转向智能手机。市场研究和咨询公司Gartner发布最新调查报告，中国手机用户总数在2013年首次超过10亿。Gartner分析师预测，2014年，中国市场上将销售4.435亿部手机，而使用中的手机将超过10.75亿部。eMarketer预测，智能手机采用率到2017年将一直保持快速增长步调。将近2/5的移动用户——将近1/4的全球人口——在2014年将至少每月都会使用智能手机。
对于当代大学生来说，手机的高度普及和功能的不断增多，手机的开放性、随身性，使得很多学生利用手机等智能移动设备进行学习交流，目前大多数的智能设备都具有网页浏览、查询资讯、即时通讯、资料共享甚至视频音乐观看下载等功能，移动学习也将成为智能移动终端的重要应用之一。如何把传统的学习生活方式转移到智能移动终端上来，给师生提供一个实时便捷的校园生活平台，实现个性化的、实时性的生活应用服务，具有很广泛的实际意义。
二、HTML5移动应用技术
HTML5是超文本标记语言的下一个修订版 ，超文本标记语言是用来描述网页外观和内容的标准编程语言。HTML5 是近十年来 Web 标准发展巨大的飞跃。与以前的版本不同，HTML5 包含了更强大的用于交互、多媒体和本地化等各方面的标签以及应用程序接口，HTML5 将把 Web 带入一个视频，音频，图像，动画，以及电脑的交互都被标准化的全新应用平台。HTML5 具有众多优势，更多的描述性标签，良好的多媒体支持，更强大的 Web 应用，跨文档消息通信，Web Sockets，客户端存储，更加精美的界面，更强大的表单，提升可访问性，先进的选择器等等。基于 HTML5 的客户端能够为用户带来更好的用户体验与更丰富的功能。因此基于 HTML5 的校园生活轨迹具有实际的应用价值。
HTML5 是当今互联网最热门的话题之一。其发展速度相当迅速，各大浏览器开发商如微软、Opera、谷歌、Apple、火狐等的最新版本浏览器都纷纷支持 HTML5标准规范。在桌面端 Web 技术领域，原来拥有绝对统治地位的 Adobe 公司的 Flash 插件现在也开始受到 HTML5 的威胁。HTML5 强大的特性在移动 Web 应用当中得到了非常好的发挥。
三、校园生活客户端的设计与实现
3.1功能模块设计及关键技术
本文主要功能就是给用户创建校园生活轨迹内容，并允许用户获取当前所在的位置，提供实时定位功能，同时用户还可以浏览自己的生活轨迹列表，也能下载及查询学校的路况等相关信息。功能模块图1如下：
本次设计采用Sencha Touch的MVC开发模式，并导入Sencha Touch类库和样式文件，同时在app.js中创建一个application 对象作为整个客户端的根节点对象。关键技术如下：
（1）创建首页
创建一个HTML5 标准文档格式HTML 文件，并将JavaScrip 类库、自定义JavaScript
文件、CSS到文件，并命名为index.html。
（2）创建入口函数app.js 本论文以app.js作为整个Sencha Touch MVC 应用程序的入口，属于Web App的核心功能JS 文件，如代码3-1所示。该文件内只有一个创建Application 对象的方法，其中参数name 设置“app”作为命名空间名称，同时launch参数设置应用程序的初始化函数，这个函数将是整个应用程序的入口函数。
Ext.regApplication（{
/* 定义应用程序名称，并作为命名空间 */
name ： 'app'，
/* 默认目标名称 */
defaultTarget ： 'viewport'，
/* 初始化函数 */
launch ： function（）{
this.viewport = new app.views.viewport（）；
}
}）；
（3）主视图viewport
从代码3-1中可以看到，在launch 初始化函数内定义一个viewport 变量，并将变量指向继承Ext.Panel 的自定义组件对象实例。app.views.viewport 是由Sencha Touch 定义的命名空间变量格式，同时也是所有视图组件的父级对象，任何子视图以及其他组件对象都定义在其属性items 内。由于使用Ext.Extend 方法继承Panel 组件的方式创建一个新对象，因此app.views.viewport只是一个对象，而非对象实例。
3.2 手机客户端的设计实现
移动客户端的系统主要是Android、Ios、Window Phone等系统。本次设计以贵州大学校园为例实现客户端的相应服务程序。
（1）列表视图
在Web App 应用程序中，最主要的视图就是内容列表视图，同时也是所有功能模块的入口，它位于主视图viewport 下的子视图。该视图实现的界面效果如图2 所示：
列表视图主要分成两部分：顶部的工具栏模块和列表模块。工具栏模块左右两侧分别有一个按钮，中间是一个标题。列表模块主要是显示生活轨迹内容清单。
（2）表单视图
表单视图的功能是给用户提供标题、内容的输入以及获取当前所在的位置地理经纬度信息。
在表单视图组件的工具栏右侧有一个“提交”按钮，该按钮的主要功能是提交表单视图的所有表单内容，并存储到localStorage对象。获取地理定位信息是通过一个开关按钮控制的，在默认情况下，该开关按钮是关闭状态，用户需要自行开启并确认获取当前地理位置信息。在代码中使用开关按钮的change 事件，实时监听开关按钮的状态变化，以确定地理位置信息是否允许获取。该视图实现的界面效果如图3 所示：
（3）浏览校园生活轨迹
浏览列表项的视图主要提供两种界面用于显示该列表项的内容。第一种视图风格是当列表项中没有地理位置信息时，视图就只显示文字内容；第二种视图风格是当列表项中含有地理位置信息时，视图将显示Google 地图，并在中间位置显示该地理位置标记，当点击地图上的标记时会显示你记录过的生活轨迹内容。
（4）实现视图之间的切换
在介绍View视图组件的时候，一共创建了三个页面视图：列表视图、表单视图、含Google地图的视图。通过添加showListPanel函数、showNoteForm函数和showViewNote函数实现视图之间的切换功能。代码如下3-2所示：
showListPanel：function（）{
Ext.getCmp（"viewport"）.setActiveItem（'listPanel'，{
type：'slide'，
direction：'left'
}）；
}
showNoteForm：function（）{
Ext.getCmp（'viewport'）.setActiveItem（'noteForm'，{
type：'slide'，
direction：'left'
}）；
}
showViewNote：function（）{
Ext.getCmp（"viewport"）.setActiveItem（'viewNote'，{
type：'slide'，
direction：'left'
}）；
}
（5）显示校园生活轨迹
在显示校园生活轨迹内容视图的时候，采用了两种不同的视图显示类型。当单击列表项右侧图标时将触发onItemDisclosure 事件，事件将在handler 函数内调用controller实例对象的showNote 函数，代码如下3-3：
app.views.noteList = Ext.extend（Ext.List，{
……
onItemDisclosure：{
scope：this，
handler：function（record， btn， index）{
app.controllers.appController
.showNote（record， btn， index）；
}
}
……
}）；
showNote 函数的主要功能是判断当前生活轨迹内容是否存在地理位置信息，当不存在地理位置信息时，由视图组件定义的tpl 模板转化成实际HTML 代码并显示在视图组件可视区域。
（6）显示Google 地图
一般情况下，通过Geolocation API 读取的地理位置信息，latitude 和longitude 经纬度值是同时存在的，不可能出现其中一个属性为空而另外一个属性不为空的情况。因此无须判断两个值是否同时存在空置等业务逻辑。可以实现更新地图组件的坐标位置、创建显示地图信息窗口、创建Google地图标记、注册标记事件。
四、总结
本文以Sencha Touch 框架作为整个应用程序的基础库，利用HTML5 标准对移动Web应用程序的良好支持，使用Geolocation 特性获取用户当前地理位置信息，并通过Google 地图提供的API 接口将位置信息标记到Google 地图上，给学生提供各种与位置相关的信息，给他们提供了极大的便利。
参考文献：
[1] 钱海军. 基于HTML5 移动Web 页面开发技术研究[J].电脑与信息技术， 2013（1）.
[2] 鲁学亮. 基于web APP的移动应用客户端设计与实现[J].中国教育信息化， 2012（1）
[3] 唐俊开. HTML5移动web开发指南[M].电子工业出版社， 2013.4
【关键词】HTML5 校园生活轨迹 智能终端 Google maps
Abstract： With the next generation of mobile communications and other new technologies coming， The Intelligent terminal gain popularity. Based on the smart client application development is also growing demand， In campus life， the development trend of mobile Internet model， bring great convenience for teachers and students on learning and life. This paper provides a coordinate information of the web application of new experience for teachers and students to create campus life content and allow them to get the current user’s location. At the same time， the user can browse the life track list. if the life track record with the current location information， it is browsing and display in the way of map. Other wise， it showed in the form of text.
Keywords：HTML5 campus life Trajectory intelligent terminal Google maps
一、移动应用终端发展现状及趋势
随着智能手机的价格越来越便宜，以及3G和4G网络的发展，移动手机用户正在快速转向智能手机。市场研究和咨询公司Gartner发布最新调查报告，中国手机用户总数在2013年首次超过10亿。Gartner分析师预测，2014年，中国市场上将销售4.435亿部手机，而使用中的手机将超过10.75亿部。eMarketer预测，智能手机采用率到2017年将一直保持快速增长步调。将近2/5的移动用户——将近1/4的全球人口——在2014年将至少每月都会使用智能手机。
对于当代大学生来说，手机的高度普及和功能的不断增多，手机的开放性、随身性，使得很多学生利用手机等智能移动设备进行学习交流，目前大多数的智能设备都具有网页浏览、查询资讯、即时通讯、资料共享甚至视频音乐观看下载等功能，移动学习也将成为智能移动终端的重要应用之一。如何把传统的学习生活方式转移到智能移动终端上来，给师生提供一个实时便捷的校园生活平台，实现个性化的、实时性的生活应用服务，具有很广泛的实际意义。
二、HTML5移动应用技术
HTML5是超文本标记语言的下一个修订版 ，超文本标记语言是用来描述网页外观和内容的标准编程语言。HTML5 是近十年来 Web 标准发展巨大的飞跃。与以前的版本不同，HTML5 包含了更强大的用于交互、多媒体和本地化等各方面的标签以及应用程序接口，HTML5 将把 Web 带入一个视频，音频，图像，动画，以及电脑的交互都被标准化的全新应用平台。HTML5 具有众多优势，更多的描述性标签，良好的多媒体支持，更强大的 Web 应用，跨文档消息通信，Web Sockets，客户端存储，更加精美的界面，更强大的表单，提升可访问性，先进的选择器等等。基于 HTML5 的客户端能够为用户带来更好的用户体验与更丰富的功能。因此基于 HTML5 的校园生活轨迹具有实际的应用价值。
HTML5 是当今互联网最热门的话题之一。其发展速度相当迅速，各大浏览器开发商如微软、Opera、谷歌、Apple、火狐等的最新版本浏览器都纷纷支持 HTML5标准规范。在桌面端 Web 技术领域，原来拥有绝对统治地位的 Adobe 公司的 Flash 插件现在也开始受到 HTML5 的威胁。HTML5 强大的特性在移动 Web 应用当中得到了非常好的发挥。
三、校园生活客户端的设计与实现
3.1功能模块设计及关键技术
本文主要功能就是给用户创建校园生活轨迹内容，并允许用户获取当前所在的位置，提供实时定位功能，同时用户还可以浏览自己的生活轨迹列表，也能下载及查询学校的路况等相关信息。功能模块图1如下：
本次设计采用Sencha Touch的MVC开发模式，并导入Sencha Touch类库和样式文件，同时在app.js中创建一个application 对象作为整个客户端的根节点对象。关键技术如下：
（1）创建首页
创建一个HTML5 标准文档格式HTML 文件，并将JavaScrip 类库、自定义JavaScript
文件、CSS到文件，并命名为index.html。
（2）创建入口函数app.js 本论文以app.js作为整个Sencha Touch MVC 应用程序的入口，属于Web App的核心功能JS 文件，如代码3-1所示。该文件内只有一个创建Application 对象的方法，其中参数name 设置“app”作为命名空间名称，同时launch参数设置应用程序的初始化函数，这个函数将是整个应用程序的入口函数。
Ext.regApplication（{
/* 定义应用程序名称，并作为命名空间 */
name ： 'app'，
/* 默认目标名称 */
defaultTarget ： 'viewport'，
/* 初始化函数 */
launch ： function（）{
this.viewport = new app.views.viewport（）；
}
}）；
（3）主视图viewport
从代码3-1中可以看到，在launch 初始化函数内定义一个viewport 变量，并将变量指向继承Ext.Panel 的自定义组件对象实例。app.views.viewport 是由Sencha Touch 定义的命名空间变量格式，同时也是所有视图组件的父级对象，任何子视图以及其他组件对象都定义在其属性items 内。由于使用Ext.Extend 方法继承Panel 组件的方式创建一个新对象，因此app.views.viewport只是一个对象，而非对象实例。
3.2 手机客户端的设计实现
移动客户端的系统主要是Android、Ios、Window Phone等系统。本次设计以贵州大学校园为例实现客户端的相应服务程序。
（1）列表视图
在Web App 应用程序中，最主要的视图就是内容列表视图，同时也是所有功能模块的入口，它位于主视图viewport 下的子视图。该视图实现的界面效果如图2 所示：
列表视图主要分成两部分：顶部的工具栏模块和列表模块。工具栏模块左右两侧分别有一个按钮，中间是一个标题。列表模块主要是显示生活轨迹内容清单。
（2）表单视图
表单视图的功能是给用户提供标题、内容的输入以及获取当前所在的位置地理经纬度信息。
在表单视图组件的工具栏右侧有一个“提交”按钮，该按钮的主要功能是提交表单视图的所有表单内容，并存储到localStorage对象。获取地理定位信息是通过一个开关按钮控制的，在默认情况下，该开关按钮是关闭状态，用户需要自行开启并确认获取当前地理位置信息。在代码中使用开关按钮的change 事件，实时监听开关按钮的状态变化，以确定地理位置信息是否允许获取。该视图实现的界面效果如图3 所示：
（3）浏览校园生活轨迹
浏览列表项的视图主要提供两种界面用于显示该列表项的内容。第一种视图风格是当列表项中没有地理位置信息时，视图就只显示文字内容；第二种视图风格是当列表项中含有地理位置信息时，视图将显示Google 地图，并在中间位置显示该地理位置标记，当点击地图上的标记时会显示你记录过的生活轨迹内容。
（4）实现视图之间的切换
在介绍View视图组件的时候，一共创建了三个页面视图：列表视图、表单视图、含Google地图的视图。通过添加showListPanel函数、showNoteForm函数和showViewNote函数实现视图之间的切换功能。代码如下3-2所示：
showListPanel：function（）{
Ext.getCmp（"viewport"）.setActiveItem（'listPanel'，{
type：'slide'，
direction：'left'
}）；
}
showNoteForm：function（）{
Ext.getCmp（'viewport'）.setActiveItem（'noteForm'，{
type：'slide'，
direction：'left'
}）；
}
showViewNote：function（）{
Ext.getCmp（"viewport"）.setActiveItem（'viewNote'，{
type：'slide'，
direction：'left'
}）；
}
（5）显示校园生活轨迹
在显示校园生活轨迹内容视图的时候，采用了两种不同的视图显示类型。当单击列表项右侧图标时将触发onItemDisclosure 事件，事件将在handler 函数内调用controller实例对象的showNote 函数，代码如下3-3：
app.views.noteList = Ext.extend（Ext.List，{
……
onItemDisclosure：{
scope：this，
handler：function（record， btn， index）{
app.controllers.appController
.showNote（record， btn， index）；
}
}
……
}）；
showNote 函数的主要功能是判断当前生活轨迹内容是否存在地理位置信息，当不存在地理位置信息时，由视图组件定义的tpl 模板转化成实际HTML 代码并显示在视图组件可视区域。
（6）显示Google 地图
一般情况下，通过Geolocation API 读取的地理位置信息，latitude 和longitude 经纬度值是同时存在的，不可能出现其中一个属性为空而另外一个属性不为空的情况。因此无须判断两个值是否同时存在空置等业务逻辑。可以实现更新地图组件的坐标位置、创建显示地图信息窗口、创建Google地图标记、注册标记事件。
四、总结
本文以Sencha Touch 框架作为整个应用程序的基础库，利用HTML5 标准对移动Web应用程序的良好支持，使用Geolocation 特性获取用户当前地理位置信息，并通过Google 地图提供的API 接口将位置信息标记到Google 地图上，给学生提供各种与位置相关的信息，给他们提供了极大的便利。
参考文献：
[1] 钱海军. 基于HTML5 移动Web 页面开发技术研究[J].电脑与信息技术， 2013（1）.
[2] 鲁学亮. 基于web APP的移动应用客户端设计与实现[J].中国教育信息化， 2012（1）
[3] 唐俊开. HTML5移动web开发指南[M].电子工业出版社， 2013.4