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
Contributor
maheshkumar1990
Posts: 44
Registered: ‎01-07-2013
My Device: 9300
My Carrier: blackberry

Reg:Listview Button Click

hi

    i need to implement buttonClick in list view , here by i have attached my code for reference

  Container {
                   
                    attachedObjects: [
                      
                        GroupDataModel {
                            id: grouplistdatamodel
                        },
                        DataSource {
                            id: group_DataSource
                            source: "my Api"
                            type: DataSourceType.Json
                            onDataLoaded: {
                                grouplistdatamodel.clear();
                                grouplistdatamodel.insertList(data);
                               
                            }
                        }
                    ]
                    ListView {
                        id: group_List
                       
                        layout: FlowListLayout {
                        }
                        dataModel: grouplistdatamodel
                        listItemComponents: [

                            // list items (that is, those with a type of "listItem")
                            ListItemComponent {
                                type: "item"
                                Container {
       
                                

                                            Label {
                                                text: ListItemData.group_name
                                                textStyle {
                                                    base: SystemDefaults.TextStyles.TitleText
                                                    color: Color.create("#2db6ff")
                                                }
                                            }
                                            Label {
                                                text: "Created by : " + ListItemData.created
                                                textStyle {
                                                    base: SystemDefaults.TextStyles.SmallText
                                                    fontWeight: FontWeight.Bold
                                                }
                                            }

                                            Label {
                                                text: "hai"
                                            
                                            onTouch: {
                                                if (event.isDown()) {
                                                 
                                                 settings.showToast("Label Clicked");
                                                }
                                              
                                            }
                                          Button{
                                          onClicked:{
                                          settings.showToast("button Clicked");
                                            var poll=polling.createObject();
                                           navigationPane.push(poll);
                                            }  
                                            id:polling
                                            source:"PollPage.qml"
 
                                     }
 

                                        }
                                        }
                                    }
                                  
                                }
                            }
                        ]
                        onTriggered: {
                              var list_click =       listing.createObject();
                                navigationPane.push(list_click);
                            }
                        
                        attachedObjects: ComponentDefinition {
                            id: listing
                            source: "groupDetails.qml"
                        }
                    
                    }
                

 can anyone send me some solution how to do this

thanks

Please use plain text.
Developer
jmoukel
Posts: 111
Registered: ‎07-05-2012
My Device: none
My Carrier: MOvistar

Re: Reg:Listview Button Click

[ Edited ]

Hi,

 

you cannot directly access outside-listview components (like "navigationPane") from a ListItemComponent . But you can do it indirectly. Look at this code:

 

ListView
{
    ...

    listItemComponents: 
    [
        ListItemComponent 
        {
            Container
            {    
               id: itemRoot
               
               ...
			                
	       Button				             
	       {
                  ...

                  onClicked:				                
		  {                   
                       var poll = itemRoot.ListItem.view.polling.createObject();
                       itemRoot.ListItem.view.navigationPane.push(poll);
                  }
               }
           }
       }
   ]
}   

 So, you need to use the prefix "itemRoot.ListItem.view." before any component that is outside the listview. Where "itemRoot" (look at the code) is the id of the root container of the ListItemComponent.

Please use plain text.
Contributor
maheshkumar1990
Posts: 44
Registered: ‎01-07-2013
My Device: 9300
My Carrier: blackberry

Re: Reg:Listview Button Click

Hi,

    i have tried as you said but it's not working, i have tried like this

 ImageButton {
defaultImageSource: "asset:///Feeds/comment1.png"
pressedImageSource: "asset:///Feeds/comment1.png"
onClicked: {
 var commentslisting = main_container.ListItem.view.comments.createObject();
main_container.ListItem.view.navigationPane.push(commentslisting);
}
}

attachedObjects: [
      ComponentDefinition {
      id: comments
    source: "CommentsList.qml"
         }
      ]

 can u send me some solution to solve this....

Thanks

Please use plain text.
Developer
jmoukel
Posts: 111
Registered: ‎07-05-2012
My Device: none
My Carrier: MOvistar

Re: Reg:Listview Button Click

[ Edited ]
ListView
{
    ...

    function myFunction()
     {      
            var poll = polling.createObject();
         navigationPane.push(poll);     
}
... listItemComponents: [ ListItemComponent { Container { id: itemRoot ... Button { ... onClicked: { itemRoot.ListItem.view.myFunction(); } } } } ]
}

Oops! I forgot. You can make it work by defining a function in the ListView and calling that function from the listItemComponent. Look at the code.

 

Let me know if any problem.

Please use plain text.
Contributor
maheshkumar1990
Posts: 44
Registered: ‎01-07-2013
My Device: 9300
My Carrier: blackberry

Re: Reg:Listview Button Click

Hi 

    the sampe you have send also not working ,i have done ListView like 

                         ListView {
                             function myFunction()
                                 {      
                                        var poll = comments.createObject();
                                     navigationPane.push(poll);     
                                 }
                            id: public_feeds
                            verticalAlignment: VerticalAlignment.Center
                            horizontalAlignment: HorizontalAlignment.Center
                            layout: FlowListLayout {
                            }
                         
                            dataModel: publicfeeds_listview_model
                            listItemComponents: [
                                ListItemComponent {
                                    type: "header"
                                    Container {
                                        layout: StackLayout {
                                        }
                                    }
                                },
                                ListItemComponent {
                                    type: "item"
                                    Container {
                                        Container {
                                            id: container1
                                           Label {
                                                    text: ListItemData.message
                                                    multiline: true
                                                    textStyle {
                                                        base: SystemDefaults.TextStyles.BodyText
                                                        color: Color.create("#666666")
                                                    }
                                                    content {
                                                        flags: TextContentFlag.Emoticons
                                                    }
                                                }
                                                 Container {
                                                        id: button
                                                        ImageButton {
                                                            defaultImageSource: "asset:///Feeds/comment1.png"
                                                            pressedImageSource: "asset:///Feeds/comment1.png"
                                                            onClicked: {
                                                                 button.ListItem.view.myFunction();
//                                                                var commentslisting = button.ListItem.view.comments.createObject();
//                                                                button.ListItem.view.navigationPane.push(commentslisting);
                                                            }
                                                            attachedObjects: [
                                                                ComponentDefinition {
                                                                    id: comments
                                                                    source: "CommentsList.qml"
                                                                }
                                                            ]
                                                        }
                                                    }
                                             }
                                    }
                                }
                            ]
                            onTriggered: {
                                var selectedItem = dataModel.data(indexPath);
                                if (indexPath != 0) {
                                    if (selectedItem.photo_url.length > 0) {
                                        var imagepage = listof_image2.createObject();
                                        navigationPane.push(imagepage);
                                    }
                                }
                            }
                            attachedObjects: [
                                ComponentDefinition {
                                    id: listof_image2
                                    source: "ListofImages.qml"
                                }
                            ]
                        }

 Its not working any other way to implement this onClick

  thanks

Please use plain text.
Developer
jmoukel
Posts: 111
Registered: ‎07-05-2012
My Device: none
My Carrier: MOvistar

Re: Reg:Listview Button Click

Instead of using buton.ListItem.view.myFunction(); , try using container1.ListItem.view.myFunction();

Please use plain text.
Contributor
maheshkumar1990
Posts: 44
Registered: ‎01-07-2013
My Device: 9300
My Carrier: blackberry

Re: Reg:Listview Button Click

Hi,

     Do you have another solution it's not working..!!!

Thanks...

Please use plain text.
Developer
jmoukel
Posts: 111
Registered: ‎07-05-2012
My Device: none
My Carrier: MOvistar

Re: Reg:Listview Button Click

[ Edited ]

Try puting the id: container1 inside the first container (not the second) in the listItemComponent.

 

No, I don't have another one. But I use that solution all the time.

 

If that doesn't work, I'd recommend trying to see if you can do push(...) with your navigationPane from outside the ListView in that same QML file. Maybe the problem is that you cannot access those variables for some reason.

Please use plain text.
Contributor
maheshkumar1990
Posts: 44
Registered: ‎01-07-2013
My Device: 9300
My Carrier: blackberry

Re: Reg:Listview Button Click

Hi,

     i have tried alot and also as you said  it's not working can anyone send some solutions

Thanks

Please use plain text.
Contributor
maheshkumar1990
Posts: 44
Registered: ‎01-07-2013
My Device: 9300
My Carrier: blackberry

Re: Reg:Listview Button Click

Hi,

     i have tried alot and also as you said  it's not working can anyone send some solutions

Thanks

Please use plain text.