Complex QML UI questions

DenisKormalev

1.0 is version.
TwitterCore here is folder and Twitter is alias for qmls in this folder. This alias is used in twitter.qml.

? Offline

So I tried creating my own folder and naming in a similar structure but it doesn't seem to work. I guess I will keep experimenting.

DenisKormalev

have you created qmldir file?

? Offline

maybe this will help you: "http://doc.qt.nokia.com/4.7/qdeclarativedocuments.html":http://doc.qt.nokia.com/4.7/qdeclarativedocuments.html

but like Denis said you should look at flickr, twitter demos

mbrasser

"http://doc.qt.nokia.com/4.7/qdeclarativemodules.html":http://doc.qt.nokia.com/4.7/qdeclarativemodules.html is a good place to start for the import statement. In general, reading through the overviews at "http://doc.qt.nokia.com/4.7/qtquick.html":http://doc.qt.nokia.com/4.7/qtquick.html should give you a good introduction to QML.

? Offline

Isn't the qmldir part of the .qmlproject file?

? Offline

What I cannot figure out in any example is whether I can navigate from something like a mainpage.qml to a settings.qml and keep them wholly separate. Is this possible?

I look forward to a book or other resource where I can learn from ground up. Combing through examples has not proved to be super helpful yet.

Thanks,

Kyle

? Offline

I just found the qmldir file in the Twitter example. It is only visible in the project directory and not in Qt Creator at all.

? Offline

kyleplattner: I am no quick expert, but I think I remember the filenames being case sensitive. So if you have a Button, then that should go into a Button.qml, not in button.qml.

? Offline

Tobias,
That solved one of my issues. Thanks,

Kyle

? Offline

I still am sketchy on how to cleanly navigate between separate qml documents.

? Offline

OK. let me know if this works for you. I also started using qml so I'm at a very rookie level , if anyone has a better solution can correct me any time.

you have 3 files: main.qml, Page1.qml, Page2.qml

If I understand correct you want to move from page1 to page2. when you press the rectangle from page1 you will go to page 2 and the same way around. You can also use "transitions":http://doc.qt.nokia.com/4.7/qdeclarativeanimation.html#transitions for a more animated effect

here is the code:

main.qml

@import Qt 4.7

Rectangle {
id:main_rectangle
width: 360
height: 640

Page1{
    id:page1
}

Page2{
    id:page2
}

states: [
    State {
        name: "page2"
        PropertyChanges { target: page1; visible:false; }
        PropertyChanges { target: page2; visible:true; }
    },
    State {
        name: "page1"
        PropertyChanges { target: page2; visible:false; }
        PropertyChanges { target: page1; visible:true; }
    }

]

}
@

Page1.qml

@import Qt 4.7

Rectangle {

width: 360
height: 640

Text {
    id: myText
    x: 93
    y: 152
    width: 80
    height: 20
    text: "page 1"
}

Rectangle {
    id: rectangle1
    x: 93
    y: 216
    width: 100
    height: 100
    color: "#912121"

    MouseArea {
        id: mouse_area1
        anchors.fill: parent
        onClicked: main_rectangle.state="page2"
    }
}

}
@

Page2.qml

@import Qt 4.7

Rectangle {
width: 360
height: 640
visible: false;

Text {
    id: myText
    x: 93
    y: 152
    width: 80
    height: 20
    text: "page 2"
}

Rectangle {
    id: rectangle1
    x: 93
    y: 216
    width: 100
    height: 100
    color: "#912121"

    MouseArea {
        id: mouse_area1
        anchors.fill: parent
        onClicked: main_rectangle.state="page1"
    }
}

}
@

? Offline

Thanks so much, I look forward to trying this. This ran fine on your end?

? Offline

[quote author="kyleplattner" date="1287845568"]Thanks so much, I look forward to trying this. This ran fine on your end?[/quote]

yes. it runs ok on my side. you load the main.qml file and click the rectangle

? Offline

You are very helpful. Let me know if you find any great QML resources for learning.

? Offline

Also a better example is to create, destroy the QML objects instead of make them not visible.

@function loadPage1() {
var component = Qt.createComponent("Page1.qml");
if (component.status == Component.Ready) {
var page = component.createObject(main_rectangle);
}
}

@

and on MouseArea you do something like this:

@ onClicked: loadPage1();@

? Offline

When I do the later example I return a "ReferenceError: Can't find variable: loadPage1" error. Do I need to make a qmldir file? Will Qt creator auto-generate one for me?

Kyle

? Offline

you need to put the mousearea on main.qml and you don't need to create the 2 objects Page1 and Pgae2. you will create after the button is pushed

? Offline

In this example, if I wanted to make a button that loaded from a separate QML file as button.qml, why can't I do something like this:

@import Qt 4.7

Rectangle {
property alias text: textItem.text
var page = "page2"

if (page2.visible == true)
{

page = "page1"

}

 width: 100; height: 30
 border.width: 1
 radius: 5
 smooth: true

 gradient: Gradient {
     GradientStop { position: 0.0; color: "lightGray" }
     GradientStop { position: 0.5; color: "gray" }
     GradientStop { position: 1.0; color: "lightGray" }
 }

 Text {
     id: textItem
     anchors.centerIn: parent
     font.pointSize: 20
     color: "white"
     font.family: "Helvetica Neue"
 }

 MouseArea {
     id: mouse_area_button
     anchors.fill: parent
     onClicked: main_rectangle.state = page
 }

}
@

? Offline

you example is for button.qml ? or for the main.qml?