- This topic has 7 replies, 2 voices, and was last updated 10 years, 5 months ago by
.
-
Posts
-
I did some testing of ME2015’s Mobile Tooling and thought I’d share the code I copy/pasted/modified from here:
http://docs.phonegap.com/en/3.3.0/index.html
What you need to do:
* create a new phonegap application
* replace the index.html with the code below
* build app
* preview app or install it on your mobile device<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="format-detection" content="telephone=no" /> <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 --> <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> <link rel="stylesheet" type="text/css" href="css/index.css" /> <title>Phonegap Features</title> <script type="text/javascript" src="phonegap.js"></script> <script type="text/javascript" src="js/index.js"></script> <script> // Wait for device API libraries to load // document.addEventListener("deviceready", onDeviceReady, false); // device APIs are available // function onDeviceReady() { // Accelerometer startWatchAccelerometer(); // Compass startWatchCompass(); // Geolocation startWatchGeolocation(); // Geolocation Current Position startGeolocationCurrentPosition(); // Connection showConnection(); // Contacts showContacts(); // Device showDevice(); } // ------------------------------------------------------------------------------------------------------ // Accelerometer // ------------------------------------------------------------------------------------------------------ // The watch id references the current `watchAcceleration` var watchIDAccelerometer = null; // Start watching the acceleration // function startWatchAccelerometer() { // Update acceleration every 100 ms var options = { frequency: 100 }; watchIDAccelerometer = navigator.accelerometer.watchAcceleration(onSuccessAccelerometer, onErrorAccelerometer, options); } // Stop watching the acceleration // function stopWatchAccelerometer() { if (watchIDAccelerometer) { navigator.accelerometer.clearWatch(watchIDAccelerometer); watchIDAccelerometer = null; } } // onSuccess: Get a snapshot of the current acceleration // function onSuccessAccelerometer(acceleration) { var element = document.getElementById('accelerometer'); element.innerHTML = 'Acceleration X: ' + acceleration.x + '<br />' + 'Acceleration Y: ' + acceleration.y + '<br />' + 'Acceleration Z: ' + acceleration.z + '<br />' + 'Timestamp: ' + acceleration.timestamp + '<br />'; } // onError: Failed to get the acceleration // function onErrorAccelerometer() { alert('onErrorAccelerometer!'); } // ------------------------------------------------------------------------------------------------------ // Compass // ------------------------------------------------------------------------------------------------------ // The watch id references the current `watchHeading` var watchIDAccelerometer = null; // Start watching the compass // function startWatchCompass() { // Update compass every 100ms var options = { frequency: 100 }; watchIDCompass = navigator.compass.watchHeading(onSuccessCompass, onErrorCompass, options); } // Stop watching the compass // function stopWatchCompass() { if (watchIDCompass) { navigator.compass.clearWatch(watchIDCompass); watchIDCompass = null; } } // onSuccess: Get the current heading // function onSuccessCompass(heading) { var element = document.getElementById('compass'); element.innerHTML = 'Heading: ' + heading.magneticHeading; } // onError: Failed to get the heading // function onErrorCompass(compassError) { alert('Compass error: ' + compassError.code); } // ------------------------------------------------------------------------------------------------------ // Geolocation Watch // ------------------------------------------------------------------------------------------------------ // The watch id references the current `watchPosition` var watchIDGeolocation = null; // Start watching the Geolocation // function startWatchGeolocation() { // Get the most accurate position updates available on the device var options = { timeout: 31000, enableHighAccuracy: true, maximumAge: 90000 }; watchIDGeolocation = navigator.geolocation.watchPosition(onSuccessGeolocation, onErrorGeolocation, options); } // clear the watch that was started earlier // function stopWatchGeolocation() { if (watchIDGeolocation != null) { navigator.geolocation.clearWatch(watchIDGeolocation); watchIDGeolocation = null; } } // onSuccess Geolocation // function onSuccessGeolocation(position) { var element = document.getElementById('geolocation'); element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' + 'Longitude: ' + position.coords.longitude + '<br />' + 'Altitude: ' + position.coords.altitude + '<br />' + 'Accuracy: ' + position.coords.accuracy + '<br />' + 'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' + 'Heading: ' + position.coords.heading + '<br />' + 'Speed: ' + position.coords.speed + '<br />' + 'Timestamp: ' + position.timestamp + '<br />'; } // onError Callback receives a PositionError object // function onErrorGeolocation(error) { alert('onErrorGeolocation ' + 'code: ' + error.code + '\n' + 'message: ' + error.message + '\n'); } // ------------------------------------------------------------------------------------------------------ // Geolocation Current Position // ------------------------------------------------------------------------------------------------------ function startGeolocationCurrentPosition() { var options = { timeout: 31000, enableHighAccuracy: true, maximumAge: 90000 }; navigator.geolocation.getCurrentPosition(onSuccessGeolocationCurrentPosition, onErrorGeolocationCurrentPosition, options); } // onSuccess Geolocation // function onSuccessGeolocationCurrentPosition(position) { var element = document.getElementById('geolocationCurrentPosition'); element.innerHTML = 'Latitude: ' + position.coords.latitude + '<br />' + 'Longitude: ' + position.coords.longitude + '<br />' + 'Altitude: ' + position.coords.altitude + '<br />' + 'Accuracy: ' + position.coords.accuracy + '<br />' + 'Altitude Accuracy: ' + position.coords.altitudeAccuracy + '<br />' + 'Heading: ' + position.coords.heading + '<br />' + 'Speed: ' + position.coords.speed + '<br />' + 'Timestamp: ' + position.timestamp + '<br />'; } // onError Callback receives a PositionError object // function onErrorGeolocationCurrentPosition(error) { alert('onErrorGeolocation' + ": " + 'code: ' + error.code + '\n' + 'message: ' + error.message + '\n'); } // ------------------------------------------------------------------------------------------------------ // Connection // ------------------------------------------------------------------------------------------------------ function showConnection() { var networkState = navigator.connection.type; var states = {}; states[Connection.UNKNOWN] = 'Unknown connection'; states[Connection.ETHERNET] = 'Ethernet connection'; states[Connection.WIFI] = 'WiFi connection'; states[Connection.CELL_2G] = 'Cell 2G connection'; states[Connection.CELL_3G] = 'Cell 3G connection'; states[Connection.CELL_4G] = 'Cell 4G connection'; states[Connection.CELL] = 'Cell generic connection'; states[Connection.NONE] = 'No network connection'; var element = document.getElementById('connection'); element.innerHTML = 'Connection type: ' + states[networkState]; } // ------------------------------------------------------------------------------------------------------ // Contacts // ------------------------------------------------------------------------------------------------------ function showContacts() { // specify contact search criteria var options = new ContactFindOptions(); options.filter = ""; // empty search string returns all contacts options.multiple = true; // return multiple results var filter = ["displayName"]; // return contact.displayName field // find contacts navigator.contacts.find(filter, onSuccessContacts, onErrorContacts, options); } // onSuccess: Get a snapshot of the current contacts // function onSuccessContacts(contacts) { // show only <limit> number of contacts var limit = 10; var html = ""; for (var i=0; i<contacts.length; i++) { html += "<br/>"; html += contacts[i].displayName; if( i >= limit) break; } var element = document.getElementById('contacts'); element.innerHTML = 'Contacts: ' + html; }; // onError: Failed to get the contacts // function onErrorContacts(contactError) { alert('onErrorContacts!'); } // ------------------------------------------------------------------------------------------------------ // Device // ------------------------------------------------------------------------------------------------------ function showDevice() { var element = document.getElementById('deviceProperties'); element.innerHTML = 'Device Name: ' + device.name + '<br />' + 'Device Model: ' + device.model + '<br />' + 'Device Cordova: ' + device.cordova + '<br />' + 'Device Platform: ' + device.platform + '<br />' + 'Device UUID: ' + device.uuid + '<br />' + 'Device Version: ' + device.version + '<br />'; } // ------------------------------------------------------------------------------------------------------ // Globalization // Only Preferred Language so far // TODO: add more properties // TODO: in myeclipse web simulator the info isn't available, an error prompt appears // ------------------------------------------------------------------------------------------------------ function showGlobalizationInfo() { navigator.globalization.getPreferredLanguage( onSuccessPreferredLanguage, onErrorPreferredLanguage); } function onSuccessPreferredLanguage( language) { alert( 'Preferred language: ' + language.value); } function onErrorPreferredLanguage( error) { alert('onErrorPreferredLanguage!'); } // ------------------------------------------------------------------------------------------------------ // Notifications // ------------------------------------------------------------------------------------------------------ // Alert // ------------------------------------------------------------------------------------------------------ // alert dialog dismissed function alertDismissed() { // do something } // Show a custom alertDismissed // function showAlert() { navigator.notification.alert( 'Alert Message', // message alertDismissed, // callback 'Alert Title', // title 'Button Name' // buttonName ); } // Confirm // ------------------------------------------------------------------------------------------------------ // process the confirmation dialog result function onConfirm(buttonIndex) { alert('You selected button index ' + buttonIndex); } // Show a custom confirmation dialog // function showConfirm() { navigator.notification.confirm( 'Confirm Message!', // message onConfirm, // callback to invoke with index of button pressed 'Confirm Title', // title ['Button 1','Button 2'] // buttonLabels ); } // Prompt // ------------------------------------------------------------------------------------------------------ // process the promptation dialog result function onPrompt(results) { alert("You selected button number " + results.buttonIndex + " and entered " + results.input1); } // Show a custom prompt dialog // function showPrompt() { navigator.notification.prompt( 'Prompt message', // message onPrompt, // callback to invoke 'Prompt title', // title ['Button 1','Button 2'], // buttonLabels 'default text' // defaultText ); } // Beep // ------------------------------------------------------------------------------------------------------ // Beep 1 time // function playBeep() { navigator.notification.beep( 1); } // Vibrate // ------------------------------------------------------------------------------------------------------ // Vibrate for 1 seconds // function vibrate() { navigator.notification.vibrate(1000); } // ------------------------------------------------------------------------------------------------------ // Splash Screen // TODO, no img available yet. // see // http://docs.phonegap.com/en/3.3.0/cordova_splashscreen_splashscreen.md.html#Splashscreen // and // http://docs.phonegap.com/en/3.3.0/config_ref_images.md.html#Icons%20and%20Splash%20Screens // ------------------------------------------------------------------------------------------------------ function showSplashScreen() { navigator.splashscreen.show(); } function hideSplashScreen() { navigator.splashscreen.hide(); } </script> </head> <body> <h1>Accelerometer</h1> <p id="accelerometer">Waiting for accelerometer...</p> <h1>Compass</h1> <p id="compass">Waiting for compass...</p> <h1>Geolocation</h1> <p id="geolocation">Finding geolocation...</p> <h1>Geolocation</h1> <div style="text-align:center">(Current Position)</div> <p id="geolocationCurrentPosition">Finding geolocation...</p> <h1>Connection</h1> <p id="connection">Checking Connection</p> <h1>Contacts</h1> <div style="text-align:center">(Max. 10)</div> <p id="contacts">Finding Contacts</p> <h1>Device</h1> <p id="deviceProperties">Device Properties</p> <h1>Globalization</h1> <p> <button type="button" onclick="showGlobalizationInfo(); return false;">Show Globalization Info</button> </p> <h1>Notifications</h1> <h3>Alert</h3> <p> <button type="button" onclick="showAlert(); return false;">Show Alert</button> </p> <h3>Confirm</h3> <p> <button type="button" onclick="showConfirm(); return false;">Show Confirm</button> </p> <h3>Prompt</h3> <p> <button type="button" onclick="showPrompt(); return false;">Show Prompt</button> </p> <h3>Beep</h3> <p> <button type="button" onclick="playBeep(); return false;">Play Beep</button> </p> <h3>Vibrate</h3> <p> <button type="button" onclick="vibrate(); return false;">Vibrate</button> </p> <h1>Splash Screen</h1> <div style="text-align:center">(TODO, no img available yet)</div> <p> <button onclick="showSplashScreen(); return false;">Show Splash Screen</button> </p> </body> </html>The code’s not perfect and was just for doing quick tests to see if/how features work. Feel free to extend/share 🙂
By the way, what I’d like to have:
* the most current verison of phonegap is 3.5.0, ME2015 uses 3.3.0
* a build phonegap app button which builds using the previous configuration (i don’t want to be asked all the time if i want to build local or remote)
* the launch mobile web simulator being connected to the phonegap app. for now you always have to click right mouse button -> phone gap -> preview
* how do i deploy the apk to my phone and launch it there using ME2015?Lofi,
Appreciate you sharing that cool example; I haven’t tried it yet, but will shortly.
* the most current verison of phonegap is 3.5.0, ME2015 uses 3.3.0
Yes, the release somehow slipped by. We’re testing with PG 3.5 now. Note that you should be able to install 3.5 yourself and use that for builds by configuring the PhoneGap runtime on the PhonGap preference page. Did you try that? We’ll have to document the process as well.
* a build phonegap app button which builds using the previous configuration (i don’t want to be asked all the time if i want to build local or remote)
Will look into this. What builds do you run most often though? I’m assuming local?
* the launch mobile web simulator being connected to the phonegap app. for now you always have to click right mouse button -> phone gap -> preview
Assume you talking about the toolbar button – will do.
* how do i deploy the apk to my phone and launch it there using ME2015?
Admittedly there is no integrated solution in 2015 for this, but we do have the tech that makes this possible available already; we need to integrate it. I’ll keep you posted on this.
Did you try that?
Not yet, but will do. I’m waiting for the next ME2015 release which is supposed to be coming this week, so they say 🙂
What builds do you run most often though? I’m assuming local?
Yes, local ones.
Assume you talking about the toolbar button – will do.
Thank you, that would be helpful.
Admittedly there is no integrated solution in 2015 for this, but we do have the tech that makes this possible available already; we need to integrate it. I’ll keep you posted on this.
Oh, that would be great. I really like how that’s done using the android tools. I hope ME2015 can do the same or similar.
Lofi,
On PhoneGap 3.5 – we tried configuring it via the preference page and it worked just fine for local builds. I’m afraid PhoneGap doesn’t seem to support remote builds for 3.5 just yet, so we can’t bundle it with our upcoming release.
On getting your application to the phone, would a solution that requires you to have your device tethered (via USB) to your dev machine work for you? (I believe that is what happens with the android tools?)
@Support-Brian wrote:
On getting your application to the phone, would a solution that requires you to have your device tethered (via USB) to your dev machine work for you? (I believe that is what happens with the android tools?)
Yes, that’s sufficient and is what happens when I develop an android app.
I do it currently with
adb -d install <path-to-apk>
Would be great if you could compile the apk and send it directly to the phone with a click of a button.
In case anyone wants to do it also manually, here’s how to do it:
* installation (example project PhoneGapTest):
adb -d install <path-to-apk>\PhoneGapTest-debug.apk* uninstallation (you have to before you can reinstall it):
adb shell pm uninstall phonegaptest.id* to get the id of your apk (so you can uninstall it):
adb shell pm list packagesIt’s basically the project name in lowercase letters and “.id” as postfix
