Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. Qtquick / qml with QFileSystemModel and GridView
Forum Updated to NodeBB v4.3 + New Features

Qtquick / qml with QFileSystemModel and GridView

Scheduled Pinned Locked Moved General and Desktop
10 Posts 2 Posters 4.8k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • B Offline
    B Offline
    bergeule
    wrote on last edited by
    #1

    Hi :)

    I'm new to qt and i'm really confused about this qtquick/qml/qt/c++ mixing thing ;).

    I want to show the content of a particular folder (some pdfs) in a thumbnail-wise way, like a common file-browser. I found GridView to be appropriate for this, but now i'm not so sure anymore.

    I started with creating a QtQuick Application with C++ from the Wizard (Version 2.8.1
    Based on Qt 5.1.1) operating on Mac OsX Snow Leopard.

    I tried many variations of the following code, but i think i misunderstood something in general:

    @#include <QApplication>
    #include "qmlapplicationviewer.h"
    #include <QDir>
    #include <QDebug>
    #include <QtDeclarative>
    #include <QFileSystemModel>

    Q_DECL_EXPORT int main(int argc, char *argv[])
    {
    QScopedPointer<QApplication> app(createApplication(argc, argv));

    QmlApplicationViewer viewer;
    viewer.addImportPath(QLatin1String("modules"));
    viewer.setOrientation(QmlApplicationViewer::ScreenOrientationAuto);
    
    
    // Set up the file system model
    QFileSystemModel *model = new QFileSystemModel;
    model->setRootPath("/Users/myusername/testpath");
    viewer.rootContext()->setContextProperty("dirmodel", model);
    
    
    
    viewer.setMainQmlFile&#40;QLatin1String("qml/projectname/main.qml"&#41;);
    viewer.showExpanded();
    
    
    return app->exec&#40;&#41;;
    

    }@

    The qml-file :

    @import QtQuick 1.1

    Rectangle {
    width: 360
    height: 360
    Text {
    x: 13
    y: 14
    text: qsTr("content:")
    anchors.verticalCenterOffset: -158
    anchors.horizontalCenterOffset: -145
    anchors.centerIn: parent
    }
    GridView {
    id: grid_view1
    x: 19
    y: 41
    width: 321
    height: 301
    cellWidth: 70
    cellHeight: 70
    anchors.fill: parent

        model: dirmodel
    
    
    }
    
    MouseArea {
        x: 0
        y: 0
        anchors.rightMargin: 0
        anchors.bottomMargin: 0
        anchors.leftMargin: 0
        anchors.topMargin: 0
        anchors.fill: parent
        onClicked: {
            Qt.quit();
        }
    }
    

    }@

    What am i doing wrong? There's no error, but there are no files either.
    I am now trying to get this simple task done for almost 13 hours :(

    All the tutorials and videos are using qt (instead of qtquick) with DeclarativeView and whatsoever, i tried every example code, but still - empty frame :(

    Now i doubt about GridView being the right choice ...

    Thanks in advance,

    bergeule

    1 Reply Last reply
    0
    • sierdzioS Offline
      sierdzioS Offline
      sierdzio
      Moderators
      wrote on last edited by
      #2

      The GridView also needs a delegate. A delegate tells the View how to paint data. In your case, you probably want some Image and Text components to work on the data from the model, so that they are getting displayed properly.

      (Z(:^

      1 Reply Last reply
      0
      • B Offline
        B Offline
        bergeule
        wrote on last edited by
        #3

        Ok i tried to figure out how to delegate this model, but all examples i could find are widget based and not qtquick.

        i think i'll start from scratch again, but this time i'll thry the widget based approach. it's more clear for me there.

        too bad, i kinda like this declarative style :(

        thanks of course for your help!

        1 Reply Last reply
        0
        • sierdzioS Offline
          sierdzioS Offline
          sierdzio
          Moderators
          wrote on last edited by
          #4

          There are plenty of explanations in the documentation, maybe you have not searched well enough. Make sure you've read "this":http://qt-project.org/doc/qt-5.1/qtquick/qml-qtquick2-gridview.html and "this":http://qt-project.org/doc/qt-5.1/qtquick/qtquick-modelviewsdata-modelview.html.

          A live example can be found in my CCF project: "link":https://github.com/sierdzio/closecombatfree/blob/master/qml/gui/menus/RosterMenu.qml#L38.

          Delegates are easy: you just need to use the variable provided by the Model and do something with it (for example, display it with Image component). Feel free to ask more questions, I'm happy to help.

          (Z(:^

          1 Reply Last reply
          0
          • B Offline
            B Offline
            bergeule
            wrote on last edited by
            #5

            Hey :)

            I achieved some progress, even if it's not working properly. I knew the articles you posted already, but after i read them again and took a closer look at your code i recognized, that i have to call the qfilesystemmodel methods different.

            My delegate is now (minimal example):

            @delegate: Column {

                    Image {source: model.fileIcon;}
                    Text {text: model.fileName;}
            
                }@
            

            Two problems still exist:
            fileIcon returns a QIcon, which is not displayed. There's an error which says "Unable to assign QIcon to QUrl", so source needs a path to a image. I can't find a solution on the web, but i think i might be able to solve this by creating my own model as a derived class model. Or is there another solution?

            Second Problem is, even if i set a root path, it shows just one object with the file name "/". Is this because somethings works wrong, or is this just my root directory?

            But the important thing is, i understood the principle of how to pass data from model to view, thanks :)

            I also browsed through your code and i learned a few more things how to manage a bigger project :)

            (Sorry for posting so late, i have not very much time to code at the moment and i try to read and try things before posting back)

            Greetings,

            bergeule

            1 Reply Last reply
            0
            • sierdzioS Offline
              sierdzioS Offline
              sierdzio
              Moderators
              wrote on last edited by
              #6

              I have not used that particular model class, it seems that indeed you will need a custom derived class (or a customized Image component).

              For the root path, see "this":http://qt-project.org/forums/viewthread/1846.

              (that's OK, I don't remember much about timing of conversations in my posts; I participate in far too many threads here)

              (Z(:^

              1 Reply Last reply
              0
              • B Offline
                B Offline
                bergeule
                wrote on last edited by
                #7

                Hi :)

                I managed to solve the path problem by setting up a VisualDataModel and setting the rootIndex to the path, thx :)

                But now i have some different problems:

                I made a new model by inheriting the QFileSystemModel with a function which returns the text at the bottom of the grid item.

                @class newmodel : public QFileSystemModel
                {

                 Q_OBJECT 
                

                public:

                newmodel();
                Q_INVOKABLE QModelIndex pathIndex(const QString &path, int column);
                
                Q_INVOKABLE QString newmodel::Title(const QModelIndex & index);
                

                };

                // just the title function:

                QString newmodel::Title(const QModelIndex & index);
                {
                QString thing = " Text " ;
                qDebug() << thing;
                return thing;
                }
                @

                in reality, the qstring is determined otherwise, but the problem is this error message:

                @Unable to assign [undefined] to QString text@

                So for debugging this issue i made the function just to return a QString likt it is supposed to and i return the string in the debug console to make sure the method is called.

                And unfortunately, it is not.

                There is no debug message and no text to the files.

                If i use the QFileSystemModel internal method "fileName", GridView shows the file name. According to the Documentation, this method also returns a QString.

                I also made sure i exposed the model to qml (using the Q_INVOKABLE macro and viewer.rootContext()->setContextProperty("dirmodel", model); )

                What am i missing? How do i make sure that this function is called for every item in the model as well as the original functions? I cannot find anything about how it works that the model is calling functions for every item.

                Maybe you can help me :)

                Thanks in advance

                best wishes

                bergeule

                1 Reply Last reply
                0
                • sierdzioS Offline
                  sierdzioS Offline
                  sierdzio
                  Moderators
                  wrote on last edited by
                  #8

                  Please also post the code of your delegate.

                  I am not sure what is the problem here.

                  (Z(:^

                  1 Reply Last reply
                  0
                  • B Offline
                    B Offline
                    bergeule
                    wrote on last edited by
                    #9

                    Here it is:

                    @model: VisualDataModel {

                            model: dirmodel
                           
                            rootIndex: dirmodel.pathIndex("/Users/myusername/testpath",0)
                    
                            // Delegate für die Ausgabe
                            delegate:
                                Rectangle {
                                width: 10
                                height: 10
                                color: "blue"
                    
                    
                                //Image {source: model.fileIcon;}
                                Text {text: model.Title;}
                                }
                    

                    }
                    @

                    It creates a blue rectangle representing the files or folders, with the text.
                    I tried dirmodel.Title instead of model.Titel, but it doesn't work either :(

                    Thx for helping!

                    1 Reply Last reply
                    0
                    • sierdzioS Offline
                      sierdzioS Offline
                      sierdzio
                      Moderators
                      wrote on last edited by
                      #10

                      I think just "model.modelData.Title" might work. It's been too long since I last did that kind of coding, I don't remember the details. Check out the docs, they are usually quite helpful.

                      (Z(:^

                      1 Reply Last reply
                      0

                      • Login

                      • Login or register to search.
                      • First post
                        Last post
                      0
                      • Categories
                      • Recent
                      • Tags
                      • Popular
                      • Users
                      • Groups
                      • Search
                      • Get Qt Extensions
                      • Unsolved