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
Posts: 9
Registered: ‎04-16-2013
My Device: BB 10 Developer
My Carrier: --
Accepted Solution

Separating main.qml into different .qml files, no longer pushes page

[ Edited ]

Hello all,

 

My main.qml was getting very long (NavigationPane with a Page with a Container with a Label and ListView and quite a few attached objects), and I started breaking it up.  Prior to doing so, when I selected a row in the list, it successfully pushed the detail page.  However, when I copy and pasted everything within Page to another qml file which I put as an object in main.qml, it no longer pushes the detail page.  I cannot for the life of me figure it out. I have looked at/experimented with numerous sample apps where it has worked (bucketlist especially), but cannot see a difference between my files and those.

 

Here is the files, broken up. When the content in PillListPage.qml is copied into main.qml, everything works fine.

 

//main.qml
// Grid view with detail project template import bb.cascades 1.0 //import bb.platform 1.0 import bb.system 1.0 import "stringConcatenation.js" as StringConcatenation NavigationPane { id: navigationPane //contains time label and grid list view firstPage: PillListPage { } onCreationCompleted: { // this slot is called when declarative scene is created // write post creation initialization here console.log("NavigationPane - onCreationCompleted()") // enable layout to adapt to the device rotation // don't forget to enable screen rotation in bar-bescriptor.xml (Application->Orientation->Auto-orient) OrientationSupport.supportedDisplayOrientation = SupportedDisplayOrientation.All; } onPopTransitionEnded: { // Transition is done destroy the Page to free up memory page.destroy() } }

 

//PillListPage.qml
import bb.cascades 1.0 Page { id: pgMain content: Container { id: rootContainer
verticalAlignment: VerticalAlignment.Center horizontalAlignment: HorizontalAlignment.Center Label { id: timeLabel text: { var currentTime = Qt.formatDateTime(new Date(), "h:mm AP"); return currentTime; } } //Label //PillListView ListView { id: listView // set object name to let listView be discoverable from C++ objectName: "listView" layout: GridListLayout { verticalCellSpacing: 100 cellAspectRatio: 4.0 columnCount: 1 horizontalCellSpacing: 10.0 } listItemComponents: [ // define component which will represent list item GUI appearence ListItemComponent { type: "item" // list item GUI appearence component is defined in external MyListItem.qml file MyListItem { } } ] onTriggered: { // When an item is selected we push the detail Page in the chosenItem file attribute. var chosenItem = dataModel.data(indexPath); // Create the content page and push it on top to drill down to it. var contentpage = pillDetailPageDefinition.createObject(); // Set the content properties to reflect the selected image. contentpage.contentImageURL = chosenItem.thumbnail contentpage.contentName = chosenItem.name + ", " + chosenItem.mass // Push the content page to the navigation stack navigationPane.push(contentpage); } layoutProperties: StackLayoutProperties { spaceQuota: 1.0 } focusPolicy: FocusPolicy.Default } //end of pill list } //end root Container // Attached objects of the Main Content Page attachedObjects: [ ComponentDefinition { id: pillDetailPageDefinition source: "PillDetailPage.qml" } //ComponentDefinition ] }

 Some extraneous code (UI formatting stuff) was removed. I did essentially the same thing with the basic Grid List project template successfully.  Please help!  My only guess is that perhaps it doesn't know what the data model is once it's taken out of main.qml. Is there something in c++ I need to do or something I should be including in the QML?

Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: Separating main.qml into different .qml files, no longer pushes page

Hi,

Is there any runtime errors in logs? Maybe it's unable to find navigationPane. Could you try replacing this line:
navigationPane.push(contentpage);
with
pgMain.parent.push(contentpage);

If this won't help, try adding some logging:
console.log('dataModel=' + dataModel);
console.log('navigationPanel=' + navigationPane);

If dataModel is exported as a context property from C++, it should be visible in both qml-s. Make sure that it's exported before creating the root object, otherwise side effects may occur.

Andrey Fidrya, @zmeyc on twitter
New Contributor
Posts: 9
Registered: ‎04-16-2013
My Device: BB 10 Developer
My Carrier: --

Re: Separating main.qml into different .qml files, no longer pushes page

[ Edited ]

There were no runtime errors and the app loaded up successfully, with the only issue being that when I clicked on a list component, there was no response/transition to the detail page.

 

However, I did find a solution of my own.  I pushed my detail view using a function that is called in the onTriggered signal in the list view. This code is a basic example of what I mean that I made simply by separating the code from the "grid view with detail" project template:

 

//main.qml
// Grid view with detail project template
import bb.cascades 1.0

NavigationPane {
    id: navigationPane
    
    firstPage: MainPageContent {}
    
    attachedObjects: [
        ComponentDefinition {
            id: secondPageDefinition
            source: "DetailPage.qml"
        }
    ]
    
    function setDetailItem(item) {
        // show detail page
        var page = secondPageDefinition.createObject();
        page.text = item.text
        page.image = item.image
        navigationPane.push(page)
    }
    onCreationCompleted: {
        // this slot is called when declarative scene is created
        // write post creation initialization here
        console.log("NavigationPane - onCreationCompleted()")

        // enable layout to adapt to the device rotation
        // don't forget to enable screen rotation in bar-bescriptor.xml (Application->Orientation->Auto-orient)
        OrientationSupport.supportedDisplayOrientation = SupportedDisplayOrientation.All;
    }
}
//MainPageContent.qml
import bb.cascades 1.0

Page {
    id: pgMain
    content: Container {
        ListView {
            id: listView
            // set object name to let listView to be discoverable from C++
            objectName: "listView"
            layout: GridListLayout {
            }
            listItemComponents: [
                // define component which will represent list item GUI appearence
                ListItemComponent {
                    type: "item"
                    // list item GUI appearence component is defined in external MyListItem.qml file
                    MyListItem {
                    }
                }
            ]
            onTriggered: {
                console.log("selected_index: " + indexPath)
                var curr_item = dataModel.data(indexPath)
                // show detail page for selected item
                setDetailItem(curr_item)
            }
            horizontalAlignment: HorizontalAlignment.Fill
            layoutProperties: StackLayoutProperties {
                spaceQuota: 1.0
            }
        }
    }
}

 

 Since I didn't see your response until after I had changed my code, I can't test it out, but it may work.  Thanks for the help!