QML Loader element issue

? Offline

Hi, I am trying to activate a QML view using the loader element from the current view. On the click of a button i called the loader function activate the view, here's the code snippet i have used:

[code]
Page {
id:page1

Label {
id: label
anchors.centerIn: parent
text: qsTr("Hello world!")
visible: false
}

Button{
    id:btn
    anchors {
        horizontalCenter: parent.horizontalCenter
       // top: label.bottom
        topMargin: 10
    }
    text: qsTr("Click to go on page2!")
    //onClicked:pageStack.push(Qt.resolvedUrl("Sample2.qml"));  // *This Works Fine*
    onClicked: pageLoader.source = "Sample2.qml"

}

Loader {
    id: pageLoader
    onLoaded: console.log('loaded')

}

}
[/code]

Problem is that the view2 does not gets loaded using the above code. One strange this is that, i have putted a log inside the Component.OnCompleted() of view2 & i can see that log got created, means view 2 is activated, its just not visible.So any pointers on above issue?..

task_struct

Hi,

Take a look at "Loader sizing behavior":http://developer.qt.nokia.com/doc/qt-4.8/qml-loader.html#loader-sizing-behavior . Your Loader does not have size, so main element in Sample2.qml should have, or your new view have size 0x0

? Offline

Well the sample2.qml looks exactly like sample1.qml(page1), just a difference between the two is of text of the button. So do i need to explicitly set the size of that page(sample2)? If yes then i tried that also but no effect its still showing sample1 only.

task_struct

Try with:
@
Loader {
id: pageLoader

    anchors.fill: page1

    onLoaded: console.log('loaded')

}
@

And why do you want to load Page with Loader? Page is made to be loaded by PageStack

? Offline

[quote author="task_struct" date="1327393618"]Try with:
@
Loader {
id: pageLoader

    anchors.fill: page1

    onLoaded: console.log('loaded')

}
@

And why do you want to load Page with Loader? Page is made to be loaded by PageStack [/quote]

I know that page can be loaded using stack way, actually i was trying different ways to load a qml file, the stack option is working very fine but this loader one is not.

& regarding the code i have tried that already , just that i missed pasting it here(i.e. anchors.fill: page1)

task_struct

I think I understand what the problem is. Page width and height are set to
@
width: visible && parent ? parent.width : internal.previousWidth
height: visible && parent ? parent.height : internal.previousHeight
@

visible is set to false and internal.previousWidth is set to 0 so your new page is invisible and it's size is 0x0

See "Page source code":http://qt.gitorious.org/qt-components/qt-components/blobs/master/src/symbian/Page.qml

? Offline

Ok what i did is i set the visibility of page 2 as true:

[code]
Page {
id:page2
visible:true;
...
...
[/code]
Doing this displays the content(which is a button) displayed on the screen but still the view 1 is only visible.The button on view 2 gets visible on view 1 only.

Should i set opacity factor etc or something like that?

task_struct

I think you can't hide page1 because pageLoader is child of page1, so if you set page1.visible = false or page1.opacity = 0 pageLoader also will be hidden.

You need a parent element that loads pages. In Qt Components this is PageStack. PageStack loads pages as it's child elements and sets theirs visibility.

GentooXativa

Play a bit with opacity and Z-axys to position it over page1.