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
New Contributor
JohnDaly
Posts: 8
Registered: ‎11-20-2012
My Device: BB10 dev alpha

NavigationPane + custom navigation

I want to push and pop things onto and off of my NavigationPane. My problem is I want to do so in another QML file (in the code below in Foo, Bar or Buz) and I don't know how to pass the navPane id into another QML file. Did anybody have and solve a similar problem?

 

import bb.cascades 1.0

NavigationPane {
    id: navPane
    
    function show(id) {
        var ids = [foo, , bar, baz];
        var newIds = [];
        
        for(var i in ids) {
            if (ids[i] != id) {
                ids[i].visible = false
            }
        }
        console.log(newsController.title());
        id.visible = true;
    }

    Page {
        id: mainPage

        Container {
            layout: StackLayout { }

            Navigation {
                onFooClicked: {
                    show(fooContent);
                }
                onBarClicked: {
                    show(barContent);
                }
                onBuzClicked: {
                    show(buzContent);
                }
            }

            Foo {
                id: fooContent
                visible: true
            }
            Bar {
                id: barContent
                visible: false
            }
            Buz {
                id: buzContent
                visible: false
            }
        }
    }
}
Please use plain text.
Developer
simon_hain
Posts: 16,216
Registered: ‎07-29-2008
My Device: Z10 LE, Z30, Passport

Re: NavigationPane + custom navigation

welcome to the support forums.

if you reference the elements directly, as in your code sample, you should be able to access the navigationPane by id, like navPane.push(page).
for other tasks you can create a property, see http://doc.qt.nokia.com/latest/qml-extending-types.html
----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Please use plain text.
New Contributor
JohnDaly
Posts: 8
Registered: ‎11-20-2012
My Device: BB10 dev alpha

Re: NavigationPane + custom navigation

Well thats the point, I can't navPane.push(page) from outside of this file. Foo, Bar and Buz are custom widgets and I wan't to push Pages from them.

Please use plain text.
New Contributor
JohnDaly
Posts: 8
Registered: ‎11-20-2012
My Device: BB10 dev alpha

Re: NavigationPane + custom navigation

Maybe this will make my problems clearer. I'm trying to push to navPane (in main.qml) from fooContent but in another file (in Foo.qml) and this doesn't work because the id aren't available outside of the file they are defined in. So my question is how can i get around this?

Please use plain text.
Developer
Developer
lew
Posts: 174
Registered: ‎03-05-2009
My Device: Dev Alpha

Re: NavigationPane + custom navigation

you can pass the navPane as a property to the fooPage:

 

Foo.qml:

Page{

 property variant navPane;

}

...

 

then  assuming foo.qml is created from your main.qml:

var fooPage = fooPageDefinition.createObject();

fooPage.navPane = nagivationPane;

navigationPane.push(fooPage);

 

Please use plain text.
New Contributor
JohnDaly
Posts: 8
Registered: ‎11-20-2012
My Device: BB10 dev alpha

Re: NavigationPane + custom navigation

Thanks for the tip, it sounds reasonable but unfortunately it doesn't work.

Please use plain text.
Developer
Developer
lew
Posts: 174
Registered: ‎03-05-2009
My Device: Dev Alpha

Re: NavigationPane + custom navigation

pretty sure it should work...could you post some code and the error you are seeing?

Please use plain text.
New Contributor
JohnDaly
Posts: 8
Registered: ‎11-20-2012
My Device: BB10 dev alpha

Re: NavigationPane + custom navigation

main.qml

import bb.cascades 1.0
import "common"

NavigationPane {
    id: navPane
    
    function show(id) {
        var ids = [fooContent, barContent, buzContent];
        
        for(var i in ids) {
            if (ids[i] != id) {
                ids[i].visible = false
            }
        }
        id.visible = true;
    }
    
    function toggleNavBar() {
        var open = {
            navBarHeight: 200,
            tabTop: 193
        };
        var closed = {
            navBarHeight: 0,
            tabTop: -7
        };
        
        if (mainNav.preferredHeight != 200) {
            mainNav.preferredHeight           = open.navBarHeight;
            mainNav.maxHeight                 = open.navBarHeight;
            navTab.layoutProperties.positionY = open.tabTop;
        } else {
            mainNav.preferredHeight           = closed.navBarHeight;
            mainNav.maxHeight                 = closed.navBarHeight;
            navTab.layoutProperties.positionY = closed.tabTop;
        }
    }

    Page {
        id: mainPage

        Container {
            layout: AbsoluteLayout {}
            
            Container {
	            layout: StackLayout {}
	
	            Navigation {
	                id: mainNav

	                onFooClicked: {
	                    show(fooContent);
	                }
	                onBarClicked: {
	                    show(barContent);
	                }
	                onBuzClicked: {
	                    show(buzContent);
	                }
	            }
	
	            Foo {
	                id: fooContent
	                visible: true
	                appRoot: navPane
	            }
	            Bar {
	                id: barContent
	                visible: false
	                appRoot: navPane
	            }
	            Buz {
	                id: buzContent
	                visible: false
	                appRoot: navPane
	            }
	        }
	        
            ImageButton {
                id: navTab
                
	            defaultImageSource: "asset:///images/tab.png"
	            pressedImageSource: "asset:///images/tab.png"

	            layoutProperties: AbsoluteLayoutProperties {
		            positionX: 9
	            	positionY: 192
	            }
	            
	            onClicked: {
	                toggleNavBar();
	            }
	        }
        }
    }
}

Foo.qml

import bb.cascades 1.0
import "foo"

Container {
    layout: StackLayout {}

    property variant appRoot

	function setDetailedNumber(obj) {
	    detailedNumber.imageSource = obj.image;
	    detailedNumber.numeric     = obj.numeric;
	    detailedNumber.roman       = obj.roman;
	    detailedNumber.english     = obj.english;
	    detailedNumber.text        = obj.text;
	}

    ListView {
        dataModel: numberDataModel
        
        listItemComponents: [
            ListItemComponent {
                type: "number"
                
                NumberListItem {
                    imageSource: ListItemData.image
                    numeric: '88'
                    roman: ListItemData.roman
                    english: "lalalal"
                }
            }
        ]
        
        onTriggered: {
            setDetailedNumber(dataModel.data(indexPath));
            appRoot.push(detailedNumber);
        }
    }
    
    attachedObjects: [
        DetailedNumber {
            id: detailedNumber
        },
        XmlDataModel {
            id: numberDataModel
            source: "models/numbers.xml"
        }
    ]
}

Thats the way I do it right now. I set the appRoot to navPane for each custom widget in main.qml and use appRoot to push in Foo.qml. I've also committed my little test app to github

Please use plain text.