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
Posts: 570
Registered: ‎10-17-2010
My Device: (BlackBerry Z10)-> Q10/Passport Dual Use

Targeting top level Tabbed Pane ID from Nested Custom List Item Element to Push Page into View

Hi.

I am having  issues getting a custom qml component (List) to identify root (TabbedPane) and push and new Page(screen) into view.

Application Backgound Info


General Structure of my BB10 App:

Main.qml - > custom list - > list items from custom data model -> press list item from custom list & push page -> press back to return to main.qml(which has custom list component)

List item data is being pulled in via mydata.xml. I also specify page urls in mydata.xml.

 

main.qml

import bb.cascades 1.0

TabbedPane { showTabsOnActionBar: true id: topLevelTabbedPane Tab { title: qsTr("Tab 1") imageSource: "asset:///images/actionBar/icon1.png" Page { id: tab1 Container { id: mainContainer opacity: 1.0 translationY: 113 layout: DockLayout { } // awesomeCustomList holds custom list components awesomeCustomList { } } } ... }

 

awesomeCustomList.qml

This is custom list container. Inside I link another custom qml page for customizing each individual list item(customListItems.qml) .

 

import bb.cascades 1.0

Container {
    ListView {
        id: awesomeListContent
        dataModel: XmlDataModel {
            source: "mydata.xml"
        }
        //tell cascades how to show each list item
        listItemComponents: [
            ListItemComponent {
                type: "item"
                //how each item should look
                //specified by customListItems.qml
                customListItems {
                }
            }
        ]
    }
}

 

customListItems.qml

This is where I perform my magic. Basically I am styling list items and controls in a custom way. My issue is, in the onTouch handler, I am unable to target ID from main.qml (topLevelTabbedPane) and push page into view. I suspect that the ID isn't accessible somehow. Not sure there is an example of this type of nesting and access in the docs.

import bb.cascades 1.0

Container {
    id: thisLabel
    layout: DockLayout {
    }
    Container {
        layoutProperties: DockLayoutProperties {
            horizontalAlignment: HorizontalAlignment.right
        }
        Label {
            id: thisItem
            text: ListItemData.title
            
            // HERE I NEED TO PUSH A PAGE INTO VIEW
            onTouch: {
                // topLevelTabbedPane is ID of TabbedPane in main.qml ListItemData.pagelocation is 
// qml url specified in mydata.xml topLevelTabbedPane.deprecatedPushQmlByString(ListItemData.pagelocation) } } } }

 
Data Model

mydata.xml

<root>
<item title="Horse Page" pagecontent="horse.qml" />
<item title="Dog Page" pagecontent="dog.qml" />
<item title="Pig Page" pagecontent="pig.qml" />
</root>

 
Relevant Resources I've Referenced

Property Alias - http://devblog.blackberry.com/2012/07/qml-tip-property-aliases/#more-10246

The property alias reference demos how to exposed nested element's property to its parent/root. I need to expose top level property(root) to nested component within a component.

TabbedPane
https://developer.blackberry.com/cascades/reference/bb__cascades__tabbedpane.html

Error I am Getting

ReferenceError: Can't find variable: topLevelTabbedPane

 
How can I make this work?

:Helpsmilie:

Developer
Posts: 570
Registered: ‎10-17-2010
My Device: (BlackBerry Z10)-> Q10/Passport Dual Use

Re: Targeting top level Tabbed Pane ID from Nested Custom List Item Element to Push Page into View

EDIT

 

                topLevelTabbedPane.deprecatedPushQmlByString(ListItemData.pagelocation)
is actually
  topLevelTabbedPane.deprecatedPushQmlByString(ListItemData.pagecontent)
per mydata.xml structure. typo correction
BlackBerry Development Advisor (Retired)
Posts: 499
Registered: ‎05-07-2012
My Device: developer

Re: Targeting top level Tabbed Pane ID from Nested Custom List Item Element to Push Page into View

Is this still an open question, or was your 2nd post the solution?

 

Stuart

Developer
Posts: 570
Registered: ‎10-17-2010
My Device: (BlackBerry Z10)-> Q10/Passport Dual Use

Re: Targeting top level Tabbed Pane ID from Nested Custom List Item Element to Push Page into View

This is still an open question. Second post was typo correction.

BlackBerry Development Advisor (Retired)
Posts: 329
Registered: ‎05-07-2012
My Device: BB Alpha

Re: Targeting top level Tabbed Pane ID from Nested Custom List Item Element to Push Page into View

[ Edited ]

Have you tried using a declarative context on your TabbedPane?

 

NavigationPane example:

 

In your C++ file:

 

//header
    NavigationPane* m_Nav;

    /*
     * QML document reference for bottom pane. the BottomPane.qml reference is loaded into this variable.
     */
    QmlDocument* m_BottomPaneContentQML;

    /*
     * The Cascades construct contains the one element used for the NavigationPane above.
     * Specifically, it is used for the side pane of the application.
     */
    Page* m_SidePane;

    /*
     * QML document reference for side pane. the SidePane.qml reference is loaded into this variable.
     * From this object, we are able to extract the QDeclarativeContext to access constructs defined
     * in the file (see below)
     */
    QmlDocument* m_SidePaneContentQML;

    /*
     * QML Declarative context used to allow binding between QML document and code.
     * In our application, this is required in order to allow toggling the QML navigation pane
     * via use of a button from within the code.
     */
    QDeclarativeContext* m_SidePaneQmlContext;

//CPP

m_Nav = qml->createRootNode<NavigationPane>();
         
m_SidePane = m_SidePaneContentQML->createRootNode<Page>();
// Obtain document contexts, they are used to bind a properties for the ContentPanes.
// and make the navigation pane and application available for QML.
//NOTE: The name "_navPane" is used in the QML file. This is where the link is made.
m_SidePaneQmlContext = m_SidePaneContentQML->documentContext();
m_SidePaneQmlContext->setContextProperty("_navPane", m_Nav);

 

Now in your QML file (in different QML file from where the NavigationPane is declared), you can do something like this, or use deprecatedPush or whatnot:

 

    paneProperties: NavigationPaneProperties {
        backButton: ActionItem {
            title: "Back"
            onTriggered: { 
                // _navPane is set in code.
                _navPane.pop ();
            }
        }
    }

 Let me know if this helps,

 

Martin