Skip to content

PhoneGap Native Functions

Jump to bottom
Jim Tang edited this page May 22, 2013 · 6 revisions

Making Use of PhoneGap's Native Functions

In this document, we examine the relationship between Enyo and PhoneGap (a.k.a. "Cordova"), making reference to a simple app that consists of the following code inside an index.html file:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, height=device-height,
        initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>

    <title>Enyo and PhoneGap</title>

    <!-- Cordova (i.e., PhoneGap) -->
    <script src="cordova-1.8.1.js" type="text/javascript" charset="utf-8"></script>

    <!-- Enyo -->
    <script src="enyo/enyo.js" type="text/javascript"></script>
</head>
<body>
    <script>
        // Application kind
        enyo.kind({
            name: "App",
            components: [
                {kind: "Signals", ondeviceready: "deviceReady"},
                {content: "Hello, World!"}
            ],
            deviceReady: function() {
                // respond to deviceready event
            }
        });

        new App().renderInto(document.body);
    </script>
</body>
</html>

Enyo and PhoneGap

When an application is first launched, PhoneGap sends a "deviceready" event to the document body. This event tells us that the application has been launched and PhoneGap has been loaded. It is at this point that we can use Enyo to render the application.

Fortunately, Enyo 2 has added native support for listening to this event. If you are using the latest Enyo 2 build from GitHub, you already have the file that provides this ability, namely, enyo/source/dom/phonegap.js.

In Enyo 2, phonegap.js automatically sends notifications via enyo.Signals when certain PhoneGap events are detected.

The following PhoneGap events are supported:

  • deviceready
  • pause
  • resume
  • online
  • offline
  • backbutton
  • batterycritical
  • batterylow
  • batterystatus
  • menubutton
  • searchbutton
  • startcallbutton
  • endcallbutton
  • volumedownbutton
  • volumeupbutton

In order to respond to one of these events, we add an enyo.Signals instance to our application, e.g.:

enyo.kind({
    name: "App",
    components: [
        {kind: "Signals", ondeviceready: "deviceReady"},
        {content: "Hello, World!"}
    ],
    deviceReady: function() {
        // respond to deviceready event
    }
});

Additional Reading

Clone this wiki locally