Loader source not being displayed

[hclemson]

I'm trying to use the Loader element to load .qml pages. I've been following the documentation here http://doc.qt.nokia.com/4.7-snapshot/qml-loader.html

The problem i'm facing, is that when I set loader.source = "Page2.qml", the page isn't shown.
I have put a console.log on the Page2.qml Component.onCompleted and I can see that log in my Application output, so I know that the Page2.qml is getting loaded, it just isn't displayed.
Page2.qml displays fine in the qml viewer, so it must be something to do with the way it's loaded.

Here's the basic code:

Item {

    id: homeScreen
    width: 360
    height: 640

    Loader {
        id: pageLoader
        anchors.fill: parent
        onLoaded: console.log('loaded')
    }

    Button {
        id: button1
        x: 0
        y: 335
        text: "New"
        onClicked: {pageLoader.source = "Page2.qml";  }
    }
}

What have I missed?

[gnuton]

You cannot see the Page2 element because it's placed under the button.

[sauvikds]

Hi hclemson,

You need to give the height and width of the Loader element "pageLoader", also you have to give x and y position.
Also you have to set the opacity of the button to 0, and I guess "pageLoader" has its opacity to 1 by default.

Regards,
Sauvik Das

[hclemson]

It was the order of the elements under Item that I had got wrong. Moving the Loader element to the end of the Item solved the problem.

[gnuton]

Exactly, that's what I told you!

[vineet.jain]

Continuing with this thread only , i am having the same issue, here's my page1.qml:

import QtQuick 1.1
import com.nokia.meego 1.0

Page {
id:page1
  
    Button{
        id:btn
        anchors {
            horizontalCenter: parent.horizontalCenter
             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')

    }

}

I have putted logs inside the Component.OnCompleted() of Sample2.qml , which gets created as well as soon as button is clicked but still the page 1 is in view.

[vineet.jain]

Any responses?

[gnuton]

Hi Vineet,
in your case you are creating a Page inside a Page. I guess this is not going to work!
The previous case was different since The new loaded item was created as child of a simple Item (not a page).

solution: Since you are using Meego components you should:
1. the Loader should be a child of the PageStackWindow
2. Once the page is loaded you shoul push the page into the stack to show it.

[vineet.jain]

Hi Vineet,
in your case you are creating a Page inside a Page. I guess this is not going to work!
The previous case was different since The new loaded item was created as child of a simple Item (not a page).

solution: Since you are using Meego components you should:
1. the Loader should be a child of the PageStackWindow
2. Once the page is loaded you shoul push the page into the stack to show it.

Actually i had some doubt regarding using this page element, but i though it does not matter whether i use page, item or a rectangle.

After a lot of workaround & advice from a Qt thread also(http://developer.qt.nokia.com/forums/viewthread/13735/ , see 2nd last suggestion) i used visible:true inside the page 2.qml . By doing this though i wasn't able to see the page 2 but the button which was on page 2 got visible on page1 itself. Just thinking about this behavior.

Actually i have used that stack method it works fine, i am actually trying different ways as how a qml can be loaded but got stuck with this one

[gnuton]

Well your code does basically this

Page {
id: page1

Page { // Instanciated by Loader
id: page2
}

}

As you can see this doesn't really seems to be okay, does it?
In theory you should write something like this to get it working

PageStackWindow {

Page{
id: page1
}

Page {
id: page2
}

Loader {
source: "page3.qml"
}

[vineet.jain]

hmm ok. Actually i already have a PageStackWindow inside the Main.Qml file which loads the page1.qml using keyword 'initial page' .Now from that page 1 i was trying to load page2. But seems i was going in wrong direction by using this methodology..