Making Use of PhoneGap’s Native Functions

0 BY sfeaster

Now that your project is set up and your application has been included, it’s important to understand the relationship between Enyo and PhoneGap.

When your application is first launched, PhoneGap will send 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, where we can use Enyo to render our application.

Fortunately, Enyo 2 has added native support for listening to this event.
If you are using the latest Enyo 2 build in github ( https://github.com/enyojs/enyo ), you already have the needed file for this ability (enyo/source/dom/phonegap.js).

If you are using the recent public release (Enyo 2.0 beta 4), you will need to download the support package, found in the enyojs/extra repo ( https://github.com/enyojs/extra ). Then you will need to be sure to include that package in your application:

<script src="lib/extra/phonegap/package.js" type="text/javascript"></script>

Enyo 2 uses its “enyo.Signals” kind, in order to listen for when Cordova is ready to render our application. To do this, we need to add an Enyo listener to our document body.

<body>
    <script type="text/javascript">
        // tell enyo to listen for deviceready event
        enyo.dispatcher.listen(document, "deviceready");

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

* Note that we must use App().renderInto(document.body) instead of App.write().
In order to respond to the event we have a listener for, we must add a “enyo.Signals” kind to our application.

enyo.kind({
  name: "App",
  components: [
    {kind: "Signals", ondeviceready: "deviceReady"},
    {content: "Hello world!"}
  ]
});

The full code for our example application is contained within index.html:

<!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 Cordova WP7 Application</title>

   <!-- Cordova -->
    <script src="cordova-1.7.0.js" type="text/javascript" charset="utf-8"></script>

   <!-- Enyo -->
    <script src="enyo/enyo.js" type="text/javascript"></script>

    <!-- Include if using Enyo 2.0 beta 4 -->
    <script src="lib/extra/phonegap/package.js" type="text/javascript"></script>

  </head>

  <body>
    <script>

    // tell enyo to listen for deviceready event
    enyo.dispatcher.listen(document, "deviceready");

    // Application kind
    enyo.kind({
      name: "App",
      components: [
        {kind: "Signals", ondeviceready: "deviceReady"},
        {content: "Hello world!"}
      ]
    });

    new App().renderInto(document.body);

    </script>
  </body>
</html>

Comments are closed.