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
steve8820
Posts: 78
Registered: ‎04-04-2013
My Device: BB10 Dev Alpha Simulator

Changing property of controls in second listitemcomponent from first listitemcomponent

Hi, im having problem changing property of the container in second listitemcomponent from the first listitemcomponent. Whatever I put it still no effect on container in second listitemcomponent. Am i doing anything wrong? Is this even possible?

 

Below is my code:


ListView {
                    id: accList
                    dataModel: XmlDataModel {
                        id: accListDataModel
                        source: "../Model/accountList.xml"
                    }
                    listItemComponents: [
                        ListItemComponent {

                            id: firstListItemComponent
                            type: "type"
                            Container {
                                Container {
                                    id: accDetailsContainer
                                    horizontalAlignment: HorizontalAlignment.Center
                                    layout: DockLayout {
                                    }
                                    ImageView {
                                        imageSource: "asset:///Media/Images/Tile_light_toast_128x128.png"
                                        horizontalAlignment: HorizontalAlignment.Fill
                                        preferredWidth: maxWidth
                                        preferredHeight: 100
                                    }

                                    // The Item content an image and a text
                                    Container {
                                        horizontalAlignment: HorizontalAlignment.Left
                                        verticalAlignment: VerticalAlignment.Center
                                        leftPadding: 10
                                        ImageView {
                                            preferredWidth: 100
                                            preferredHeight: 50
                                            // The image is bound to the data in models/recipemodel.xml image attribute.
                                            imageSource: ListItemData.image

                                        } //end of ImageView
                                    } //ImageView Container

                                    Container {
                                        verticalAlignment: VerticalAlignment.Center
                                        horizontalAlignment: HorizontalAlignment.Center
                                        Label {
                                            id: lblImgTitle
                                            text: ListItemData.title
                                            textStyle.color: Color.Black
                                            textStyle.base: recipeItem.ListItem.view.itemTextStyle.style
                                            leftPadding: 10
                                        } // Label
                                    } //Label Container

                                    Container {
                                        verticalAlignment: VerticalAlignment.Center
                                        horizontalAlignment: HorizontalAlignment.Right
                                        Button {
                                            id: btnHeader
                                            imageSource: "asset:///Media/Images/AccountServices/expand.png"
                                            preferredWidth: 40
                                            preferredHeight: 40
                                            onClicked: {
                                                if (accListHeaderContainer.visible == true) {
                                                    accListHeaderContainer.visible = false;

                                                    ctnDtl.visible = false;
                                                    btnHeader.imageSource = "asset:///Media/Images/AccountServices/expand.png";
                                                } else {
                                                    accListHeaderContainer.visible = true;

                                                    ctnDtl.visible = true;
                                                    btnHeader.imageSource = "asset:///Media/Images/AccountServices/collapse.png";
                                                }
                                            }
                                        } //end of ImageButton
                                    }
                                }
                                Container {
                                    id: accListHeaderContainer
                                    visible: false
                                    Container {
                                        background: Color.create("#ff4db9ff")
                                        layout: StackLayout {
                                            orientation: LayoutOrientation.LeftToRight
                                        }
                                        verticalAlignment: VerticalAlignment.Fill
                                        horizontalAlignment: HorizontalAlignment.Fill
                                        Header {
                                            layoutProperties: StackLayoutProperties {
                                                spaceQuota: 0.6
                                            }
                                            title: qsTr("Accounts")
                                        }
                                        Header {
                                            title: qsTr("Available Balance")
                                            layoutProperties: StackLayoutProperties {
                                                spaceQuota: 0.4
                                            }
                                        }
                                    }                                             
                                }
                            }
                        },
                        ListItemComponent {
                            id: secondListItemComponent
                            type: "acc"
                            Container {
                                id: ctnDtl
                                verticalAlignment: VerticalAlignment.Fill
                                horizontalAlignment: HorizontalAlignment.Fill
                                layout: StackLayout {}
                                visible: false
                                Container {
                                    layout: StackLayout {
                                        orientation: LayoutOrientation.LeftToRight
                                    }
                                    preferredHeight: 100.0
                                    Container {
                                        layoutProperties: StackLayoutProperties {
                                            spaceQuota: 0.5
                                        }
                                        layout: DockLayout {

                                        }
                                        verticalAlignment: VerticalAlignment.Fill
                                        horizontalAlignment: HorizontalAlignment.Fill
                                        leftPadding: 10.0
                                        Label {
                                            id: lblAccNo
                                            text: ListItemData.accno
                                            verticalAlignment: VerticalAlignment.Center
                                        }
                                    }
                                    Container {
                                        layoutProperties: StackLayoutProperties {
                                            spaceQuota: 0.4
                                        }
                                        verticalAlignment: VerticalAlignment.Fill
                                        horizontalAlignment: HorizontalAlignment.Fill
                                        layout: DockLayout {

                                        }
                                        Label {
                                            id: lblAccNoAmt
                                            text: ListItemData.amt
                                            verticalAlignment: VerticalAlignment.Center
                                            horizontalAlignment: HorizontalAlignment.Right
                                        }
                                    }
                                }
                                Divider {
                                }
                            } //end of ctnDtl container
                        }
                    ]
                }


 

 

Regards,

Steve Chan
Please use plain text.
Developer
simon_hain
Posts: 16,137
Registered: ‎07-29-2008
My Device: Z10 LE, Z30, Passport

Re: Changing property of controls in second listitemcomponent from first listitemcomponent

could be a scope issue, listitemcomponents have their own scope and cannot access outer ids etc, maybe they also cannot access other items.

as you can access the listview i would suggest that you try to connect it with a property on the listview.
----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
Please use plain text.
Developer
steve8820
Posts: 78
Registered: ‎04-04-2013
My Device: BB10 Dev Alpha Simulator

Re: Changing property of controls in second listitemcomponent from first listitemcomponent

Thanks for the reply. But i dont quite get your idea. Which property in the listview? What im trying to do is using the first listitemcomponent as a header and the second as details of the first. And there is a button on the first to click whether to expand or collapse the second.
Regards,

Steve Chan
Please use plain text.
Developer
steve8820
Posts: 78
Registered: ‎04-04-2013
My Device: BB10 Dev Alpha Simulator

Re: Changing property of controls in second listitemcomponent from first listitemcomponent

Anyone can help? Still stuck in this... any other solution?

Regards,

Steve Chan
Please use plain text.
Developer
Zmey
Posts: 1,512
Registered: ‎12-18-2012
My Device: PlayBook, Z10, DAC

Re: Changing property of controls in second listitemcomponent from first listitemcomponent

[ Edited ]

Hi,

ListItemComponents can't directly reference each other because they reside in different contexts and there could be more than one instance of each one. Also, it's not guaranteed that they exist at any given moment. For example, they could be scrolled out of screen and destroyed. For very simple case you can hack something out by using the global "Qt" object:
Qt.someVariable = someValue

But ideally, ListItemComponents represent corresponding dataModel entries, so all updates should come through dataModel. In this case there could be a flag in dataModel, for example it can be called "expanded". This flag can be updated by modifying the data at corresponding indexPath. The second component can bind to ListItemData.expanded.

But this can't be done with XMLDataModel. It is read-only and is very limited. It's better to use ArrayDataModel and populate it with XML data manually. It's entries can be updated at runtime.


Andrey Fidrya, @zmeyc on twitter
Please use plain text.
Developer
steve8820
Posts: 78
Registered: ‎04-04-2013
My Device: BB10 Dev Alpha Simulator

Re: Changing property of controls in second listitemcomponent from first listitemcomponent

Thanks for the detailed explanation. Very appreciate it. Will try your solution and will update here if it works. Thanks again.

Regards,

Steve Chan
Please use plain text.