How to properly use plugins in apache cordova?

L

Leonid Gorshkov2018-11-03 16:54:41

Apache Cordova

Leonid Gorshkov, 2018-11-03 16:54:41

Good evening,
How to properly install and use the cordova plugin?
Followed this tutorial: https://www.tutorialspoint.com/cordova/cordova_fil...
1. Added plugin

$cordova plugin add cordova-plugin-file

2. Inserted the code in index.js

The code

Было:

onDeviceReady: function() {
        this.receivedEvent('deviceready');

Стало:

onDeviceReady: function() {
        this.receivedEvent('deviceready');
        document.getElementById("createFile").addEventListener("click", createFile); // *synacs (Обработчик)
        document.getElementById("writeFile").addEventListener("click", writeFile); // *synacs (Обработчик)
        document.getElementById("readFile").addEventListener("click", readFile); // *synacs (Обработчик)
        document.getElementById("removeFile").addEventListener("click", removeFile); // *synacs (Обработчик)
    },

Here is the whole index.js file

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */
var app = {
    // Application Constructor
    initialize: function() {
        document.addEventListener('deviceready', this.onDeviceReady.bind(this), false);
    },

    // deviceready Event Handler
    //
    // Bind any cordova events here. Common events are:
    // 'pause', 'resume', etc.
    onDeviceReady: function() {
        this.receivedEvent('deviceready');
        document.getElementById("createFile").addEventListener("click", createFile); // *synacs (Обработчик)
        document.getElementById("writeFile").addEventListener("click", writeFile); // *synacs (Обработчик)
        document.getElementById("readFile").addEventListener("click", readFile); // *synacs (Обработчик)
        document.getElementById("removeFile").addEventListener("click", removeFile); // *synacs (Обработчик)
    },

    // Update DOM on a Received Event
    receivedEvent: function(id) {
        var parentElement = document.getElementById(id);
        var listeningElement = parentElement.querySelector('.listening');
        var receivedElement = parentElement.querySelector('.received');

        listeningElement.setAttribute('style', 'display:none;');
        receivedElement.setAttribute('style', 'display:block;');

        console.log('Received Event: ' + id);
    }
};

function createFile() { 
    /* *synacs 
    * (https://www.tutorialspoint.com/cordova/cordova_file_system.htm)
    * Создание и редактирование файловой системы
    */
    var type = window.TEMPORARY;
    var size = 5*1024*1024;
    window.requestFileSystem(type, size, successCallback, errorCallback)
 
    function successCallback(fs) {
       fs.root.getFile('log.txt', {create: true, exclusive: true}, function(fileEntry) {
          alert('File creation successfull!')
       }, errorCallback);
    }
 
    function errorCallback(error) {
       alert("ERROR: " + error.code)
    }
 } // end createFile();



app.initialize();

3. Called from index.html

Here is the whole index.html file

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
  <title>Jquery mobile</title>
  <link rel="stylesheet" href="css/jquery.mobile-1.4.5.min.css">
  <script src="js/jquery-v1.10.2.js"></script>
  <script src="js/jquery.mobile-1.4.5.min.js"></script>
</head>

<body>

<!-- page: #one -->
    <div data-role="page" id="home">

        <!-- header -->
            <div data-role="header">
                <a href="#setting" data-rel="back" class="ui-btn-left ui-alt-icon ui-nodisc-icon ui-btn ui-icon-gear ui-btn-icon-notext ui-corner-all" data-role="button" role="button">Настройки</a>
                <h1>Synacs</h1>
                <a href="#" data-rel="back" class="ui-btn-right ui-btn ui-icon-bullets ui-btn-icon-notext ui-shadow ui-corner-all" data-role="button" role="button">Меню</a>
            </div>
            

        <!-- /header -->
        <!-- content -->
        <div role="main" class="ui-content">
            <h2>Привет</h2>

            <p>Это тестовое приложение, для практики.</p>
                <p>Основные классы: <a href="popup/info.class.html" data-transition="pop" class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext" title="info.class">info.class</a><code>synacs;</code>
            </p>
            <p>
                    <a href="popup/agreement.html" class="ui-btn ui-shadow ui-corner-all" data-transition="pop">Соглашение ( Terms of use )</a>
                    <a href="#" id="createFile" class="ui-btn ui-shadow ui-corner-all">Создать файл</a>

            </p>
        </div>
        <!-- /content -->


        <!-- footer -->
            <div data-role="footer" data-theme="a">
                <h4>Хуй его знает</h4>
            </div>
        <!-- /footer -->





        <!-- window: Settings  -->
        <div data-role="panel" id="setting" data-position="left" data-display="reveal">
            <h3>Настройки:</h3>
            <p>This panel is positioned on the right with the reveal display mode. The panel markup is <em>after</em> the header, content and footer in the source order.</p>
            <p>To close, click off the panel, swipe left or right, hit the Esc key, or use the button below:</p>
            <a href="#demo-links" data-rel="close" class="ui-btn ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left ui-btn-inline">Close panel</a>
        </div>
        <!-- /Settings -->








    </div>
<!-- /page one -->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>

Nothing happened.
What am I doing wrong?
Repository link: https://gitlab.com/synacs.user/synacs-app

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

L

Leonid Gorshkov, 2018-11-04
@Synacs-U

All figured out. the cordova.js file must be included (even if it doesn't exist), and the function is called after 'deviceready'

document.addEventListener("deviceready", function(){
    $('#title-device-info').html(device.manufacturer+' '+device.model); // HUAWEI FLA-LX1
    // Плагин cordova-plugin-device
    // https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-device/
 }, false);