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
Developer
MFSI
Posts: 80
Registered: ‎09-03-2012
My Device: 9810
My Carrier: Vodafone
Accepted Solution

Page is not pushed in Navigation Pane.

[ Edited ]

In my project's main qml root element is NavigationPane and have three child Page elements

 

main.qml

 

import bb.cascades 1.0

NavigationPane {
    id: navigationPane
    backButtonsVisible: true
    Page {
        id: firstPage
        Container {
            background: Color.Gray
            Label {
                text: "First page"
            }
        }
    }
    Page {
        id: secondPage
        Container {
            id: secondContainer
            background: Color.Gray
            Label {
                text: "Second page"
            }
            Button {
id: myBtn text: "My Button" topMargin: 20 onClicked: {

// Here i want to push third page
//navigationPane.deprecatedPushQmlByString(childPath) } } } paneProperties: NavigationPaneProperties { backButton: ActionItem { title: "First page" imageSource: "asset:///back.png" onTriggered: { navigationPane.popAndDelete(); } } } }

// This is the Third Page
Page { id: thirdPage objectName: "myThirdPage" Container { id: thirdContainer background: Color.DarkGray Label { text: "Third Page" } } paneProperties: NavigationPaneProperties { backButton: ActionItem { title: "Second page" imageSource: "asset:///back.png" onTriggered: { navigationPane.popAndDelete(); } } } } onTopChanged: { console.log("Top Is Changing"); } }

 

  On second page there is a button (id :myBtn) . On clicking it , i want to push the third page(Page with id:thirdPage).

 


How to use the method deprecatedPushQmlByString(childPath)  to push a page element (if its possible as it's conventional use is to inflate a Qml file)

Or the path of page can also be provided as parameter, if it then how ?

 

I tried passing the value of id and objectName of thirdPage into the above method but didn't succeed (I know that is wrong).

 

 

 

 

 

 

Always Success
Please use plain text.
Developer
rock_win
Posts: 136
Registered: ‎02-01-2009
My Device: Not Specified

Re: Page is not pushed in Navigation Pane.

[ Edited ]

Best approach is to have the subsequent pages in the attachedObjects[] section and the use

navigationPaneId.push(id of the push page);

and that will work

Please use plain text.
Developer
MFSI
Posts: 80
Registered: ‎09-03-2012
My Device: 9810
My Carrier: Vodafone

Re: Page is not pushed in Navigation Pane.

[ Edited ]

Thanks for the alternative mode.


But there is a limitation :

 

Re - push  of page is not  possible : I mean after getting back to the previous page using back button ActionItem on Navigation pane.

 

backButton action item whose onTrigger property is invoking pop().  After reaching the previous page when i click the button in the Page on whose click push() was called doesn't work out.

 

 

updated qml

 

import bb.cascades 1.0

NavigationPane {
    id: navigationPane
    backButtonsVisible: true
    attachedObjects: [
        Page {
            id: thirdPage
            objectName: "myThirdPage"
            Container {
                id: thirdContainer
                background: Color.DarkGray
                Button {
                    id: btn_tPage
                    text: "3th Page Button"
                    topMargin: 20
                }
            }
            paneProperties: NavigationPaneProperties {
                backButton: ActionItem {
                    title: "Second page"
                    imageSource: "asset:///images/back.png"
                    onTriggered: {
                        navigationPane.pop();
                    }
                }
            }
        }
    ]
    Page {
        id: firstPage
        Container {
            background: Color.Gray
            Label {
                text: "First page"
            }
        }
    }
    Page {
        id: secondPage
        Container {
            id: secondContainer
            background: Color.Gray
            Label {
                text: "Second page"
            }
            Button {
                text: "My Button"
                topMargin: 20
                onClicked: {
navigationPane.push(thirdPage)

// This statement only works once. After returning from
// third Page it doesn't work again
} } } paneProperties: NavigationPaneProperties { backButton: ActionItem { title: "First page" imageSource: "asset:///images/back.png" onTriggered: { navigationPane.pop(); } } } } onTopChanged: { console.log("Top Is Changing"); } }

 

 

 

 

 

 

 

Always Success
Please use plain text.
Developer
raj_jyani
Posts: 107
Registered: ‎05-11-2011
My Device: BlackBerry Z10 LE
My Carrier: AirTel

Re: Page is not pushed in Navigation Pane.

Hi,

 

There are another simple way for doing same thing.

You can access firstPages's navigationPane object  in SecondPage for push third page using navigationPaneId.

 

check this link .

http://supportforums.blackberry.com/t5/Cascades-Development/Sharing-values-between-pages-in-Navigati...

Please use plain text.
Developer
MFSI
Posts: 80
Registered: ‎09-03-2012
My Device: 9810
My Carrier: Vodafone

Re: Page is not pushed in Navigation Pane.

Thanks Raj for your solution but i have already followed the approach you are asking for and that was for maintaining data sharing between a no. of qml files.

 

In my case there is a single qml file.

 

My problem was not sharing data between qml files. Instead with in a single qml file I got no. of pages and i wanted to push page on some buttons click using its id or objectname property if it any case was possible but that's not possible.

 

Always Success
Please use plain text.
Developer
raj_jyani
Posts: 107
Registered: ‎05-11-2011
My Device: BlackBerry Z10 LE
My Carrier: AirTel

Re: Page is not pushed in Navigation Pane.

[ Edited ]

Hi,

 

sorry it was misunderstanding. but i got solution without use attachedObject.

 

try this code

 

import bb.cascades 1.0

NavigationPane {
    id: navigationPane
    backButtonsVisible: true
    Page {
        id: firstPage
        Container {
            background: Color.Gray
            Label {
                text: "First page"
            }
        }
    }
    Page {
        id: secondPage
        Container {
            id: secondContainer
            background: Color.Gray
            Label {
                text: "Second page"
            }
            Button {
                id: myBtn
                text: "My Button"
                topMargin: 20
                onClicked: {       
                    // Here i want to push third page 
                    navigationPane.push(thirdPage)
                }
            }
        }
        paneProperties: NavigationPaneProperties {
            backButton: ActionItem {
                title: "First page"
                imageSource: "asset:///back.png"
                onTriggered: {
                    navigationPane.popAndDelete();
                }
            }
        }
    }

    // This is the Third Page 
    Page {
        id: thirdPage
        objectName: "myThirdPage"
        Container {
            id: thirdContainer
            background: Color.DarkGray
            Label {
                text: "Third Page"
            }
        }
        paneProperties: NavigationPaneProperties {
            backButton: ActionItem {
                title: "Second page"
                imageSource: "asset:///back.png"
                onTriggered: {
                    thirdPage = navigationPane.pop();
                }
            }
        }
    }
    onTopChanged: {
        console.log("Top Is Changing");
    }
}

 

Just you have to store reference of thirdPage when you pop page from stack.

Problem was here :  navigationPane.pop()

It should like - thirdPage = navigationPane.pop()

 

Please use plain text.
New Developer
kpuneet
Posts: 16
Registered: ‎04-11-2013
My Device: z10
My Carrier: Verizon

Re: Page is not pushed in Navigation Pane.

Hi

Can you please explain the C++ approach for the above example, AS i want to store the pop value in C++ variable .

 

For eg.

I am navigating from one page to another by below code

mNavPane->navigateTo(page4);

 

The naviagteTo function returns the QVariant List,  I don't know  how to cast it into the Page and save it in the page variable.

 

 

Please use plain text.
Developer
raj_jyani
Posts: 107
Registered: ‎05-11-2011
My Device: BlackBerry Z10 LE
My Carrier: AirTel

Re: Page is not pushed in Navigation Pane.

HI,

 

Check this sample demo code

 

ApplicationUI::ApplicationUI(bb::cascades::Application *app) :
		QObject(app) {
	QmlDocument *qml = QmlDocument::create("asset:///main.qml").parent(this);
	qml->setContextProperty("app", this);
	AbstractPane *root = qml->createRootObject<AbstractPane>();
	app->setScene(root);

	NavigationPane *navPane = (NavigationPane *) root;

		Page *page = new Page();
		Label *lbl = Label::create("Page 1");
		page->setContent(lbl);
		navPane->push(page);

		Page *page2 = new Page();
		Label *lbl2 = Label::create("Page 2");
		page2->setContent(lbl2);
		navPane->push(page2);

		page = new Page();
		lbl = Label::create("Page 3");
		page->setContent(lbl);
		navPane->push(page);

		page = new Page();
		lbl = Label::create("Page 4");
		page->setContent(lbl);
		navPane->push(page);
		page = new Page();

		lbl = Label::create("Page 5");
		page->setContent(lbl);
		navPane->push(page);


		QVariantList list = navPane->navigateTo(page2);
		Page *tempPage = list.value(1).value<Page *>(); // 1 is index

		navPane->push(tempPage);
}

 :Devil2:

Please use plain text.
New Developer
kpuneet
Posts: 16
Registered: ‎04-11-2013
My Device: z10
My Carrier: Verizon

Re: Page is not pushed in Navigation Pane.

Thanks Raj,

This  worked  for me , I just need to change the index value for the page i want to retrieve.

 

This helped me in solving multiple stack of screens problem in Navigation pane without popping the page, Initially I thought that it is the limitation BB10 is having.

 

 

Thanks

Puneet

Please use plain text.