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 pre-populated code:

// Default empty project template
import bb.cascades 1.0
 
// creates one page with a label
Page {
    Container {
        layout: DockLayout {}
        Label {
            text: qsTr("Hello World")
            textStyle.base: SystemDefaults.TextStyles.BigText
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
        }
    }
}

This code defines a simple  Label control. The qsTr() function provides support for string translation. Because we'll be creating a much more sophisticated UI, go ahead and remove the pre-populated code in this file. Make sure you keep the import statement, though, as 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 the layout that's currently displayed.

The top-level container uses a dock layout to arrange the three sub-containers. A dock layout lets you align controls at various locations in a container. We could use other approaches to create this arrangement, but we'll stick with 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. We specify that this container should appear at the top of its parent container and stretch to fill the entire width. We also set the height of the container by using the preferredHeight property.

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

You'll 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 will hold 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"
         
        // 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
    preferredHeight: 100

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 will display. Later on in the tutorial, we'll 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: 2013-12-21

comments powered by Disqus