Create the overall layout

Now that we've set up our project, we can start creating our UI.

Create the top-level container

Open the main.qml file, which is located in the assets folder of the project. This file contains all of the QML code for the UI of our app.

At the moment, the file contains a bit of prepopulated code:

import bb.cascades 1.4

Page {
    Container {
        Label {
            // Localized text with the dynamic translation and locale updates support
            text: qsTr("Hello World") + Retranslate.onLocaleOrLanguageChanged
            textStyle.base: SystemDefaults.TextStyles.BigText

This code defines a simple  Label control. The qsTr() function provides support for string translation. Because we are creating a much more sophisticated UI, go ahead and remove the prepopulated code in this file. Make sure that you keep the import statement, though, because this statement allows us to use Cascades elements and controls in our app.

The UI of our finished app consists of the following four containers:

Diagram showing the structure of the Layout sample app.

The upper container holds a label that identifies the current layout, which is displayed in the middle container. The lower container holds buttons that change which layout to display.

The top-level container uses a dock layout to arrange the three subcontainers. A dock layout lets you align controls at various locations in a container. We could use other approaches to create this arrangement, but we chose this one for this tutorial.

In main.qml, we start by creating a  Page element to hold all of the content of our app. Next, we create the top-level container for the controls in our UI and specify that this container should use a dock layout by using the  layout property. We also give this container a background color (dark gray) by using the  background property.

Page {
    content: Container {
        layout: DockLayout {}
        background: Color.create(0.2, 0.2, 0.2)

Create the upper container

Next, we add a container that represents the upper section of our UI to our top-level container. We specify that this container should appear at the top of its parent container and stretch to fill the entire width.

Container {
    horizontalAlignment: HorizontalAlignment.Fill
    verticalAlignment: VerticalAlignment.Top

Notice that we haven't set the layout property for this container. If you don't specify a layout, a container uses a stack layout that positions child controls on top of each other, from top to bottom. Because this container holds only a single control (a Label with the name of the current layout), this behavior is fine for our purposes.

Inside this container, we add a Label control to display the name of the current layout. We need to identify this control by using the id property so that we can refer to it later and change its text when the current layout changes.

    Label {
        id: layoutNameLabel
        text: "Stack layout"
        horizontalAlignment: HorizontalAlignment.Center
        // Apply a text style to create large, light gray text
        textStyle {
            base: SystemDefaults.TextStyles.BigText
            color: Color.Gray
} // end of upper section Container

Create the lower container

We now add a container that represents the lower section containing our buttons. We want the buttons to appear next to each other horizontally, so we use a stack layout with a left-to-right layout direction. We also specify that this container should be aligned with the bottom of its parent container and stretch to fill the entire width.

Container {
    layout: StackLayout {
        orientation: LayoutOrientation.LeftToRight
    horizontalAlignment: HorizontalAlignment.Fill
    verticalAlignment: VerticalAlignment.Bottom

To finish setting up this part of our overall layout, we add three buttons to the lower container. Each button corresponds to one of the three layout types that our app displays. Later on in the tutorial, we change some properties of these buttons, adding margins and space quota values to achieve the look that you see in the finished app.

            Button {
                id: stackLayoutButton
                text: "Stack"
            Button {
                id: dockLayoutButton
                text: "Dock"
            Button {
                id: absoluteLayoutButton
                text: "Absolute"
        } // end of lower section Container
    } // end of top-level Container
} // end of Page

Last modified: 2014-12-04

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

comments powered by Disqus