Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
BlackBerry Employee
jywoo47
Posts: 4
Registered: ‎09-14-2013
My Device: Q5

push an new page on top of current page

Hello, this is my first post here,  and I am also new to BB10.

 

I am currently running through the sample apps, and i am trying to do following test: 

 

1.  create a navigation pane qml contains the main screen

2.  on the main screen,  i will call navigationPane.push() to invoke a new page 1 (defined in another page1.qml)

3.  on the new page 2, i will need to invoke another page...

 

so far, step1 and 2 are done,  and the problem is i am not sure how to invoke page 2 within page 1. 

 

in page 1 qml,  i have following piece of code trying to invoke page 2, but problem is the navigationPane variable is define in the main pane..   please comment and suggest, thanks!!

 

************************page1.qml************

 ActionItem {

            title: qsTr("New")

            imageSource: "asset:///images/action_addnote.png"

            ActionBar.placement: ActionBarPlacement.OnBar

            onTriggered: {

                navigationPane.push(page2.createObject())  //???????????

            }

        },

 

attachedObjects: ComponentDefinition {

        id: page2

        source: "page2.qml"

    }

 

************************

 

Please use plain text.
Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10

Re: push an new page on top of current page

Your NavigationPane should have an "id:" defined, and that should be visible in the page1 QML. Replace your "navigationPane.push" with "id-of-navigation-pane.push" and it should work. For example, if you put "id: root" on your root navigation pane (which is a common convention), then just "root.push()" with the appropriate arguments should work.

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Please use plain text.
Developer
slashkyle
Posts: 820
Registered: ‎10-16-2012
My Device: Red Z10

Re: push an new page on top of current page

[ Edited ]

Just to get a better perspective, I was kind of curios on how to do this to for when I will need to do it someday down the road.  What it sounds like you mean is that all pages can see the id of NavigationPane.

 

page 1

NavigationPane {
     id: myNavPane
     Page {
       id: firstPage
       
       Button {
          id: pushButton
          onClicked: {
             var mySecondPage = secondPageDef.createObject()
             myNavPane.push(mySecondPage)
          }
       }

       attachedObjects: [
          ComponentDefinition: {
               id: secondPageDef
               source: "SecondPage.qml"

          }
       }
     ]

}

 

 

page 2

Page {
    id: secondPage
       
     Button {
        id: pushButton
        onClicked: {
           var myThirdPage = thirdPageDef.createObject()
           myNavPane.push(myThirdPage)
        }
     }

     attachedObjects: [
        ComponentDefinition: {
             id: thirdPageDef
             source: "ThirdPage.qml"

        }
     ]
}

 

Is this correct or should thirdPageDef be called/created from firstPage?

 

 

Please use plain text.
BlackBerry Employee
jywoo47
Posts: 4
Registered: ‎09-14-2013
My Device: Q5

Re: push an new page on top of current page

Thanks for you reply, 

 

Actually my code is same as yours.  but the navigation pane id can not be recognized in the 2nd page qml. 

Please use plain text.
BlackBerry Employee
jywoo47
Posts: 4
Registered: ‎09-14-2013
My Device: Q5

Re: push an new page on top of current page

look like the pane id is only visible in the same qml? 

 

my code is same as slashkyle's..   i still get the error 'unknown symbol xxxx'

Please use plain text.
BlackBerry Employee
jywoo47
Posts: 4
Registered: ‎09-14-2013
My Device: Q5

Re: push an new page on top of current page

thanks all. 

 

it works for me now.. even the IDE complaints the navigation pane id is unknown.. 

Please use plain text.
BlackBerry Development Advisor
Kareem_ELSayed
Posts: 81
Registered: ‎09-09-2013
My Device: BlackBerry Z10

Re: push an new page on top of current page

Hi, Take a look on the Weather Guesser Sample.
(ContinentsPage.qml & ContinentCitiesPage.qml)

https://developer.blackberry.com/native/sampleapps/

you can pass the navpane object from one page to another and call push function to push to another pages.

Thanks,
Kareem.
Kareem ELSayed | Application Development Consultant | Developer Relations | BlackBerry | Twitter:@kemobyte
Please use plain text.
Developer
slashkyle
Posts: 820
Registered: ‎10-16-2012
My Device: Red Z10

Re: push an new page on top of current page

Thanks, I think i've figured it out and it looks like this will do the trick.

Had never thought of sending NavigationPane as a property like the sample shows (is it possible to do that with other elements?)

 

NavPane/page1

NavigationPane {
     id: myNavPane
     Page {
       id: firstPage
       
       Button {
          id: pushButton
          onClicked: {
             var mySecondPage = secondPageDef.createObject()
secondPage.nav = secondNav secondNav.push(mySecondPage) } } attachedObjects: [ ComponentDefinition: { id: secondPageDef source: "SecondPage.qml" } } ] }

 

page2

 

Page {
    id: secondPage
    property NavigationPane nav      
Button { id: pushButton onClicked: { var myThirdPage = thirdPageDef.createObject()
thirdPage.nav = thirdNav thirdNav.push(myThirdPage) } } attachedObjects: [ ComponentDefinition: { id: thirdPageDef source: "ThirdPage.qml" } ] }

Page 3

Page {
    id: thirdPage
    property NavigationPane nav      
 
     Label {
        id: myLabel
        text: "We made it to page 3"
     }
}

 

 

Please use plain text.
Developer
Zmey
Posts: 1,512
Registered: ‎12-18-2012
My Device: PlayBook, Z10, DAC

Re: push an new page on top of current page

It's not neccessary to pass NavigationPane as property. If the page is pushed into navigation pane, the navigation pane becomes it's parent.

For example, NavigationPane of second page is secondPage.parent. This should work:

secondPage.parent.push(myThirdPage)

Andrey Fidrya, @zmeyc on twitter
Please use plain text.
Developer
LoganSix
Posts: 265
Registered: ‎01-02-2011
My Device: Z30, PlayBook

Re: push an new page on top of current page

A simplified code and a way to not get the error when Page 2 and Page 3, etc... are looking for the main Navigation Page.

 

main.qml

NavigationPane {
     id: myNavPane
     Page {
       id: firstPage
       
       Button {
          id: pushButton
          onClicked: {
             myNavPane.push(secondPageDef.createObject())
          }
       }

       attachedObjects: [
          ComponentDefinition: {
               id: secondPageDef
               SecondPage{
			   }
          }
		  ]
    }
	onPopTransitionEnded: {
        // Destroy the popped Page once the back transition has ended.
        page.destroy();
    }
}

 SecondPage.qml

Page {
    id: secondPage
    property NavigationPane nav      
 
     Button {
        id: pushButton
        onClicked: {
           myNavPane.push(thirdPageDef.createObject())
        }
     }

     attachedObjects: [
        ComponentDefinition: {
             id: thirdPageDef
             ThirdPage{
			 }
        }
     ]
}

 ThirdPage.qml 

Page {
    id: thirdPage
    property NavigationPane nav      
 
     Label {
        id: myLabel
        text: "We made it to page 3"
     }
	 
	 actions: ActionItem {
		title: "Save and go back to first"
		imageSource: "asset:///icons/ic_save.png"
		onTriggered {
			// save data code
			....
			// pop all pages added
			var poppgs = myNavPane.count() - 1;
			for(pgs = 0; pgs < poppgs; pgs++) {
				myNavPane.pop();
			}
		}
	 }
}

 

_________________
Meetup for BlackBerry 10
Meetup Search Tool - not available at the moment
Please use plain text.