Skip to main content

Using PhoneGap with Avatar

Posted by sirajg on November 5, 2013 at 2:12 PM PST

PhoneGap is mobile development framework that allows you to use standard web technologies such as HTML5, CSS3, and JavaScript for cross-platform development, avoiding each mobile platforms' native development language.

Phonegap 2.6.0 has been tested with Avatar and works very well. Let's look at the setup and some sample code.

  1. Download and install Avatar.
  2. Download PhoneGap 2.6.0 zip file and unzip it somewhere.
  3. Follow instructions in PhoneGap documentation to create a new PhoneGap project, for the desired platform. This would typically involve executing the “create” script from the PhoneGap distribution, for a specific platform. For example, on ios, create a PhoneGap project named “hello-phonegap” using this :
    <phonegapp-install-dir>/lib/ios/bin/create <path> <package-name> hello-phonegap
  4. Create an avatar application, using the "avatar" command line interface. To create an avatar application named “hello-avatar” :
    avatar new hello-avatar.

    The "avatar" script is part of your avatar distribution.
  5. Copy cordova-2.6.0.js from the "www" directory of the PhoneGap project to the “view” directory in the avatar app.
  6. Modify the avatar application using PhoneGap APIs, as needed. The avatar source files are under the view/src directory of the avatar application. Following sample avatar code, demonstrates use of a PhoneGap API in an avatar application :
    <!DOCTYPE html>
    <html>
        <head>
            <META http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Hello</title>
            <script type="text/javascript" src="cordova-2.6.0.js"></script>
        </head>
        <body>
            <script data-model="local" data-instance="helloModel">
                var HelloModel = function() {
                    this.sayHello = function() {
                       // call phonegap API
                        navigator.notification.alert('phonegap works from avatar!');                               
                    }
                };
            </script>
            <button onclick="#{helloModel.sayHello()}" >Show Alert</button>               
        </body>
    </html>
  7. Compile the application:
    avatar compile hello-avatar 

  8. Copy the entire directory containing the compiled Avatar application under the www directory of the PhoneGap project.
  9. The avatar application is now ready to be used from PhoneGap. For example, to access the avatar application, “hello-avatar”, add something like this in the www/index.html file of the PhoneGap application :
    <p><a href="hello-avatar/view/index.html">Avatar </a></p>
  10. Follow instructions in the PhoneGap documentation to run the application on a device simulator or actual device.