www-=感恩的心=-www

每天进步一点点

2012-02-03 11:19

PhoneGap API 的扩充– 第三方插件 子浏览器 (ChildBrowser)

上一篇文章时关于如何编辑PhoneGap的classes文件去扩展，今天我们讨论如何使用第三方插件。今天我们使用的插件来自esse MacFayden (aka @purplecabbage on twitter).原始代码包你可以从 github下载：

如果你使用的是 0.9.6
你可以得到我的 “HelloPhoneGap” 项目代码包: 
如果你使用的是PhoneGap 1.0
你可以得到我的“HelloPhoneGap1.0” 项目代码包: 

什么是PhoneGap插件?
简单的说, 一个PhoneGap插件就是一个PhoneGap能够获得本地部分功能的扩展，而原始的项目包时没有提供的。

一个PhoneGap插件至少包括两个部分: 
  • 获得本地功能的JavaScript钩子文件
  • 运行本地语言文件和电话功能交互
所以对于OS来说，一个PhoneGap插件就是一个包含至少Js文件和一对 .m & .hObjective-C文件来扩展PhoneGapCommand class的包。

所以这里会出现诸如UIViewControllers, UI.xib files, 图片等其他文件 (取决于插件的复杂程度)。

安装一个第三方插件：
一旦你复制了你想使用的插件，你需要添加到你的项目。这里有很多途径来做可能放在很多不同地方。要保持他的见解而不是冗余的步骤，我们将需要的新的插件放到 ${PROJECT_DIR}/Plugins 目录. 


    按照如下步骤：
  • 下载插件到你的电脑– 注意放的位置
  • 打开你的XCode项目 (由PhoneGap模板而来)
  • 你插件在项目中的目录(而不是PhonGapLib项目
  • 左击你下载的插件文件. 确定“复制” 和“创建组引用” 复选框。
  • 编译项目 — 您可能需要按照插件的类型添加libraries库
在我的 HelloPhoneGap 示例我从@purplecabbage添加了两个插件:
  • ChildBrowser – 用内置浏览器打开资源避免safari
  • NativeControls – 插件使用本地控件，如一个TabBar和ActionSheet（我将在下文说明）。
 
你可以从如上的截图看到, ChildBrowser插件包括图片, 一个viewController,一个 .xib文件,像JavaScript 和 PhoneGapCommand一样运行. 这个控件只用了三个文件。为了使用js插件，这些文件要放在" www"目录下，并且在html文件中加载scrtpt文件。
我在加载过程中执行了如下的脚本文件:
  1. #!/bin/sh
  2. #  PluginCopy.sh
  3. #  HelloPhoneGap
  4. #  Created by Hiedi Utley on 3/30/11.
  5. #  Copyright 2011 Chariot Solutions, LLC. All rights reserved.
  6. cp -rf ${PROJECT_DIR}/Plugins/*/*.js ${PROJECT_DIR}/www
复制代码如何使用插件?
使用插件相对容易些，在你把所有文件放到项目之后，你只需要在页面加载这些scrtpt脚本文件。

示例代码：
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.     <head>
  4.         <!-- Change this if you want to allow scaling -->
  5.         <meta name="viewport" content="width=default-width; user-scalable=no" />
  6.         <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  7.             <link rel="stylesheet" href="HelloPhoneGap.css" type="text/css"/>
  8.             <title>HelloPhoneGap</title>
  9.             <script type="text/javascript" charset="utf-8" src="phonegap.0.9.4.min.js"></script>/* PhoneGap.js优于其他插件文件首先加载*/
  10.             <script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script>
  11.             <script type="text/javascript" charset="utf-8">
  12.                 var childBrowser;
  13.                 function onBodyLoad()
  14.                 {
  15.                     document.addEventListener("deviceready",onDeviceReady,false);
  16.                 }
  17.                 /* PhoneGap has been initialized and is ready to roll */
  18.                 function onDeviceReady()
  19.                 {
  20.                     phoneGapReady.innerHTML = "PhoneGap is Ready";
  21.                     childBrowser = ChildBrowser.install();
  22.                 }
  23.                 function openChildBrowser(url)
  24.                 {
  25.                     try {
  26.                         //both of these should work...
  27.                         //window.plugins.childBrowser.showWebPage(url);
  28.                         childBrowser.showWebPage(url);
  29.                     }
  30.                     catch (err)
  31.                     {
  32.                         alert(err);
  33.                     }
  34.                 }
  35.                 </script>
  36.             </head>
  37.     <body onload="onBodyLoad()">
  38.            <button onclick="openChildBrowser('http://www.google.com');">Open Google</button>
  39.     </body>
  40. </html>
复制代码加载到设备或者模拟器运行之后会显示如下图所示：

 

转自：http://bbs.phonegapcn.com/forum.php?mod=viewthread&tid=33

#Phonegap
浏览(155)评论
评论