Packaging Amber code in a PhoneGap (Cordova) app
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
-
Prepare PhoneGap according to the set-up instructions for your device
-
Copy the Amber js directory under the PhoneGap app's assets directory
-
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
-
Copy the files in the Amber css directory into the PhoneGap app's www directory
-
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> -
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:
