Liste de tâches

« Liste de tâches » présente un exemple d'application de liste de tâches dont l'apparence est native sur n'importe quelle plateforme. Cet exemple peut être exécuté et modifié à la fois sur Qt Design Studio et Qt Creator. Il montre comment créer et utiliser un style personnalisé, ainsi que comment utiliser les paramètres pour contrôler l'apparence et le comportement de l'application. Il montre également comment implémenter un comportement simple de glisser-déposer sur les délégués. L'application utilise le stockage local pour enregistrer des éléments sur l'appareil et XMLHttpRequest pour récupérer des données depuis l'API publique (fonctionnalité « Random Tasks »). Les vues sont gérées par un composant StackView.

Exécution de l'exemple

Vous pouvez exécuter l’exemple à partir de :

• Qt Creator

  Ouvrez le mode « Welcome » et sélectionnez l’exemple à l’adresse Examples. Pour plus d’informations, consultez la page Qt Creator: Tutoriel : Compiler et exécuter.

• Qt Extension for Visual Studio Code

  Exécutez la commande « Qt: Open Qt examples » à partir de Command Palette, puis sélectionnez l’exemple dans la liste. Pour plus d’informations, consultez Qt Extension for Visual Studio Code: Tutoriel : Compiler et exécuter.

Sélection du style de l'application

L'application prend en charge différents styles en fonction de la plateforme cible. Les styles CustomStyle, Basic, Material et Universal sont disponibles sur chaque plateforme (Windows, Android, iOS, macOS). Le style Windows n’est disponible que sous Windows et le style iOS uniquement sous iOS. La liste des styles disponibles se trouve dans l’une des sous-pages de l’ SettingsView, intitulée « Style ». Le style actuellement utilisé peut être modifié à partir de cette même page. Un redémarrage est nécessaire pour appliquer les modifications. L’application en informera l’utilisateur via la notification « ToolTip ».

Changement de thème

Les thèmes « sombre » et « clair » sont également pris en charge dans chaque style. Le thème peut être modifié depuis la sous-page « Thème » de la page d’ SettingsView. Tous les styles ne permettent pas à l’utilisateur de changer de thème manuellement ; par exemple, sur iOS, cette option n’est pas disponible. Dans ce cas, le thème sera défini en fonction des paramètres système par défaut. Lors du premier lancement de l’application, celle-ci utilisera le thème du système.

Contrôle du comportement de l’application à partir des paramètres de l’application

Le comportement et le style de l'application peuvent être modifiés depuis SettingsView. Les paramètres permettent à l'utilisateur de modifier :

• le style
• le thème
• la taille de la police
• le nombre maximal de tâches
• si les tâches terminées doivent être supprimées automatiquement

Mise en œuvre de la liste des tâches

L'application comporte trois listes différentes :

• Liste des tâches du jour → Les tâches dont la date d'échéance est le jour même.
• Liste des tâches de cette semaine → les tâches dont la date d'échéance se situe dans les sept prochains jours.
• Tâches ultérieures → les tâches qui ne figurent pas dans les listes ci-dessus.

Les tâches sont réparties entre les modèles de liste au démarrage de l'application. Bien entendu, les tâches peuvent passer d'un modèle de liste à l'autre pendant l'exécution (lorsque leur date d'échéance change). La définition de chaque liste s'effectue dans TasksList.qml et TasksListForm.ui.qml, tandis que les instances sont créées dans TasksListsView.qml/TasksListsViewForm.ui.qml.

    ListModel {
        id: todayTasksListModel
    }

    ListModel {
        id: thisWeekTasksListModel
    }

    ListModel {
        id: laterTasksListModel
    }

    Column {
        id: column

        anchors.fill: parent
        spacing: 14

        TasksList {
            id: todayTasks

            width: column.width
            maxHeight: 180
            listModel: todayTasksListModel
            headerText: qsTr("Today")
            tasksCount: todayTasksListModel.count
        }

        TasksList {
            id: thisWeekTasks

            width: column.width
            maxHeight: column.height - y - 60
            listModel: thisWeekTasksListModel
            headerText: qsTr("This week")
            tasksCount: thisWeekTasksListModel.count
        }

        TasksList {
            id: laterTasks

            width: column.width
            maxHeight: column.height - y
            listModel: laterTasksListModel
            headerText: qsTr("Later")
            tasksCount: laterTasksListModel.count
        }
    }

Le remplissage du modèle de liste avec des données s'effectue à l'adresse TasksListsView.qml et Component.onCompleted.

    function createTasksLists() : void {
        var tasks = Database.getTasks()
        var currentDate = new Date()
        var format = Qt.locale().dateFormat(Locale.LongFormat)
        var dateStr = currentDate.toLocaleDateString(Qt.locale(),format)
        tasks.forEach( function(task){
            if (task.date === dateStr) {
                todayTasksModel.append(task)
            } else if (checkThisWeekDate(task.date)) {
                thisWeekTasksModel.append(task)
            } else {
                laterTasksModel.append(task)
            }
        })
    }

    Component.onCompleted: createTasksLists()

Comportement de balayage, de glisser-déposer et de glisser-déposer

La vue de liste utilise TasksListDelegate comme délégué. Ce délégué est un SwipeDelegate; il permet à l’utilisateur de balayer l’élément pour le mettre en surbrillance (l’élément est déplacé en haut de la liste) ou pour le supprimer. Elle permet également à l’utilisateur de marquer la tâche comme terminée (l’élément est déplacé en bas de la liste) ou de faire glisser et déposer l’élément pour le déplacer vers une position spécifique dans la liste. L’implémentation de ces comportements est effectuée dans TasksListDelegate.qml.

Utilisation du stockage local

Le stockage local est utilisé pour lire et écrire les éléments de tâches dans des bases de données SQLite. L’implémentation de cette fonction et d’autres fonctions d’aide se trouve dans ` Database.qml`, qui est un objet singleton.

    property var _db

    function _database() {
        if (_db) return _db

        try {
            let db = LocalStorage.openDatabaseSync("ToDoList", "1.0", "ToDoList app database")

            db.transaction(function (tx) {
                tx.executeSql(`CREATE TABLE IF NOT EXISTS tasks (
                              task_id INTEGER PRIMARY KEY AUTOINCREMENT,
                              task_name,
                              task_dueDate TEXT,
                              task_dueTime TEXT,
                              task_notes TEXT,
                              done INTEGER,
                              highlighted INTEGER
                              )`);
            })

            _db = db
        } catch (error) {
            console.log("Error opening databse: " + error)
        };
        return _db
    }

    function addTask(taskName, taskDueDate, taskDueTime, taskNotes, taskDone, taskHighlighted) {
        let results
        root._database().transaction(function(tx){
            tx.executeSql(`INSERT INTO tasks (task_name, task_dueDate, task_dueTime,
                          task_notes, done, highlighted) VALUES(?,?,?,?,?,?);`,
                        [taskName, taskDueDate, taskDueTime, taskNotes, taskDone, taskHighlighted])
            results = tx.executeSql("SELECT * FROM tasks ORDER BY task_id DESC LIMIT 1")
        })
        return results.rows.item(0).task_id
    }

Utilisation de XMLHttpRequest pour récupérer des données depuis une API publique

XMLHttpRequest est utilisé pour envoyer des requêtes à certaines API publiques et récupérer les données de réponse. L’application utilise boredapi, qui peut renvoyer une tâche aléatoire à effectuer. La tâche est ensuite ajoutée à la liste des tâches du jour.

    function sendHttpRequest() : void {
        var http = new XMLHttpRequest()
        var url = "https://www.boredapi.com/api/activity";
        http.open("GET", url, true);

        http.setRequestHeader("Content-type", "application/json");
        http.setRequestHeader("Connection", "close");

        http.onreadystatechange = function() {
            if (http.readyState == 4) {
                if (http.status == 200) {
                    let object = JSON.parse(http.responseText.toString());
                    let currentDate = new Date()
                    let format = Qt.locale().dateFormat(Locale.LongFormat)
                    addTask(todayTasksModel, object.activity,
                            currentDate.toLocaleDateString(Qt.locale(), format), "","")
                } else {
                    console.log("Failed to fetch a random TODO item; the API provider might be down")
                }
            }
        }
        http.send();
    }

Fichiers source

Exemple de projet sur code.qt.io