Using FileIO

    JSON data is just text that is formatted in such a way that it can be converted into a valid JS object/array and back to text. We use our FileIO to read the JSON formatted data and convert it into a JS object using the built in Javascript function JSON.parse(). The data is later used as a model for the table view. This is implemented in the read document and write document functions shown below.

    The JSON data used in this example is in the cities.json file. It contains a list of city data entries, where each entry contains interesting data about the city such as what is shown below.

    1. [
    2.     {
    3.         "area": "1928",
    4.         "city": "Shanghai",
    5.         "country": "China",
    6.         "flag": "22px-Flag_of_the_People's_Republic_of_China.svg.png",
    7.         "population": "13831900"
    8.     },
    9.     ...
    10. ]

    We use the Qt Creator QtQuick Application wizard to create a Qt Quick Controls 2 based application. We will not use the new QML forms as this is difficult to explain in a book, although the new forms approach with a ui.qml file is much more usable than previous. So you can remove/delete the forms file for now.

    The basic setup is an ApplicationWindow which can contain a toolbar, menubar, and status bar. We will only use the menubar to create some standard menu entries for opening and saving the document. The basic setup will just display an empty window.

    1. import QtQuick 2.5
    2. import QtQuick.Controls 1.3
    3. import QtQuick.Window 2.2
    4. import QtQuick.Dialogs 1.2
    6. ApplicationWindow {
    7.     id: root
    8.     title: qsTr("City UI")
    9.     width: 640
    10.     height: 480
    11.     visible: true
    12. }

    Using Actions

    To better use/reuse our commands we use the QML Action type. This will allow us later to use the same action also for a potential toolbar. The open and save and exit actions are quite standard. The open and save action do not contain any logic yet, this we will come later. The menubar is created with a file menu and these three action entries. Additional we prepare already a file dialog, which will allow us to pick our city document later. A dialog is not visible when declared, you need to use the open() method to show it.

    1. TableView {
    2.     anchors.fill: parent
    3.     TableViewColumn {
    5.         title: "City"
    6.         width: 120
    7.     }
    8.     TableViewColumn {
    9.         role: 'country'
    10.         title: "Country"
    11.         width: 120
    12.     }
    13.     TableViewColumn {
    14.         role: 'area'
    15.         title: "Area"
    16.         width: 80
    17.     }
    18.     TableViewColumn {
    19.         role: 'population'
    20.         title: "Population"
    21.         width: 80
    22.     }
    23. }

    Now the application should show you a menubar with a file menu and an empty table with 4 table headers. The next step will be to populate the table with useful data using our FileIO extension.

    image

    The cities.json document is an array of city entries. Here is an example.

    1. [
    2.     {
    3.         "area": "1928",
    4.         "city": "Shanghai",
    5.         "country": "China",
    6.         "flag": "22px-Flag_of_the_People's_Republic_of_China.svg.png",
    7.         "population": "13831900"
    8.     ...
    9. ]

    Our job is it to allow the user to select the file, read it, convert it and set it onto the table view.

    Reading Data

    For this we let the open action open the file dialog. When the user has selected a file the onAccepted method is called on the file dialog. There we call the readDocument() function. The readDocument() function sets the URL from the file dialog to our FileIO object and calls the read() method. The loaded text from FileIO is then parsed using the JSON.parse() method and the resulting object is directly set onto the table view as a model. How convenient is that?

    For saving the document, we hook up the “save” action to the saveDocument() function. The save document function takes the model from the view, which is a JS object and converts it into a string using the function. The resulting string is set to the text property of our FileIO object and we call write() to save the data to disk. The “null” and “4” parameters on the stringify function will format the resulting JSON data using indentation with 4 spaces. This is just for better reading of the saved document.

    1. Action {
    2.     id: save
    3.     ...
    4.     onTriggered: {
    5.         saveDocument()
    6.     }
    7. }
    9. function saveDocument() {
    10.     var data = view.model
    11.     io.text = JSON.stringify(data, null, 4)
    12.     io.write()
    13. }
    15. FileIO {
    16.     id: io
    17. }

    Finishing Touch

    The application is not fully ready yet. We still want to show the flags and allow the user to modify the document by removing cities from the model.

    In this example, the flag files are stored relative to the main.qml document in a flags folder. To be able to show them the table column needs to define a custom delegate for rendering the flag image.

    1. TableViewColumn {
    2.     delegate: Item {
    3.         Image {
    4.             anchors.centerIn: parent
    5.             source: 'flags/' + styleData.value
    6.         }
    7.     }
    8.     role: 'flag'
    9.     title: "Flag"
    10.     width: 40

    That is all that is needed to show the flag. It exposes the flag property from the JS model as styleData.value to the delegate. The delegate then adjusts the image path to pre-pend 'flags/' and displays it as an Image element.

    For removing we use a similar technique to display a remove button.

    For the data removal operation, we get a hold on the view model and then remove one entry using the JS splice function. This method is available to us as the model is from the type JS array. The splice method changes the content of an array by removing existing elements and/or adding new elements.

    image