Search code examples
qmlblackberry-10

blackberry 10 global tab bar application(global TabbedPane)


I am creating a application which has a global tab bar ."Actionbar" should have 5 buttons and should be seen on every screen. Is there any way to place 5 tabs on "ActionBar" at one moment without help of "tabbed menu" ? And how I can make this tabbed-pane global? because latter in the app I use navigationPane and it replaces tabbedpane. I want the tabbedPane bar to be visible on all screens

UPDATE :::: I tried sheets but tabs are dissappearing

 import bb.cascades 1.0

TabbedPane {
    showTabsOnActionBar: true
    Tab {

        Page {
            titleBar: TitleBar {
                title: "1"
            }
            attachedObjects: [
                ComponentDefinition {
                    id: mySheet
                    source: "sheets.qml"
                }
            ]
            Button {
                onClicked: {
                    var sheet = mySheet.createObject();
                    sheet.open();
                }
                text: "sheet"
            }
        }
    }
    Tab {
    }
}

and my sheets.qml file

import bb.cascades 1.0

Sheet {
    id: mySheet
    content: Page {
        Container {
            Label {
                text: "Hi then"
            }
            Button {
                text: "close"
                onClicked: {
                    onClicked: mySheet.close()
                }
            }
        }
    }
}

Solution

  • "And how I can make this tabbedpane global? because latter in the app I use navigationPane and it replaces tabbedpane."

    If I understand your question correctly, you want there to always be a tabbedpane instead of it being replaced by the navigationpane later.

    What you need to to is have your tabbedpane as the main object in your qml. The navigationpane should be inside each tab, so basically 5 tabs means you would have 5 x navigation panes.

    When you need to push a page, push it to the relevant tab's navigationpane.

    UPDATE: Sheets allow you to push a page ontop of the tabbedpane. Here is an example:

    Create a qml file with the root item being a sheet, e.g.

    Sheet {
        content: Page {
            Container {
                ... insert content
            }
        }
    }
    

    Then in your tabbedpane you would do the following:

    inside attachedObjects

    ComponentDefinition {
        id: sheetDefinition
        source: "mypage.qml"
    } 
    

    in your function/onclick/etc:

    var sheet = sheetDefinition.createObject;
    sheet.open();
    

    UPDATE 2:

    To push pages within a tabbedpane do something similar to the following:

    TabbedPane {
        Tab {
            NavigationPane {
                id: tab1Nav
                Page {
    
                }
            } 
        }
    }
    

    Then to push a page use

    tab1Nav.push(page);
    

    Or replace the content of the navigationpane to keep the tabs in place.