Tutorial: Signals and slots

This tutorial shows you how to use signals and slots by creating an app that simulates a traffic light. The light begins in the red state, and clicking a button changes the light to green. The light remains green for ten seconds (indicated by a countdown timer), changes to yellow, and finally changes back to red.

You will learn to:

  • Respond to signals in QML using signal handlers
  • Create a custom Cascades component that uses signals
Screen showing the finished signals and slots tutorial.

Before you begin

You should have the following things ready:

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

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

Downloading the full source code

This tutorial uses a step-by-step approach to build our traffic light app from scratch. If you want to look at the complete source code for the finished app, you can download the entire project and import it into the Momentics IDE. To learn how, see Importing and exporting projects.

Download the full source code

Set up your project

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

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

We also need to import the following images:

Background image.

background.png - A textured background

Traffic light image.
traffic_light_frame.png - The frame of the traffic light
Red light image.

right_light.png - An image for the active red light

Yellow light image.

yellow_light.png - An image for the active yellow light

Green light image.

green_light.png - An image for the active green light

To import images into your project:

  1. Download the images.zip file.
  2. Extract the images folder to the project's assets folder in your workspace (for example, C:\<your_workspace>\<project_name>\assets).
  3. In the Project Explorer view, refresh your project to display the imported images.

There are several other files that were created automatically when you created your project. In the src folder, you'll see applicationui.cpp, applicationui.hpp, and main.cpp. These C++ source files take care of basic app functions, such as creating the application 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