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: 148
Registered: ‎04-08-2013
My Device: Blackberry 10
My Carrier: Blackberry
Accepted Solution

pop a page on button click

In my main qml Iam having a Naviagtion pane.It pushes another Qml called detail page.I have removed the back button of the navigation pane

 

Main.qml

import bb.cascades 1.0
NavigationPane 
{
    property alias nav: navPane
    id: navPane
    onPopTransitionEnded: page.destroy()
    Page 
     {     
          Container 
             {
                background: Color.White
                ListView {
                    id: howToList
                    dataModel: XmlDataModel {
                        source: "models/data.xml"
                    }
                    layout: StackListLayout {
                    }
                    listItemComponents: [
                        ListItemComponent {
                            type: "listItem"
                            HowToDu_CustomListItem 
                            {
                                title: ListItemData.title
                            }

                        }
                    ]

                    onTriggered: {
                        var page = DetailPage.createObject();
                        navPane.push(page);
                        list1.select(indexPath)
                
                    } //on trigged
                } //list view        
             
       } //main container

    }    //page

    attachedObjects: [
        ComponentDefinition 
        {
            id:DetailPage
            source: "DetailPage.qml"
        }
    ]
    backButtonsVisible: false

}//nav
   

 

My question is:

 

In the detail page I have a button and on that button click I have to pop the main qml.

 

DetailPage.qml

 

import bb.cascades 1.0

Page {
        
            Container {

                ImageButton 
                {
                    defaultImageSource: "asset:///images/backArrow.png"
                    onClicked: 
                        {
                          mainPage.nav.pop();
                        }

                }

           }
    attachedObjects: [
        ComponentDefinition {
            id: mainPage
            source: "main.qml"
        }
    ]
}//page

 

 

I tried the above code.But its not working

 

What I have done is :

1)In the main qml created a property alias for navigationPane

2)In the detail page I have added the main.qml as attached object

3)In the detail page button click I used the below code to pop the main qml page

 

onClicked: 
                        {
                          mainPage.nav.pop();
                        } 

 

 SomeOne plz help me out

Developer
Posts: 84
Registered: ‎12-01-2012
My Device: 9790
My Carrier: Orange

Re: pop a page on button click

This line is probably wrong: onPopTransitionEnded: page.destroy()

 

There is no object with such id. The var page - is a local variable, it can not be used outside of the function.

Lublin BlackBerry Developer Group


---
If I helped you please mark my response as solution or "Like" it.
Developer
Posts: 84
Registered: ‎12-01-2012
My Device: 9790
My Carrier: Orange

Re: pop a page on button click

                    onClicked: 
                        {
                          mainPage.nav.pop();
                        }

 here you can just use:

                    onClicked: 
                        {
                          navPane.pop();
                        }

 

Lublin BlackBerry Developer Group


---
If I helped you please mark my response as solution or "Like" it.
Developer
Posts: 148
Registered: ‎04-08-2013
My Device: Blackberry 10
My Carrier: Blackberry

Re: pop a page on button click

Thanks for your reply.I have removed that code but still no change.Iam able to push the detail page from the main page.What I want is to go back from the detail page to main page on the button click of the detail page(ie,I  want to create the functionaluty that is being done by the back button the navigation pane on the button click)

 

Plz Plz help me friend

Developer
Posts: 148
Registered: ‎04-08-2013
My Device: Blackberry 10
My Carrier: Blackberry

Re: pop a page on button click

Thanks dude,That works fine
Developer
Posts: 148
Registered: ‎04-08-2013
My Device: Blackberry 10
My Carrier: Blackberry

Re: pop a page on button click

Is there any need the destroy the page before loading the other.Will the Navigation pane handles them or should we do that manually.

Highlighted
Developer
Posts: 84
Registered: ‎12-01-2012
My Device: 9790
My Carrier: Orange

Re: pop a page on button click

It depends if you will use the page in the future and how much memory does it take. You need just to make sure that you destroy the page after the push transitions ends, otherwise it can be corrupted.

Lublin BlackBerry Developer Group


---
If I helped you please mark my response as solution or "Like" it.
Developer
Posts: 84
Registered: ‎12-01-2012
My Device: 9790
My Carrier: Orange

Re: pop a page on button click

    attachedObjects: [
        ComponentDefinition {
            id: mainPage
            source: "main.qml"
        }
    ]

 This is unnecessary in DetailPage.qml

Lublin BlackBerry Developer Group


---
If I helped you please mark my response as solution or "Like" it.
Developer
Posts: 63
Registered: ‎11-12-2012
My Device: BB10 DevAlpha
My Carrier: Airtel

Re: pop a page on button click

Even I'm facing the same issue. I have a navigation page in the main.qml

 

NavigationPane {
    id: navig
    backButtonsVisible: false  
    
Page {
    Container {
ListView {
        id: myListView
        dataModel: dataModel
        
        listItemComponents: [
            ListItemComponent {
                type: "item"
        
               StandardListItem {
                    title: ListItemData.item_name
                }
            }
            ]
        onTriggered: {
            var itemSelected = dataModel.data(indexPath)
            var secondpage = secondPage.createObject();
            secondpage.itemId = itemSelected.item_id
            secondpage.itemName = itemSelected.item_name
            bucket.push(secondpage)
        }
    } // end of ListView
    
    attachedObjects: [
        GroupDataModel {
            id: dataModel
            grouping: ItemGrouping.None
        },
        DataSource {
            id: dataSource
            
            source: "sql/items.db"
            query: "select * from item order by item_id desc"
            
            onDataLoaded: {
                dataModel.insertList(data);
            }
        } end of DataSource
        
        ]
        
        onCreationCompleted: {
            dataSource.load();
        }
    }
    attachedObjects: [
        ComponentDefinition {
            id: secondPage
            source: "secondPage.qml"
        }
    ]
}
    onPopTransitionEnded: {
         page.destroy();
    } 
}

 and on second page I have an ImageButton for popping the page

import bb.cascades 1.0

Page {
    id: secondPage
    property NavigationPane navig
    property int itemId
    property string itemName
        Container {
            ImageButton {
                id: backButn
                defaultImageSource: "asset:///images/back.png"
                pressedImageSource: "asset:///images/back.png"
                onClicked: {
                    navig.pop();
                }
            } 
            
        }
        }
    
    

 But clicking on the button does not pop the page. The Push works perfectly and I can pop the page only by swiping from the left edge.

Click Accept as Solution if this post that have solved your issue(s)!
Like if you found this post useful..
Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: pop a page on button click

'navig' property on second page isn't pointing to anything.

If you remove it's declaration it will find the NavigationPane defined in parent page by it's id.

But there's even simpler method: NavigationPane is a parent of Page it contains, so you can replace "navig.pop()" line with:

secondPage.parent.pop() // secondPage.parent is it's NavigationPane

Andrey Fidrya, @zmeyc on twitter