Tutorial: Custom picker

This tutorial shows you how to create a custom picker in Cascades. You'll create a simple application that consists of three columns that correspond to RGB color values. The first column contains the values for red, the second column contains the values for green, and the third contains the values for blue. You can scroll through each of the columns to choose a custom color and display it below the custom picker.

You will learn to:

  • Create a custom picker
  • Define picker contents using the PickerProvider class
  • Expose custom QML components
Screen showing a custom RGB picker control.

Before you begin

You should have the following things ready:

  • The BlackBerry 10 Native SDK
  • A device or simulator running BlackBerry 10.1 or later

You can click here to download the tools that you need and learn how to create, build, and run your Cascades project.

Set up your project

Before we start creating our app, create an empty project in the Momentics IDE, making sure to select the Standard empty project template. If you're not sure how to do this, take a look at Create a new project.

After you finish, a new project appears in the Project Explorer view with the name that you specified.

Several files were created automatically when you created your project. In the src folder, you'll see applicationui.cpp, appplicationui.hpp, and main.cpp. These C++ source files take care of basic app functions, such as creating the app object, starting the main event loop, and loading a QML file that represents the UI of the app.

In this tutorial, we won't go into the details of these source files. If you want to learn more about what's going on in these files, check out Create your first app.

Last modified: 2015-03-31

Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus