October 21, 2010

kyleplattner kyleplattner
Lab Rat
242 posts

Complex QML UI questions

Page  
1

We are beginning the creation of a fairly complex user interface and would like to accomplish the following:

In order to avoid the entire UI being placed in one QML file with an unreasonable amount of “states” we would like to embed QML elements into a larger QML file where each item is a separate document. For instance, if we were creating an automotive dashboard we would have a speedometer QML file that controlled all the UI elements relating to the speedometer. This would sit in the larger dashboard UI along with the odometer qml file, etc.

Does this make sense? What code will accomplish this?

Also, how can I navigate between different QML UI pages? For instance in the dashboard example the setup pages would link to one another as the menu system is traversed.

36 replies

October 21, 2010

Denis Kormalev Denis Kormalev
Lab Rat
1654 posts

Yes, it makes sense. If you will split elements in different files you can work with them like with standard qml components and reuse them as many times as you want.
Navigation between qml pages can be done via flippable or via moving old page off the screen and moving new page to screen.

October 21, 2010

kyleplattner kyleplattner
Lab Rat
242 posts

Could you provide more code detail. I am not surprised that it is possible, but I am at a loss for how to begin implementing both of these features.

October 21, 2010

Denis Kormalev Denis Kormalev
Lab Rat
1654 posts

Both of them are well described in qml examples and demos. Just take twitter demo and look into it. Both techniques are used there.

October 21, 2010

kyleplattner kyleplattner
Lab Rat
242 posts

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?

October 21, 2010

Denis Kormalev Denis Kormalev
Lab Rat
1654 posts

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

October 21, 2010

kyleplattner kyleplattner
Lab Rat
242 posts

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.

October 21, 2010

Denis Kormalev Denis Kormalev
Lab Rat
1654 posts

have you created qmldir file?

October 22, 2010

2beers 2beers
Lab Rat
149 posts

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

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

October 22, 2010

mbrasser mbrasser
Lab Rat
452 posts

http://doc.qt.nokia.com/4.7/qdeclarativemodules.html [doc.qt.nokia.com] 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 [doc.qt.nokia.com] should give you a good introduction to QML.

October 22, 2010

kyleplattner kyleplattner
Lab Rat
242 posts

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

October 22, 2010

kyleplattner kyleplattner
Lab Rat
242 posts

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

October 22, 2010

kyleplattner kyleplattner
Lab Rat
242 posts

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.

October 22, 2010

Tobias Hunger Tobias Hunger
Robot Herder
3386 posts

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.

October 22, 2010

kyleplattner kyleplattner
Lab Rat
242 posts

Tobias,
That solved one of my issues. Thanks,

Kyle

October 22, 2010

kyleplattner kyleplattner
Lab Rat
242 posts

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

Page  
1

  ‹‹ Manipulating unknown types from c++.      QML Plugin. Returning a QScriptValue without using private headers. ››

You must log in to post a reply. Not a member yet? Register here!