It seems like the browser you are using has JavaScript disabled. As a result, the site will not function properly. We really want you to enable it so you may experience our site as we intended it. If you have no idea what we are talking about or if you need help, visit http://www.enable-javascript.com×
This website uses cookies. By continuing to browse this site you are agreeing to our use of cookies. Find out more on our cookie page.×

Oops, it seems like you're using an old browser that we do not fully support. If you're able to, please upgrade your browser here.×
This website uses cookies. By continuing to browse this site you are agreeing to our use of cookies. Find out more on our cookie page.×

Drop-down menus

A DropDown allows users to select
an Option from a
drop-down list. This control consists of a title bar and an expandable list of options.
The list expands when the title bar is tapped and collapses when a user selects an
option. The size of a DropDown is affected by the screen
size of the device, as shown in the image below.

An expanded DropDown displays the title bar and a
list of options. The content of the title bar is specified using the
title property, and the
content of each Option is specified using the text, description, and imageSource properties.

If no option is selected, a collapsed DropDown
displays the title of the control.

If an option is selected, a collapsed DropDown
displays the title of the control left-aligned and
the text of the selection option right-aligned in
the title bar, and both share the available width of the title bar.
Text can be truncated if the width is smaller than is necessary to
fit the content.

The height of an expanded DropDown varies based on the
number of options and the device. An all-touch device
displays up to four options before scrolling, and a device
with a physical keyboard displays up to three options.

You can connect your custom handleValueChanged()
slot to the selectedValueChanged() signal and
respond to it accordingly. The following example uses the value of a selection
to enable or disable a ToggleButton:

#include <bb/cascades/DropDown>
#include <bb/cascades/ToggleButton>
#include <bb/cascades/Option>
//...
// Create a ToggleButton. The myToggleButton
// object is declared in the header as follows:
// ToggleButton *myToggleButton;
myToggleButton = ToggleButton::create()
.enabled(false)
// Create a DropDown with two options
DropDown *myDropDown = DropDown::create().title("DropDown")
.add(Option::create().text("Enabled").value(1))
.add(Option::create().text("Disabled").value(2));
// If any Q_ASSERT statement(s) indicate that the slot failed
// to connect to the signal, make sure you know exactly why
// this failure has happened. This error is not normal and
// will cause your app to stop working
bool connectResult;
// Since the variable is not used in the app, this line is
// added to avoid a compiler warning
Q_UNUSED(connectResult);
// Connect the selectedValueChanged() signal to the
// handleValueChanged() slot
connectResult = connect(myDropDown,
SIGNAL(selectedValueChanged(const QVariant)),
this,
SLOT(handleValueChanged(const QVariant)));
// The Q_ASSERT macro is only available in Debug builds
Q_ASSERT(connectResult);
//...
// Create the handleValueChanged() slot to capture the
// selectedValueChanged() signal emitted by the drop-down menu
void DropDownRecipe::handleValueChanged(const QVariant & selectedValue)
{
// Use an if statement to enable or disable a ToggleButton based
// on the value of the current selection
if (selectedValue == 1) {
myToggleButton->setEnabled(true);
} else {
myToggleButton->setEnabled(false);
}
}

1. Download the tools

Before you start developing, you'll need to visit the Downloads tab. Here you'll find downloads for the BlackBerry 10 Native SDK, BlackBerry 10 Device Simulator, and some other useful tools.

2. Try the sample apps

Now featuring a filter control, the Sample apps tab allows you to search for samples by name or by feature.

Select either the Core or Cascades radio buttons to display the samples relevant to you.

3. Educate yourself

The Documentation tab contains tons of examples, tutorials, and best practices to guide you along the path towards building an awesome app.

You can access all the documentation that you need in the left-hand navigation.

4. Start developing

The Reference tab is where you'll find essential details about how to use our APIs.

You can use the left-hand navigation to choose how you would like to browse the reference: by module, by topic, or alphabetically. If you have an idea of what you are looking for, start typing it in the Filter box.