Cordova API

Tehtävänantona oli tehdä ohjelma, joka käyttää Cordovan APEja.

Ensiksi kokeilin Device -apin toimivuuden käyttämällä valmista pohjaa.

<!doctype html>
<html>
    <head>
      <title>Device Properties Example</title>

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

    // Wait for Cordova to load
                  //
        document.addEventListener("deviceready", onDeviceReady, false);
        //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 Version: '  + device.version  + '<br />';

            checkConnection();

         }
        function checkConnection() {
            var networkState = navigator.network.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.NONE]     = 'No network connection';

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

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

Lopputuloksena näin virtuaali Androidin tiedot:

Cordova - Device

Oman ohjelman teko

Ohjelman tarkoituksena on näyttää käyttäjän valitsemat tiedot, joko internetyhteyden typpi tai muutamat tiedot puhelimesta.

Index.html tiedoston sisältö:

<!doctype>
<html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
      <title>Device Properties Example</title>
        
        <script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
        <script type="text/javascript" charset="utf-8" src="jquery-2.0.3.min.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 conDiv = false;
            $("#connectionDiv").hide();
            
            var devDiv = false;
            $("#deviceDiv").hide();
 
            checkConnection();
            checkDevice();
            
            $("#dev ,#conn").click(function(){
                if(this.id == "conn"){
                    if(devDiv){
                        $("#deviceDiv").hide();
                    }
                    
                    $("#connectionDiv").show();
                    conDiv= true;
                } else if(this.id == "dev"){
                    if(conDiv){
                        $("#connectionDiv").hide();
                    }
                    
                    $("#deviceDiv").show();
                    devDiv = true;
                }
            });
            
         }
        function checkConnection() {
            var networkState = navigator.network.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.NONE]     = 'No network connection';
            
            var element = document.getElementById('connectionProperties');
            element.innerHTML = 'Connection type: ' + states[networkState];
        }
        
        function checkDevice(){
            var element2 = document.getElementById('deviceProperties');
            element2.innerHTML = 'Device Name: '     + device.name     + '<br />' + 
                                 'Device Platform: ' + device.platform + '<br />' + 
                                 'Device Version: '  + device.version  + '<br />';
        }
        </script>
    </head>
    <body>
    <h1> What would you like to know?</h1>
    <div id="buttons">
        <button id="conn">Show connection type</button>
        <button id="dev">Show device version</button> 
    </div>
    <div id="display">
        <div id="connectionDiv">
            <p id="connectionProperties">Loading connection properties...</p>
        </div>
        <div id="deviceDiv">
            <p id="deviceProperties">Loading device properties...</p>
        </div>
    </div>
    
    
    </body>
</html>

Lopputulos oli tälläinen:

Cordova - Device program Cordova - Device program Cordova - Device program

  • DeviceInfo
  • Kertoo käyttäjän haluaman tiedot, joko yhteystyypin tai puhelimen tiedot (nimi,alusta ja   versio).
  • Beta
  • GNU GPL versio 3
  • Tar-tiedosto
  • Teknisesti ohjelma hakee tarvittavat tiedot jo käynnistyessä, mutta piilottaa tiedot käyttäjältä. Kun käyttäjä klikkaa painiketta, haluttu tieto näytetään.

Lähteet

 Tero Karvinen – Mobiilituotekehitys-kurssi

PhoneGap – Device

PhoneGap – Connection

 

– Antti-Ville Jokela

Tätä dokumenttia saa kopioida ja muokata GNU General Public License (versio 2 tai uudempi) mukaisesti. http://www.gnu.org/licenses/gpl.html

Bookmark the permalink.

Comments are closed.