Application cordova

**bytecode** · 12/01/2018, 02h18

Bonjour, je me suis mis dans l'idée de de développer ma première application web cordova.

J'ai trouver un code source et je l'ai intégré dans mon projet ça fonctionne bien mais il y à un détail que je n'arrive pas à réglé plutôt que de me lancer dans des explications qui sont longue à lire (et à écrire

) j'ai fait une vidéo d'une minute que j'ai mis en ligne.

Vidéo

Le code source de mon application vous pouvez le télécharger ici
l'apk se trouve dans ce dossier

note\platforms\android\app\build\outputs\apk\debug

Ou voir ici le principal, merci d'avance.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
$(document).ready(main);
 
//SENTENCIAS SQL PARA LA APLICACIÓN
var sqlTable = "CREATE TABLE IF NOT EXISTS notas (id INTEGER PRIMARY KEY AUTOINCREMENT,fecha VARCHAR(50),texto TEXT)";
var sqlInsert = "INSERT INTO notas (fecha,texto) VALUES (?,?)";
var sqlSelect = "SELECT * FROM notas";
var sqlDelete = "DELETE FROM notas WHERE id=?";
//1º. Crear y abrir el fichero que representa a la BD
var db = openDatabase("BlocDeNotas", "1.0", "Base de datos principal", 20000);
 
//FUNCIÓN PRINCIPAL==========================
function main() {
    //2º Llamar a la función para crear las tablas
    createTable();
    //3º Mostrar las notas de la tabla
    showNotes();
    //4º Eliminar el retraso de 300ms al hacer click
    FastClick.attach(document.body);
}
//FUNCIÓN SQL==========================
function createTable() {
    db.transaction(function (tx) {
        tx.executeSql(sqlTable);
    });
}
function saveNota() {
    //1º Obtener la fecha del sistema
    var d = new Date();
    var fecha = d.getDate() + "/" + (d.getMonth() + 1) + "/" + d.getFullYear();
 
    //2º Obtener el valor del campo de texto
    var texto = $(".formulario textarea").val();
 
    //3º Contacto con la db
    db.transaction(function (tx) {
        tx.executeSql(sqlInsert, [fecha, texto]);
    });
 
    //4º Vaciar el campo de texto
    $(".formulario textarea").val("");
 
    //5º Cerrar la ventana
    showNotes();
    closeAlert();
}
function showNotes() {
    //1º LIMPIAR LISTA
    $("main ul").html("");
 
    //2º EJECUTAR SENTENCIA EN LA BASE DE DATOS
    db.transaction(function (tx) {
        tx.executeSql(sqlSelect, [], function (tx, results) {
            //podemos obtner el número de filas
            var numOfRows = results.rows;
            console.log("Numero de filas: " + numOfRows.length);
 
            //recorremos los resultados:
            for (var i = 0; i < numOfRows.length; i++) {
                var nota = numOfRows.item(i);
 
                //PINTAR LAS NOTAS EN LA LISTA, ES DECIR.... CREAR LOS LI
                $("main ul").prepend('<li><h2>' + nota["fecha"] + '</h2><p>' + nota["texto"] + '</p><div class="btn-borrar" onclick="deleteNote(' + nota["id"] + ')"></div></li>');
 
            }
 
        });
    });
}
function deleteNote(id) {
 
    navigator.notification.confirm("Supprimer", function (indexButton) {
 
        if (indexButton == "1") {
            db.transaction(function (tx) {
                tx.executeSql(sqlDelete, [id], showNotes());
            });
        }
 
    }, "Confirmer", ["oui", "non"]);
}
//FUNCIÓN OTROS==========================
function showAlert() {
    $(".alert").fadeIn(500);
}
function closeAlert() {
    $(".alert").fadeOut(500);
}

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Mémento</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
        <link href="css/style.css" rel="stylesheet" type="text/css"/>
        <link href="css/animate.css" rel="stylesheet" type="text/css"/>
 
        <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
        <!--java script de cordova-->
        <script src="cordova.js" type="text/javascript"></script>
        <!--plugins, en este caso el dialogo-->
        <script src="plugins/cordova-plugin-dialogs/www/notification.js" type="text/javascript"></script>
        <!--para elminar los 300ms del click-->
        <script src="js/fastclick.js" type="text/javascript"></script>
        <!--nuestro codigo-->
        <script src="js/principal.js" type="text/javascript"></script>
 
    </head>
    <body>
        <div class="alert" >
            <div class="formulario">
                <h3>Nouvelle note</h3>
                <textarea></textarea>
                <div onclick="saveNota()" class="btn-guardar">Enregistrer</div>
                <div onclick="closeAlert()" class="btn-close">Effacer</div>
            </div>
        </div>
        <header>
            <h1>Note</h1>
            <div class="btn-add" onclick="showAlert()"></div>
        </header>
        <div class="caja"></div>
        <main>
            <ul>
 
            </ul>
        </main>
 
    </body>
</html>

**mathieu** · 12/01/2018, 13h42

regardez peut-être cela :
https://www.developpez.net/forums/d1...longueur-mots/

**bytecode** · 12/01/2018, 20h16

Trop cool merci je chercher dans le JavaScript alors que c’était dans le CSS. c'est parfait !!!

J'ai juste rajouter

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
ul p{
    white-space: initial;
    overflow: hidden;
}

plus qu'à fignoler tous ça.

Merci encore.

Application cordova

JavaScript

Discussions similaires

Partager

Partager