Lista de tareas

To Do List muestra un ejemplo de aplicación de lista de tareas que parece nativa en cualquier plataforma. El ejemplo puede ejecutarse y editarse tanto en Qt Design Studio como en Qt Creator. Muestra cómo crear y utilizar un estilo personalizado y cómo utilizar la configuración para controlar la apariencia y el comportamiento de la aplicación. También muestra cómo implementar un comportamiento simple de arrastrar y soltar en los delegados. La aplicación utiliza almacenamiento local para guardar elementos en el dispositivo y XMLHttpRequest para recuperar datos de la API pública (funcionalidad Tareas Aleatorias). Las vistas están controladas por un componente StackView.

Ejecución del ejemplo

Para ejecutar el ejemplo desde Qt Creatorabra el modo Welcome y seleccione el ejemplo de Examples. Para más información, consulte Qt Creator: Tutorial: Construir y ejecutar.

Selección del estilo de la aplicación

La aplicación admite diferentes estilos en función de la plataforma de destino. CustomStyle, Basic, Material y Universal están disponibles en cada plataforma (Windows, Android, iOS, macOS). El estilo Windows sólo está disponible en Windows y el estilo iOS sólo está disponible en iOS. La lista de estilos disponibles se encuentra en una de las subpáginas de SettingsView llamada Style. El estilo utilizado actualmente se puede cambiar desde el mismo lugar. Es necesario reiniciar la aplicación para aplicar los cambios. La aplicación informará de ello al usuario con la información de ToolTip.

Cambio de tema

Los temas Oscuro y Claro también están soportados en cada estilo. El tema puede cambiarse desde la subpágina Tema de SettingsView. No todos los estilos permiten al usuario cambiar el tema manualmente, por ejemplo, en iOS esta opción no está disponible. En este caso, el tema se cambiará de acuerdo con la configuración predeterminada del sistema. La primera vez que se inicie la aplicación, se utilizará el tema del sistema.

Controlar el comportamiento de la aplicación desde los ajustes de la aplicación

El comportamiento y el estilo de la aplicación se pueden cambiar desde SettingsView. Los ajustes permiten al usuario cambiar

• estilo
• tema
• tamaño de letra
• número máximo de tareas
• si las tareas finalizadas deben eliminarse automáticamente

Implementación de la lista de tareas

La aplicación tiene tres listas diferentes:

• Lista de tareas de hoy → las tareas con la fecha de hoy como fecha de vencimiento.
• Lista de tareas de esta semana → las tareas que vencen en los próximos siete días.
• Lista de tareas posteriores → las tareas que no encajan en las listas anteriores.

Las tareas se distribuyen entre los modelos de listas al inicio de la aplicación. Por supuesto, las tareas pueden migrar a través de los modelos de lista en tiempo de ejecución (cuando cambia su fecha de vencimiento). La definición de la lista única se realiza en TasksList.qml y TasksListForm.ui.qml, las instancias se crean en 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
        }
    }

El llenado del modelo de lista con datos se realiza en TasksListsView.qml en 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()

Comportamiento de deslizar, arrastrar y soltar

La vista de lista utiliza TasksListDelegate como delegado. El delegado es un SwipeDelegate, que permite al usuario deslizar el elemento para resaltarlo (el elemento se mueve a la parte superior de la lista) o eliminarlo. También permite al usuario marcar la tarea como realizada (el elemento se mueve a la parte inferior) o arrastrar y soltar el elemento para moverlo a una posición específica en la lista. La implementación de estos comportamientos se realiza en TasksListDelegate.qml.

Uso del almacenamiento local

El almacenamiento local se utiliza para leer y escribir los elementos de la tarea en bases de datos SQLite. La implementación de esta y otras funciones de ayuda se realiza en Database.qml, que es un objeto 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
    }

Uso de XMLHttpRequest para recuperar datos de la API pública

El XMLHttpRequest se utiliza para enviar peticiones a alguna API pública y recuperar los datos de respuesta. La aplicación utiliza boredapi que puede devolver una tarea aleatoria para hacer. La tarea se añade a la lista de tareas de hoy.

    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();
    }

Archivos fuente

Proyecto de ejemplo @ code.qt.io