QML screens managed by cpp application



  • Hello all

    I need to change my application gui from widget base to qml based
    the application main view has: static header, static foother and at the middel, changing content (same as QMainWindow that have toolbar statusbar and central widget).
    in widget base application i used QStackedWidget to handle the switching content (switch between widgets/views) and i need to do it in QML with transition between two screens (while new screen change the current screen)

    more than that i have to:

    1. create view on demand
    2. not destroy the created view after it no longer the current screen (for feture use)

    how can i implement QStackWidget idea based on QML (i dont want to embed the QStackedWidget in QDeclarativeItem, register it and use it)
    and most important to manage it in the CPP code (manage what will be the new current view, and which 2 screen to animate the transition)

    (i try to use ApplicationWindow from the desktop-components and set the ApplicationWindow data in the cpp code using setContextProperty, but i'm not successeded and if it success and show the new view the transition wasnt work

    my implementation is something like:

    @
    QDeclarativeView mMainView;
    mpQmlRootContext = mMainView.rootContext();
    mpQmlEngine = mMainView.engine();
    mMainView.setSource(QUrl::fromLocalFile("../Resources/Qml/MainWindow/MainWindow.qml"));
    mpQmlRootObject = dynamic_cast<QObject*>(mMainView.rootObject());
    @

    i create QDeclarativeComponent for each switching screen (i.e for each .qml file that need to be in the content) as

    @
    QDeclarativeComponent* mpTestComp = new QDeclarativeComponent(mpQmlEngine, QUrl::fromLocalFile("../Resources/Qml/MainWindow/Home/Home.qml"));
    @

    when the user ask for Home screen we create the screen and save its QDeclarativeItem

    @
    QObject myObject = mpTestComp->create();
    QDeclarativeItem
    item = qobject_cast<QDeclarativeItem*>(myObject);
    connect(item, SIGNAL(sigPhotosClicked()),this,SLOT(SltTestChange ()));
    item->setObjectName("item");
    @

    i try some option to change the content using the data
    option 1:

    @
    mpQmlRootContext->setContextProperty("data", QVariant::fromValue<QDeclarativeItem*>( item ));
    @

    The qml "MainWindow.qml" is something like:

    @
    ApplicationWindow{

    statusBar: Rectangle{.......}
    toolBar: Rectangle{........}

    }
    @

    this was not worked

    option2

    @
    mpQmlRootContext->setContextProperty("dataItem", QVariant::fromValue<QDeclarativeItem*>( item ));
    @

    The qml "MainWindow.qml" is something like:

    @
    ApplicationWindow{
    data: dataItem
    statusBar: Rectangle{.......}
    toolBar: Rectangle{........}

    }
    @

    Can some one please help me
    Thanks in advanced
    Moti

    [EDIT: code formatting, please wrap in @-tags, Volker]



  • We have the exact same layout (header, footer, changing middle) and we have a back button / home screen button.

    In order to do this we use a combination of Loader and ListModel. The name of the QML file and up to six parameters are stored on the ListModel. If we push the back button the most recent entry QML file is loaded and the six parameters are assigned pulled off the model and assigned to the page.
    @
    ListModel {
    id: pageModel

        signal historyLoaded();
        function pageRequested(page){
            //This function can be called with up to 7 arguments: Name of the QML file + 6 arguments to encapsulate state
            var length = arguments.length;
            var arg1 = "";
            var arg2 = "";
            var arg3 = "";
            var arg4 = "";
            var arg5 = "";
            var arg6 = "";
    
            var arg = new Array();
    
    
            for(var x=1; x<7; ++x)
            {
                if(x < length)
                {
                    arg[x] = arguments[x];
                }
                else
                {
                    arg[x] = "";
                }
            }
    
            if(pageLoader.item)
            {//Push state
                append({"page": pageLoader.source, "arg1": pageLoader.item.arg1, "arg2": pageLoader.item.arg2, "arg3":    pageLoader.item.arg3, "arg4": pageLoader.item.arg4, "arg5": pageLoader.item.arg5, "arg6": pageLoader.item.arg6});
            }
            else
            {//Default case (Known case: the first screen created when pageLoader.item is invalid)
                append({"page": pageLoader.source, "arg1": "", "arg2": "", "arg3": "", "arg4": "", "arg5": "", "arg6": ""});
            }
           
            pageLoader.source = page;
            pageLoader.item.arg1 = arg[1];
            pageLoader.item.arg2 = arg[2];
            pageLoader.item.arg3 = arg[3];
            pageLoader.item.arg4 = arg[4];
            pageLoader.item.arg5 = arg[5];
            pageLoader.item.arg6 = arg[6];            
            historyLoaded();
    
        }
        function pageLast()
        {
            if((count - 1) > 0)
            {
                pageLoader.source = get(count - 1).page
                pageLoader.item.arg1 = get(count - 1).arg1
                pageLoader.item.arg2 = get(count - 1).arg2
                pageLoader.item.arg3 = get(count - 1).arg3
                pageLoader.item.arg4 = get(count - 1).arg4
                pageLoader.item.arg5 = get(count - 1).arg5
                pageLoader.item.arg6 = get(count - 1).arg6
                remove(count - 1)
                historyLoaded();
            }
        }
    }
    

    }
    @

    I based this off another example I found on this site a while back.



  • Thanks a lot for your reponse and your time

    The problem (i think, if i understend it corret) In that scenario is when you load (using a loader) a new page the current page is destroyed and i can loose all data or changes the user made (without saving yet).

    i'll give the idea a try to see if i can using it
    Thanks a lot

    by the way did you used table view in your application? how and how you connect it to cpp table model?
    thanks a lot


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.