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

一：创建一个Cordova 项目：
1、确保安装了最新的Node.js。
2、cmd打开Windows系统的命令行窗口，输入npm install -g cordova
3、然后cd到一个目录，该目录下会保存您的项目。
4、创建一个名为“workshop的项目：
cordova create workshop com.yourname.workshop Workshop
5、转到项目目录：cd workshop
6、添加Android平台支持：cordova platforms add android
7、添加控件（确保现在仍然在workshop目录下）：
cordova plugin add org.apache.cordova.device
cordova plugin add org.apache.cordova.console
8、现在可以看看workshop目录下的项目结构。

二：构造一个Cordova项目：
确保电脑上安装了Android SDK。（为了workshop/platforms/android下的项目并在在真实设备上运行它（前提是你的Android机已经通过USB和电脑连起来了），输入：cordova run android
为了在模拟器上整，可以输入：cordova emulate android

三：准备Workshop文件：
1、下载assets，解压。
3、删除工程（通过上面的步骤创建出来的项目）workshop/www目录下除了config.xml以外的其他所有文件。
4、将下载的www下的内容拷贝到workshop/www下。
5、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步：用几中不同的持久化机制测试程序：
默认情况下，程序支持提内存数据存储，为了变更程序本地的数据存储，需要以下几步：
1、在index.html中：不要导入memory-adapter.js，而是将你需要的js导入，比如jsonp-adapter.js或localstorage-adapter.js或websql-adapter.js。
2、在js/app.js中：实例化你选择的adapter（JSonAdapter或LocalStorageAdapter或WebSqlAdapter)，以代替MemoryAdapter的实例化。
3、测试程序。

五：使用本地Notification：
一个默认的JavaScript Alert会让人觉得你的程序不是本地的。我们可以做一些工作，使得程序在手机上运行时显示本地弹窗，在浏览器中运行时显示JavaScript弹窗。
1、为项目添加本地对话框插件：cordova plugin add org.apache.cordova.dialogs
2、在index.html中添加下面的一行：
<script src="cordova.js"></script>，让其作为body底部的第一个script标签（打开index.html可以看到底部已经导入几个js文件了）。
这会告诉Cordova CLI在构建项目时注入一个特定版本的cordova.js。意思就是，cordova.js不需要预先保存在项目目录下。
3、用下面的代码替换”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实现。
4、测试程序：点击”help“按钮，当在浏览器上运行时显示的是浏览器中的alter窗口，当在手机上运行时显示的就是手机设备本地的Notification窗口。

六：避免300毫秒的点击延时

七：打造一个单页程序：
这里指的是只有一个HTML页面的程序。
1、index.html：将body中的HTML标签移除（script除外）
2、在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);
}
3、更data adapter的初始化逻辑：adapter初始化后，调用renderHomeView函数：
var adapter = new MemoryAdapter();
adapter.initialize().done(function () {
   renderHomeView();
});
4、把Event-Registration代码块中的这一行$(‘.search-key’).on(‘keyup’, findByName);注释掉，毕竟我们已经在renderHomeView写过了。

5、把Event-Registration代码块中的Help Button响应事件代码也移除，因为现在已经没这个按钮了。
6、测试程序。

八：使用处理条模板：
通过Javascript编程的方式动态插入HTML碎片是非常不爽的，HTML模板解决这个问题的办法就是：将UI的定义(HTML)从代码中分离出来，有几个很不错的HTML模板，包括Mustache.js，Handlebars.js和Undercore.js等。
在这一部分，我们创建两个模板，让程序更加合理。我们使用Handlebars.js，按如下的步骤更新index.html：
1、包含Handlebars.js（注意，要加到body底部的最上面，至少不要加到app.js的下面，因为app.js里用到了Handlebars）：<script src="lib/handlebars.js"></script>
2、创建一个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>
3、创建一个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>
4、把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的立即函数：
1、在adapter变量的声明后面紧跟下面两行：
var homeTpl = Handlebars.compile($("#home-tpl").html());
var employeeLiTpl = Handlebars.compile($("#employee-li-tpl").html());
这两个变量保存着上面定义的两个模板的编译后的版本号
2、更新renderHomeView函数，以使用homtTpl模板来代替内联HTML：
function renderHomeView() {
$('body').html(homeTpl());
$('.search-key').on('keyup', findByName);
}
3、更新findByName函数，以使用employeeLITpl来代替内联HTML：
function findByName() {
adapter.findByName($('.search-key').val()).done(function (employees) {
$('.employee-list').html(employeeLiTpl(employees));
    });
}
4、测试。

九：创建一个视图类：
是时候把我们的程序结构化一下了。如果一直往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进行应用交叉推广,成功的将应用推广到移动网络每个应用市场,让更多的应用开发者在交叉推广过程中赚取大量的收入。