QML screens managed by cpp application

lahianim

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:

create view on demand
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]

Hornsj2

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.

lahianim

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