Liste des choses à faire

To Do List présente un exemple d'application de liste de choses à faire qui a l'air natif sur n'importe quelle plate-forme. L'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é et comment utiliser les paramètres pour contrôler l'apparence et le comportement de l'application. Il montre également comment mettre en œuvre un comportement simple de glisser-déposer sur les délégués. L'application utilise le stockage local pour stocker les éléments sur l'appareil et XMLHttpRequest pour récupérer les données de l'API publique (fonctionnalité Random Tasks). Les vues sont contrôlées par un composant StackView.

Exécution de l'exemple

Pour exécuter l'exemple à partir de Qt Creatorouvrez le mode Welcome et sélectionnez l'exemple à partir de Examples. Pour plus d'informations, voir Qt Creator: Tutorial : Construire 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 sur Windows et le style iOS n'est disponible que sur iOS. La liste des styles disponibles se trouve dans l'une des sous-pages du site SettingsView intitulée Style. Le style actuellement utilisé peut être modifié au même endroit. Un redémarrage est nécessaire pour appliquer les changements. L'application en informera l'utilisateur à l'aide des informations figurant sur le site ToolTip.

Changement de thème

Les thèmes foncés et clairs sont également pris en charge dans chaque style. Le thème peut être modifié à partir de la sous-page Thème du site SettingsView. Tous les styles ne permettent pas à l'utilisateur de modifier le thème manuellement, par exemple sur iOS, cette option n'est pas disponible. Dans ce cas, le thème sera modifié en fonction des paramètres par défaut du système. La première fois que l'application est lancée, elle utilise le thème du système.

Contrôler le comportement de l'application à partir des paramètres de l'application

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

• le style
• le thème
• la taille de la police
• le nombre maximum 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 d'aujourd'hui → les tâches dont l'échéance est la date d'aujourd'hui.
• Liste des tâches de cette semaine → les tâches à effectuer dans les sept prochains jours.
• Tâches ultérieures → les tâches qui n'entrent pas dans les listes ci-dessus.

Les tâches sont réparties entre les modèles de liste au début de l'application. Bien entendu, les tâches peuvent migrer entre les modèles de liste au moment de l'exécution (lorsque leur date d'échéance change). La définition de la liste unique est effectuée dans TasksList.qml et TasksListForm.ui.qml, 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 à l'adresse 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 glissement et de dépôt

La vue de la liste utilise le site TasksListDelegate comme délégué. Le délégué est un SwipeDelegate, qui permet à l'utilisateur de faire glisser l'élément pour le mettre en évidence (l'élément est déplacé en haut de la liste) ou pour le supprimer. Il 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 glisser-déposer l'élément pour le déplacer à une position spécifique dans la liste. La mise en œuvre de ces comportements se fait à l'adresse TasksListDelegate.qml.

Utilisation du stockage local

Le stockage local est utilisé pour lire et écrire les éléments de la tâche dans les bases de données SQLite. La mise en œuvre de cette fonction et d'autres fonctions d'aide se fait à l'adresse 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 de l'API publique

XMLHttpRequest est utilisé pour envoyer une requête à une API publique et récupérer les données de la 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 sources

Exemple de projet @ code.qt.io