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: 4
Registered: ‎01-10-2013
My Device: BlackBerry Z10 Developer Edition
My Carrier: Elisa, Finland

Cascades: Cannot dynamically add images to ListView is GridListLayout is used. StackListLayout works fine

I've got a very funny situation. I am loading xml data via DataSource (in the future it will load from network, for now from local XML) and push it to GroupDataModel. Data is just paths to the images that I want to layout in a grid.

 

Amazingly GridListView is not able to layout exactly if both GridListLayout and DataSource are used. If one of them is replaced (i.e. grid layout with StacListLayout or DataSource+GroupDataModel with XmlDataModel), everything is fine.

 

I must be missing something very basic. Shall I somehow explicitely command list view to relayout everything once the data is parsed?

 

Please, help.

 

I have created the minimal full app and put it here - https://www.dropbox.com/s/p6tr3ev641qsimq/MinimalGridListBB10.zip

 

And here's actually all the code:

 

===== main.qml =====

import bb.cascades 1.0
import bb.data 1.0

Page {
    ListView {
        id: imageList
        
        // Comment this layout block out thus switching to default StackListLayout and everything is loaded fine
        layout: GridListLayout {
            columnCount: 2
        }

        // Or switch from data source-fed GroupDataModel to XmlDataModel and everything is loaded fine 
//        dataModel: XmlDataModel {
//            source: "imagesModel.xml"
//        }
        dataModel: GroupDataModel {
            id: imagesModel
        }

        listItemComponents: [
            ListItemComponent {
                type: "item"

                ImageView {
                    imageSource: ListItemData.imagePath
                    scalingMethod: ScalingMethod.AspectFill
                }
            }
        ]

    }
    
    attachedObjects: [
        DataSource {
            id: dataSource
            source: "imagesModel.xml"
            query: "/model/item"
            onDataLoaded: {
                console.log("M: data source data loaded");
                imagesModel.insertList(data)
            }
        }
    ]
    
    onCreationCompleted: {
        console.log("M: Page creation completed");
        dataSource.load();
    }
}

==================

 

===== imagesModel.xml =====

<model>
    <item imagePath="images/cow.png" />
    <item imagePath="images/cow.png" />
    <item imagePath="images/cow.png" />
    <item imagePath="images/cow.png" />
    <item imagePath="images/cow.png" />
    <item imagePath="images/cow.png" />
    <item imagePath="images/cow.png" />
    <item imagePath="images/cow.png" />
    <item imagePath="images/cow.png" />
    <item imagePath="images/cow.png" />
    <item imagePath="images/cow.png" />
    <item imagePath="images/cow.png" />
</model>

=======================

 

P.S.

Trying this code on a BlackBerry Z10 running 10.1

Developer
Posts: 366
Registered: ‎07-15-2013
My Device: blackberry Z10
My Carrier: Personal

Re: Cascades: Cannot dynamically add images to ListView is GridListLayout is used. StackListLayout works fine

[ Edited ]

listItemComponents: [
ListItemComponent {

type: "item"


StandardListItem {

imageSource: "asset:///images/image.png"
title: qsTr(title)
description:qsTr(description)
}

}]

If you find this information useful please click like --->
@mezeitune on twitter
New Contributor
Posts: 4
Registered: ‎01-10-2013
My Device: BlackBerry Z10 Developer Edition
My Carrier: Elisa, Finland

Re: Cascades: Cannot dynamically add images to ListView is GridListLayout is used. StackListLayout works fine

Sorry, I don't get why specifying the sceme would help it :/

 

Anyway, I tried your code:

1) as it  - Didn't work as I don't have an images/image.png

2) modiffying to images/cow.png - Worked, but.. I want to change images dynamically

3) using ListItemData.imagePath - Didn't work

4) using ListItemData.imagePath and specifying asset:/// sceme in the XML - Didn't work

New Contributor
Posts: 4
Registered: ‎01-10-2013
My Device: BlackBerry Z10 Developer Edition
My Carrier: Elisa, Finland

Re: Cascades: Cannot dynamically add images to ListView is GridListLayout is used. StackListLayout works fine

I solved the issue via ArrayDataModel and injecting parsed XML as maps there. Somehow it works.
Developer
Posts: 366
Registered: ‎07-15-2013
My Device: blackberry Z10
My Carrier: Personal

Re: Cascades: Cannot dynamically add images to ListView is GridListLayout is used. StackListLayout works fine

Very glad you've solved, sorry if you understood my answer

If you find this information useful please click like --->
@mezeitune on twitter