基于HTML5的校園生活軌跡客戶端的設計與實現(xiàn)

【摘 要】隨著下一代移動通信技術洶涌而來，智能終端設備得到普及，基于智能終端應用開發(fā)的需求也越來越大。在校園生活中，移動互聯(lián)網(wǎng)模式的發(fā)展趨勢，為校園師生的學習、生活帶來極大的便利。本文提供一種全新的web應用體驗方式，為師生創(chuàng)建校園生活軌跡內容并允許他們獲取當前用戶所在地理位置的坐標信息。同時，用戶還可以瀏覽生活軌跡列表，如果記錄的生活軌跡內容保存著當前地理位置信息，瀏覽時便以地圖的方式展示，否則以文本形式顯示。

【關鍵詞】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

一、移動應用終端發(fā)展現(xiàn)狀及趨勢

隨著智能手機的價格越來越便宜，以及3G和4G網(wǎng)絡的發(fā)展，移動手機用戶正在快速轉向智能手機。市場研究和咨詢公司Gartner發(fā)布最新調查報告，中國手機用戶總數(shù)在2013年首次超過10億。Gartner分析師預測，2014年，中國市場上將銷售4.435億部手機，而使用中的手機將超過10.75億部。eMarketer預測，智能手機采用率到2017年將一直保持快速增長步調。將近2/5的移動用戶——將近1/4的全球人口——在2014年將至少每月都會使用智能手機。

對于當代大學生來說，手機的高度普及和功能的不斷增多，手機的開放性、隨身性，使得很多學生利用手機等智能移動設備進行學習交流，目前大多數(shù)的智能設備都具有網(wǎng)頁瀏覽、查詢資訊、即時通訊、資料共享甚至視頻音樂觀看下載等功能，移動學習也將成為智能移動終端的重要應用之一。如何把傳統(tǒng)的學習生活方式轉移到智能移動終端上來，給師生提供一個實時便捷的校園生活平臺，實現(xiàn)個性化的、實時性的生活應用服務，具有很廣泛的實際意義。

二、HTML5移動應用技術

HTML5是超文本標記語言的下一個修訂版 ，超文本標記語言是用來描述網(wǎng)頁外觀和內容的標準編程語言。HTML5 是近十年來 Web 標準發(fā)展巨大的飛躍。與以前的版本不同，HTML5 包含了更強大的用于交互、多媒體和本地化等各方面的標簽以及應用程序接口，HTML5 將把 Web 帶入一個視頻，音頻，圖像，動畫，以及電腦的交互都被標準化的全新應用平臺。HTML5 具有眾多優(yōu)勢，更多的描述性標簽，良好的多媒體支持，更強大的 Web 應用，跨文檔消息通信，Web Sockets，客戶端存儲，更加精美的界面，更強大的表單，提升可訪問性，先進的選擇器等等?；?HTML5 的客戶端能夠為用戶帶來更好的用戶體驗與更豐富的功能。因此基于 HTML5 的校園生活軌跡具有實際的應用價值。

HTML5 是當今互聯(lián)網(wǎng)最熱門的話題之一。其發(fā)展速度相當迅速，各大瀏覽器開發(fā)商如微軟、Opera、谷歌、Apple、火狐等的最新版本瀏覽器都紛紛支持 HTML5標準規(guī)范。在桌面端 Web 技術領域，原來擁有絕對統(tǒng)治地位的 Adobe 公司的 Flash 插件現(xiàn)在也開始受到 HTML5 的威脅。HTML5 強大的特性在移動 Web 應用當中得到了非常好的發(fā)揮。

三、校園生活客戶端的設計與實現(xiàn)

3.1功能模塊設計及關鍵技術

本文主要功能就是給用戶創(chuàng)建校園生活軌跡內容，并允許用戶獲取當前所在的位置，提供實時定位功能，同時用戶還可以瀏覽自己的生活軌跡列表，也能下載及查詢學校的路況等相關信息。功能模塊圖1如下：

本次設計采用Sencha Touch的MVC開發(fā)模式，并導入Sencha Touch類庫和樣式文件，同時在app.js中創(chuàng)建一個application 對象作為整個客戶端的根節(jié)點對象。關鍵技術如下：

（1）創(chuàng)建首頁

創(chuàng)建一個HTML5 標準文檔格式HTML 文件，并將JavaScrip 類庫、自定義JavaScript

文件、CSS到文件，并命名為index.html。

（2）創(chuàng)建入口函數(shù)app.js

本論文以app.js作為整個Sencha Touch MVC 應用程序的入口，屬于Web App的核心功能JS 文件，如代碼3-1所示。該文件內只有一個創(chuàng)建Application 對象的方法，其中參數(shù)name 設置“app”作為命名空間名稱，同時launch參數(shù)設置應用程序的初始化函數(shù)，這個函數(shù)將是整個應用程序的入口函數(shù)。

Ext.regApplication（{

/* 定義應用程序名稱，并作為命名空間 */

name ： 'app'，

/* 默認目標名稱 */

defaultTarget ： 'viewport'，

/* 初始化函數(shù) */

launch ： function（）{

this.viewport = new app.views.viewport（）；

}

}）；

（3）主視圖viewport

從代碼3-1中可以看到，在launch 初始化函數(shù)內定義一個viewport 變量，并將變量指向繼承Ext.Panel 的自定義組件對象實例。app.views.viewport 是由Sencha Touch 定義的命名空間變量格式，同時也是所有視圖組件的父級對象，任何子視圖以及其他組件對象都定義在其屬性items 內。由于使用Ext.Extend 方法繼承Panel 組件的方式創(chuàng)建一個新對象，因此app.views.viewport只是一個對象，而非對象實例。

3.2 手機客戶端的設計實現(xiàn)

移動客戶端的系統(tǒng)主要是Android、Ios、Window Phone等系統(tǒng)。本次設計以貴州大學校園為例實現(xiàn)客戶端的相應服務程序。

（1）列表視圖

在Web App 應用程序中，最主要的視圖就是內容列表視圖，同時也是所有功能模塊的入口，它位于主視圖viewport 下的子視圖。該視圖實現(xiàn)的界面效果如圖2 所示：

列表視圖主要分成兩部分：頂部的工具欄模塊和列表模塊。工具欄模塊左右兩側分別有一個按鈕，中間是一個標題。列表模塊主要是顯示生活軌跡內容清單。

（2）表單視圖

表單視圖的功能是給用戶提供標題、內容的輸入以及獲取當前所在的位置地理經緯度信息。

在表單視圖組件的工具欄右側有一個“提交”按鈕，該按鈕的主要功能是提交表單視圖的所有表單內容，并存儲到localStorage對象。獲取地理定位信息是通過一個開關按鈕控制的，在默認情況下，該開關按鈕是關閉狀態(tài)，用戶需要自行開啟并確認獲取當前地理位置信息。在代碼中使用開關按鈕的change 事件，實時監(jiān)聽開關按鈕的狀態(tài)變化，以確定地理位置信息是否允許獲取。該視圖實現(xiàn)的界面效果如圖3 所示：

（3）瀏覽校園生活軌跡

瀏覽列表項的視圖主要提供兩種界面用于顯示該列表項的內容。第一種視圖風格是當列表項中沒有地理位置信息時，視圖就只顯示文字內容；第二種視圖風格是當列表項中含有地理位置信息時，視圖將顯示Google 地圖，并在中間位置顯示該地理位置標記，當點擊地圖上的標記時會顯示你記錄過的生活軌跡內容。

（4）實現(xiàn)視圖之間的切換

在介紹View視圖組件的時候，一共創(chuàng)建了三個頁面視圖：列表視圖、表單視圖、含Google地圖的視圖。通過添加showListPanel函數(shù)、showNoteForm函數(shù)和showViewNote函數(shù)實現(xiàn)視圖之間的切換功能。代碼如下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）顯示校園生活軌跡

在顯示校園生活軌跡內容視圖的時候，采用了兩種不同的視圖顯示類型。當單擊列表項右側圖標時將觸發(fā)onItemDisclosure 事件，事件將在handler 函數(shù)內調用controller實例對象的showNote 函數(shù)，代碼如下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 函數(shù)的主要功能是判斷當前生活軌跡內容是否存在地理位置信息，當不存在地理位置信息時，由視圖組件定義的tpl 模板轉化成實際HTML 代碼并顯示在視圖組件可視區(qū)域。

（6）顯示Google 地圖

一般情況下，通過Geolocation API 讀取的地理位置信息，latitude 和longitude 經緯度值是同時存在的，不可能出現(xiàn)其中一個屬性為空而另外一個屬性不為空的情況。因此無須判斷兩個值是否同時存在空置等業(yè)務邏輯。可以實現(xiàn)更新地圖組件的坐標位置、創(chuàng)建顯示地圖信息窗口、創(chuàng)建Google地圖標記、注冊標記事件。

四、總結

本文以Sencha Touch 框架作為整個應用程序的基礎庫，利用HTML5 標準對移動Web應用程序的良好支持，使用Geolocation 特性獲取用戶當前地理位置信息，并通過Google 地圖提供的API 接口將位置信息標記到Google 地圖上，給學生提供各種與位置相關的信息，給他們提供了極大的便利。

參考文獻：

[1] 錢海軍. 基于HTML5 移動Web 頁面開發(fā)技術研究[J].電腦與信息技術， 2013（1）.

[2] 魯學亮. 基于web APP的移動應用客戶端設計與實現(xiàn)[J].中國教育信息化， 2012（1）

[3] 唐俊開. HTML5移動web開發(fā)指南[M].電子工業(yè)出版社， 2013.4