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

godbod

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

SGaist

Hi,

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

godbod

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" *
     }
  }

]
}
@

SGaist

Where's the c++ code ?

godbod

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?

dheerendra

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

godbod

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.

SGaist

Then please show your c++ code

godbod

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

dheerendra

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
  }

}

@

godbod

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 ?

dheerendra

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.