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>
Topics  Uncategorized

WebOS to the Max

3 BY sfeaster

When developing and pushing the limits of webOS applications, it can be helpful to know some of the boundaries you might run into. Here are a few that have come up in the past for other developers:

Read more

webOS Character Sets

6 BY sfeaster

We sometimes get questions about which languages our default Prelude font supports. In this post, we will give a brief overview of our character sets, supported languages, and encoding.

Read more

Using Services in PDK Apps

1 BY sfeaster

I thought it might be helpful to cover some of the basics of making service calls in PDK apps, as well as point out some possibilities for those of you either new to PDK development or new to using services.

One quick note: While one-shot service calls work just fine, there are a few known issues when using services in PDK that require subscriptions. These will be fixed in a future release. With that in mind, you’ll still find that there are a lot of useful services to take advantage of in your apps.

Read more

Dynamic Widget Instantiation

1 BY sfeaster

Have you ever needed to set up a Mojo widget sometime after a scene’s setup method has been called? Perhaps you aren’t ready or don’t want the overhead of setting your widget up when the scene first loads. Or maybe you’re waiting until some condition has been met, such as the activate method being called after a scene above is popped. Or maybe you want to do something fancy like create an engine that programmatically populates a scene & its widgets at any point in a scene’s lifecycle.

Well, the instantiateChildWidgets function does just what you need here and it’s a method that sometimes gets overlooked. The basic idea is that you’ll setup your widgets as usual, just not in the scene’s setup method, then use the scene’s controller to call the instantiateChildWidgets function on the container div of the widgets you’re setting up.

Read more