Andorid PhoneGap HelloWorld plugin

使用phonegap进行js(web)-native-server模型的混合应用(hybird)的开发,最主要的就是一个Plugin的开发

1.安装phonegap

  1.1 先安装node.js

参考:http://nodejs.org/

1.2安装phonegap

参考:http://phonegap.com/install/

得等好一会的时间

2.创建一个phonegap应用,查看目录结构

在里面有 platforms/目录下面是具体的平台代码目录结构,导入到IDEA中进行编辑

2.1创建Echo plugin 参考http://docs.phonegap.com/en/3.2.0/guide_platforms_android_plugin.md.html#Android%20Plugins

代码:

package com.bbcvision.multiscreen.plugin;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONArray;
import org.json.JSONException;

/**
 * Created with IntelliJ IDEA.
 * User: bbcv
 * Date: 13-12-3
 * Time: AM 10:36
 */
public class Echo extends CordovaPlugin {

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if (action.equals("echo")) {
            String message = args.getString(0);
            this.echo(message, callbackContext);
            return true;
        }
        return false;
    }

    private void echo(String message, CallbackContext callbackContext) {
        if (message != null && message.length() > 0) {
            callbackContext.success("33333333333333");
        } else {
            callbackContext.error("Expected one non-empty string argument.");
        }
    }
}
2.2 配置plugin:

在res/xml/中有个confi.xml配置文件,在这个配置文件中增加plugin

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.phonegap.helloworld" version="1.0.0" xmlns="http://www.w3.org/ns/widgets"
        xmlns:gap="http://phonegap.com/ns/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://www.w3.org/ns/widgets ">
    <name>Hello Cordova</name>
    <description>
        A sample Apache Cordova application that responds to the deviceready event.
    </description>
    <access origin="*"/>
    <content src="index.html"/>
    <preference name="loglevel" value="DEBUG"/>
    <feature name="App">
        <param name="android-package" value="org.apache.cordova.App"/>
    </feature>

    <feature name="Echo">
        <param name="android-package" value="com.bbcvision.multiscreen.plugin.Echo"/>
    </feature>

    <name>HelloWorld</name>
    <description>
        Hello World sample application that responds to the deviceready event.
    </description>
    <author email="support@phonegap.com" href="http://phonegap.com">
        PhoneGap Team
    </author>
    <feature name="http://api.phonegap.com/1.0/device"/>

    <preference name="permissions" value="none"/>
    <preference name="orientation" value="default"/>
    <preference name="target-device" value="universal"/>
    <preference name="fullscreen" value="true"/>
    <preference name="webviewbounce" value="true"/>
    <preference name="prerendered-icon" value="true"/>
    <preference name="stay-in-webview" value="false"/>
    <preference name="ios-statusbarstyle" value="black-opaque"/>
    <preference name="detect-data-types" value="true"/>
    <preference name="exit-on-suspend" value="false"/>
    <preference name="show-splash-screen-spinner" value="true"/>
    <preference name="auto-hide-splash-screen" value="true"/>
    <preference name="disable-cursor" value="false"/>
    <preference name="android-minSdkVersion" value="7"/>
    <preference name="android-installLocation" value="auto"/>
    <icon src="icon.png"/>
    <icon gap:density="ldpi" gap:platform="android" src="res/icon/android/icon-36-ldpi.png"/>
    <icon gap:density="mdpi" gap:platform="android" src="res/icon/android/icon-48-mdpi.png"/>
    <icon gap:density="hdpi" gap:platform="android" src="res/icon/android/icon-72-hdpi.png"/>
    <icon gap:density="xhdpi" gap:platform="android" src="res/icon/android/icon-96-xhdpi.png"/>
    <icon gap:platform="blackberry" src="res/icon/blackberry/icon-80.png"/>
    <icon gap:platform="blackberry" gap:state="hover" src="res/icon/blackberry/icon-80.png"/>

    <icon gap:platform="winphone" src="res/icon/windows-phone/icon-48.png"/>
    <icon gap:platform="winphone" gap:role="background" src="res/icon/windows-phone/icon-173.png"/>
    <gap:splash gap:density="ldpi" gap:platform="android"
                src="res/screen/android/screen-ldpi-portrait.png"/>
    <gap:splash gap:density="mdpi" gap:platform="android"
                src="res/screen/android/screen-mdpi-portrait.png"/>
    <gap:splash gap:density="hdpi" gap:platform="android"
                src="res/screen/android/screen-hdpi-portrait.png"/>
    <gap:splash gap:density="xhdpi" gap:platform="android"
                src="res/screen/android/screen-xhdpi-portrait.png"/>

    <access origin="http://127.0.0.1*"/>
</widget>
2.3编写js代码(桥梁)

在assert/www/js/ 目录中创建echo.js 内容如下:

var echoPlugin =
    { createEvent: function(title, location, notes, startDate, endDate, successCallback, errorCallback)
        {
            cordova.exec(
                successCallback, // success callback function
                errorCallback, // error callback function
                'Echo', // mapped to our native Java class called "CalendarPlugin"
                'echo', // with this action name
                [{                  // and this array of custom arguments to create our entry
                    "title": title,
                    "description": notes,
                    "eventLocation": location,
                    "startTimeMillis": startDate.getTime(),
                    "endTimeMillis": endDate.getTime()
                }]
            );

        }
    }

2.4 在index.js里面增加与Java的通讯代码如下:

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
var app = {
    // Application Constructor
    initialize: function() {
        this.bindEvents();
    },
    // Bind Event Listeners
    //
    // Bind any events that are required on startup. Common events are:
    // 'load', 'deviceready', 'offline', and 'online'.
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    // deviceready Event Handler
    //
    // The scope of 'this' is the event. In order to call the 'receivedEvent'
    // function, we must explicity call 'app.receivedEvent(...);'
    onDeviceReady: function() {
        app.receivedEvent('deviceready');
    },
    addToCal: function() {
        var startDate = new Date("July 19, 2013 8:00:00");
        var endDate = new Date("July 19, 2013 18:00:00");
        var notes = "Arrive on time, don't want to miss out (from Android)";
        var title = "PhoneGap Day";
        var location = "Portland, OR";
        var notes = "Arrive on time, don't want to miss out!";
        var success = function(message) { alert("Success:" + message); };
        var error = function(message) { alert("Oopsie! " + message); };
        echoPlugin.createEvent(title, location, notes, startDate, endDate, success, error);
    },
    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

2.5 写界面html:assert/www/ 目录下面的hello.html

<!DOCTYPE html>
<html>
<head>
    <title>JS-Native Hello World</title>
    <script type="text/javascript" src="phonegap.js"></script>
    <script type="text/javascript" src="js/index.js"></script>
    <script type="text/javascript" src="js/echo.js"></script>
    <script type="text/javascript">
        app.initialize();
    </script>

</head>
<body>
<input type="button" value="Say GAP hello" onClick="app.addToCal()" />
</body>
</html>

3 开始写Android的activity类

3.1 使用PhoneGap的WebView来进行界面定制 参考:http://docs.phonegap.com/en/3.2.0/guide_platforms_android_webview.md.html#Android%20WebViews

本文使用的界面是布局如下:(注意,可以不用从新到入lib包)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
        >

    <org.apache.cordova.CordovaWebView
            android:id="@+id/content"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            ></org.apache.cordova.CordovaWebView>
    <Button
            android:id="@+id/load"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Load URL"
            ></Button>
</LinearLayout>

3.2 写Activity代码(全部参考别人的)

package com.bbcvision.multiscreen;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import org.apache.cordova.CordovaInterface;
import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CordovaWebView;
import roboguice.activity.RoboActivity;
import roboguice.inject.ContentView;
import roboguice.inject.InjectView;

import java.util.concurrent.ExecutorService;
import java.util.concurrent.Executors;

/**
 * Created with IntelliJ IDEA.
 * Date: 13-12-2
 * Time: PM 4:24
 */
@ContentView(R.layout.phonegap1)
public class HelloPhoneGap2 extends RoboActivity implements CordovaInterface {
    private final ExecutorService threadPool = Executors.newCachedThreadPool();
    private CordovaPlugin activityResultCallback;
    private boolean activityResultKeepRunning;
    private boolean keepRunning;
    @InjectView(R.id.content)
    private CordovaWebView mWebView;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mWebView.loadUrl("file:///android_asset/www/hello.html");
    }

    @Override
    public void setActivityResultCallback(CordovaPlugin plugin) {
        this.activityResultCallback = plugin;
    }

    @Override
    public Activity getActivity() {
        return this;
    }

    @Override
    public Object onMessage(String s, Object o) {
        return null;
    }

    @Override
    public ExecutorService getThreadPool() {
        return threadPool;
    }

    protected void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        if (this.activityResultCallback != null) {
            String cClass = this.activityResultCallback.getClass().getName();
            outState.putString("callbackClass", cClass);
        }
    }

    /**
     * Launch an activity for which you would like a result when it finished. When this activity exits,
     * your onActivityResult() method will be called.
     *
     * @param command     The command object
     * @param intent      The intent to start
     * @param requestCode The request code that is passed to callback to identify the activity
     */
    public void startActivityForResult(CordovaPlugin command, Intent intent, int requestCode) {
        this.activityResultCallback = command;
        this.activityResultKeepRunning = this.keepRunning;

        // If multitasking turned on, then disable it for activities that return results
        if (command != null) {
            this.keepRunning = false;
        }

        // Start activity
        super.startActivityForResult(intent, requestCode);
    }
}

注意本文中使用了roboguice进行注入管理。

运行就可以看当了~

作为笔记

参考:http://bbs.9ria.com/thread-231696-1-1.html

《完》



阅读更多
个人分类: android
相关热词: andorid锁
上一篇Android Genymotion #collapse-nostart Error
下一篇Java 异步方法转同步
想对作者说点什么? 我来说一句

phonegap项目环境搭建

2015年08月21日 14.77MB 下载

PhoneGap Eclipse PlugIn for Android

2012年12月22日 17.75MB 下载

Phonegap Helloworld

2013年11月10日 2.62MB 下载

phoneGap插件应用

2013年10月24日 1.79MB 下载

PhoneGap HelloWorld

2011年10月28日 365KB 下载

phonegap-android-plugin

2014年01月01日 3.51MB 下载

Andorid做的HelloWorld

2012年08月11日 20KB 下载

phoneGap开发

2012年09月25日 594KB 下载

没有更多推荐了,返回首页

关闭
关闭