Complex QML UI questions
-
Both of them are well described in qml examples and demos. Just take twitter demo and look into it. Both techniques are used there.
-
So I am looking at the twitter example and I am trying to figure out how they embedded qml files into the larger qml document.
In twitter.qml is the "import "TwitterCore" 1.0 as Twitter" used to identify the folder? What is the 1.0?
-
1.0 is version.
TwitterCore here is folder and Twitter is alias for qmls in this folder. This alias is used in twitter.qml. -
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.
-
have you created qmldir file?
-
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
-
"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.
-
Isn't the qmldir part of the .qmlproject file?
-
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
-
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