QML Loader element issue



  • 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?..



  • 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



  • 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.



  • 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 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)



  • 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



  • 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?



  • 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.



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


Log in to reply
 

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