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
New Contributor
Kernald
Posts: 8
Registered: ‎02-17-2013
My Device: Z10 LE
My Carrier: Sosh
Accepted Solution

ActionItem issue in a context menu

Hello,

I'm trying to add a context menu to list items. That's how I started:

 

            ListView {
                id: tasksList
                objectName: "tasksList"
                layout: StackListLayout {
                    headerMode: ListHeaderMode.Sticky
                }
                dataModel: tasksModel
                                            
                listItemComponents: [
                    ListItemComponent {
                        type: "item"
                        StandardListItem {
                            imageSpaceReserved: false
                            title: ListItemData.title
                            
                            contextActions: [
                                ActionSet {
                                    title: contentView.title
                                    ActionItem {
                                        title: "View"
                                        imageSource: "asset:///images/email.png"
                                        
                                        onTriggered: {
                                            var page = taskPageDefinition.createObject();
                                            nav.push(page);
                                        }
                                    }
                                    ActionItem {
                                        title: contentView.done == 0 ? "Done" : "Todo"
                                        imageSource: "asset:///images/email.png"
                                    }
                                }
                            ]
                        }
                    },
                    ListItemComponent {
                        type: "header"
                        Header {
                            title: ListItemData == 1 ? "Done" : "Todo"
                        }
                    }
                ]

 The two action items are displaying fine. However, the onTriggered is never called. If I move the contextActions array up to the ListView, it works. However, both the headers and empty area of the list are triggering the context menu, which is not what I want.

 

Why the onTriggered slot isn't called?

 

Thanks.

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

Re: ActionItem issue in a context menu

[ Edited ]

I guess onTrigger is called but taskPageDefinition and nav aren't visible because ListItemComponents have their own visibility scope.

 

If ListItemComponent's id is rootId, then outside items can be accessed like this:

rootId.ListItem.view.someJavaScriptFunction()

 

Define someJavaScriptFunction inside of ListView. Inside of this function it's possible to access other objects defined in qml file.

 

This thread has an example:

http://supportforums.blackberry.com/t5/Cascades-Development/ContextActions-inside-ListItem-can-not-a...


Andrey Fidrya, @zmeyc on twitter
Please use plain text.
New Contributor
Kernald
Posts: 8
Registered: ‎02-17-2013
My Device: Z10 LE
My Carrier: Sosh

Re: ActionItem issue in a context menu

Thanks for your answer. I already saw the post you linked, but I wasn't aware of why his solution did work and the original code didn't. I tried to put my onTriggered() code in a function as you mentioned, but I couldn't get it working either. Here's my full ListView code:

ListView {
    id: tasksList
    objectName: "tasksList"
    layout: StackListLayout {
        headerMode: ListHeaderMode.Sticky
    }
    dataModel: tasksModel
    
	function viewTriggered() {
        var page = taskPageDefinition.createObject();
        nav.push(page);
    }
                                
    listItemComponents: [
        ListItemComponent {
            id: rootId
            type: "item"
            StandardListItem {
                imageSpaceReserved: false
                title: ListItemData.title
                
                contextActions: [
                    ActionSet {
                        title: contentView.title
                        ActionItem {
                            title: "View"
                            imageSource: "asset:///images/email.png"
                            
                            onTriggered: {
                                /*var page = taskPageDefinition.createObject();
                                nav.push(page);*/
                                rootId.ListItem.view.viewTriggered();
                            }
                        }
                        ActionItem {
                            title: contentView.done == 0 ? "Done" : "Todo"
                            imageSource: "asset:///images/email.png"
                        }
                    }
                ]
            }
        },
        ListItemComponent {
            type: "header"
            Header {
                title: ListItemData == 1 ? "Done" : "Todo"
            }
        }
    ]
    onTriggered: {
        if (indexPath.length > 1) {
            clearSelection();
            select(indexPath);
            var page = taskPageDefinition.createObject();
            nav.push(page)
        }
    }
    onSelectionChanged: {
        if (selected) {
            contentView = dataModel.data(indexPath);
        }
    }
    attachedObjects: [
        GroupDataModel {
            id: tasksModel
            objectName: "tasksModel"
            grouping: ItemGrouping.ByFullValue
            sortingKeys: [
                "done",
                "title"
            ]
            onItemAdded: {
                if (addShown) {
                    if (nav.top == taskListPage) {
                        tasksList.clearSelection();
                        tasksList.scrollToItem(indexPath, ScrollAnimation.Default);
                    }
                }
            }
            onItemRemoved: {
                var lastIndexPath = last();
                if (lastIndexPath[0] == undefined) {
                    if (nav.top != taskListPage) {
                        nav.popAndDelete();
                    }
                }
            }
            onItemUpdated: {
                contentView = data(indexPath);
            }
        }
    ]
}

 

Please use plain text.
New Contributor
Kernald
Posts: 8
Registered: ‎02-17-2013
My Device: Z10 LE
My Carrier: Sosh

Re: ActionItem issue in a context menu

Well, you pointed out the issue, but there were a little mistake in your solution. Don't worry, I'm not mad at you, thanks again :-) It's not the ListItemComponent which should be the base of the function call, but the StandardListItem itself.

 

For reference, here's a working code, attachedObjects omitted as they're not useful for this example:

 

ListView {
    id: tasksList
    objectName: "tasksList"
    layout: StackListLayout {
        headerMode: ListHeaderMode.Sticky
    }
    dataModel: tasksModel
    
	function viewTriggered() {
        var page = taskPageDefinition.createObject();
        nav.push(page);
    }
                                
    listItemComponents: [
        ListItemComponent {
            id: rootId
            type: "item"
            StandardListItem {
                imageSpaceReserved: false
                title: ListItemData.title
                id: taskItemId
                
                contextActions: [
                    ActionSet {
                        title: contentView.title
                        ActionItem {
                            title: "View"
                            imageSource: "asset:///images/email.png"
                            
                            onTriggered: {
                                taskItemId.ListItem.view.viewTriggered();
                            }
                        }
                        ActionItem {
                            title: contentView.done == 0 ? "Done" : "Todo"
                            imageSource: "asset:///images/email.png"
                        }
                    }
                ]
            }
        },
        ListItemComponent {
            type: "header"
            Header {
                title: ListItemData == 1 ? "Done" : "Todo"
            }
        }
    ]
}

 Thanks again!

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

Re: ActionItem issue in a context menu

[ Edited ]

I'm sorry, rootId should be the id of StandardListItem (top item of ListItemComponent), not the ListItemComponent itself.
Please tell me if it works.


Andrey Fidrya, @zmeyc on twitter
Please use plain text.
New Contributor
Kernald
Posts: 8
Registered: ‎02-17-2013
My Device: Z10 LE
My Carrier: Sosh

Re: ActionItem issue in a context menu

Yup, it worked, see my second answer :-)
Please use plain text.
Developer
Paratheo
Posts: 134
Registered: ‎04-25-2009
My Device: Z30
My Carrier: AT&T

Re: ActionItem issue in a context menu

Wow this solution worked perfectly for me, i was having such a hard time with it. Thanks!!

Please use plain text.
Developer
singpolyma
Posts: 47
Registered: ‎11-15-2012
My Device: Q10
My Carrier: WIND

Re: ActionItem issue in a context menu

As an improvement on this technique, I have found that:

 

ListItem.view.method()

 

works fine, you don't even need an id.

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

Re: ActionItem issue in a context menu

Unless something changed in newer SDKs, ListItem is accessible only in top-level item of ListItemComponent, otherwise it has to be referenced via id of this item.

 

This does not apply to ListItemData, it's available in the entire context.

 

This is described in detail in ListView's docs:

http://developer.blackberry.com/cascades/reference/bb__cascades__listview.html


Andrey Fidrya, @zmeyc on twitter
Please use plain text.
Developer
singpolyma
Posts: 47
Registered: ‎11-15-2012
My Device: Q10
My Carrier: WIND

Re: ActionItem issue in a context menu

I am using this code on 10.1 and it is working on the device, without an id.

Please use plain text.