Loading a text file into a TextArea with scoll

[StefanTh]

Hi

SDK: Qt Creator 2.4.1
Target machine: N9

Which component should I use to display an text file of unknown length ?
A scroll bar should also appear if the file is "longer" than the screen.

I am currently trying with a TextArea

TextArea {
id: changeLogArea
visible: true
width: parent.width
readOnly: true
wrapMode: TextEdit.Wrap
text: ""
}

But not sure if this is right way to go, do I have to encapsulate it in a scroll view as well ?
and how do I "set" text to the file ?

I tried
text: Qt.resolvedUrl("changelog");

But that only results in the absolute file name itself.

[izinin]

Hi

You do not need to encapsulate TextArea in a scroll view, it implements the horizontal and vertical scrolling. Scroll bars appear when the content is flicked, or on the focus gain if the content does not fit to view port.

text: Qt.resolvedUrl("changelog"); --- call just provides full filename path , instead you need to read that file and assign the result to "text" attribute.

QML does not support file reading or writing. You have to create C++ side component that will do that. Another approach is to use JavaScript and AJAX XHTTPRequest to read local files. However in that approach you can only read files without modification but by using it you can read local and remote files.

The following example below shows how to read a file stored on device by using XHTTPRequest

    function loadModel() {

        var req = new XMLHttpRequest();
        req.onreadystatechange = function() {
            if (req.readyState === XMLHttpRequest.DONE) {
                var root = req.responseXML.documentElement;
                // TODO: read data here 
            }
        }

        // NOTE: XMLHttpRequest syncronous call is not supported by QML. Thus 'req.onreadystatechange'
        // will be called after 'req.send()'
        req.open("GET", Qt.resolvedUrl("productcatalog.xml"));
        req.send();
    }

[StefanTh]

Well, after investigation it turns out that the QML is based on js which in turn do not support any file access (except for a http request) so the only way to archive this is by binding and invoke a C++ call to QML.

The following description assume that a standard QML project have been created with the wizard and the goal is to show the content of the file "changelog" that is automatically created in this project.

SDK: Qt Creator 2.4.1 (Harmattan version)


After creation do the following
1. Right click on the folder "Sources" (where the file main.cpp is located) and choose "Add New"
2. Choose "C++" to the left and "C++ Class" to the right
3. On the class name line write "ApplicationData"

Two files are created application.cpp and applicationdata.h

4 Double click on the applicationdata.h (not the applicationdata.cpp)

5. Make sure that the following #include's is at the top of the file

#include <QObject>
#include <QFile>
#include <QTextStream>

6. Add the following function after the line "explicit ApplicationData(QObject *parent = 0);"


Q_INVOKABLE QString getFileContent(QString fileName)
{
QFile f(fileName);
QString result = "";

if (f.open(QIODevice::ReadOnly | QIODevice::Text)) {
try {
QTextStream in(&f);
in.setCodec("UTF-8");
result = in.readAll();
}
catch (std::exception& e ) {}

f.close();
}

return result;
}

7. Double click on the main.cpp file

8. Make sure that the following #include's is at the top of the file

#include <QApplication>
#include <QDeclarativeView>
#include <QDeclarativeContext>
#include <QtGui/QApplication>
#include "qmlapplicationviewer.h"
#include "applicationdata.h"




9. Add the following line after the line "QmlApplicationViewer viewer;"

viewer.rootContext()->setContextProperty("myApplicationData", new ApplicationData);

10. Double on the qml file in where you have the Text component and the following line to the Text component

text: myApplicationData.getFileContent("qtc_packaging/debian_harmattan/changelog")


--- --- ---
If you decide that you want more fancy text layout, rich text, that is, you are formatting the changelog file as a html page then add the following line to the Text component in the qml file
textFormat: Text.RichText

[StefanTh]

Hi

Thanks for the tip izinin, I will look into it right away, it seems to be a much easier way that going via "Q_INVOKE"

[StefanTh]

Hi

SDK: Qt Creator 2.4.1
Target platform N9 and Windows 7

Here is a way to read a text file in qml with help of XMLHttpRequest
In the following example the project is named Ozelot

1. Create a text file

A) Right click on the directory "qml/Ozelot" and choose "Add New"
B) Choose "General"
C) Name the file to something, in the following example it is named to "ChangeLog" (it will automatically get file ending .txt)
D) Press "Next"
E) Let it be "Add to the project: <Implicitly Add"
F) Press Finish

A file have now been created in the "directory" "Other files -> qml/Ozelot ->ChangeLog.txt"

2. Edit the newly created text file and add the following

<?xml version="1.0" encoding="ISO-8859-1"?>
<content>
<body>

Don't forget me this weekend!


Detta är för kul
</body>
</content>

3. Create your text component like this

    Text {
        id: changeLogArea
        visible: true
        wrapMode: TextEdit.Wrap

        Component.onCompleted: {
            var doc = new XMLHttpRequest();
            doc.onreadystatechange = function() {
                if (doc.readyState === XMLHttpRequest.DONE) {
                    var a = doc.responseXML.documentElement;
                    if (a !== null) {
                        for (var ii = 0; ii < a.childNodes.length; ++ii) {
                            if (a.childNodes[ii].nodeName === "body")
                            {
                                changeLogArea.text = changeLogArea.text + a.childNodes[ii].firstChild.nodeValue;
                            }
                        }
                    }
//                    else
//                        changeLogArea.text = "Is null"
                }
            }

            doc.open("GET", Qt.resolvedUrl("ChangeLog.txt"))

            doc.send();
        }
    }

Now the program will find the text file both on the N9 and on Windows 7 thanks to Qt.resolvedUrl() and that the text file is created in the right directory

Note:
Of some strange reasons you need to close down the simulator to make changes in the text file, otherwise it will report "Error disk is full"


PS
One nice extension could be the possibility to add rich text formation to the text file
DS

Regards

[StefanTh]

And here is the rich text version

Do as before but change the text file like this (just an example)

<b>Thick text</b><br><br>

<a href="//www.developer.nokia.com/">"Home"</a><br><br>

Don't forget me this weekend! and this is soooooooooooooooooooo

And the text component like this

Text {
        id: changeLogArea
        visible: true
        wrapMode: TextEdit.Wrap
        textFormat: Text.RichText

        Component.onCompleted: {
            var doc = new XMLHttpRequest();
            doc.onreadystatechange = function() {
                if (doc.readyState === XMLHttpRequest.DONE) {
                  changeLogArea.text = changeLogArea.text + doc.responseText
                }
            }

Regards

[izinin]

Hi StefanTh

May i know your approach when you mentioned

SDK: Qt Creator 2.4.1
Target platform N9 and Windows 7

As far as i know third party C++ native components are allowed on Windows8 only -- i think that is typo -- but could you give me more information on Windows Phone and Qt

[StefanTh]

Hi StefanTh

May i know your approach when you mentioned

As far as i know third party C++ native components are allowed on Windows8 only -- i think that is typo -- but could you give me more information on Windows Phone and Qt

Hi

I was refering to the Qt simulator, running on Windows 7, not a Windows Phone device,