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: 142
Registered: ‎08-02-2009
My Device: Z10
My Carrier: T-Mobile
Accepted Solution

Modify StandardListItem, rebuild it as ListItemComponent

Hi,

 

I like the look and feel of a StandardListItem in a ListView.

Unfortunately, it cannot be edited easily.

 

Now I am trying to rebuild this StandardListItem as a ListItemComponent with several Containers and Labels.

The layout of the differend labels isn't a big problem, it just takes time - but my problem is how can I mark my element exactly the way a StandardListItem behaves when it is selected and the ActionItems are displayed?

It's not just simple background changing, it's fading and preselecting the borders before it's getting fully "selected" in that light blue.

 

Did anyone ever solve this problem?

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Modify StandardListItem, rebuild it as ListItemComponent

You can simulate with a FadeTransition and a 9-slice border on a container as the top level element in your custom listtitem.

 


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 142
Registered: ‎08-02-2009
My Device: Z10
My Carrier: T-Mobile

Re: Modify StandardListItem, rebuild it as ListItemComponent

Thank you for your idea, did you ever do this before?

Do you know any good settings for this scenario so it looks like the StandardListItem?

Developer
Posts: 402
Registered: ‎04-04-2012
My Device: BlackBerry Z30/Z10/Z10LE/Q10/PlayBook

Re: Modify StandardListItem, rebuild it as ListItemComponent

  I would like to know how to do this also with 10.1. My understanding is that this will be taken care of with 10.2 and the CustomListItem element. Does anyone know the event that needs to be captured with the long press on a listView?

 

 Thanks in advance.

Developer
Posts: 543
Registered: ‎08-31-2013
My Device: Q10, Z10LE, Nokia N950, DAB....
My Carrier: Telekom Slovakia

Re: Modify StandardListItem, rebuild it as ListItemComponent

Look at GestureHandler

http://developer.blackberry.com/native/reference/cascades/bb__cascades__gesturehandler.html


If helped give a like. If your problem was solved mark the post as "Solution"
Portfolio: BlackBerry Nokia
Social: Twitter | Facebook
About Me / Blog DevPDA | Blog
Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Modify StandardListItem, rebuild it as ListItemComponent

Timings everything. Funnily enough someone posted some code similar to what I was talking about back in March earlier today...

 

http://supportforums.blackberry.com/t5/Native-Development/Draw-a-rectangle-outside-the-image-in-Grid...

 


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 402
Registered: ‎04-04-2012
My Device: BlackBerry Z30/Z10/Z10LE/Q10/PlayBook

Re: Modify StandardListItem, rebuild it as ListItemComponent

[ Edited ]

I thought I would share what I was able to accomplish in making something close to a ListItemComponent and have it look similar. I have attached the listitem outline box. The amd file for the image

 

#RimCascadesAssetMetaData version=1.0
source: "listitemselectbox.png"
sliceMargins: 5 5 5 5

 The QML code

 

                    ListItemComponent {
                        type: "item"
                        Container {
                            id: listItemContainer
                            minWidth: 768.0
                            maxWidth: 768.0
                            minHeight: 111.0
                            maxHeight: 111.0
                            layout: AbsoluteLayout {
                            }
                            contextActions: [
                                ActionSet {
                                    title: qsTr("Actions")
                                    subtitle: qsTr("My Actions.")
                                    ActionItem {
                                        id: informationAction
                                        title: qsTr("Information")
                                        imageSource: "asset:///icons/info.png"
                                        onTriggered: { do somthing }
                                    }
                                }
                            ]
                            gestureHandlers: [
                                LongPressHandler {
                                    onLongPressed: {
                                        selectBoxImage.visible = true
                                        longPressAnimation.play()
                                    }
                                }
                            ]
                            ImageView {
                                id: selectBoxImage
                                imageSource: "asset:///common/listitemselectbox.amd"
                                minWidth: 768.0
                                maxWidth: 768.0
                                minHeight: 109.0
                                maxHeight: 109.0
                                visible: false
                            }
                            Container {
                                id: selectFadeContainer
                                minWidth: 768.0
                                maxWidth: 768.0
                                minHeight: 109.0
                                maxHeight: 109.0
                                background: Color.create("#FF00A7DE")
                                opacity: 0.0
                                animations: [
                                    FadeTransition {
                                        id: longPressAnimation
                                        fromOpacity: 0.0
                                        toOpacity: 0.4
                                        duration: 200
                                    }
                                ]
                            }
                            Container { custom container }
                            Divider {
                                layoutProperties: AbsoluteLayoutProperties {
                                    positionY: 109.0
                                }
                            }
                        }

 This does the animation. Now I wonder how to change it to solid when I release the long press and how to clear everything when the contextAction menu goes away.

 

 

Developer
Posts: 402
Registered: ‎04-04-2012
My Device: BlackBerry Z30/Z10/Z10LE/Q10/PlayBook

Re: Modify StandardListItem, rebuild it as ListItemComponent

I am having troubles getting the rest of the ListItemComponent to display properly. Using the standard behavior of the StandardListItem the following should happen.

 

1. Do a long press on item: Create select box and fade in background. (Completed)

 

2. Lift finger:  Select box is no longer visible (selectBoxImage.visible = false) and background opacity set to full ( selectFadeContainer.opacity = 1.0 )

 

3. Context menu is no longer visible: Background opacity is set to zero. (selectFadeContainer.opacity = 0.0)

 

I think the second would be when onActivationChanged but can't seem to get the actions to work. Is this a scoping issue? The only signal that I could come up with is the onTriggered for the ActionItem, but that also doesn't work and doesn't deal with when the context menu is cancelled by pressing on the list.

 

Any ideas?

Developer
Posts: 402
Registered: ‎04-04-2012
My Device: BlackBerry Z30/Z10/Z10LE/Q10/PlayBook

Re: Modify StandardListItem, rebuild it as ListItemComponent

I was over thinking the problem. I added this code to the end if the top container (listItemContainer) and it all works as expected.

 

                            ListItem.onSelectionChanged: {
                                selectBoxImage.visible = false
                                if(selected) {
                                    selectFadeContainer.opacity = 1.0
                                } else {
                                    selectFadeContainer.opacity = 0.0
                                }
                            }

 

So now the custom Container defined ListItemComponent looks and acts the same as the StandardListItem.

 

Thanks to all the posters in other message threads for ideas.

 

Highlighted
Developer
Posts: 16,987
Registered: ‎07-29-2008
My Device: Z10 LE, Z30, Passport
My Carrier: O2 Germany

Re: Modify StandardListItem, rebuild it as ListItemComponent

in 10.2 there is also CustomListItem (which should contain all the default effects)
----------------------------------------------------------
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