-

- -

Sunday, November 9, 2014

APACHE CORDOVA API 3 0 Files

---
APACHE CORDOVA API 3 0 Files

1) Reference

2) Full Example

<!DOCTYPE html>
<html>
  <head>
    <title>FileWriter Example</title>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">
    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);
    // device APIs are available
    //
    function onDeviceReady() {
        window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, gotFS, fail);
    }
    function gotFS(fileSystem) {
        fileSystem.root.getFile("readme.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");
    }
    function fail(error) {
        console.log(error.code);
    }
    </script>
  </head>
  <body>
    <h1>Example</h1>
    <p>Write File</p>
  </body>
</html>

3) Create a new project using Blank Template

Project Name: demoCordovaFiles

4) Replace Index file

5) Debug

5.1) Connect Device
5.2) Launch Project
5.2) Debug Project

6) Screenshot

7) Build Project

Select required plug-ins before building the apps.

8) Download

---

APACHE CORDOVA API 3 0 Events

---
APACHE CORDOVA API 3 0 Events

1) Reference

2) Full Example

<!DOCTYPE html>
<html>
  <head>
    <title>Back Button Example</title>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">
    // Wait for device API libraries to load
    //
    function onLoad() {
        document.addEventListener("deviceready", onDeviceReady, false);
    }
    // device APIs are available
    //
    function onDeviceReady() {
        // Register the event listener
        document.addEventListener("backbutton", onBackKeyDown, false);
    }
    // Handle the back button
    //
    function onBackKeyDown() {
        alert("back button pressed!");
    }
    </script>
  </head>
  <body onload="onLoad()">
  </body>
</html>

3) Create a new project using Blank Template

Project Name: demoCordovaEvents

4) Replace Index file

5) Debug

5.1) Connect Device
5.2) Launch Project
5.2) Debug Project

6) Screenshot

7) Build Project

Select required plug-ins before building the apps.

8) Download

---

APACHE CORDOVA API 3 0 Device

---
APACHE CORDOVA API 3 0 Device

1) Reference

2) Full Example

<!DOCTYPE html>
<html>
  <head>
    <title>Device Properties Example</title>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">
    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);
    // device APIs are available
    //
    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>

3) Create a new project using Blank Template

Project Name: demoCordovaDevice

4) Replace Index file

5) Debug

5.1) Connect Device
5.2) Launch Project
5.2) Debug Project

6) Screenshot

7) Build Project

Select required plug-ins before building the apps.

8) Download

---

APACHE CORDOVA API 3 0 Contacts

---
APACHE CORDOVA API 3 0 Contacts

1) Reference

2) Full Example


<!DOCTYPE html>
<html>
  <head>
    <title>Contact Example</title>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">
    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);
    // device APIs are available
    //
    function onDeviceReady() {
        var myContact = navigator.contacts.create({"displayName": "Test User"});
        myContact.note = "This contact has a note.";
        console.log("The contact, " + myContact.displayName + ", note: " + myContact.note);
    }
    </script>
  </head>
  <body>
    <h1>Example</h1>
    <p>Create Contact</p>
  </body>
</html>

3) Create a new project using Blank Template

Project Name: demoCordovaContacts

4) Replace Index file

5) Debug

5.1) Connect Device
5.2) Launch Project
5.2) Debug Project

6) Screenshot

7) Build Project

Select required plug-ins before building the apps.

8) Download

---

APACHE CORDOVA API 3 0 Connection

---
APACHE CORDOVA API 3 0 Connection

1) Reference

2) Full Example

<!DOCTYPE html>
<html>
  <head>
    <title>navigator.connection.type Example</title>
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8">
    // Wait for device API libraries to load
    //
    document.addEventListener("deviceready", onDeviceReady, false);
    // device APIs are available
    //
    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>

3) Create a new project using Blank Template

Project Name: demoCordovaConnection

4) Replace Index file

5) Debug

5.1) Connect Device
5.2) Launch Project
5.2) Debug Project

6) Screenshot

7) Build Project

Select required plug-ins before building the apps.

8) Download

---