Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Creating Wizard in QML (in general: creating transitions between two pages)
Forum Updated to NodeBB v4.3 + New Features

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

Scheduled Pinned Locked Moved QML and Qt Quick
4 Posts 3 Posters 8.1k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • E Offline
    E Offline
    ephe
    wrote on last edited by
    #1

    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"?

    1 Reply Last reply
    0
    • H Offline
      H Offline
      Hornsj2
      wrote on last edited by
      #2

      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.

      1 Reply Last reply
      0
      • E Offline
        E Offline
        ephe
        wrote on last edited by
        #3

        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!

        1 Reply Last reply
        0
        • A Offline
          A Offline
          antonio
          wrote on last edited by
          #4

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

          1 Reply Last reply
          1

          • Login

          • Login or register to search.
          • First post
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved