Complex QML UI questions
-
wrote on 25 Oct 2010, 13:47 last edited by
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 }
}
@ -
wrote on 25 Oct 2010, 14:00 last edited by
you example is for button.qml ? or for the main.qml?
-
wrote on 25 Oct 2010, 14:09 last edited by
button.qml
-
wrote on 25 Oct 2010, 14:14 last edited by
ok so do you receive any error? you defined the page2 in main.qml?
-
wrote on 25 Oct 2010, 15:01 last edited by
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.
-
wrote on 25 Oct 2010, 15:05 last edited by
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.
-
wrote on 25 Oct 2010, 15:16 last edited by
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.
-
wrote on 25 Oct 2010, 15:56 last edited by
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
-
wrote on 25 Oct 2010, 17:59 last edited by
Also, how can I change the state of my button.qml file from my page1.qml?
-
wrote on 25 Oct 2010, 18:52 last edited by
you just create states in your button.qml file and then you use buttonName.state=stateName
-
wrote on 25 Oct 2010, 19:14 last edited by
So no qmldir file needed? The page1.qml doesn't seem to know that button exists.
-
wrote on 25 Oct 2010, 19:48 last edited by
well didn't you created the button in page1.qml ?? did you gave it an id? you need to pass the button id from page1.qml and not from button.qml
-
wrote on 26 Oct 2010, 12:53 last edited by
another approach will be to use "Loader":http://doc.qt.nokia.com/4.7/qml-loader.html
Just found out about it. :)
-
wrote on 26 Oct 2010, 13:10 last edited by
Can I create a .config file or the equivalent of a .plist file for the settings menu to write to?
33/37