Skip to content

Packaging Amber code in a PhoneGap (Cordova) app

Jump to bottom
cpa4ajm edited this page Apr 13, 2012 · 2 revisions

This is a basic PhoneGap/Cordova adaptation of the Amber Hello World in Writing my First App, with a couple of additions to show Cordova accessing information about the mobile device.

N.B. These are the steps for an Android device from Eclipse on Windows, and are likely to vary for other combinations

  1. Prepare PhoneGap according to the set-up instructions for your device

  2. Copy the Amber js directory under the PhoneGap app's assets directory

  3. In this example, copy your HelloApp.deploy.js and HelloApp.js files into the copy of the js directory now under PhoneGap app's assets directory from step 2

  4. Copy the files in the Amber css directory into the PhoneGap app's www directory

  5. Update the Index.html file in assets/www as below:

     <!DOCTYPE html>
 <html>
   <head>
     <title>My First Amber Project with PhoneGap</title>

 <!--Reference Amber-->
 <script src="../js/amber.js" type="text/javascript"></script>
 <script src="../js/lib/jQuery/jquery-1.6.4.min.js" type="text/javascript"></script>
 <script src="../js/lib/jQuery/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
 <script src="../js/lib/jQuery/jquery.textarea.js" type="text/javascript"></script>
 <script type="text/javascript"> loadAmber()</script>
 <link rel="stylesheet" type="text/css" href='style.css' />
 <link rel="stylesheet" type="text/css" href='amber.css' />

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

 <script type="text/javascript">
     	//Amber 'initialisation' 
     	loadAmber({
 	        files: ['HelloApp.js'],
     	    prefix: '', // path for js files i think
     	    ready: function() {
     	      $(function() {
     	        smalltalk.Hello._new()._begin();
     	      });
     	}}); 
 
         // Wait for PhoneGap to load
         //
         document.addEventListener("deviceready", onDeviceReady, false);
 
         // PhoneGap is ready
         //
         function onDeviceReady() {
             // Empty
         }
 
         // alert dialog dismissed
         function alertDismissed() {
             // do something
         }
 
        // Show another custom alert
         function showAlert() {
             navigator.notification.alert(smalltalk.Hello._new()._helloFromSmalltalk() + ' on: ' + device.name);
         }
     
         function onDeviceReady() {
 	    var element = document.getElementById('deviceProperties');

         element.innerHTML = 'Device Name: '     + device.name     + '<br />' + 
                             'Device PhoneGap: ' + device.phonegap + '<br />' + 
                             'Device Platform: ' + device.platform + '<br />' + 
                             'Device UUID: '     + device.uuid     + '<br />' + 
                             'Device Version: '  + device.version  + '<br />';
          }
     
 </script>


   </head>
   <body>
      <article>
       <h1>My First Amber Project with PhoneGap</h1>
       <button onclick="smalltalk.Browser._open()">class browser</button>
       <button id="sayHello">say hello</button>
      </article>
     <p><a href="#" onclick="showAlert(); return false;">Show alert with text from Amber</a></p>
     <p id="deviceProperties">Loading device properties...</p>
   </body>
 </html>

  6. Connect your device and, from the development environment, select the option to install and run the app.

Here are some screen shots from the Android device (HTC Sensation) showing the app running:

Initial view (device in airplane mode to show app running locally) Invoked 'say hello' Show a dialog Open class browser Select sUnit 95 tests run successfully!

Clone this wiki locally