Cordova/PhoneGap inhibit/prevent sleeping mode

If you need to prevent the sleeping mode here is a plugin that does this..

Install it:
cordova plugin add https://github.com/EddyVerbruggen/Insomnia-PhoneGap-Plugin.git

or

phonegap plugin add https://github.com/EddyVerbruggen/Insomnia-PhoneGap-Plugin.git

than to use it this is the code; to prevent sleep mode use:

window.plugins.insomnia.keepAwake()

instead to re-allow the sleeping mode again use:


window.plugins.insomnia.allowSleepAgain()

Please refer here to full documentation.....

 Bye..

Cordova/PhoneGap force the calling to the virtual keyboard - how to

I've spent some days to search a solution to an issue I have when a input text in my ui needs to show the android virtual keyboard.
The only way I found, is to add a plugin to my cordova-phonegap project via command line interface.
First, ensure you have cordova.js included/imported in your html page.
Move into the project directory and type:
cordova plugin add ionic-plugin-keyboard

the in your code(javascript) when you need call this:
cordova.plugins.Keyboard.show();

...and the virtual keyboard show up.

Note that during development if you are testing your app in the browser, probably you'll be notified by this error:

"Cannot read property 'Keyboard' of undefined"

It's depends by the cordova.js that you have included into the page, but it is imported only when application is built for the devices.
So you will really see it in the device or in device emulator.

It's all.

I try it only in Android. Please notify me(also with a simple comment) if it correctly works on other platforms.

Here you can find some documentation.

Bye...

Phonegap: your first easy mobile app.....

Here we see how to make a first simple mobile app starting to the real funny "Pokemon Fusion" web page realized by Alex Onsager and you find by clicking here....(http://pokemon.alexonsager.net/)

We will do a simple import(by an html iframe) of the page of Pokemon Fusion.
We will write only a single code row.
We will do a simple test to try how PhoneGap works.....

At the and we have an .apk file to install on our android phone

Prerequisites: PhoneGap development kit correctly installed on your pc... an android phone correcty connected and recognized by your pc(and phonegap).

Step 1: open a prompt and create a working directory(mkdir pokemonfusion_test)
Step 2: move under your working dir: cd pokemonfusion_test
Step 3: create a simple PhoneGap test project: phonegap create test
Step 4: move under www directory and open index.html for editing it....
Step 5: remove from the body tag element all its content and paste this
        <iframe src="http://pokemon.alexonsager.net/" style="width:100%; height:100%;">
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
the last two rows are already existent in the file.......
So those three rows will be the only content of the body tag.....
Save and close the file.
Step 6: deploy all on your android phone(or your local emulator....): phonegap run android

After few minutes Pokemon Fusion will be displayed on your android system......
Your application will installed with "Hello World
" name. And its icon will be the default icon for test application.

All it's done, you can download by here:

Or checkout via SVN under this: svn+ssh://svn.code.sf.net/p/pokemonfusion/code
Access by anonymous user with no password.
If you have a svn client type this:
svn checkout svn://svn.code.sf.net/p/pokemonfusion/code/ pokemonfusion-code 

You can find here the project of the phonegap application as you see in this post.

Bye.....

Cordova/PhoneGap: prevent screen rotation

Fix the screen side of your app, preventing screen rotation.
Edit the config.xml file, the orientation preference tag in one of these ways:

<preference name="orientation" value="portrait" />

<preference name="orientation" value="landscape" />


Bye...

PhoneGap plugins: file transfer - download

file-transfer plugin needed.
Install it with this: 

phonegap plugin add org.apache.cordova.file-transfer

Here is my example.html(within javascript code).
This example provides a file download(pay attention to change the value of file url to download):

<!DOCTYPE html>
<html>
  <head>
    <title>PhoneGap Transfer - download - Example Page</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // !! Assumes variable fileURL contains a valid URL to a path on the device,
//    for example, cdvfile://localhost/persistent/path/to/downloads/

    function startDownload () {
        alert ("invoked startDownload function...") ;
        var fileTransfer = new FileTransfer();
        var downloadUrl = encodeURI("http://www.yoursite.com/file_to_download.txt");

        var relativeFilePath = "./papa-francesco.sqlite";  // using an absolute path also does not work

        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fileSystem) {
           var fileTransfer = new FileTransfer();
           fileTransfer.download(
              downloadUrl,

              // The correct path!
              fileSystem.root.toURL() + '/' + relativeFilePath,

              function (entry) {
                 console.log("Success");
              },
              function (error) {
                 console.log("Error during download. Code = " + error.code);
              }
           );
        });
  
    }
    </script>
  </head>
  <body>
    <p><button onclick="startDownload()">start download</button></p>
  </body>
</html>

Bye...

PhoneGap/Cordova: file reading plugin example

file plugin needed.
Install it with this: 

phonegap plugin add org.apache.cordova.file

Here is my example.html(within javascript code).
This example provides to read file in locale storage, displaying its contents into a javascript alert:

<!DOCTYPE html>
<html>
  <head>
    <title>PhoneGap Read File Example Page</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
 
        document.addEventListener("deviceready", onDeviceReady, false);
 

    // Cordova is ready
    //
    function onDeviceReady() {
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
    }

    function gotFS(fileSystem) {
        fileSystem.root.getFile("writing_test_with_phonegap.txt", null, gotFileEntry, fail);
    }

    function gotFileEntry(fileEntry) {
        fileEntry.file(gotFile, fail);
    }

    function gotFile(file){
        alert("gotFile invoked with file: " + file.name);
        readDataUrl(file);
        readAsText(file);
    }

    function readDataUrl(file) {
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            console.log("Read as data URL");
            console.log(evt.target.result);          
        };
        reader.readAsDataURL(file);
    }

    function readAsText(file) {
        var reader = new FileReader();
        reader.onloadend = function(evt) {
            console.log("Read as text");
            console.log(evt.target.result);
            alert(evt.target.result);
        };
        reader.readAsText(file);
    }

    function fail(evt) {
        console.log(evt.target.error.code);
    }

    </script>
  </head>
  <body>
    <h1>Example</h1>
    <p>Read File</p>
  </body>
</html>

Bye...

PhoneGap plugins: writing file

file plugin needed.
Install it with this: 

phonegap plugin add org.apache.cordova.file

Here is my example.html(within javascript code).
This example provides to write file in locale storage:

<!DOCTYPE html>
<html>
  <head>
    <title>PhoneGap Write File Example Page</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function onDeviceReady() {
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
    }

    function gotFS(fileSystem) {
        fileSystem.root.getFile("writing_test_with_phonegap.txt", {create: true, exclusive: false}, gotFileEntry, fail);
    }

    function gotFileEntry(fileEntry) {
        fileEntry.createWriter(gotFileWriter, fail);
    }

    function gotFileWriter(writer) {
        writer.onwriteend = function(evt) {
            console.log("contents of file now 'some sample text'");
            writer.truncate(11);
            writer.onwriteend = function(evt) {
                console.log("contents of file now 'some sample'");
                writer.seek(4);
                writer.write(" different text");
                writer.onwriteend = function(evt){
                    console.log("contents of file now 'some different text'");
                }
            };
        };
        writer.write("some sample text");
        alert("file written!!!");
    }

    function fail(error) {
        console.log(error.code);
    }

    </script>
  </head>
  <body>
    <h1>Example</h1>
    <p>Write File</p>
  </body>
</html>

Bye...

PhoneGap plugins: Device informations

device plugin needed.
Install it with this: 

phonegap plugin add org.apache.cordova.device

Here is my example.html(within javascript code).
This example provides device informations:

<!DOCTYPE html>
<html>
  <head>
    <title>PhoneGap Device Example Page</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function onDeviceReady() {
        var element = document.getElementById('deviceProperties');

        element.innerHTML = 'Device Name: '     + device.name     + '<br />' +
                            'Device Cordova: '  + device.cordova + '<br />' +
                            'Device Platform: ' + device.platform + '<br />' +
                            'Device UUID: '     + device.uuid     + '<br />' +
                            'Device Model: '    + device.model     + '<br />' +
                            'Device Version: '  + device.version  + '<br />';
    }

    </script>
  </head>
  <body>
    <p id="deviceProperties">Loading device properties...</p>
  </body>
</html>

Bye... 

PhoneGap plugins: Compass

device-orientation plugin needed.
Install it with this: 

phonegap plugin add org.apache.cordova.device-orientation

Here is my example.html(within javascript code).
This example provides current heading of device and display it into a javascript alert:

<!DOCTYPE html>
<html>
  <head>
    <title>PhoneGap Compass Example Page</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is ready
    //
    function getCurrentHeading() {
        navigator.compass.getCurrentHeading(onSuccess, onError);
    }

    // onSuccess: Get the current heading
    //
    function onSuccess(heading) {
        alert('Heading: ' + heading.magneticHeading);
    }

    // onError: Failed to get the heading
    //
    function onError(compassError) {
        alert('Compass Error: ' + compassError.code);
    }

    </script>
  </head>
  <body>
    <h1>PhoneGap Compass Example</h1>
    <p>
        <button onclick="getCurrentHeading()">Click me to get current heading</button>
    </p>
  </body>
</html>

Bye... 

PhoneGap plugins: Network Connection

network-information plugin needed.
Install it with this: 

phonegap plugin add org.apache.cordova.network-information

Here is my example.html(within javascript code).
This example provides device connection informations:

<!DOCTYPE html>
<html>
  <head>
    <title>PhoneGap Connection Example Page</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);

    // Cordova is loaded and it is now safe to make calls Cordova methods
    //
    function onDeviceReady() {
        checkConnection();
    }

    function checkConnection() {
        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';

        alert('Connection type: ' + states[networkState]);
    }

    </script>
  </head>
  <body>
    <p>A dialog box will report the network state.</p>
  </body>
</html>

Bye... 

PhoneGap plugins: Media-capture - video

media-capture plugin needed.
Install it with this: 

phonegap plugin add org.apache.cordova.media-capture

Here is my example.html(within javascript code).
This provides capability to start default system application for video recording and save your video into default locale location(displaying it into a javascript alert):

<!DOCTYPE html>
<html>
  <head>
    <title>PhoneGap Capture Video Example Page</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Called when capture operation is finished
    //
    function captureSuccess(mediaFiles) {
        var i, len;
        for (i = 0, len = mediaFiles.length; i < len; i += 1) {         
            alert (mediaFiles[i].fullPath + " e " + mediaFiles[i].name);
        }      
    }

    // Called if something bad happens.
    //
    function captureError(error) {
        var msg = 'An error occurred during capture: ' + error.code;
        navigator.notification.alert(msg, null, 'Uh oh!');
    }

    function captureVideo() {
        // Launch device camera application,
        // allowing user to capture up to 2 audio clips
        navigator.device.capture.captureVideo(captureSuccess, captureError, {limit: 2});
    }
    </script>
    </head>
    <body>
        <button onclick="captureVideo();">Capture Video</button> <br>
    </body>
</html>

PhoneGap plugins: Media-capture - photo

media-capture plugin needed.
Install it with this: 

phonegap plugin add org.apache.cordova.media-capture

Here is my example.html(within javascript code).
This prvides capability to start default system application for photo recording and save your photo into default locale location(displaying it into a javascript alert):

<!DOCTYPE html>
<html>
  <head>
    <title>PhoneGap Capture Image Example Page</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Called when capture operation is finished
    //
    function captureSuccess(mediaFiles) {
        var i, len;
        for (i = 0, len = mediaFiles.length; i < len; i += 1) {         
            alert (mediaFiles[i].fullPath + " e " + mediaFiles[i].name);
        }      
    }

    // Called if something bad happens.
    //
    function captureError(error) {
        var msg = 'An error occurred during capture: ' + error.code;
        navigator.notification.alert(msg, null, 'Uh oh!');
    }

    function captureImage() {
        // Launch device camera application,
        // allowing user to capture up to 2 audio clips
        navigator.device.capture.captureImage(captureSuccess, captureError, {limit: 2});
    }
    </script>
    </head>
    <body>
        <button onclick="captureImage();">Capture Image</button> <br>
    </body>
</html>

Bye... 

PhoneGap plugins: Media-capture - audio

media-capture plugin needed.
Install it with this: 

phonegap plugin add org.apache.cordova.media-capture

Here is my example.html(within javascript code).
This provides capability to start default system application for audio recording/reproducing and save your audio registration into default locale location(displaying it into a javascript alert):

<!DOCTYPE html>
<html>
  <head>
    <title>PhoneGap Capture Audio Example Page</title>

    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">

    // Called when capture operation is finished
    //
    function captureSuccess(mediaFiles) {
        var i, len;
        for (i = 0, len = mediaFiles.length; i < len; i += 1) {         
            alert (mediaFiles[i].fullPath + " e " + mediaFiles[i].name);
        }      
    }

    // Called if something bad happens.
    //
    function captureError(error) {
        var msg = 'An error occurred during capture: ' + error.code;
        navigator.notification.alert(msg, null, 'Uh oh!');
    }

    function captureAudio() {
        // Launch device audio recording application,
        // allowing user to capture up to 2 audio clips
        navigator.device.capture.captureAudio(captureSuccess, captureError, {limit: 2});
    }
    </script>
    </head>
    <body>
        <button onclick="captureAudio();">Capture Audio</button> <br>
    </body>
</html>

PhoneGap plugins: Accelerometer

For Accelerometer plugin you need to install device-motion plugin, as here

phonegap plugin add org.apache.cordova.device-motion

For Android nothing is needed to add into AndroidManifest.xml file.
For iOS you need to add into config.xml file:

<plugin name="Accelerometer" value="CDVAccelerometer" />

Here is some html and javascipt code to run a quickly example.


<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">

    document.addEventListener("deviceready", onDeviceReady, false);
   
    function onDeviceReady() {
        alert("Device is Ready");
    }

    function getAcceleration(){
        navigator.accelerometer.getCurrentAcceleration(onAccelSuccess, onError);
    }

    function onAccelSuccess(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 />';
    }

    function onError() {
        alert('onError!');
    }

    function startWatch() {
        // Update acceleration every 1 seconds
        var options = { frequency: 1000 };

        watchID = navigator.accelerometer.watchAcceleration(onAccelSuccess, onError, options);
    }

    function stopWatch() {
        if (watchID) {
            navigator.accelerometer.clearWatch(watchID);
            watchID = null;
        }
    }
    </script>


And here the html code....

 <body>
    <h1>PhoneGap Accelerometer Example</h1>
    <p>
        <button onclick="getAcceleration()">Get Acceleration</button>
    </p>
    <p>
        <button onclick="startWatch()">Start Acceleration Debug</button>
    </p>
    <p>
        <button onclick="stopWatch()">Stop Acceleration Debug</button>
    </p>
    <div id="accelerometer">Accelerometer debug area...</div>
  </body>

This html code shows three buttons.
Two of them invoke the two javascript functions getAcceleration() and startWatch().
The results is displayed into div area with id="accelerometer", in the lower of the page.

Bye...

Introducing to PhoneGap Events

Here is a small list of current available events implemented from current PhoneGap version.
Thery aren't supported for all(100%) PhoneGap supported platforms.
See every link target for ensure the current support for your s.o. application target.

• deviceready
• pause
• resume
• online
• offline
• backbutton
• batterycritical
• batterylow
• batterystatus
• menubutton
• searchbutton
• startcallbutton
• endcallbutton
• volumedownbutton
• volumeupbutton

A small example to test some of these states:
(to insert in the head tag of your test page).

<script type="text/javascript" src="cordova.js" />
<script type="text/javascript" charset="utf-8">

    // Wait for Cordova to load              
    function onDeviceReady () {
        alert ("device ready!!!") ;
    }
    function onOnline () {
        alert ("online!!!") ;
    }
    function onOffline () {
        alert ("offline!!!") ;
    }
      
    document.addEventListener("deviceready", onDeviceReady, false);
    document.addEventListener("online", onOnline, false);
    document.addEventListener("offline", onOffline, false);        
</script>


For battery events you need to install, before, a battery-status plugin.
From shell, within $application_project_home_folder, give this command:

phonegap plugin add org.apache.cordova.battery-status

At last check into AndroidManifest.xml for

<uses-permission android:name="android.permission.BROADCAST_STICKY" />

and into config.xml for iOS

<plugin name="Battery" value="CDVBattery" /> 

For other platforms see here

For online/offline status you need to install, before,
From shell, within $application_project_home_folder, give this command:

phonegap plugin add org.apache.cordova.network-information

At last check into AndroidManifest.xml for

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<uses-permission android:name="android.permission.READ_PHONE_STATE" />

and into config.xml for iOS

<plugin name="NetworkStatus" value="CDVConnection" />

For other platforms see here

Bye...