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

Re: Contact Tag Control

Thanks. I guess I will continue on the gestureHandlers path.

Retired
robbieDubya
Posts: 418
Registered: ‎07-18-2012
My Device: Q10

Re: Contact Tag Control

[ Edited ]

Hi,

 

You could try some code like this;

 

            listItemComponents: [
                ListItemComponent {
                    type: "item"
                    Label {
                        id: component
                        property variant path: ListItem.indexPath
                        property ListView owner: ListItem.view 
                        gestureHandlers: [
                            TapHandler {
                                onTapped: {
                                    component.owner.clearSelection();
                                    component.owner.select(component.path,true);
                                }
                            }
                        ]
                        text: ListItemData.name + (ListItem.selected ? " [selected]" : "")
                    }
                }
            ]

 With selected being used to control in probably a prettier way...

--
Rob is no longer associated with BlackBerry.
Developer
Bluenoser
Posts: 313
Registered: ‎04-04-2012
My Device: BlackBerry Z30/Z10/Z10LE/Q10/PlayBook

Re: Contact Tag Control

[ Edited ]

@robbieDubya,

 

  I tried what you suggested. It didn't work. I did have the gestureHandler at the nameTagContainer as that is where the capture has to be done. My resulting code was:

 

import bb.cascades 1.0

Container {
    Label {
        id: debugLabel
        text: "Debug"
    }
    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 {
                            id: nameLabel
                            text: ListItemData.text + (ListItem.selected ? " [selected]" : "")
                        }
                        background: listItemContainer.ListItem.view.setBackground(false)
                        gestureHandlers: [
                            TapHandler {
                                onTapped: {
                                    listItemContainer.ListItem.view.clearSelection();
                                    listItemContainer.ListItem.view.select(ListItem.indexPath, true);
                                    // The following line works to change the background image.
                                    nameTagContainer.background = listItemContainer.ListItem.view.setBackground(true);
} } ] } } } ] 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" } ] } }

 I have also attached a picture of what I see. The magenta image is to show the difference containers. The light magenta is the listItemContainer and the dark is the nameTagContainer. I need to have the nameTagContainer as the touch target. The current touch target works as I can switch the background image.

 

Tag Containers

Retired
robbieDubya
Posts: 418
Registered: ‎07-18-2012
My Device: Q10

Re: Contact Tag Control

[ Edited ]

Hi,

 

I see a bunch of QML warnings/errors in the console when yours is run - the scope of the ListItem is something you have to be careful with in ListViews...

 

Here's yours modified so that the scoping is right. I didn't have your image assets so I just used a solid colour.

 

Don't worry about the function call - use a property for changing the background...

 

import bb.cascades 1.2

Page {
    ListView {
        dataModel: XmlDataModel {
            source: "test.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 {
                            id: nameLabel
                            text: ListItemData.text + (listItemContainer.ListItem.selected ? " [selected]" : "")
                        }
                        background: listItemContainer.ListItem.selected ? Color.Green : Color.Blue
                        gestureHandlers: [
                            TapHandler {
                                onTapped: {
                                    listItemContainer.ListItem.view.clearSelection();
                                    listItemContainer.ListItem.view.select(listItemContainer.ListItem.indexPath, true);
                                }
                            }
                        ]
                    }
                }
            }
        ]
    }
}

 IMG_00000002.png

--
Rob is no longer associated with BlackBerry.
Developer
Bluenoser
Posts: 313
Registered: ‎04-04-2012
My Device: BlackBerry Z30/Z10/Z10LE/Q10/PlayBook

Contact Tag Control - Delete

[ Edited ]

I would like to share the results of all the help in this thread. Press the tag and it will change with a delete section. Press the delete to remove the tag. Press the tag selction space to cancel selection.

 

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
                    layout: StackLayout {
                        orientation: LayoutOrientation.LeftToRight
                    }
                    Container {
                        id: nameTagContainer
                        minHeight: 62.0
                        maxHeight: 62.0
                        leftPadding: 40.0
                        rightPadding: 20.0
                        Label {
                            id: nameLabel
                            text: ListItemData.text
                        }
                        background: listItemContainer.ListItem.view.setTagBackground(listItemContainer.ListItem.selected)
                        gestureHandlers: [
                            TapHandler {
                                onTapped: {
                                    if (listItemContainer.ListItem.selected) {
                                        listItemContainer.ListItem.view.clearSelection();
                                        tagDeleteContainer.visible = false;
                                        nameTagContainer.rightPadding = 25.0;
                                    } else {
                                        listItemContainer.ListItem.view.clearSelection();
                                        listItemContainer.ListItem.view.select(listItemContainer.ListItem.indexPath, true);
                                        nameTagContainer.rightPadding = -25.0;
                                        tagDeleteContainer.visible = true;
                                    }
                                }
                            }
                        ]
                    }
                    Container {
                        id: tagDeleteContainer
                        visible: false
                        ImageView {
                            imageSource: "asset:///images/usertag_delete.png"
                        }
                        gestureHandlers: [
                            TapHandler {
                                onTapped: {
                                    if (listItemContainer.ListItem.selected) {
                                        listItemContainer.ListItem.view.clearSelection();
                                        tagDeleteContainer.visible = false;
                                        nameTagContainer.rightPadding = 25.0;
                                        // Remove from list
                                        listItemContainer.visible = false;
                                    }
                                }
                            }
                        ]
                    }
                }
            }
        ]
        
        function setTagBackground(selected) {
            if (selected == true) {
            	return tagImageSelectDelete.imagePaint
            } else {
                return tagImageBright.imagePaint
            }
        }
        
        attachedObjects: [
            ImagePaintDefinition {
                id: tagImageBright
                repeatPattern: RepeatPattern.Fill
                imageSource: "asset:///images/usertag_bright.amd"
            },
            ImagePaintDefinition {
                id: tagImageSelectDelete
                repeatPattern: RepeatPattern.Fill
                imageSource: "asset:///images/usertag_selectdelete.amd"
            },
            ImagePaintDefinition {
                id: tagImageDelete
                repeatPattern: RepeatPattern.Fill
                imageSource: "asset:///images/usertag_delete.amd"
            }
        ]
    }
}

 

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

 

#RimCascadesAssetMetaData version=1.0
source: "usertag_selectdelete.png"
sliceMargins: 28 2 1 1

 SingleDeleteTag.png

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

Re: Contact Tag Control - Delete

Another question related to this FlowListLayout. How do I make the ListView change in height when items are added and deleted? So the ListView is only big enough to display just the records and no extra space.

Retired
robbieDubya
Posts: 418
Registered: ‎07-18-2012
My Device: Q10

Re: Contact Tag Control - Delete

[ Edited ]

Hi,

 

Here`s my first attempt at auto sizing a list.

 

This code does not adapt when the list contents change...

 

It also uses a timer - as it doesn`t know which item is going to be last...

 

 

import bb.cascades 1.2

Page {
    Container {
        Label {
            text: "Before List"
        }
        ListView {
            id: theView
            property int count: 0
            property int lastBottom: -50000
            property int lastBottomTime: -1
            property bool ignoreNew: false

            function reportBottom(newBottom) {
                if (! ignoreNew && newBottom > lastBottom) {
                    count ++
                    lastBottom = newBottom;
                    lastBottomTime = new Date().valueOf();
                    if (! theTimer.enabled) {
                        theTimer.start();
                    }
                } else {
                    ignoreNew = true;
                }
            }

            function checkBottom() {
                if (ignoreNew) {
                    theTimer.stop();
                    return;
                }
                var now = new Date().valueOf();
                if (now - lastBottomTime > 100) {
                    ignoreNew = true;
                    theTimer.stop();
                    if (lastBottom > 0) {
                        var toUse = lastBottom + 5;
                        if (toUse < maxHeight) {
                            preferredHeight = toUse;
                        } else {
                            console.log("Not changing height.");
                        }
                    }
                }
            }

            preferredHeight: 600
maxHeight: 800
dataModel: XmlDataModel { source: "test.xml" } listItemComponents: [ ListItemComponent { type: "item" Container { id: uiElement Label { text: ListItemData.name } onLayoutChanged: { console.log("Layout: " + layout); layoutData.text = layout.toString(); } attachedObjects: [ LayoutUpdateHandler { onLayoutFrameChanged: { var myBottom = layoutFrame.y + layoutFrame.height; uiElement.ListItem.view.reportBottom(myBottom); } } ] } } ] attachedObjects: [ QTimer { id: theTimer interval: 50 onTimeout: { theView.checkBottom(); } } ] } Label { text: "After List" } } }

 

--
Rob is no longer associated with BlackBerry.
Retired
robbieDubya
Posts: 418
Registered: ‎07-18-2012
My Device: Q10

Re: Contact Tag Control - Delete

Note: you really need that timer - as you scoll or drag the list later, you will see negative and over sized positive for the elements which are offscreen at that moment.

--
Rob is no longer associated with BlackBerry.