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.×

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

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.

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.

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.

1. Choose your focus

This is the focus controller. Use this controller to choose your primary development approach (Cascades or Core).

By selecting a focus, you get to decide what content should be front and center on the site.

2. 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.

3. 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 check boxes to display the samples relevant to your focus.

4. Educate yourself

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

The documentation for your preferred focus always appears at the top of the left-hand navigation, but you can still access the rest of the documentation at the bottom.

5. 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.