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
Bluenoser
Posts: 313
Registered: ‎04-04-2012
My Device: BlackBerry Z30/Z10/Z10LE/Q10/PlayBook
Accepted Solution

Contact Tag Control

I am guessing that the only way to make a contact tag like the ones created in the email compose screen is to make a custom control.

 

I have started by making an image of the tag. I have attached it.

 

My first question is this. How can you get the width of a Label in pixels?

 

Thanks in advance.

 

 

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

Re: Contact Tag Control

Why would you want the width?

Place the Label in a container and use the background property, it should be a 9-slice image so that it fills the label.

 

Take a look at the 9 slice scaling paragraph in this...

 

http://developer.blackberry.com/native/documentation/cascades/ui/image_resources/assets.html

 


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

Developer of stokLocker, Sympatico and Super Sentences.
Developer
BBSJdev
Posts: 6,118
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30

Re: Contact Tag Control

Oh and your guess is wrong. :smileywink:

 

There's no need for a CustomControl the tag control is a simple FlowListLayout ListView.

 

That bits simple, the marginally harder and time consuming bit is duplicating the entry of single or multiple tags at one time and is ~20 lines of javascript.

 


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

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

Re: Contact Tag Control

[ Edited ]

I got the tags to be displayed properly. I have been unable to get any of the tags to be selected. They don't seem to respond to presses. Any clues?

 

import bb.cascades 1.0

Container {
    ListView {
        dataModel: XmlDataModel {
            source: "models/mydata.xml"
        }
        layout: FlowListLayout {
            headerMode: ListHeaderMode.None
        }
        listItemComponents: [
            ListItemComponent {
                type: "item"
                Container {
                    id: listItemContainer
                    topPadding: 15.0
                    leftPadding: 20.0
                    Container {
                        id: nameTagContainer
                        minHeight: 62.0
                        maxHeight: 62.0

                        leftPadding: 40.0
                        rightPadding: 20.0

                        Label {
                            text: ListItemData.text
                        }
                        background: listItemContainer.ListItem.view.setBackground(false) 
                    }
                }
                ListItem.onSelectionChanged: {
                    nameTagContainer.background = listItemContainer.ListItem.view.setBackground(selected)
                }
            }
        ]

        function setBackground(selected) {
            if (selected == true) {
            	return tagImageSelected.imagePaint
            } else {
                return tagImageBright.imagePaint
            }
        }
        
        attachedObjects: [
            ImagePaintDefinition {
                id: tagImageBright
                repeatPattern: RepeatPattern.Fill
                imageSource: "asset:///images/usertag_bright.amd"
            },
            ImagePaintDefinition {
                id: tagImageSelected
                repeatPattern: RepeatPattern.Fill
                imageSource: "asset:///images/usertag_selected.amd"
            }
        ]
    }
}

 

#RimCascadesAssetMetaData version=1.0
source: "usertag_bright.png"
sliceMargins: 28 6 1 1

 

#RimCascadesAssetMetaData version=1.0
source: "usertag_selected.png"
sliceMargins: 28 6 1 1

 

 

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

Re: Contact Tag Control

A Label can only respond to a touch event.

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

Developer of stokLocker, Sympatico and Super Sentences.
Developer
BBSJdev
Posts: 6,118
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30

Re: Contact Tag Control

Your onSelectionChanged needs to be outside the ListItem and in the ListView.

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

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

Re: Contact Tag Control

[ Edited ]

Moving the onSelectionChanged to the ListView had no effect. onSelectionChanged is not fired when pressing on any item. I was just repeating what I had done in the past.

 

http://supportforums.blackberry.com/t5/Native-Development/Modify-StandardListItem-rebuild-it-as-List...

 

Putting it at the ListItem level worked in that case.

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

Re: Contact Tag Control

I added

 

                        gestureHandlers: [
                            TapHandler {
                                onTapped: {
                                    nameTagContainer.background = listItemContainer.ListItem.view.setBackground(true)
                                }
                            }
                        ]

 to the container and that got the background image to work. It still would be nice to have the ListItem.selected to work.

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

Re: Contact Tag Control

Does anyone know for sure that  onSelectionChanged works for a ListView that has FlowListLayout? No matter what I have tried, I cannot get this to fire.

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

Re: Contact Tag Control

Quickly testing this on my tag customcontrol I can confirm it doesn't seem to work.


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

Developer of stokLocker, Sympatico and Super Sentences.