January 24, 2012

vineetQt vineetQt
Lab Rat
6 posts

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:

  1. Page {
  2. id:page1
  3.  
  4.  
  5.    Label {
  6.        id: label
  7.        anchors.centerIn: parent
  8.        text: qsTr("Hello world!")
  9.        visible: false
  10.    }
  11.  
  12.     Button{
  13.         id:btn
  14.         anchors {
  15.             horizontalCenter: parent.horizontalCenter
  16.            // top: label.bottom
  17.             topMargin: 10
  18.         }
  19.         text: qsTr("Click to go on page2!")
  20.         //onClicked:pageStack.push(Qt.resolvedUrl("Sample2.qml"));  // *This Works Fine*
  21.         onClicked: pageLoader.source = "Sample2.qml"
  22.  
  23.     }
  24.  
  25.     Loader {
  26.         id: pageLoader
  27.         onLoaded: console.log('loaded')
  28.  
  29.     }
  30.  
  31. }

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

8 replies

January 24, 2012

task_struct task_struct
Ant Farmer
350 posts

Hi,

Take a look at Loader sizing behavior [developer.qt.nokia.com] . Your Loader does not have size, so main element in Sample2.qml should have, or your new view have size 0×0

 Signature 

“Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program.”
- Linus Torvalds

January 24, 2012

vineetQt vineetQt
Lab Rat
6 posts

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.

January 24, 2012

task_struct task_struct
Ant Farmer
350 posts

Try with:

  1. Loader {
  2.         id: pageLoader
  3.  
  4.         anchors.fill: page1
  5.  
  6.         onLoaded: console.log('loaded')
  7.  }

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

 Signature 

“Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program.”
- Linus Torvalds

January 24, 2012

vineetQt vineetQt
Lab Rat
6 posts

task_struct wrote:
Try with:
  1. Loader {
  2.         id: pageLoader
  3.  
  4.         anchors.fill: page1
  5.  
  6.         onLoaded: console.log('loaded')
  7.  }

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

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)

January 24, 2012

task_struct task_struct
Ant Farmer
350 posts

I think I understand what the problem is. Page width and height are set to

  1. width: visible && parent ? parent.width : internal.previousWidth
  2. 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 0×0

See Page source code [qt.gitorious.org]

 Signature 

“Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program.”
- Linus Torvalds

January 24, 2012

vineetQt vineetQt
Lab Rat
6 posts

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

  1. Page {
  2.     id:page2
  3.     visible:true;
  4. ...
  5. ...

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?

January 26, 2012

task_struct task_struct
Ant Farmer
350 posts

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.

 Signature 

“Most good programmers do programming not because they expect to get paid or get adulation by the public, but because it is fun to program.”
- Linus Torvalds

January 26, 2012

GentooXativa GentooXativa
Lab Rat
122 posts

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

 Signature 

Jose Vicente Giner Sanchez - Senior Mobile Developer

www.gigigo.com

C/ Dr. Zamenhof 36bis, 1ÂșA 28027 Madrid
T: +34 917431436

 
  ‹‹ Detect Rich Text in QML      error: invalid use of incomplete type ’struct QDeclaritiveContext’ ››

You must log in to post a reply. Not a member yet? Register here!