×

Discussion Board

Results 1 to 8 of 8

Hybrid View

  1. #1
    Registered User
    Join Date
    Sep 2012
    Posts
    23

    Loading a text file into a TextArea with scoll

    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.

  2. #2
    Nokia Developer Expert
    Join Date
    Oct 2007
    Posts
    441

    Re: Loading a text file into a TextArea with scoll

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

  3. #3
    Registered User
    Join Date
    Sep 2012
    Posts
    23

    Re: Loading a text file into a TextArea with scoll

    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

  4. #4
    Registered User
    Join Date
    Sep 2012
    Posts
    23

    Re: Loading a text file into a TextArea with scoll

    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"

  5. #5
    Registered User
    Join Date
    Sep 2012
    Posts
    23

    Re: Loading a text file into a TextArea with scoll

    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
    Code:
    <?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

    Code:
        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

  6. #6
    Registered User
    Join Date
    Sep 2012
    Posts
    23

    Re: Loading a text file into a TextArea with scoll

    And here is the rich text version

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


    Code:
    <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

    Code:
    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

  7. #7
    Nokia Developer Expert
    Join Date
    Oct 2007
    Posts
    441

    Re: Loading a text file into a TextArea with scoll

    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

  8. #8
    Registered User
    Join Date
    Sep 2012
    Posts
    23

    Re: Loading a text file into a TextArea with scoll

    Quote Originally Posted by izinin View Post
    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,

Similar Threads

  1. How to reduce the Font of a text from LWUIT TextArea
    By pavanragi in forum Mobile Java General
    Replies: 7
    Last Post: 2012-08-17, 10:06
  2. Replies: 3
    Last Post: 2012-01-03, 19:30
  3. TextArea max. text length
    By pixsta in forum [Archived] Qt Quick
    Replies: 1
    Last Post: 2011-10-06, 09:21
  4. Scoll the text in Combo box and list ..
    By lynxgeek in forum Mobile Java General
    Replies: 3
    Last Post: 2010-12-23, 09:17
  5. Error Loading text from rss file
    By mj32 in forum Symbian
    Replies: 4
    Last Post: 2003-12-16, 20:04

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
×