How to create a multi-view application?

[gault]

As we known, most of mobile applications are multi-view based. Does Qt Quick provide a standard way to do this? Or could somebody give an example to show how to create it manually?

Another questions:

1. QAction - action is basic type supported by QML. But I could not use it like this:

Property action openFile

2. How to assign value to action type in QML?

3. How to define a list property? How to use list in function?

How to implement a context sensitive toolbar?

I just want to define a property like this: list<action> actions, then use it in a function like:

@onActionsChanged: {

foreach (action, actions) {

//add a tool button for each action

}@

How to implement this? Thanks!

[mario]

Hi,

I'm not sure if I understand your first question but I think what you mean is something like QStackedWidget or similar for QML, correct?

Take a look at the example that is included in the source package: qt-dir/examples/declarative/tabwidget

Basically you just manipulate the visible property.

Another way of doing this is to use a ListView combined with VisualItemModel, see http://doc.qt.nokia.com/4.7-snapshot/qml-visualitemmodel.html. Each item in the listview is a QML item such as Rectangle, Item, etc.

[mbrasser]

Hi,

Not all of the types can be used in property declarations from QML -- see "Adding new properties":http://doc.qt.nokia.com/4.7-snapshot/qml-extending-types.html#adding-new-properties for those that can. The webbrowser demo (in demos/declarative/webbrowser) gives an example of using QActions from QML (see Button.qml and Header.qml).

You can declare lists of objects, though this doesn't seem to be documented. e.g.
@property list<Item> items: [Rectangle {}, Image {}]@

and then iterate through the items in typical javascript fashion. This approach is rather limited though (I don't think you can easily manipulate the list or get useful signals out of it, for example), so I'd suggest using a model with a Repeater or ListView to display the items.

Regards,
Michael

[gault]

Mario, thanks for your suggestion. Tabwidget is really a good widget which I would like to use in places, e.g. in application settings, there would be many different kinds of settings, then I could separate them well grouped. In multi-view based applications, I prefer the way like VisualItemModel, this kind of applications always have a controller which control the display of current page. The page usually has options like "next", "back" and "exit", something like that. However, there is a problem when I use this item. E.g. if I change the view from index 0 to index 10 by setting the index of list view, it's really a long time to update. It will roll for a long time.

Currently, I use a mechanism like this.

@
Item {

id: controller

property Item currentView

xxxView { ... //some button clicked, change controller's state}

xxxView { ... }

...

states: [
State {

                name: "state"
                PropertyChanges { target: xxxView; x: 0 }
                PropertyChanges { target: controller.currentView; x: -(parent.width * 1.5) }
                PropertyChanges { target: controller; currentView: xxxView }

            }

..............

}

}
@

[gault]

mbrasser, thanks for your reply. I also noticed the webbrowser example. I found that action is not supported by defining as a property, although it is really a basic type in qml. QAction must be defined by C++ and then could be used in QML.

I am studying repeater now...

[mario]

@gault: If you don't need the rolling-animation you can try setting the highlightMoveSpeed property to a high value, see http://doc.qt.nokia.com/4.7-snapshot/demos-declarative-rssnews-rssnews-qml.html were they set the property to 9999999

[mbrasser]

[quote author="mario" date="1280728478"]@gault: If you don't need the rolling-animation you can try setting the highlightMoveSpeed property to a high value, see http://doc.qt.nokia.com/4.7-snapshot/demos-declarative-rssnews-rssnews-qml.html were they set the property to 9999999

[/quote]
Another alternative, if you want to keep the animation, is to set highlightMoveSpeed to -1, and highlightMoveDuration to e.g. 300. This will use a constant duration for all transitions (which means small movements will look slower, and large movements will look faster).

[gault]

That's great! Thanks for both.