Tutorial: Layouts

This tutorial shows you how to use the three main types of layouts in Cascades: StackLayout, DockLayout, and AbsoluteLayout. You can create a simple app using QML that shows each type of layout and lets you change which layout is shown by clicking a few buttons at the bottom of the screen.

You will learn to:

  • Create three types of layouts
  • Set layout properties
  • Specify space quotas
  • Handle basic user input
Screen showing the Layout sample app.

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 layout 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 for BlackBerry. To learn how, see Importing and exporting projects.

Download the full source code

Set up your project

Before we build the UI for our app, create an empty Cascades project in the Momentics IDE using the Standard empty project template. To learn more, see 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 image:

An image of a cow.
cow.png  - An image of a cow

To import images into your project:

  1. Download the images.zip file.
  2. Extract the images folder into the assets folder of the project that you created.

To see the new image in the images folder of the project, refresh the Project Explorer view. On the File menu, click Refresh, or right-click the project and click Refresh.

Several files were created automatically when you created your project. In the src folder, you 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 don'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