A page Loding a Listview that has a C++ binding



  • Hello all,

    I have a question of how to load a qml Listview that has a C++ binding.
    any idea of the concepts to use ?

    Thanks in advances


  • Lifetime Qt Champion

    Hi,

    Do you mean something like the "FolderListModel - a C++ model plugin" example ?



  • Actually, I have made a login screen, and I if you see at the end I have a Loader to the main.qml which contains a listview.
    This listview is C++ binded.
    But when I execute this I can't have my listview displayed.

    @
    import QtQuick 1.1
    import "."

    Rectangle
    {
    id : chat
    height: 600
    width : 300

    property bool userFocus : false
    property bool loginFocus : false

    Loader
    {
    id : loader
    anchors.fill : parent
    visible : source != ""
    }

    Image
    {
    id : wallpaper
    height : parent.height
    width : parent.width
    fillMode: Image.PreserveAspectCrop
    source : "wallpaper.jpg"
    smooth : true
    }

    Column
    {
    anchors.centerIn: parent
    spacing : 16
    visible : !loader.visible

      Column
      {
         spacing: 4
         Text
         {
            text          : "Username" 
            font.family   : "Helvetica"
            font.pointSize: 12
            color         : "white"
            anchors.horizontalCenter:user.horizontalCenter
         }
    
         Rectangle
         {
            id           : user
            border.width : 1
            border.color : "white"
            width        : 160
            height       : 20
            radius       : 2
    
            MouseArea
            {
               anchors.fill: parent
               onClicked:
               {
                  userFocus  = true 
                  loginFocus = false
               }
            }
            TextInput 
            {
               anchors.horizontalCenter:parent.horizontalCenter
               anchors.verticalCenter  :parent.verticalCenter
               focus : userFocus
    
            }
         }
      }
    
      Column 
      {
         spacing : 10
    
         anchors.centerIn:parent.Center 
    
         Text 
         { 
            text          : "Password" 
            font.family   : "Helvetica"
            font.pointSize: 12
            color         : "white"
            anchors.horizontalCenter:passwd.horizontalCenter
         }
    
         Rectangle
         {
            id           : passwd
            border.width : 1
            border.color : "white"
            width        : 160
            height       : 20
            radius       : 2
    
            MouseArea
            {
               anchors.fill: parent
               onClicked:
               {
                  userFocus  = false 
                  loginFocus = true
               }
            }
            TextInput 
            {
               anchors.horizontalCenter:parent.horizontalCenter
               anchors.verticalCenter  :parent.verticalCenter
               echoMode: TextInput.Password 
               focus   : loginFocus
    
            }
         }
      }
      Row 
      {
         spacing: 16
         anchors.horizontalCenter: parent.horizontalCenter
    
         Rectangle
         { 
            width : 50
            height: 20
            radius: 3
    
            
    
            Text
            {
               anchors.horizontalCenter:parent.horizontalCenter
               anchors.verticalCenter  :parent.verticalCenter
               text   : "Login";
            }
            MouseArea
            {
                anchors.fill: parent
                onClicked:
                {
                   chat.state = "main" 
                }
            }
         }
         Rectangle 
         {
            width : 50
            height: 20
            radius : 3
    
            Text
            {
               anchors.horizontalCenter:parent.horizontalCenter
               anchors.verticalCenter  :parent.verticalCenter
               text   : "Guest";
            }
            //onClicked: console.log("guest") 
         }
      }
    

    }
    Connections
    {
    target : loader.source != "" ? loader.item : null
    }

    states :
    [
    State
    {
    name : "main"

         PropertyChanges
         {
            target : loader
            *source : "main.qml" *
         }
      }
    

    ]
    }
    @


  • Lifetime Qt Champion

    Where's the c++ code ?



  • This is not the most important. Because I am using simple qml to c++ binding for the listview. The question is : Is the call @ source : "mail.qml" @ the right way to call the mail.qml file which has a C++ binding?



  • Are you able to load main.qml directly ? You can do this. What is the issue you are facing ?



  • I can load the main.qml directly yeah. The issue is the fact that a Loader can't load my listview as the binding with c++ isn't satisfied.


  • Lifetime Qt Champion

    Then please show your c++ code



  • which part SGaist ?
    This part loads the qml , as I said, this part is straightforward ! You can find examples everywhere :
    http://qt-project.org/doc/qt-4.8/declarative-modelviews-abstractitemmodel.html

    @
    QDeclarativeView* QmlManager::configureQMLInterface(MessageModelSPS *mdsps)
    18 {
    19 QDeclarativeView *view = new QDeclarativeView();
    20 QDeclarativeContext *ctxt = view->rootContext();
    21 ctxt->setContextProperty("myModelsps", mdsps);
    22 view->setSource(QUrl::fromLocalFile("main.qml");
    23 QObject *item;
    24 item = view->rootObject();
    25 view->setResizeMode(QDeclarativeView::SizeRootObjectToView);
    26 view->setMinimumSize(this->width, this->height);
    27 view->setMaximumSize(this->width + 200, this->height - 200);
    28
    29
    30 return view;
    31 }
    @

    also I tried without C++ binding, it doesn't work as well.
    Here is a non binded listview :
    @
    1 import QtQuick 1.0
    2
    3 Item {
    4 width: 200; height: 250
    5
    6 ListModel {
    7 id: myModel
    8 ListElement { type: "Dog"; age: 8 }
    9 ListElement { type: "Cat"; age: 5 }
    10 }
    11
    12 Component {
    13 id: myDelegate
    14 Text { text: type + ", " + age }
    15 }
    16
    17 ListView {
    18 anchors.fill: parent
    19 model: myModel
    20 delegate: myDelegate
    21 }
    22 }
    @

    if you display it alone, it works.
    else, if you put the above code in main.qml and launch the login.qml then by clicking the login button, you'll see nothing.
    What's the problem here SGaist ?

    FYI : to test
    qmlview login.qml



  • Also can set the context from engine in line#20 to
    view.engine()->rootContext();

    Here is something which I tried.
    @int main(int argc, char *argv[])
    {
    QApplication app(argc, argv);
    QDeclarativeView view;
    view.setSource(QUrl(QLatin1String("qrc:///main.qml")));
    view.show();
    return app.exec();
    }

    -----main.qml----

    Rectangle {
    id: container
    width: 300; height: 300

    Rectangle {
        id: rect
        width: 100; height: 100
        color: "red"
    
        MouseArea {
           id: mouseArea
           anchors.fill: parent
        }
        Loader {
            id : pageLoad
        }
    
        states: State {
           name: "resized";
           when: mouseArea.pressed
           PropertyChanges { target: rect; color: "blue"; height: container.height }
           PropertyChanges{target:pageLoad;source:"MyView.qml";x:200;y:100}
        }
    }
    

    }

    ------MyView.qml-----

    import QtQuick 1.1

    Item {
    width: 200; height: 250

      ListModel {
          id: myModel
          ListElement { type: "Dog"; age: 8 }
          ListElement { type: "Cat"; age: 5 }
      }
    
      Component {
          id: myDelegate
          Text { text: type + ", " + age }
      }
    
      ListView {
          anchors.fill: parent
          model: myModel
          delegate: myDelegate
      }
    

    }

    @



  • This worked ! thanks
    Now if I want to load a login screen before a page. When can I launch the C++ model? And how to do that ?



  • Here main.qml itself is like your login page. MyView.qml is the view page. You can set your C++ model to MyView.qml.

    How to expose the C++ model to QML ? Please look at quick/models directory under Qt installation examples directory.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.