Add spacing and clicks

Our UI is coming together nicely, but the sizes of the buttons don't quite match the sizes that appear in the final app. We'll use space quotas to size controls based on the space that's available to them. We'll also add padding around the outside edge of the screen, and add handling for button clicks to change the displayed layout accordingly.

Add space quotas and padding

If you take another look at the screen shot of our finished app, you'll see that the buttons get larger from left to right. To get this arrangement, we set the following space quotas for each of the buttons in our layout:

// Layout properties for the "Stack" button
layoutProperties: StackLayoutProperties {
    spaceQuota: 3
}
// Layout properties for the "Dock" button
layoutProperties: StackLayoutProperties {
    spaceQuota: 5
}
// Layout properties for the "Absolute" button
layoutProperties: StackLayoutProperties {
    spaceQuota: 7
}

Our UI controls are also quite close to the edges of the screen. For a more comfortable look, let's add some padding to our top-level container. Padding determines how much space appears between the edges of a container and the container's child controls. We use the topPadding, bottomPadding, leftPadding, and rightPadding properties and add them to our top-level container (the container we set as the value of the  content  property at the very beginning of the tutorial).

topPadding: 10
bottomPadding: 20
leftPadding: 16
rightPadding: 16

Handle button clicks

To finish our app, we just need to connect the buttons so that the displayed layout changes when the corresponding button is clicked. You'll learn more about event handling in other tutorials, but here you'll get a taste of how to respond to simple events in QML.

Add a signal handler

Cascades uses a slots and signals model that is inherited from the underlying Qt framework. All UI controls in Cascades emit signals when particular properties change (such as size, visibility, and so on). You'll learn a lot more about signals, slots, and event handling in other tutorials, but for now, it's enough to know that when a Button  is clicked, it emits a signal called clicked(). We can respond to that event by using the onClicked signal handler.

First, we do this for the stack layout button:

// onClicked for the "Stack" button
onClicked: {
    stackLayoutContainer.visible = true
    dockLayoutContainer.visible = false
    absoluteLayoutContainer.visible = false
    layoutNameLabel.text = "Stack layout"
}

Now all we do is alter this code slightly for the other two buttons:

// onClicked for the "Dock" button
onClicked: {
    dockLayoutContainer.visible = true
    stackLayoutContainer.visible = false
    absoluteLayoutContainer.visible = false
    layoutNameLabel.text = "Dock layout"
}
// onClicked for the "Absolute" button
onClicked: {
    absoluteLayoutContainer.visible = true
    stackLayoutContainer.visible = false
    dockLayoutContainer.visible = false
    layoutNameLabel.text = "Absolute layout"
}

That's it! Build and run the application one more time to see the finished product. Click the buttons to see how the other layouts work.


Screen showing the completed Layout sample app.

Last modified: 2013-12-21

comments powered by Disqus