Complex QML UI questions
-
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.
-
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.
-
Tobias,
That solved one of my issues. Thanks,Kyle
-
I still am sketchy on how to cleanly navigate between separate qml documents.
-
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: 640Page1{ 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" } }}
@ -
Thanks so much, I look forward to trying this. This ran fine on your end?
-
You are very helpful. Let me know if you find any great QML resources for learning.
-
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();@
-
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
-
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 }}
@ -
button.qml
-
I am trying to figure out a way for the button to know what page should be navigated to based on what page it is currently on. For instance, if it is on page 1 then it should navigate to page 2 and if it is on page 2 it should navigate to page 1. That is what I was trying to accomplish but it threw me errors.
-
ok. but the button where it is build? in main page, page1 or page 2. because if it's build in main page and when you press it you load page1 for example then the button will probably become invisible. if the button is build in page1 or page2 you already know what is the current page. can you post the entire code for every qml page to make a better idea.
-
It is loaded in each page file:
main.qml
@import Qt 4.7Rectangle {
id:main_rectangle
width: 640
height: 480/* function loadPage1() {
var component = Qt.createComponent("Page1.qml");
if (component.status == Component.Ready) {
var page = component.createObject(main_rectangle);
}
}
*/Page1{ id:page1 } Page2{ id:page2 } Page3{ id:page3 } Page4{ id:page4 } Page5{ id:page5 } states: [ State { name: "page5" PropertyChanges { target: page1; visible:false; } PropertyChanges { target: page2; visible:false; } PropertyChanges { target: page5; visible:true; } PropertyChanges { target: page4; visible:false; } PropertyChanges { target: page3; visible:false; } }, State { name: "page4" PropertyChanges { target: page1; visible:false; } PropertyChanges { target: page2; visible:false; } PropertyChanges { target: page5; visible:false; } PropertyChanges { target: page4; visible:true; } PropertyChanges { target: page3; visible:false; } }, State { name: "page3" PropertyChanges { target: page1; visible:false; } PropertyChanges { target: page2; visible:false; } PropertyChanges { target: page5; visible:false; } PropertyChanges { target: page4; visible:false; } PropertyChanges { target: page3; visible:true; } }, State { name: "page2" PropertyChanges { target: page5; visible:false; } PropertyChanges { target: page4; visible:false; } PropertyChanges { target: page3; visible:false; } PropertyChanges { target: page1; visible:false; } PropertyChanges { target: page2; visible:true; } }, State { name: "page1" PropertyChanges { target: page5; visible:false; } PropertyChanges { target: page4; visible:false; } PropertyChanges { target: page3; visible:false; } PropertyChanges { target: page2; visible:false; } PropertyChanges { target: page1; visible:true; } } ]}
@page1.qml
@import Qt 4.7Rectangle {
width: 640 height: 480 Button { text: "Page Two"; x:50; y:232; } Button { text: "Page Three"; x:200; y:232; } Button { text: "Page Four"; x:350; y:232; } Button { text: "Page Five"; x:500; y:232; }}
@button.qml
@import Qt 4.7Rectangle {
property alias text: textItem.text//var page = "page2" 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 = "page2" }}
@and every subsequent page (page2.qml, page3.qml, etc) is identical to page 1 with minor logical changes.
-
I got it to work by placing the mouse_area instructions within each specific page. The next question I have is regarding how I can skin my designs using CSS-like files. Is this possible?
Kyle
-
Also, how can I change the state of my button.qml file from my page1.qml?