SettingsActionItem in a TabbedPane

Hey guys,.

I use the standard weatherguesser example TabbedPane. I'm trying to get a follow-up measure to push a page, but since it's a TabbedPane, pages cannot be pushed. However, I know that it is possible that the Google Talk application does it somehow. I was wondering if someone could help point me in the right direction here.

Here is an excerpt of the relevant code:

TabbedPane {
    id: mainTab
    showTabsOnActionBar: true

    // The home weather page that the user can select which city that they want to show
    // here by long pressing a city in the list and setting it as home.
    Tab {
        title: "Home"
        imageSource: "asset:///images/menuicons/icon_home.png"
        HomePage {
            id: homeCityPage

            // The data model and the city property of the home weather is kept in the
            // _homeModel which is created and bound in C++.
            weatherData: _homeModel;
            city: _homeModel.city;
        }
    }

    attachedObjects: [
        ComponentDefinition {
            id: moreInfoPageDefinition
            source: "MoreInfoPage.qml"
        },
    ]

    Menu.definition: MenuDefinition {
        // Add a Help action
        helpAction: HelpActionItem {
        }

        // Add a Settings action
        settingsAction: SettingsActionItem {
            onTriggered: {
                var moreInfoPage = moreInfoPageDefinition.createObject();
                mainTab.push(moreInfoPage);
            }
        }
    }
}// TabbedPane

You don't actually push the page in the TabbedPane, but make the Page you decide to display in a given tab be a NavigationPane rather than a mere Page, and then you can do the things usual push(), at least on this tab.

If you have multiple tabs and don't like the idea of making each one a NavigationPane, perhaps you need to change the approach so that each fact tab refers to a single NavigationPane, and when you change the active tab it does not actually change the activePane. The way to do this is documented in the docs of TabbedPane. It is not very difficult, but not I would call it trivial.

Tags: BlackBerry Developers

Similar Questions

SettingsActionItem / NavigationPane in TabbedPane initialization

I'm having a problem to SettingsActionItem to work properly with dynamic creation of NavigationPanes located in a TabbedPane.

The problem is that when I run the app, I create the first NavigationPane tab to the onCreationCompleted signal. If I then try to access the SettingsActionItem, I can't push more pages on the settings page.

If I select another tab, I can push more pages on the settings page, even when I return to the first who would work the first time. There must be something with the initialization of the first NavigationPane.

import bb.cascades 1.0

// Include asset folders
import "folder1"
import "folder2"
import "folder3"

TabbedPane {
    id: tabbedPane
    showTabsOnActionBar: false

    // Set to first tab id

    property NavigationPane currentNavigationPane: oneNavPaneObject

    property OneNavPane oneNavPaneObject
    property TwoNavPane twoNavPaneObject
    property ThreeNavPane threeNavPaneObject

    // Attached Objects

    attachedObjects: [
        ComponentDefinition {
            id: settingsListPage
            source: "SettingsListPage.qml"
        },
        Sheet{
            id: infoSheet
            InfoPage {
                id: infoPage
                onDone: {
                    infoSheet.close();
                }
            }
        },
        ComponentDefinition {
            id: oneNavPaneDefinition
            OneNavPane { }
        },
        ComponentDefinition {
            id: twoNavPaneDefinition
            TwoNavPane { }
        },
        ComponentDefinition {
            id: threeNavPaneDefinition
            ThreeNavPane { }
        }
    ]

    // Application Menu

    Menu.definition: MenuDefinition {
        id: menu
        actions: [
            ActionItem {
                title: "Info"
                imageSource: "icons/info.png"
                onTriggered: {
                    // For InfoPage, we will use Sheet
                    infoSheet.open();
                }
            }
        ]
        settingsAction: SettingsActionItem {
            imageSource: "icons/settings.png"
            onTriggered: {
                // For Settings, we will use NavigationPane
                var settingsListPageObj = settingsListPage.createObject();
                Application.menuEnabled = false;
                currentNavigationPane.push(settingsListPageObj);
            }
        }
    } 

    // Tabs

    Tab {
        id: oneTab
        title: qsTr("One")
        imageSource: "icons/one.png"
        onTriggered: {
            oneNavPaneObject = oneNavPaneDefinition.createObject()
            currentNavigationPane = oneNavPaneObject
            oneTab.content = oneNavPaneObject
        }
    }
    Tab {
        id: twoTab
        title: qsTr("Two")
        imageSource: "icons/two.png"
        onTriggered: {
            twoNavPaneObject = twoNavPaneDefinition.createObject()
            currentNavigationPane = twoNavPaneObject
            twoTab.content = twoNavPaneObject
        }
    }
    Tab {
        id: threeTab
        title: qsTr("Three")
        imageSource: "icons/three.png"
        onTriggered: {
            threeNavPaneObject = threeNavPaneDefinition.createObject()
            currentNavigationPane = threeNavPaneObject
            threeTab.content = threeNavPaneObject
        }
    }
    onCreationCompleted: {
        oneNavPaneObject = oneNavPaneDefinition.createObject()
        currentNavigationPane = oneNavPaneObject
        oneTab.content = oneNavPaneObject
    }
}

Solved: Solution was to define the active tab.

    onCreationCompleted: {
        oneNavPaneObject = oneNavPaneDefinition.createObject()
        currentNavigationPane = oneNavPaneObject
        oneTab.content = oneNavPaneObject
        tabbedPane.activeTab = oneTab
    }

Make a tab of the ActionItem Menu TabbedPane

Hello! I'm creating an application with three tabs. I want the fourth tab at ActionItem Menu which will stocks based on which tab user is in. Is there a way I can code it. My current code is given below

import bb.cascades 1.2

TabbedPane {}

showTabsOnActionBar: true

First tab

Tab {}

{Page}

{Of container

topPadding: 30.0

leftPadding: 20.0

rightPadding: 20.0

TextField {}

onTextChanging: {}

}

}

TextArea {}

}

}

}

}

End of the first tab

Second tab

Tab {}

{Page}

{Of container

}

}

}

End of the second tab

Third tab

Tab {}

{Page}

{Of container

}

}

}

End of the third tab

/ * Fourth tab * /.

Tab {}

Title: "Action Menu".

imageSource: "asset:///icons/ic_overflow_action.png."

{Page}

Menu.Definition: MenuDefinition {}

settingsAction: {SettingsActionItem}

onTriggered: {}

}

actions:]

{ActionItem}

ID: action1

Title: "myActionTitle".

ActionBar.placement: ActionBarPlacement.OnBar

}

]

}

}

}

/ * End of fourth tab * /.

}

Got the answer. So instead of having the fourth tab, I have stock in the tab page... The code will be

import bb.cascades 1.2

TabbedPane {}

showTabsOnActionBar: true

First tab

Tab {}

{Page}

actions:]

{ActionItem}

Title: "Action 1".

ActionBar.placement: ActionBarPlacement.OnBar

onTriggered: {}

MyLabel.set_Text = "Selected 1 Action!"

}

},

{ActionItem}

Title: 'Action 2 '.

ActionBar.placement: ActionBarPlacement.OnBar

onTriggered: {}

MyLabel.set_Text = "Action selected 2!"

}

}

]

{Of container

topPadding: 30.0

leftPadding: 20.0

rightPadding: 20.0

TextField {}

onTextChanging: {}

}

}

TextArea {}

}

}

}

}

End of the first tab

Second tab

Tab {}

{Page}

{Of container

}

}

}

End of the second tab

Third tab

Tab {}

{Page}

{Of container

}

}

}

End of the third tab

}

In the root of TabbedPane NavigationPane

Hi all

I have a TabbedPane and then a menu with a SettingsActionItem. When this settings button fires I want to push a page that contains the parameters to this subject, and then I can click back to return to tabs.
```
import bb.cascades 1.0

TabbedPane {
    Menu.definition: MenuDefinition {
        settingsAction: SettingsActionItem {
            onTriggered: {
                var page = setingsView.createObject();
                navigationPane.push(page);
            }
            attachedObjects: ComponentDefinition {
                id: settingsView
                source: "SettingsView.qml"
            }
        }
    }
    Tab {
        tite: "Tab1"
        NavigationPane {
            id: navigationPane
            Page {
                 //etc.....
            }
        }    }}
```
However, the problem is that there is no navigation pane to push the new page. We cannot put a NavigationPane under the TabbedPane, but we can put it in a tab of a TabbedPane.

So, how can I go all by pushing a new page?

Thank you!

[UPDATED ABOVE CODE]

I got it work using files separated such as:

hand. QML
```
TabbedPane {
    id: newsPane

 Tab{
     title: ""
        TabOne {
            }
}
Tab{
    title: ""
       TabTwo {
           }
    }
Tab{
    title: ""
       TabThree {
           }
    }
Tab{
    title: ""
       TabFour {
           }
    }        

}
```
Then, he...

TabOne.qml, TabTwo.qml, TabThree.qml and TabFour.qml:
```
NavigationPane {
    Page {
       ....
       }
   }
```
And it has an a NavigationPane feel TabbedPane when I can push to a page within the NavigationPane and action bar has more tabs, rather it changes the back button. Can be illustrated in this app: http://appworld.blackberry.com/webstore/content/20197455/?lang=en (I wrote the application for OnlineTobago)

So as much as your page 'Settings', why not use a spreadsheet? This is exactly what a spreadsheet is intended, something that breaks the normal flow of navigation. And it can be accessed via the system menu of any tab, if defined in the main.qml and using the property alias you can control the id defined in TabOne.qml, TabTwo.qml, etc. I have a sample where I do it too: http://bbcascades.com/index.php/tutorial-list/50-persistence-of-cascades-memory

I hope this helps.

TabbedPane NavigationPane and return

Hi all

I am currently working on an application that has a TabbedPane as root control, one of the tabs has a grid of buttons which, once clicked will be display a NavigationPanel which will allow the user to scroll through the different pages.

The problem I have is how to return to the TabbedPane, once I'm done with the NavigationPane. Is the closest I have set up an action close in the action menu that displays the last page, then tries to restore the tabs panel display using the "Application::instance()-> setScene (root);", unfortunately, this causes app to freeze.

Ideally, I would go back to the TabbedPane using the default back button on the first page, but it seems to be disabled, adding that a custom button also fails IE does not appear.

So I was wondering if I'm missing something, IE the TabbedPane need to recreate?

Thanks for any help, how to integrate the different controls seems a little light on documentation.

Thanks and greetings

James

You don't need to return the pane tabs - use the following structure:
```
TabbedPane {

  Tab {
    id: tab1
    title: "First Tab"    NavigationPane {
      id: nav1

      Page {        id: page1
        /* put your buttons here */
      }      onPopTransitionEnded: { page.destroy(); }
    }  }

  Tab {
    id: tab2
  }
}
```
The structure above would output a blank page in your first tab. There will be no back along the action bar button, and the action bar itself will be invisible unless you put some ActionItems in there. Put your buttons on this first page (put it in a separate QML file so that your main.qml is sharper).

When you press a button on your home page (page1), pushing an extra page for 'nav1' it will be pushed ontop of page1 - and you'll get a back button this time. You have no need to do something to get back to the basic page, except by pressing the back button. When the top of the page gets jumped, you will automatically return to the base of the base. Be sure to destroy the pages you create in the onPopTransitionEnded handler.

Cannot show a TabbedPane pushing the NavigationPane

I made a simple sample of TabbedPane. But it is strange that the TabbedPane screen could not shown after the NavigationPane shoot, while the TabbedPane screen showed the newspaper when onCreationCompleted successfully.

Is anybody know what is wrong with my code? Thank you very much.

hand. QML

NavigationPane {    id: nav    Page {        Container {              ...              onTriggered: {
                   var page = tabbedPage.createObject();
                  nav.push(page);
              }              ...

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

tabbedPage.qml

// Tabbed Pane project template
import bb.cascades 1.0

TabbedPane {
    showTabsOnActionBar: true
    Tab {
        title: qsTr("ABC")
        Page {
            id: tab1
            Container {
                Label {
                    text: "Text ABC"
                }
            }
        }
    }
    Tab {
        title: qsTr("123")
        Page {
            id: tab2
            Container {
                Label {
                    text: "Text 123"
                }
            }
        }
    }
    onCreationCompleted: {
        // this slot is called when declarative scene is created
        // write post creation initialization here
        console.log("TabbedPane - onCreationCompleted()")
    }
}

It is not possible to put a tabbedpane in a navigationpane. Go the other way. Have the TabbedPane as root your element

How to push a new page in TabbedPane?

I use a TabbedPane and need to open a new Page, but it doesn't seem to be a function push() for TabbedPane.

I know that I can open a new leaf, but I don't want to use a spreadsheet for this case, I need a new page (the kind that scrolls from the right).
Any suggestions?

Put a navigation within a tab pane.

Tab {
        NavigationPane {
            backButtonsVisible: false
            peekEnabled: true
            id: navInTab
            Page {
                id: tab3
                Container {
                }
            }
        }
}

then attach the page you want to push on one attachedObject

attachedObjects: [
                Page {
                    id: pushedPage
                    content: Container {
                    }
                }
]

Then push at any time.

navInTab.push(pushedPage);

TitleBar in TabbedPane?

Hello, everyone.

I had trouble with the addition of a title bar in TabbedPane. Is it still possible? I want it so when you click on each tab and the title bar appears showing the location.

Here is my code so far:

TabbedPane {
    showTabsOnActionBar: true

    Tab { //First tab
        // Localized text with the dynamic translation and locale updates support
        title: qsTr("PS4") + Retranslate.onLocaleOrLanguageChanged

    } //End of first tab
    Tab { //Second tab
        title: qsTr("XBOX 1") + Retranslate.onLocaleOrLanguageChanged
        Page {
            Container {
                Label {
                    text: qsTr("Xbox 1") + Retranslate.onLocaleOrLanguageChanged
                }
            }
        }
    }
    Tab {
        title: qsTr("Join") + Retranslate.onLocaleOrLanguageChanged
        Page {
            Container {
                Label {
                    text: qsTr("Join") + Retranslate.onLocaleOrLanguageChanged
                }
            }
        }
    } //End of third tab
    Tab {
        title: qsTr("News") + Retranslate.onLocaleOrLanguageChanged
        delegateActivationPolicy: TabDelegateActivationPolicy.Default
        Page {
            Container {
                Label {
                    text: qsTr("News") + Retranslate.onLocaleOrLanguageChanged
                }

            }
        }
    } //End of forth tab
    Tab {
        title: qsTr("Images") + Retranslate.onLocaleOrLanguageChanged
        Page {
            Container {
                Label {
                    text: qsTr("Images") + Retranslate.onLocaleOrLanguageChanged
                }
            }
        }
    } //End of fithtab
}

create a title for your tabs Pages bars

Back on TabbedPane button

Am wrong me or is the button back on the TabbedPane not allowed?

If you push a TabbedPane for a NavigationPane then the back button appears on the right side instead, and the entire lower bar is really ugly.

If this is intentional, then I would like to hear why. In my opinion there is no good explanation for this. It is not uncommon to push a tabbed view into a pile and want to continue using the same mechanisms of navigation as before (so show the back button in the lower left corner).

EDIT: I have never actually seen the overlow tab button, but it is possible tha this button appears on the left side? Then it would explain why the back button is not allowed on TabbedPanes - but still... not a good reason to break with the lower left button "back" navigation style

Not quite sure what you're trying to do here - is it possible to add some code snippets to your ad so that I can try and recreate the question

Thank you

Graham

TabbedPane - sending of property value when the new tab is selected

Hi just designed tutorial, I have two tabs: vegetables and fruits.

The two tabs will use the same qml file (inside is a unique list) but of course will use different DataModel.

So, I set up a property for the DataModel source and place it when the current tab changes,

Here's my simplified code:

//main.qml
TabbedPane{
    Tab{
        title: "Veggie"
        MyNextPage{}
    }
    Tab{
        title: "Fruit"
        MyNextPage{}
    }
    //Looks like here's the problem
    onActiveTabChanged:{
        var page = myComponentDefinition.createObject();
        if(activeTab.title == "Veggie")
            page.dataModelSource = "models/veggie.xml";
        else{
            page.dataModelSource = "models/fruit.xml";
        }
    }

    attachedObjects: [
        ComponentDefinition {
            id: myComponentDefinition
            source: "MyNextPage.qml"
        }
    ]
}

//MyNextPage.qml
Page{
    property alias dataModelSource: myListView.dataModel.source
    Content{
        ListView{
            id: myListView
            layout: ...
            dataModel: XmlDataModel{
                source: "models/veggie.xml"
            }
        }
    }
}

But he blocks my request. I don't know about works like that of property. Anyway the solution or alternative to send a value to another page?

Thanks before

It's easier if you do not attach the page, as follows:

//MyNextPage.qml
Page{
    property alias dataSource: dataModel.source
    Content{
        ListView{
            id: myListView
            layout: ...
            dataModel: XmlDataModel{
                id : dataModel
                //source: "models/veggie.xml"
            }
        }
    }
}

and then in your tabbedpane

TabbedPane{
    Tab{
        title: "Veggie"
        MyNextPage{
dataSource : "models/veggie.xml";
}
    }
    Tab{
        title: "Fruit"
        MyNextPage{
    dataSource : "models/fruit.xml";
}
    }
}

TabbedPane question

Easy and probably + 1 for someone out there, but what I can trigger the first time my application on the first tab start?

I mean, when my first app I need to call a function in C++ to run something, the other that I can use the onTriggered: {}. The first tab is not raised I think it's just selected by default.

Thank you

Ok. I see. The onCreationCompleted must be placed outside the tab, but within TabbedPane.

If you want to load data for any tab, you can code a javascript function in this tab and call this function in the onCreationCompleted. Say,
```
TabbedPane {
    Tab {
        TabABC{
            id: tabxxx
        }
    }
    onCreationCompleted: {
        tabxxx.reloadData();
    }
}
```

How to report a TabbedPane page has been clicked?

If I create a TabbedPane, how I run a function when a page is changed?

https://developer.BlackBerry.com/Cascades/reference/bb__cascades__tabbedpane.html#activetabpanechang...

This is the signal you want to fix a cleft for (which may in turn, call the function to run, or that either function). If you do not know how, please visit these links:

https://developer.BlackBerry.com/Cascades/documentation/UI/signals_slots/index.html

https://developer.BlackBerry.com/Cascades/documentation/UI/JavaScript/index.html

TabbedPane - select a tab programmatically?

Hello

I was wondering how do you choose by program a tab in the example below. For example I want to select the tab kittens at the start instead of having the first tab is selected.

I can use the kittens.triggered () command, but the graph shows always the first tab selected.

Thank you!

Default empty project template
import bb.cascades 1.0

create a page with a label
TabbedPane {}
showTabsOnActionBar: false
activePane: Page {}
{Label
ID: label
text: ' How do you like more, kittens or puppies?
}
}

Tab {}

ID: puppies
Title: "puppies".
onTriggered: label.text = "I love puppies!
}

Tab {}

ID: kittens
Title: "kittens".
onTriggered: label.text = "I love kittens!
}
}

Hello
```
TabbedPane {
    onCreationCompleted: {
        activeTab = kittens
    }
```
UPD: fixed. Thank you, Pierre.

10.3.1 Classic Crash: sheet w TabbedPane

It is not the usual way, but nin one of my apps, I had to implent a TabbedPane level 2

TabbedPane

rootPane

Tab

openSheet

Sheet

TabbedPane

works well on 10.2 and 10.3.0 Passport

but crashes on 10.3.1.747 / 10.3.1.1154

something like

end code SIGSEGV = 1 fltno = 11 ip=143866dc(/base/usr/lib/libbbcascades.so.1@_ZN35IQNXWebCompositingMessageLoopClientD0Ev+0x59b97) mapaddr = 003706dc. REF = 000001 has 8 bdslot = 1

found a solution: see response

workaround on 10.3.1 Classic:

Use a QTimer with 30ms before you instantiate the TabbedPane inside the sheet
```
Sheet {
    id: dataEntrySheet
    onClosed: {
        // ....
    }
    attachedObjects: [
        DataEntryTabbedPane {
            id: tabbedPane
        },
        QTimer {
            id: startupDelayedTimer
            interval: 30
            singleShot: true
            onTimeout: {
                dataEntrySheet.setContent(tabbedPane)
            }
        }
    ]
    Page {
        // DUMMY
    }

    onCreationCompleted: {
        startupDelayedTimer.start()
    }
}
```
Perhaps there are similar situations and it helps you to deal with

New screen push within TabbedPane QML

TabbedPane {
    id: tabbedPane
    showTabsOnActionBar: true
    attachedObjects: ComponentDefinition {
        id: pageDefinition
        source: "newpage.qml"
    }
    Tab {
        title: qsTr("Tab1")
        Page {
            id: tab1
            actions: [
                // define the actions for first tab here
                ActionItem {
                    title: qsTr("New")
                    onTriggered: {
                        var page = pageDefinition.createObject();
                        navigationPane.push(page);
                    }
                }
            ]
            Container {
                // define tab content here

            }
        }
    }
    onCreationCompleted: {
        // this slot is called when declarative scene is created
        // write post creation initialization here
        console.log("TabbedPane - onCreationCompleted()")

        // enable layout to adapt to the device rotation
        // don't forget to enable screen rotation in bar-bescriptor.xml (Application->Orientation->Auto-orient)
        OrientationSupport.supportedDisplayOrientation = SupportedDisplayOrientation.All;
    }
}

How can I push another page QML a TabbedPane? Currently, nothing happens when I invoke the action item.

Hello

NavigationPane definition is missing.

Something like this should work:

    Tab {
        title: qsTr("Tab1")
        NavigationPane {
          id: navigationPane1          onPopTransitionEnded: { page.destroy(); }
          Page {
              id: tab1              ...

...

var page = pageDefinition.createObject();
navigationPane1.push(page);

SettingsActionItem in a TabbedPane

Similar Questions

Maybe you are looking for