XML or JSON using QML?

[Anas A. Ismail]

Hello everyone,
I'm working on a simple task for saving and loading data using QML, which type do you recommend to use XML or JSON, which one in well-supported in QML .. ?

[mcosta]

Hi,

QML supports well XML (XmlListModel) and JSON (native in JavaScript). Anyway IIRC there's no support to save and load data from QML except if you use Local Storage

[Anas A. Ismail]

@mcosta So, I can't save XML data using XmlListModel ?

[Hamed.Masafi]

You can create a simple c++ class that save and load QString from/to file and post in to qml with qmlRegisterType, then you can save and load json (as mcosta says qml/js support it) into file.

[Anas A. Ismail]

@Hamed.Masafi Thanks.
May you provide me with starter code for this as I'm new with this ?

[Hamed.Masafi]

Create a new QtQuick application project and add a class named JsonStorage to it.
Sources:

jsonstorage.h:

#ifndef JSONSTORAGE_H
#define JSONSTORAGE_H

#include <QtCore/qglobal.h>
#include <QQuickItem>

class JsonStorage : public QQuickItem
{
    Q_OBJECT
    Q_PROPERTY(QString fileName READ fileName WRITE setFileName NOTIFY fileNameChanged)

    QString m_fileName;

public:
    JsonStorage();

    Q_INVOKABLE void save(QString data);
    Q_INVOKABLE QString load();
    QString fileName() const;

signals:

    void fileNameChanged(QString fileName);

public slots:
    void setFileName(QString fileName);
};

#endif // JSONSTORAGE_H

jsonstorage.cpp

#include <QFile>

#include "jsonstorage.h"

JsonStorage::JsonStorage()
{

}

void JsonStorage::save(QString data)
{
    QFile f(fileName());
    if(!f.open(QIODevice::WriteOnly))
        return;

    QByteArray ba = data.toUtf8();
    f.write(ba.data(), ba.length());
    f.close();
}

QString JsonStorage::load()
{
    QFile f(fileName());
    if(!f.open(QIODevice::ReadOnly))
        return "";

    QByteArray ba = f.readAll();
    f.close();
    return QString(ba);
}

QString JsonStorage::fileName() const
{
    return m_fileName;
}

void JsonStorage::setFileName(QString fileName)
{
    if (m_fileName == fileName)
        return;

    m_fileName = fileName;
    emit fileNameChanged(fileName);
}

main.cpp:

#include <QApplication>
#include <QQmlApplicationEngine>

#include "jsonstorage.h"

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    qmlRegisterType<JsonStorage>("org.Qt.io", 1, 0, "JsonStorage");

    QQmlApplicationEngine engine;
    engine.load(QUrl(QStringLiteral("qrc:/main.qml")));

    return app.exec();
}

main.qml:

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2
import org.Qt.io 1.0
import QtQuick.Layouts 1.2

ApplicationWindow {
    title: qsTr("Hello World")
    width: 640
    height: 480
    visible: true

    JsonStorage{
        id: storage
        fileName: "db"
    }

    ColumnLayout {
        anchors.centerIn: parent

        Label {
            text: "Name:"
            Layout.fillWidth: true
        }

        TextField {
            id: textFieldName
            Layout.fillWidth: true
        }

        Label {
            text: "Last name:"
            Layout.fillWidth: true
        }

        TextField {
            id: textFieldLastName
            Layout.fillWidth: true
        }

        RowLayout{
            Button{
                text: "Save"
                onClicked: {
                    var o = {
                        name: textFieldName.text,
                        lastName: textFieldLastName.text
                    }
                    var data = JSON.stringify(o)
                    storage.save(data)
                }
            }
            Button{
                text: "Load"

                onClicked: {
                    var data = JSON.parse(storage.load())

                    textFieldName.text = data.name
                    textFieldLastName.text = data.lastName
                }
            }
        }


    }
}

I have tested, it works fine.

[Anas A. Ismail]

@Hamed.Masafi Thanks, I do appreciate your help.