Android版添加phonegap--員工簿插件教程

一：建立一個Cordova 項目：
一、確保安裝了最新的Node.js。
二、cmd打開Windows系統的命令行窗口，輸入npm install -g cordova
三、而後cd到一個目錄，該目錄下會保存您的項目。
四、建立一個名爲「workshop的項目：
cordova create workshop com.yourname.workshop Workshop
五、轉到項目目錄：cd workshop
六、添加Android平臺支持：cordova platforms add android
七、添加控件（確保如今仍然在workshop目錄下）：
cordova plugin add org.apache.cordova.device
cordova plugin add org.apache.cordova.console
八、如今能夠看看workshop目錄下的項目結構。

二：構造一個Cordova項目：
確保電腦上安裝了Android SDK。（爲了workshop/platforms/android下的項目並在在真實設備上運行它（前提是你的Android機已經經過USB和電腦連起來了），輸入：cordova run android
爲了在模擬器上整，能夠輸入：cordova emulate android

三：準備Workshop文件：
一、下載assets，解壓。
三、刪除工程（經過上面的步驟建立出來的項目）workshop/www目錄下除了config.xml之外的其餘全部文件。
四、將下載的www下的內容拷貝到workshop/www下。
五、cordova run android 在手機上測試下。

四：選擇一個本地存儲選項：
第1步：看看幾種不一樣的持久化機制：
workshop/js/adapters下的文件提供了幾個adapter：
1.MemoryAdapter (memory-adapter.js中)
2.JSONPAdapter (jsonp-adapter.js中)
3.LocalStorageAdapter (localstorage-adapter.js中)
4.WebSqlAdapter (websql-adapter.js中)
第2步：用幾中不一樣的持久化機制測試程序：
默認狀況下，程序支持提內存數據存儲，爲了變動程序本地的數據存儲，須要如下幾步：
一、在index.html中：不要導入memory-adapter.js，而是將你須要的js導入，好比jsonp-adapter.js或localstorage-adapter.js或websql-adapter.js。
二、在js/app.js中：實例化你選擇的adapter（JSonAdapter或LocalStorageAdapter或WebSqlAdapter)，以代替MemoryAdapter的實例化。
三、測試程序。

五：使用本地Notification：
一個默認的JavaScript Alert會讓人以爲你的程序不是本地的。咱們能夠作一些工做，使得程序在手機上運行時顯示本地彈窗，在瀏覽器中運行時顯示JavaScript彈窗。
一、爲項目添加本地對話框插件：cordova plugin add org.apache.cordova.dialogs
二、在index.html中添加下面的一行：
<script src="cordova.js"></script>，讓其做爲body底部的第一個script標籤（打開index.html能夠看到底部已經導入幾個js文件了）。
這會告訴Cordova CLI在構建項目時注入一個特定版本的cordova.js。意思就是，cordova.js不須要預先保存在項目目錄下。
三、用下面的代碼替換」Event Registration「代碼塊：
document.addEventListener(‘deviceready’, function () {
if (navigator.notification) {
window.alert = function (message) {
navigator.notification.alert(
Message,
Null,
「Workshop」,
‘OK’
   );
        };
            }
               }, false);
當在移動設備上運行時，navigator.notification是可用的，if成立（固然，前提是你已經安裝了對話框插件，咱們上面已經安裝過了），就覆蓋了默認的alter實現。
四、測試程序：點擊」help「按鈕，當在瀏覽器上運行時顯示的是瀏覽器中的alter窗口，當在手機上運行時顯示的就是手機設備本地的Notification窗口。

六：避免300毫秒的點擊延時

七：打造一個單頁程序：
這裏指的是隻有一個HTML頁面的程序。
一、index.html：將body中的HTML標籤移除（script除外）
二、在app.js的當即函數中定義一個renderHomeView函數，在findByName函數右邊）。函數的功能是：給body標籤動態地添加內容：
function renderHomeView() {
var html="<h1>Directory</h1>" +
"<input class=’search-key’ type=’search’ placeholder=’Enter name’/>" + "<ul class=’employee-list’></ul>";
$(‘body’).html(html);
$(‘.search-key’).on(‘keyup’, findByName);
}
三、更data adapter的初始化邏輯：adapter初始化後，調用renderHomeView函數：
var adapter = new MemoryAdapter();
adapter.initialize().done(function () {
   renderHomeView();
});
四、把Event-Registration代碼塊中的這一行$(‘.search-key’).on(‘keyup’, findByName);註釋掉，畢竟咱們已經在renderHomeView寫過了。

五、把Event-Registration代碼塊中的Help Button響應事件代碼也移除，由於如今已經沒這個按鈕了。
六、測試程序。

八：使用處理條模板：
經過Javascript編程的方式動態插入HTML碎片是很是不爽的，HTML模板解決這個問題的辦法就是：將UI的定義(HTML)從代碼中分離出來，有幾個很不錯的HTML模板，包括Mustache.js，Handlebars.js和Undercore.js等。
在這一部分，咱們建立兩個模板，讓程序更加合理。咱們使用Handlebars.js，按以下的步驟更新index.html：
一、包含Handlebars.js（注意，要加到body底部的最上面，至少不要加到app.js的下面，由於app.js裏用到了Handlebars）：<script src="lib/handlebars.js"></script>
二、建立一個HTML模板來渲染Home View，讓下面的代碼做爲body的第一個子標籤：
<script id="home-tpl" type="text/x-handlebars-template">

<div class="topcoat-navigation-bar">
<div class="topcoat-navigation-bar__item center full">
<h1 class="topcoat-navigation-bar__title">Employee Directory</h1>
</div>
</div>
<div class="search-bar">
<input type="search" placeholder="search" class="topcoat-search-input search-key">
</div>
<div class="topcoat-list__container">
<ul class="topcoat-list list employee-list"></ul>
</div>
</script>
三、建立一個HTML模板來呈現員工列表項，下面的代碼緊跟在上面添加的代碼後面：
 <script id="employee-li-tpl" type="text/x-handlebars-template">

{{#.}}
<li class="topcoat-list__item">
<a href="#employees/{{id}}">

<img src="assets/pics/{{pic}}">
<p>{{FirstName}} {{LastName}}</p>
<p>{{title}}</p>
<span class="chevron"></span><span class="count">{{reports}}</span>
</a>
</li>
{{/.}}
</script>
四、把topcoat-mobile-light.css和styles.css引入到index.html：
<link href="assets/topcoat/css/topcoat-mobile-light.css" rel="stylesheet">
<link href="assets/css/styles.css" rel="stylesheet">
更新app.js的當即函數：
一、在adapter變量的聲明後面緊跟下面兩行：
var homeTpl = Handlebars.compile($("#home-tpl").html());
var employeeLiTpl = Handlebars.compile($("#employee-li-tpl").html());
這兩個變量保存着上面定義的兩個模板的編譯後的版本號
二、更新renderHomeView函數，以使用homtTpl模板來代替內聯HTML：
function renderHomeView() {
$('body').html(homeTpl());
$('.search-key').on('keyup', findByName);
}
三、更新findByName函數，以使用employeeLITpl來代替內聯HTML：
function findByName() {
adapter.findByName($('.search-key').val()).done(function (employees) {
$('.employee-list').html(employeeLiTpl(employees));
    });
}
四、測試。

九：建立一個視圖類：
是時候把咱們的程序結構化一下了。若是一直往app.js的當即函數裏給程序添加功能，功能多了後就會難以維護。這部分，咱們會建立一個HomeView對象，它封裝了建立、渲染Home View的邏輯。
第1步：建立HomeView類：
a、在js目錄下建立一個HomeView.js文件，裏面的代碼以下：
var HomeView = function (adapter, template, listItemTemplate) {
}
該構造有三個參數：數據適配器，Home View Template，以及員工列表項Template。
b、在HomeView構造裏定義一個Initialize函數。爲HomeView定義一個div，用來綁定一些視圖相關的事件，在構造內調用Initialize函數。
c、將renderHomeView函數從app.js裏移到HomeView構造裏。爲了視圖重用，咱們將HTML綁定到div而不是body上。將renderHomeView重命名爲render：
this.render = function() {
this.el.html(template());
return this;
};
d、將findByName也移到HomeView中：
this.findByName = function() {
adapter.findByName($('.search-key').val()).done(function(employees) {
$('.employee-list').html(listItemTemplate(employees));
    });
};
第2步：使用HomeView：
a、在index.html中包含HomeView.js（在app.js引入以前）。
b、在app.js中移除renderHomeView。
c、同理移除findByName。
d、更新適配器初始化邏輯，從而當適配器成功初始化後顯示Home View。將adapter,Home View Template,員工列表項template做爲參數傳給HomeView構造：
adapter.initialize().done(function () {
$('body').html(new HomeView(adapter, homeTpl, employeeLiTpl).render().el);
});
e、測試。

KeyMob做爲目前國內最專業的手機廣告優化管理平臺,整合了內外多家主流手機廣告聯盟平臺,覆蓋數千萬用戶.開發者不但能夠經過KeyMob進行應用交叉推廣,成功的將應用推廣到移動網絡每一個應用市場,讓更多的應用開發者在交叉推廣過程當中賺取大量的收入。