Cascades Development

[JohnDaly]

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
            }
        }
    }
}

[simon_hain]

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

[JohnDaly]

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.

[JohnDaly]

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?

[lew]

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

[JohnDaly]

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

[lew]

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

[JohnDaly]

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