Cascades Development

[TheMarco]

I have a TabbedPane in my main.qml in which I wanted to include a separate QML document for each tab. Now as it turns out, when I do this I'm having trouble accessing items that are in one of the separate QML documents from Javascript in the main.qml file. For example let's say I have:

    Tab {
        title: qsTr("Animation")
        imageSource: "images/icon_animation.png"
        AnimationsPage {
        }
    }

Let's say there's a label with id 'foo' inside AnimationsPage.qml.

In the same page where the tabs live I have a Sheet defined with a WebView component in it. This WebView has a onMessageReceived handler defined in which items inside AnimationsPage.qml get manipulated in certain case.

The problem: This does NOT work. However, when I put all the content for Animationspage directly inside main.qml like:

    Tab {
        title: qsTr("Animation")
        imageSource: "images/icon_animation.png"
        Page {
            // ALL THE STUFF THAT USED TO LIVE IN AnimationsPage.qml
        }
    }

Everything all of a sudden works just fine.

I'd like to have a nice modular approach to this app with all pages that live inside my Tabs in separate documents but it seems I'm forced to include it all in main.qml when I want to perform operations on objects in the included document from within main.qml.

Am I overlooking something here or is this some sort of limitation of QML / Cascades?

[treike]

Maybe you an approach like stated here would work better? Didn't try it though, just a guess.

Another guess was to to give your Animations an ID, thus being able to access other items via this ID?

[TheMarco]

I did look at this and it seems an interesting approach for larger apps. Mine however is fairly small so I didn't think I'd need to use this. Also, with stuff that isn't even loaded at all times I think there's probably even less chance of the items being accessible

I did give everything an ID. But let's say 'myid' is in another QML file I can't seem to perform operations on it from javascript in the main file. It's been driving me insane...

[_NishantShah]

Create alias in Animation Page.

For example create alias in Aniamtion Page like this

AnimationPage.qml

Container {
id: AnimationPageMainContainer
property alias fooText: foo.text
Label{
id: foo
text: "to be manipulated"
}
}

& manipulate label's text in main.qml like this

main.qml

Tab {
 title: qsTr("Animation")
 imageSource: "images/icon_animation.png"
AnimationPage{
id: animationPage
}
}
...
....
...
onMessageReceived: {
animationPage.fooText = "Your text to be set"
 }

[TheMarco]

I finally got around trying this. It works perfectly. My code is now much nicer and more modular. Thanks a bunch!

[TheMarco]

Actually, scratch that. It's not working.

Getting errors in my log about SomePage.somevar not being defined when I use this technique.