Cascades Development

[sketch34]

I have code similar to this in a few places:

onTriggered: {
    var chosenItem = dataModel.data(indexPath);
    var detailPage = detailsPageDefinition.createObject();
    detailPage.initDetailsPage(chosenItem);
    // Push the content page to the navigation stack
    main_list_nav.push(detailPage);
}

detailPage also needs to push onto the NavigationPane, but the problem is I have a couple of different NavigationPanes and the detailPage doesn't know which one to push on to.

I want to be able to pass the navigation pane as a parameter to initDetailsPage() i.e.

detailPage.initDetailsPage(chosenItem, main_list_nav);

But how do I declare this as a property? i.e. in DetailsPage.qml

Page {
     property <which type???> navigationPaneToUse

     function initDetailsPage(item, navPane)
     {
          navigationPaneToUse = navPane
          ...
     }
}

Alternatively, is there some QML property on a Page that tells it what NavigationPane it has been pushed on to?

[tw_]

I'm just using this:

Page {
     property NavigationPane navigationPaneToUse : null

     function initDetailsPage(item, navPane)
     {
          navigationPaneToUse = navPane
          ...
     }
}

This works for me also with other Cascades classes like for example Container.

[javayoung]

You can directly use the parent navigation pane object in the detail page and no need to transfer the object to the next pushed page. Because the navigation pane object is a global object.

See.

navroot.qml:

NavigationPane {

    id: navroot

    ...

    var  detailpage = detailPage.createObject();

    navroot.push(detailpage);

    ...

}

DetailPage.qml

Page {

    ...

    var  detailpage2 = detailPage2.createObject();

    navroot.push(detailpage2);   //navroot is a global object reference

    ...

}

DetailPage2.qml

Page {

    ...

    var  detailpage3 = detailPage3.createObject();

    navroot.push(detailpage3);   //navroot is a global object reference

    ...

}

and so on...

[tw_]

Yes of course but this is not what he asked. He has multiple different NavigationPanes and he wants to use a single DetailPage.qml with different instances of these different NavigationsPanes. So he cannot use a fixed global reference to a single NavigationPane in the DetailsPage. He has to pass a reference to the instance of the DetailsPage so that it knows to which NavPane it got pushed.

[javayoung]

OK. i got it. Excuse me for a glance of the question. I found here are a lot of warm-hearts like you in this forum. :0)

[Zmey]

BaseObject has parent property. Other objects including Pages inherit from BaseObject so you might be able to use this property to get the Page's NavigationPane:

https://developer.blackberry.com/cascades/reference/bb__cascades__baseobject.html#property-parent

I haven't tried this myself. Please tell us if this method works.

[javayoung]

Hi, tw_.

Continue with this topic, since the navi object is global reference, can we just transfer an int type of index in stead of navi object while we can use the relative navi object depending on the index in the detail page? Thanks

[javayoung]

Hi Zmey, I tested by your solution. It works. xxx.parent.push(xxxxxx)  xxx is the id of the current page.

[sketch34 · Accepted solution]

Thanks for all the help guys. Following Zmey's suggestion of utilising the .parent property and generalising javayoung's idea above, I came up with this method which I define on my root UI object so its available everywhere.

It just traverses up the tree from child until it finds an ancestor with an objectName that contains "NavigationPane", then pushes onto that. This way you don't need to store anything.

    function pushToParentNavigation(child, objToPush)
    {
        var cur = child;
        while(cur != null && cur.objectName.indexOf("NavigationPane") == -1)
        {
            cur = cur.parent;
        }
        if(cur.objectName.indexOf("NavigationPane") != -1)
        {
            cur.push(objToPush);
        }
        else
        {
            console.log("No NavigationPane in heirarchy!");
        }
    }

So now I can just do this anywhere:

// Push the content page to the navigation stack this page belongs to.
pushToParentNavigation(this_page_id, myUIObject);

It means you have to add objectName: "<something>NavigationPane" to all your NavigationPane's which isn't ideal. If someone can suggest a better way to do this, that would be great. I looked at JavaScript's typeof operator but it isn't powerful enough.