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
Regular Contributor
Posts: 51
Registered: ‎04-24-2013
My Device: Z10
My Carrier: Telkomsel
Accepted Solution

Can't create alias form container in listview

i have tabpane wich call a page of listview. If a tab is trigerred the container property will change (like background)  base on value that i have initilize in tab pane with alias:

 

But i can't create alias to change property in listview:

 

Like this: 

Page{
 id: page
 property alias color: containerColor.background

  Container{
    Listview{
      listItemComponents: [
        ListItemComponent {
            type: "item"
            Container {
              id: containerColor

              //other code
            }
        }
      ]
    }
  }

}

 what should i do? 

thanks.

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

Re: Can't create alias form container in listview

ListItemComponents correspond to items in dataModel. There may be multiple instances of a single ListItemComponent, so it's not possible to bind directly. A proper way of updating them is by changing dataModel entries and binding to their values.

 

But in the case above you can bind the other way around (untested, but should work):

 

Page{
 id: page
 property variant color

  Container{
    ListView{
      function getBackgroundColor() {
        return page.color
      }
      listItemComponents: [
        ListItemComponent {
            type: "item"
            Container {
              background: ListItem.view.getBackgroundColor()

              //other code
            }
        }
      ]
    }
  }

}

 


Andrey Fidrya, @zmeyc on twitter
Regular Contributor
Posts: 51
Registered: ‎04-24-2013
My Device: Z10
My Carrier: Telkomsel

Re: Can't create alias form container in listview

I think is solution, because the application can works properly except the background color is not change.

 

i call the variant color with: 

color: Color.create("#B1D619")

 that's right? but why not working?

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

Re: Can't create alias form container in listview

Does it work when the color is assigned directly to Container?

 

Container {
              background: Color.create("#B1D619")
}

If not, then maybe it's hidden behind other content or the container is not wide enough.

Containers inside of ListView do not fill all the available space horizontally even if told to.

A workaround is to use "preferredWidth: Infinity" property.

 


Andrey Fidrya, @zmeyc on twitter
Regular Contributor
Posts: 51
Registered: ‎04-24-2013
My Device: Z10
My Carrier: Telkomsel

Re: Can't create alias form container in listview

Yes, when i use background:Color.create("#00578f") it works.

 

Regular Contributor
Posts: 51
Registered: ‎04-24-2013
My Device: Z10
My Carrier: Telkomsel

Re: Can't create alias form container in listview

I think the function is not readable, here is my code:

ListView {
                    id: listColor
                    dataModel: headerImageDM
                    layout: StackListLayout {
                        headerMode: ListHeaderMode.None
                        orientation: LayoutOrientation.LeftToRight
                    }
                    
                    snapMode: SnapMode.LeadingEdge
                    flickMode: FlickMode.SingleItem

                    listItemComponents: [
                        ListItemComponent {
                            type: "listItem"

                            Container {
                               
                                layout: StackLayout {
                                }
                                Container {
                                    layout: DockLayout {
                                    }
                                    preferredHeight: 400
                                    horizontalAlignment: HorizontalAlignment.Fill
                                    WebImageView {
                                        url: ListItemData.thumbnail
                                        horizontalAlignment: HorizontalAlignment.Fill
                                        verticalAlignment: VerticalAlignment.Fill
                                        scalingMethod: ScalingMethod.AspectFill

                                    }
                                }
                                Container {
                                    layout: StackLayout {
                                        orientation: LayoutOrientation.LeftToRight
                                    }
                                    background: Color.create("#0096fd")
                                    preferredHeight: 220
                                    preferredWidth: 770

                                    Container {
                                        preferredHeight: 220
                                        preferredWidth: 30
                                    }

                                    Container {
                                        background: ListItem.view.getBackgroundColor()
                                        layout: StackLayout {}
                                        preferredHeight: 220
                                        leftPadding: 10.0
                                        
                                        preferredWidth: 740                                       
                                        Container{
                                            Label {
                                                text: ListItemData.title
                                                multiline: true
                                                horizontalAlignment: HorizontalAlignment.Fill
                                                textStyle.color: Color.White
                                                verticalAlignment: VerticalAlignment.Center
                                                textStyle {
                                                    fontSize: FontSize.PointValue
                                                    fontSizeValue: 7.0
                                                }

                                            }
                                        }
                                        
                                        
                                        Container{
                                            Label {
                                                text: DateFormatJs.convertDate(ListItemData.published)
                                                horizontalAlignment: HorizontalAlignment.Fill
                                                textStyle.color: Color.White
                                                verticalAlignment: VerticalAlignment.Center
                                                textStyle {
                                                    fontSize: FontSize.PointValue
                                                    fontSizeValue: 6.0
                                                }
                                                
                                            }
                                        }

                                    }

                                }
                            }
                        }

                    ]
                    function itemType(data, indexPath) {
                        return "listItem";
                    }

                    function getBackgroundColor() {
                        return navPane.bgTone1
                    }

                
                } //end listview

 

 

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

Re: Can't create alias form container in listview

[ Edited ]

Unlike ListItemData, ListItem is defined only for top-level item of ListItemComponent. I think this should work:

 

ListItemComponent {
  type: "listItem"
  Container {
id: topContainer // <----------- added line

 

...

background: topContainer.ListItem.view.getBackgroundColor()

 


Andrey Fidrya, @zmeyc on twitter
Regular Contributor
Posts: 51
Registered: ‎04-24-2013
My Device: Z10
My Carrier: Telkomsel

Re: Can't create alias form container in listview

Thanks it works.