Creating Wizard in QML (in general: creating transitions between two pages)

ephe

I'm new to Qt Quick so I'm sorry if the answer to my question is obvious.

I would like to create a wizard in Qt Quick.
If the user presses the 'next' button, the next wizard page should slide in (so I would like to have transitions in my wizard).

I have read about a couple of approaches: PageStack, PathView, ListView or I could do everything by myself.

The wizards are non-linear, like it is explained here: "QWizard":http://doc.qt.nokia.com/4.7-snapshot/qwizard.html
otherwise something like this would probably be possible: "Page Control Component":http://www.developer.nokia.com/Community/Wiki/How_to_create_a_Page_Control_component_in_QML

I also do not know if it is good to load all pages when starting the wizard, or if I should use the Loader. Some pages may even only be created when the "next" button was pressed.

Do you have any recommendations how to solve that problem? Something like a "Wizard Creation Best Practices"?

Hornsj2

The solution we use is to use a loader and load pages at the point where they are needed (e.g. when the button requesting the page is clicked). That way you only need to supply the name of the QML file to load as the Loader's source parameter to load a page.

ephe

Thank you for your answer! I want to create the pages in C++ and then animate them in QML. Therefore I didn't really know how to use your approach for this particular problem.

I have found another solution now.

I have created two QML components, Page1 and Page2.
Page1, Page2:
@
Rectangle {
property bool current;
width: 640
height: 480
color: "blue"
objectName: "page1"
}
@

I have added these two to my main.qml where I've also got two buttons to go back and forward.

This is what the animation looks like:
@
ParallelAnimation
{
id: forwardAnimation

    PropertyAnimation
    {
        target: page1.current ? page2 : page1
        property: "x"
        from: 0
        to: -640
        duration: 500
    }

    PropertyAnimation
    {
        target: page1.current ? page1 : page2
        property: "x"
        from: 640
        to: 0;
        duration: 500
    }
}

@

As you can see, I've always got a current page. This is toggled on the onClicked event of the buttons.

In C++, I've created a QDeclarativeItem, a FlexibleArea. I can fill it with controls, which also have a QML UI but can be controlled in C++.
Here is an example of my TextField:
@
TextField::TextField(const QString& text)
{
QDeclarativeEngine engine;
QDeclarativeComponent compTextCtrl2(&engine, QUrl("qml/scrolling/TextCtrl.qml"));
m_item = qobject_cast<QDeclarativeItem*>(compTextCtrl2.create());
m_item->setProperty("prompt", text);
}

void TextField::setText(const QString& text)
{
m_item->setProperty("prompt", text);
}

void TextField::setParent(QDeclarativeItem *item)
{
m_item->setParentItem(item);
}
@

Then I can fill my FlexibleArea like this:
@
TextField* textField1 = new TextField("Test1");

FlexibleAreaC* flexArea1 = new FlexibleAreaC();
flexArea1->addItem(textField1);

@

I've also got two global QDeclarativeItem, poPage1 and poPage2 which resemble the Page1 and Page2 in the main.qml:
@
QDeclarativeView canvas;

canvas.setSource(QString("qml/scrolling/main.qml"));
page1 = canvas.rootObject()->findChild<QDeclarativeItem*>("page1");
page2 = canvas.rootObject()->findChild<QDeclarativeItem*>("page2");

@

Now I can set these pages as the parent items of my FlexibleAreas and like this I can animate my pages which I've created in C++:

@
flexArea1->setParentItem(page1);
@

The pages can be created when a button was clicked, and they can be created dynamically in C++ or also qml-Files could be created and then added to the parent pages.

I don't know if this is a good solution. Maybe somebody sees some problems with this? I'm quite new to QML and Qt, so I don't know if there is a better way of doing this.
I'm looking forward to your answers!

antonio

Maybe this helps you:
http://qt-project.org/wiki/QML-Application-Structuring-Approaches