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
Posts: 48
Registered: ‎08-07-2013
My Device: z10
My Carrier: blackberry
Accepted Solution

About Navigation pane

hi,

 

   in my app consists of four different pages,so the navigation has to take place one after the other by clicking the buttons in the pirticular page.i used navigation pane,by using it i'm able to navigate to next page,after that how can i move to another page.

 

thank you.

Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: About Navigation pane

Hi,
NavigationPane can contain many pages. You can push the next page into the same NavigationPane.

Andrey Fidrya, @zmeyc on twitter
Developer
Posts: 366
Registered: ‎07-15-2013
My Device: blackberry Z10
My Carrier: Personal

Re: About Navigation pane

The navigation pane, is for navigate with several pages , or you can put tabs with TabbedPane , it give you a tabs in the main file to navigate from other way

If you find this information useful please click like --->
@mezeitune on twitter
Contributor
Posts: 48
Registered: ‎08-07-2013
My Device: z10
My Carrier: blackberry

Re: About Navigation pane

hi 

 

    thanks for the reply,

 

        but the probelm is that the pages were in different qml files.my first page is in first.qml file which consists of a navigation pane,second.qml file has another page,third.qml has another page.so inorder to go to second page i has to click on a button on the first page,and for the third page i has to click on the button on the second page.

 

 i'm able to do this by defining all the pages in a single qml file.and pushing the pages by using the navigation pane.

but i want to push and pop the pages present in different qml files.how can i do this.please give me an example

Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: About Navigation pane

[ Edited ]

When the page is pushed into NavigationPane, the NavigationPane becomes it's parent.

 

It can be accessed like this:

 

SecondPage.qml

Page
{
  id: secondPage

  ...

  secondPage.parent.push(thirdPage) // secondPage.parent is Page's NavigationPane
}

 ThirdPage.qml 

Page
{
  id: thirdPage

  ...

  thirdPage.parent.push(fourthPage)
}

etc 

 

Also, you can access items in hierarchy by their id-s even between QML files. So, referencing the NavigationPane directly by id will most likely also work. This won't work only in some cases, for example if there are ListViews in hierarchy. I like the previous approach though, because the pages will be standalone and they can be easily rearranged.

 


Andrey Fidrya, @zmeyc on twitter
Developer
Posts: 164
Registered: ‎07-23-2013
My Device: Blackberry z10
My Carrier: Airtel

Re: About Navigation pane

Get sample app from my github samples for your query....

 

https://github.com/svmrajesh/BB-10-Cascades/tree/master/MY%20APPS/stackNavigation

 

 

 

1. main.qml: (first page)

 

import bb.cascades 1.0
 
NavigationPane {
    id: navigationPane
    backButtonsVisible: false
    peekEnabled: false
    
    
    Page {
        id: rootPage
        Container {
            background: Color.LightGray
 
            layout: DockLayout {
                
            }
            Label {
                text: "First page"
                horizontalAlignment: HorizontalAlignment.Center
                verticalAlignment: VerticalAlignment.Center
            }
        }
    
        actions: [
            ActionItem {
                title: "Next page"
                ActionBar.placement: ActionBarPlacement.OnBar
                onTriggered: {
                    var page = pageDefinition.createObject();
                    navigationPane.push(page);
                    
                }
 
                attachedObjects: ComponentDefinition {
                    id: pageDefinition
                    source: "PageTwo.qml"
                }
            }
        ]
    }
    onPopTransitionEnded: {
        page.destroy();
    }
   
 
}
 
 
 
 
 
2.second page
 
 
import bb.cascades 1.0
 
Page {
    id: pageTwo
    Container {
        background: Color.Gray
        layout: DockLayout {
 
        }
        Label {
            text: "Second page"
            horizontalAlignment: HorizontalAlignment.Center
        }
        
        
        Container {
            layout: StackLayout {
                
            }
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
 
            Button {
           
            text: qsTr("Next Page")
            imageSource: "asset:///images/picture1thumb.png"
            onClicked: {
                // show detail page when the button is clicked
                var page = getSecondPage();
                console.debug("pushing detail " + page)
                navigationPane.push(page);
            }
            property Page secondPage
            function getSecondPage() {
                if (! secondPage) {
                    secondPage = secondPageDefinition.createObject();
                }
                return secondPage;
            }
            attachedObjects: [
                ComponentDefinition {
                    id: secondPageDefinition
                    source: "PageTwoOne.qml"
                }
            ]
        }
        
        Button {
           text: "Previous Page"
           onClicked: {
               navigationPane.pop();
           }
 
        }
 
    }
}
    
    
    
    
/* ------------- Use this Code If back button visibility is "True"-----------------
  
 
    paneProperties: NavigationPaneProperties {
        
        backButton: ActionItem {
            title: "Back"
         // imageSource: "asset:///back.png"
            onTriggered: {
                navigationPane.pop();
            }
            }
    } */
 
 
 
 
 }
 
 
3. last page
 
import bb.cascades 1.0
 
Page {
    id: pageTwoone
    
        Container {
     background: Color.DarkGray
     layout: DockLayout {}
          
     Label {
            horizontalAlignment: HorizontalAlignment.Center
            text: "Last Page"
     }
    
    
     Container {
          layout: StackLayout {}
          horizontalAlignment: HorizontalAlignment.Center
          verticalAlignment: VerticalAlignment.Center
              
     
        Button {
            horizontalAlignment: HorizontalAlignment.Center
            verticalAlignment: VerticalAlignment.Center
            text: qsTr("Goto Home Page")
           
            onClicked: {
                // show detail page when the button is clicked
                navigationPane.navigateTo(rootPage);
                 }
                }
            Button {
                horizontalAlignment: HorizontalAlignment.Center
                verticalAlignment: VerticalAlignment.Center
                text: qsTr("Goto Back")
 
                onClicked: {
                    // show detail page when the button is clicked
                    navigationPane.pop();
                }
 
            }
        }
    }
}
 
 
------------ ADD More pages to navigate  using this code----------------------------
 
 
 
 

 

___________________________________________________________________________________________

*************Plese *********LIKE**** & ****ACCEPT as Solution*** If you got suggestion for your Query.

@RAJESH SVM ----- Blackberry Mobile App Developer, Blaze, India.
Contributor
Posts: 48
Registered: ‎08-07-2013
My Device: z10
My Carrier: blackberry

Re: About Navigation pane

thanks a lot. finally i'm able to do it. thank u 

Highlighted
Developer
Posts: 164
Registered: ‎07-23-2013
My Device: Blackberry z10
My Carrier: Airtel

Re: About Navigation pane

If you like my apps from github means please give ratings at top right corner... thankyou

___________________________________________________________________________________________

*************Plese *********LIKE**** & ****ACCEPT as Solution*** If you got suggestion for your Query.

@RAJESH SVM ----- Blackberry Mobile App Developer, Blaze, India.