How to separate a program in Model/View/Controller

yassine26

I want to separete my program in 3 parts: model, view and controller

@

import QtQuick 1.0

Item {

width: 800
height: 480

property string ville: lineEdit.text

XmlListModel {
    id: forecastModel
    source: "http://www.google.com/ig/api?weather="+ville+"&hl=fr"
    query: "/xml_api_reply/weather/forecast_information"
    XmlRole { name: "city"; query: "city/@data/string()" }
}

Rectangle {
    id: editRect
    x:10; y:10
    width: 120
    color: "black"; radius: 2; border.width: 3; border.color: "gray"; height: 30
    TextInput {
        font.pixelSize: 20
        anchors.centerIn: parent
        id: lineEdit
        text: ville
        smooth: false
        color: "#c8c8c8"
        font.family: "Nokia Large"
        focus: true
        Keys.onReturnPressed: ville = lineEdit.text
    }
}

ListView {
    x: 145; y: 325; width: 594; height: 48;
    model: forecastModel
    delegate: Text {
        font.family: "Univers LT Std"; color: "#c8c8c8"; width: parent.width; font.pixelSize: 30
        text: city
        anchors.centerIn: parent.centerIn
    }
}

}@

thisisbhaskar

Do you mean you want to have model, view, and delegate coming from different QML files.. can you clarify? Your question is not clear. As I see it, they are already separated.

yassine26

exactly, I want to separate it in 3 QML files

DenisKormalev

You can put XmlListModel in separate file (let's call it MyModel.qml) and use MyModel from your qml code (if it will be in another directory you should import this path). Please read Qt Assistant to get further information

thisisbhaskar

That you can always do that.. have three qml files and have your list view, delegate, and model in those files. But you need to connect them all the above qml file. I mean creating concrete objects of those three items and assigning your model element to Model and same for delegate.

But I don't see a good reason to separate them? do you have any reason.

loladiro

"This":http://doc.qt.nokia.com/4.7/qdeclarativemodules.html#qml-modules might help you

yassine26

The purpose of separating them is to have a QML file that contains the data model (XMLlistModel), another that includes the views (TextInput, ListView), and the third to start the program

yassine26

the problem is ListView can not find the id of XMLlistModel if I separated the two into two files

DenisKormalev

You should not use them by id, but create new objects from your qml files.

thisisbhaskar

Read this "Managing Documents":http://doc.qt.nokia.com/4.7/qdeclarativedocuments.html

thisisbhaskar

You don't give up :)
First read http://doc.qt.nokia.com/4.7/qdeclarativedocuments.html

then to solve your problem....

XmlModel.qml
@ import QtQuick 1.0
XmlListModel {
id: forecastModel
source: "http://www.google.com/ig/api?weather=&hl=fr"
query: "/xml_api_reply/weather/forecast_information"
XmlRole { name: "city"; query: "city/@data/string()" }
}
@

TextDeligate.qml
@ import QtQuick 1.0

Component {
Text {
id : textItem
font.family: "Univers LT Std";
color: "#c8c8c8";
width: parent.width;
font.pixelSize: 30
text: city
anchors.centerIn: parent.centerIn
}
}
@

ListItem.qml
@ import QtQuick 1.0
ListView {
x: 145; y: 325; width: 594; height: 48;
}
@

now in your main.qml

@ import QtQuick 1.0

Item {
       XmlModel {
                id: modelItem
       } 
       ListItem {
          id: listItem
          model: modelItem
          deligate: TextDeligate { }
 }

}@

There could be syntax errors, please correct them. Understand what I tried to do. Don't just copy :)

yassine26

tank you Vijay Bhaska Reddy i try to do it