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: 1,533
Registered: ‎07-14-2008
My Device: Z10

GridListLayout example anywhere?

[ Edited ]

Having problems creating a GridListLayout with thumbnail pictures.

 

        ListView {
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
            layout: GridListLayout {
                columnCount: 4
            }
            dataModel: _mainApp.model

 

            listItemComponents: [
                ListItemComponent {
                    type: "image"
        
                    ImageView {
                        imageSource: ListItemData.image
                        scalingMethod: ScalingMethod.AspectFill
                    }
                }
            ]


        }

image is not showing up and it prints the asset://.... name

 

can't seem to find any examples.  anyone have an example? thanks

Developer
Posts: 313
Registered: ‎05-31-2010
My Device: Alpha 10, Bold 9900, Storm 9530, Tour 9630, Curve 9320, Curve 8900

Re: GridListLayout example anywhere?

[ Edited ]

How do you set the value of the image in the model?

 

Did you set up the image as "xxx/xxx.png" without "assets"?




p(^_^)q
Good good study, day day up
Developer
Posts: 313
Registered: ‎05-31-2010
My Device: Alpha 10, Bold 9900, Storm 9530, Tour 9630, Curve 9320, Curve 8900

Re: GridListLayout example anywhere?

There is a sample in cookbookqml

ListView {
                topMargin: 50
                dataModel: XmlDataModel {
                    source: "models/sheetmodel.xml"
                }

                layout: GridListLayout {
                    columnCount: 2
                    cellAspectRatio: 1.6
                }

                layoutProperties: StackLayoutProperties {
                    // Spacequota needs to be set so the list doesn't take precedence
                    // when the Page is layed out (if not set, it will fill the entire screen).
                    spaceQuota: 1
                }

                listItemComponents: [
                    ListItemComponent {
                        type: "item"
                        Container {
                            id: itemRoot

                            layout: DockLayout {
                            }

                            // Item background
                            ImageView {
                                imageSource: "asset:///images/title_gui_buffet_empty_box.amd"
                                verticalAlignment: VerticalAlignment.Fill
                                horizontalAlignment: HorizontalAlignment.Fill
                            }

                            // Item highlight
                            Container {
                                background: Color.create("#75b5d3")
                                opacity: itemRoot.ListItem.active  ? 0.9 : 0.0
                                horizontalAlignment: HorizontalAlignment.Fill
                                verticalAlignment: VerticalAlignment.Fill
                            }

                            // Item image, delivered via ListItemData from the models/sheet.xml model
                            ImageView {
                                imageSource: ListItemData.fruit
                                horizontalAlignment: HorizontalAlignment.Center
                                verticalAlignment: VerticalAlignment.Center
                            }
                        }// Container
                    }// ListItemComponent
                ]
                onTriggered: {
                    // A fruit was selected so send the save signal with the imageSource for the fruit.
                    var chosenItem = dataModel.data (indexPath);
                    sheetFruit.save(chosenItem.fruit);
                }
            }// ListView

 

<model>
	<item fruit="images/sheet/fruit1.png"/>
	<item fruit="images/sheet/fruit2.png"/>
	<item fruit="images/sheet/fruit3.png"/>
	<item fruit="images/sheet/fruit4.png"/>
	<item fruit="images/sheet/fruit5.png"/>
	<item fruit="images/sheet/fruit1.png"/>
</model>

 




p(^_^)q
Good good study, day day up
Developer
Posts: 1,533
Registered: ‎07-14-2008
My Device: Z10

Re: GridListLayout example anywhere?

thanks.  will try it out.