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
Paratheo
Posts: 134
Registered: ‎04-25-2009
My Device: Z30
My Carrier: AT&T
Accepted Solution

Passing data from list item to navigation page

Hey all, been having a problem trying to pass along data from a selected list item to a page which I am pushing via a NavigationPane.

 

My list contains a bunch of items, each with a property containing a url. When an item is clicked, I need a new view to be pushed with a WebView component which will inherit that url and display the webpage.

Here is the qml file for my list:

 

import bb.cascades 1.0

TabbedPane {
    showTabsOnActionBar: true
    Tab {
        title: qsTr("List")
        NavigationPane {
            id: navigationPane
            Page {
                property string selectedItemUrl
                id: tab1
                Container {
                    layout: DockLayout {
                    }
                    //topPadding: 70
                    ListView {
                        objectName: "list"
                        listItemComponents: [
                            ListItemComponent {
                                type: "item"
                                FeedListItem {
                                }
                            }
                        ]
                        onTriggered: {
                            var selectedItem = dataModel.data(indexPath); //get data of selected item
                            var page = webView.createObject();
                            page.webUrl = selectedItem.permalink;
                            navigationPane.push(page);
                            
                        }
                        attachedObjects: ComponentDefinition {
                            id: webView
                            source: "PostWebView.qml"
                        }
                    }
                    ActivityIndicator {
                        objectName: "indicator"
                        verticalAlignment: VerticalAlignment.Center
                        horizontalAlignment: HorizontalAlignment.Center
                        preferredWidth: 200
                        preferredHeight: 200
                    }
                }
            }
        }
    }

 

And here is my qml file for the page with the WebView:

 

import bb.cascades 1.0

Page {
    property string webUrl
        ScrollView {
             scrollViewProperties.pinchToZoomEnabled: true
             scrollViewProperties.scrollMode: ScrollMode.Both
             Container {
                 layout: StackLayout {
             }
            WebView {
                id: webView
                url: webUrl
            }
        }
    }
}

 

As you can see I retrieve the data from the selected list item, create the new view, assign a string property in the WebView page to the url property of the item data, and push the new view.

 

What exactly am I doing wrong? Any help would be appreciated, thanks!

Please use plain text.
Developer
strobejb
Posts: 276
Registered: ‎10-15-2012
My Device: bb10 developer
My Carrier: Orange

Re: Passing data from list item to navigation page

What's going wrong? I use the same technique in my own projects...

put some console.logs in there, or debug the qml and you should see where it is breaking
Please use plain text.
Developer
Paratheo
Posts: 134
Registered: ‎04-25-2009
My Device: Z30
My Carrier: AT&T

Re: Passing data from list item to navigation page

The new view doesnt even get pushed.

When i just assign the url property of the WebView to a string like www.google.com it works just fine.

Please use plain text.
Developer
Paratheo
Posts: 134
Registered: ‎04-25-2009
My Device: Z30
My Carrier: AT&T

Re: Passing data from list item to navigation page

Thanks for the tip about just debugging through it.

I found and fixed a small error in my code which made it work, however I also noticed something.

 

I noticed that the WebView component was being initialized before I had the chance to assign a value to the string property of the WebView qml file. After this line executed,

"var page = webView.createObject();"

it seemed as if the WebView had already been created, and I hadnt had a chance to give it my url.

 

But then this line executes

"page.webUrl = selectedItem.data.permalink;"

and it seemed to reinitialize the WebView component so that it could take my value.

 

Hard to explain, but working anyhow.

 

Thanks!

Please use plain text.
Developer
strobejb
Posts: 276
Registered: ‎10-15-2012
My Device: bb10 developer
My Carrier: Orange

Re: Passing data from list item to navigation page

Yes thats the correct behaviour - the webView will be fully initialized by when createObject returns.

According to the QT documentation there is supposed to be an optional second parameter to createObject, which lets you pass in properties:

i.e. in Qt you should be able to do this:

 

var page = webView.createObject(null, { "webUrl" : selectedItem.data.permalink } );

 

However I never got this technique to work in Cascades (that was a couple releases ago though..)

 

You could give it a go, but I think you just need to accept that you must manually assign the property after createObject returns.

Please use plain text.