跨平台PhoneGap技术架构三：PhoneGap底层原理（中）

越来越发现把自己的思路理清楚并且能够给别人讲明白是件很困难的事情，技术博客不等于小说、散文，不能天马行空，思维必须严谨，思路必须清晰。

写技术博客要随时审视自己的思路是不是还连贯，要不断返回去看代码，再从代码理清思路。有时还要查找资料来把某个点解释清楚，当然其中会有很多自己不太清楚的地方，所以也希望博友能一起交流、讨论，给指出不正确的地方，博客确实是一个互相进步的很好的手段。

好了，不多说了，进入正题。

昨天讲解了DroidGap类，DroidGap继承Activity，在DroidGap的init()初始化方法中设置了WebView，今天主要讲解CordovaWebView类以及CordovaWebviewClient类和CordovaChromeClient类。

CordovaWebView类

public class CordovaWebView extends WebView {...}

CordovaWebView类继承WebView类，在上一篇博文中已经对WebView类做了简要的介绍。PhoneGap针对不同平台的WebView做了扩展和封装，使WebView这个组件变成可访问设备本地API的强大浏览器，所以开发人员在PhoneGap框架下可通过JavaScript访问设备本地API。

可以说，CordovaWebView是整个PhoneGap的核心组件。

  /**
     * Constructor.
     *
     * @param context
     */
    public CordovaWebView(Context context) {
        super(context);
        if (CordovaInterface.class.isInstance(context))
        {
            this.cordova = (CordovaInterface) context;
        }
        else
        {
            Log.d(TAG, "Your activity must implement CordovaInterface to work");
        }
        this.loadConfiguration();
        this.setup();
    }

CordovaWebView类的构造函数中，需要传入Context，并且Context必须是CordovaInterface的实现类（这里需要特别注意）。构造函数里调用loadConfiguration()和Setup()方法。在CordovaWebView类的构造函数重载方法中，还有setWebChromeClient和setWebViewClient对CordovaWebView的设置，原因在上篇最后也有讲到，这两个类的具体讲解在下面。

    /**
     * Load Cordova configuration from res/xml/cordova.xml.
     * Approved list of URLs that can be loaded into DroidGap
     *      <access origin="http://server regexp" subdomains="true" />
     * Log level: ERROR, WARN, INFO, DEBUG, VERBOSE (default=ERROR)
     *      <log level="DEBUG" />
     */
    private void loadConfiguration() {
        int id = getResources().getIdentifier("cordova", "xml", this.cordova.getActivity().getPackageName());
         // int id = getResources().getIdentifier("cordova", "xml", this.cordova.getPackageName());
        if (id == 0) {
            LOG.i("CordovaLog", "cordova.xml missing. Ignoring...");
            return;
        }
        XmlResourceParser xml = getResources().getXml(id);
        int eventType = -1;
        while (eventType != XmlResourceParser.END_DOCUMENT) {
            if (eventType == XmlResourceParser.START_TAG) {
                String strNode = xml.getName();
                if (strNode.equals("access")) {
                    String origin = xml.getAttributeValue(null, "origin");
                    String subdomains = xml.getAttributeValue(null, "subdomains");
                    if (origin != null) {
                        this.addWhiteListEntry(origin, (subdomains != null) && (subdomains.compareToIgnoreCase("true") == 0));
                    }
                }
                else if (strNode.equals("log")) {
                    String level = xml.getAttributeValue(null, "level");
                    LOG.i("CordovaLog", "Found log level %s", level);
                    if (level != null) {
                        LOG.setLogLevel(level);
                    }
                }
                else if (strNode.equals("preference")) {
                    String name = xml.getAttributeValue(null, "name");
                    String value = xml.getAttributeValue(null, "value");

                    LOG.i("CordovaLog", "Found preference for %s=%s", name, value);
                    Log.d("CordovaLog", "Found preference for " + name + "=" + value);

                    // Save preferences in Intent
                    this.cordova.getActivity().getIntent().putExtra(name, value);
                }
            }
            try {
                eventType = xml.next();
            } catch (XmlPullParserException e) {
                e.printStackTrace();
            } catch (IOException e) {
                e.printStackTrace();
            }
        }

        // Init preferences
        if ("true".equals(this.getProperty("useBrowserHistory", "false"))) {
            this.useBrowserHistory = true;
        }
        else {
            this.useBrowserHistory = false;
        }

        if ("true".equals(this.getProperty("fullscreen", "false"))) {
            this.cordova.getActivity().getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);
            this.cordova.getActivity().getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        }
    }

loadConfiguration()的作用是从res/xml/cordova.xml文件中加载Cordova配置信息，包括允许加载本地网页等，xml文件没几行，不细说。

   /**
     * Initialize webview.
     */
    @SuppressWarnings("deprecation")
    private void setup() {

        this.setInitialScale(0);
        this.setVerticalScrollBarEnabled(false);
        this.requestFocusFromTouch();

        // Enable JavaScript
        WebSettings settings = this.getSettings();
        settings.setJavaScriptEnabled(true);
        settings.setJavaScriptCanOpenWindowsAutomatically(true);
        settings.setLayoutAlgorithm(LayoutAlgorithm.NORMAL);

        //Set the nav dump for HTC
        settings.setNavDump(true);

        // Enable database
        settings.setDatabaseEnabled(true);
        String databasePath = this.cordova.getActivity().getApplicationContext().getDir("database", Context.MODE_PRIVATE).getPath();
        settings.setDatabasePath(databasePath);

        // Enable DOM storage
        settings.setDomStorageEnabled(true);

        // Enable built-in geolocation
        settings.setGeolocationEnabled(true);

        //Start up the plugin manager
        try {
            this.pluginManager = new PluginManager(this, this.cordova);
        } catch (Exception e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }
    }

setup()方法初始化WebView配置，包括设置WebView初始化视图大小、是否允许垂直滚动条、触摸焦点信息。

因为PhoneGap的强大之处在于可以在Web端直接调用底层API，包括照相机、指南针、GPS等设备，其实现这些功能是通过JavaScript与底层交互实现的，所以在接下来设置settings.setJavaScriptEnabled(true)也就理所当然的事情了。

然后设置了数据库database、DOM storage和地理位置应用geolocation等信息，这里也不细讲。

需要着重提到的一点是最后PhoneGap插件的初始化。没错，PhoneGap插件的初始化是在这里进行的。PhoneGap插件管理机制是PhoneGap实现跨平台的基础。pluginManager类在后面也会讲到。

 

在上篇中讲到了DroidGap类loadUrl()方法，我们可以把它看成是整个PhoneGap应用的入口函数。实际DroidGap类的loadUrl()方法调用了CordovaWebView类的loadUrl()方法：

   /**
     * Load the url into the webview.
     *
     * @param url
     */
    @Override
    public void loadUrl(String url) {
        if (url.equals("about:blank") || url.startsWith("javascript:")) {
            this.loadUrlNow(url);
        }
        else {

            String initUrl = this.getProperty("url", null);

            // If first page of app, then set URL to load to be the one passed in
            if (initUrl == null || (this.urls.size() > 0)) {
                this.loadUrlIntoView(url);
            }
            // Otherwise use the URL specified in the activity's extras bundle
            else {
                this.loadUrlIntoView(initUrl);
            }
        }
    }

代码不多，也比较好理解，自己看吧，不细讲了。O(∩_∩)O~

    /**
     * Load the url into the webview.
     *
     * @param url
     */
    public void loadUrlIntoView(final String url) {
        LOG.d(TAG, ">>> loadUrl(" + url + ")");

        this.url = url;
        if (this.baseUrl == null) {
            int i = url.lastIndexOf('/');
            if (i > 0) {
                this.baseUrl = url.substring(0, i + 1);
            }
            else {
                this.baseUrl = this.url + "/";
            }

 //           this.pluginManager.init();

            if (!this.useBrowserHistory) {
                this.urls.push(url);
            }
        }

        // Create a timeout timer for loadUrl
        final CordovaWebView me = this;
        final int currentLoadUrlTimeout = me.loadUrlTimeout;
        final int loadUrlTimeoutValue = Integer.parseInt(this.getProperty("loadUrlTimeoutValue", "20000"));

        // Timeout error method
        final Runnable loadError = new Runnable() {
            public void run() {
                me.stopLoading();
                LOG.e(TAG, "CordovaWebView: TIMEOUT ERROR!");
                if (viewClient != null) {
                    viewClient.onReceivedError(me, -6, "The connection to the server was unsuccessful.", url);
                }
            }
        };

        // Timeout timer method
        final Runnable timeoutCheck = new Runnable() {
            public void run() {
                try {
                    synchronized (this) {
                        wait(loadUrlTimeoutValue);
                    }
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }

                // If timeout, then stop loading and handle error
                if (me.loadUrlTimeout == currentLoadUrlTimeout) {
                    me.cordova.getActivity().runOnUiThread(loadError);
                }
            }
        };

        // Load url
        this.cordova.getActivity().runOnUiThread(new Runnable() {
            public void run() {
                Thread thread = new Thread(timeoutCheck);
                thread.start();
                me.loadUrlNow(url);
            }
        });
    }

这里需要细讲一下。Android WebView里并没有对加载超时的处理，PhoneGap自己实现了加载超时处理的方法。虽然看不看这里并不会影响对PhoneGap整个机制的理解，但拿出来讲一下对以后可能也会很有用处。

从代码的第26行注释看起，CordovaWebViewClient类有一个属性LoadUrlTimeout，这里不要被其定义为int类型迷惑，实际这个变量完全可以是boolean布尔值，因为它只有两个值：0和1。在页面开始加载时currentLoadUrlTimeout初始化为me.loadUrlTimeout（这个值初始化为0），在页面加载完成（注意：这里CordovaWebViewClient派上用场了），即CordovaWebViewClient类里OnpageFinished()方法中appView.LoadUrlTimeout被置成1。定义了loadError和runOnUiThread两个线程。然后起了一个在Timeout之后执行的线程，具体执行那个线程就看页面是否加载完成，即OnpageFinished()方法中appView.LoadUrlTimeout是否被置成了1。

 

CordovaWebViewClient类

CordovaWebViewClient类主要处理各种通知、请求事件的，重写了WebView类的一些方法，这里主要讲解其中onPageStarted()和onPageFinished()两个方法。

    /**
     * Notify the host application that a page has started loading. 
     * This method is called once for each main frame load so a page with iframes or framesets will call onPageStarted 
     * one time for the main frame. This also means that onPageStarted will not be called when the contents of an 
     * embedded frame changes, i.e. clicking a link whose target is an iframe. 
     * 
     * @param view          The webview initiating the callback.
     * @param url           The url of the page.
     */
    @Override
    public void onPageStarted(WebView view, String url, Bitmap favicon) {
        // Clear history so history.back() doesn't do anything.
        // So we can reinit() native side CallbackServer & PluginManager.
        if (!this.appView.useBrowserHistory) {
            view.clearHistory();
            this.doClearHistory = true;
        }

        // Create callback server and plugin manager
        if (this.appView.callbackServer == null) {
            this.appView.callbackServer = new CallbackServer();
            this.appView.callbackServer.init(url);
        }
        else {
            this.appView.callbackServer.reinit(url);
        }

        // Broadcast message that page has loaded
        this.appView.postMessage("onPageStarted", url);
    }

从文档注释我们可以看出，onPageStarted方法用于通知主应用程序Web页面开始加载了。其中在页面加载时比较重要的一步是创建CallbackServer对象并初始化。（CallbackServer类可是实现插件异步执行的重头戏啊，好紧张啊，写了这么久CallbackServer终于出现了啊o(╯□╰)o）

    /**
     * Notify the host application that a page has finished loading.
     * This method is called only for main frame. When onPageFinished() is called, the rendering picture may not be updated yet.
     * 
     *
     * @param view          The webview initiating the callback.
     * @param url           The url of the page.
     */
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        LOG.d(TAG, "onPageFinished(" + url + ")");

        /**
         * Because of a timing issue we need to clear this history in onPageFinished as well as
         * onPageStarted. However we only want to do this if the doClearHistory boolean is set to
         * true. You see when you load a url with a # in it which is common in jQuery applications
         * onPageStared is not called. Clearing the history at that point would break jQuery apps.
         */
        if (this.doClearHistory) {
            view.clearHistory();
            this.doClearHistory = false;
        }

        // Clear timeout flag
        this.appView.loadUrlTimeout++;

        // Try firing the onNativeReady event in JS. If it fails because the JS is
        // not loaded yet then just set a flag so that the onNativeReady can be fired
        // from the JS side when the JS gets to that code.
        if (!url.equals("about:blank")) {
            this.appView.loadUrl("javascript:try{ cordova.require('cordova/channel').onNativeReady.fire();}catch(e){_nativeReady = true;}");
            this.appView.postMessage("onNativeReady", null);
        }

        // Broadcast message that page has loaded
        this.appView.postMessage("onPageFinished", url);

        // Make app visible after 2 sec in case there was a JS error and Cordova JS never initialized correctly
        if (this.appView.getVisibility() == View.INVISIBLE) {
            Thread t = new Thread(new Runnable() {
                public void run() {
                    try {
                        Thread.sleep(2000);
                        cordova.getActivity().runOnUiThread(new Runnable() {
                            public void run() {
                                appView.postMessage("spinner", "stop");
                            }
                        });
                    } catch (InterruptedException e) {
                    }
                }
            });
            t.start();
        }

        // Shutdown if blank loaded
        if (url.equals("about:blank")) {
            if (this.appView.callbackServer != null) {
                this.appView.callbackServer.destroy();
            }
            appView.postMessage("exit", null);
        }
    }

上文已经提到在onPageFinished方法中会执行this.appView.loadUrlTimeout++，定时器loadUrlTimeout的值被置为1，表明页面加载完成。如果没有执行到此，说明加载超时，在CordovaWebView类的loadUrlIntoView()方法中判断if(currentLoadUrlTimeout ==me.loadUrlTimeout)，则执行loadError线程。

CordovaChromeClient类

WebChromeClient是辅助WebView处理Javascript的对话框，网站图标，网站title，加载进度等，一般的WebView可以不设置ChromeClient，比如你的WebView不需要处理JavaScript脚本。前面已经提到为什么PhoneGap要设置ChromeClient，不再多说。

引用某位大侠的话说，关于Java/JS互调，在android sdk文档中,也有用JsInterface和loadUrl做到交互的示例。PhoneGap并没有选择用JsInterface，而是使用拦截prompt这种hack做法。

对JavaScript消息的拦截是在onJsPrompt()方法中实现并处理的。

    /**
     * Tell the client to display a prompt dialog to the user.
     * If the client returns true, WebView will assume that the client will
     * handle the prompt dialog and call the appropriate JsPromptResult method.
     *
     * Since we are hacking prompts for our own purposes, we should not be using them for
     * this purpose, perhaps we should hack console.log to do this instead!
     *
     * @param view
     * @param url
     * @param message
     * @param defaultValue
     * @param result
     */
    @Override
    public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) {

        // Security check to make sure any requests are coming from the page initially
        // loaded in webview and not another loaded in an iframe.
        boolean reqOk = false;
        if (url.startsWith("file://") || url.indexOf(this.appView.baseUrl) == 0 || this.appView.isUrlWhiteListed(url)) {
            reqOk = true;
        }

        // Calling PluginManager.exec() to call a native service using 
        // prompt(this.stringify(args), "gap:"+this.stringify([service, action, callbackId, true]));
        if (reqOk && defaultValue != null && defaultValue.length() > 3 && defaultValue.substring(0, 4).equals("gap:")) {
            JSONArray array;
            try {
                array = new JSONArray(defaultValue.substring(4));
                String service = array.getString(0);
                String action = array.getString(1);
                String callbackId = array.getString(2);
                boolean async = array.getBoolean(3);
                String r = this.appView.pluginManager.exec(service, action, callbackId, message, async);
                result.confirm(r);
            } catch (JSONException e) {
                e.printStackTrace();
            }
        }

        // Polling for JavaScript messages 
        else if (reqOk && defaultValue != null && defaultValue.equals("gap_poll:")) {
            String r = this.appView.callbackServer.getJavascript();
            result.confirm(r);
        }

        // Do NO-OP so older code doesn't display dialog
        else if (defaultValue != null && defaultValue.equals("gap_init:")) {
            result.confirm("OK");
        }

        // Calling into CallbackServer
        else if (reqOk && defaultValue != null && defaultValue.equals("gap_callbackServer:")) {
            String r = "";
            if (message.equals("usePolling")) {
                r = "" + this.appView.callbackServer.usePolling();
            }
            else if (message.equals("restartServer")) {
                this.appView.callbackServer.restartServer();
            }
            else if (message.equals("getPort")) {
                r = Integer.toString(this.appView.callbackServer.getPort());
            }
            else if (message.equals("getToken")) {
                r = this.appView.callbackServer.getToken();
            }
            result.confirm(r);
        }

        // Show dialog
        else {
            final JsPromptResult res = result;
            AlertDialog.Builder dlg = new AlertDialog.Builder(this.cordova.getActivity());
            dlg.setMessage(message);
            final EditText input = new EditText(this.cordova.getActivity());
            if (defaultValue != null) {
                input.setText(defaultValue);
            }
            dlg.setView(input);
            dlg.setCancelable(false);
            dlg.setPositiveButton(android.R.string.ok,
                    new DialogInterface.OnClickListener() {
                        public void onClick(DialogInterface dialog, int which) {
                            String usertext = input.getText().toString();
                            res.confirm(usertext);
                        }
                    });
            dlg.setNegativeButton(android.R.string.cancel,
                    new DialogInterface.OnClickListener() {
                        public void onClick(DialogInterface dialog, int which) {
                            res.cancel();
                        }
                    });
            dlg.create();
            dlg.show();
        }
        return true;
    }

onJsPrompt到底拦截了哪些信息呢？

从传入参数来说，比较重要的有两个：message和defaultValue。

message字符串存放了插件的应用信息，如Camera插件的图片质量、图片是否可编辑，图片返回类型等。

defaultValue字符串存放了插件信息：service（如Camera）、action（如getPicture()）、callbackId、async等。

拦截到这些信息后就会调用this.appView.pluginManager.exec(service, action, callbackId, message, async)去执行。

当然onJsPrompt不只实现插件调用信息，还有JavaScript polling轮询信息、CallbackServer调用信息等处理。

 

呃，今天写到这里吧，欢迎大家批评指正，也可以相互交流。