1

I am having an issue with the layouts in Blackberry 10 Cascades.

I have a qml file, with the following content inside:

content: Container {
    Container {
        id: topBar
        objectName: "topBar"
        layout: DockLayout {}
        ImageButton {
            id: back
            objectName: "back"
            defaultImageSource: "asset:///images/back.png"
            onClicked: app.goBack()
            minHeight: 100
            minWidth: 100
            maxHeight: 100
            maxWidth: 100
            horizontalAlignment: HorizontalAlignment.Left
        }
        Label {
            id: heading
            objectName: "heading"
            textStyle { fontSize: FontSize.Large }
            horizontalAlignment: HorizontalAlignment.Center
        }
        ImageButton {
            id: add
            objectName: "add"
            defaultImageSource: "asset:///images/add.png"
            onClicked: app.add()
            minHeight: 100
            minWidth: 100
            maxHeight: 100
            maxWidth: 100
            horizontalAlignment: HorizontalAlignment.Right
        }
        ActivityIndicator {
            id: activityIndicator
            objectName: "activityIndicator"
            minHeight: 100
            minWidth: 100
            maxHeight: 100
            maxWidth: 100
            horizontalAlignment: HorizontalAlignment.Right
        }
    }
}

I am trying to get the back button to be on the left. The heading to be in the center, and the add button and the activity indicator to be on the right (I want the activity indicator to be on the very right, but when it is not showing - I want the add button to be on the very right).

I can't figure out why tho, these objects are all showing up on top of each other though (in the same spot).

Michael Donohue
  • 11,776
  • 5
  • 31
  • 44
user1296259
  • 521
  • 1
  • 13
  • 33

3 Answers3

1

In a dock layout elements will overlap each other. Chances are your topBar container is only taking up as much space as required to fit the largest child. Try either setting HorizontalAlignment.Fill on the topBar or set a minWidth.

Your back button and activity indicator will also overlap each other. I would put them in a horizontal stack layout so that the activity indicator is always on the right.

Your final layout might look like this:

Container {
    id: toppbar
    docklayout
    minWidth: 600
    ImageButton {
      id: back
      horizontalAlignment left
    }
    Label {
      id: heading
      horizontalAlignment center
    }
    Container {
      horizontalAlignment right
      stacklayout leftToRight
      addButton
      activity indicator
    }
}
Ergin Babani
  • 346
  • 1
  • 2
0

All good with your code, simply remove the top-level Container - it's an excessive one here, and doesn't have any layout. Your embedded one exists inside that default configured layout within the top-level container, thus, you're having all these elements stacked each on other.

So, with this modification your code will look like this

content: Container {
    id: topBar
    objectName: "topBar"
    layout: DockLayout {
    }
    ImageButton {
        id: back
        objectName: "back"
        defaultImageSource: "asset:///images/back.png"
        onClicked: app.goBack()
        minHeight: 100
        minWidth: 100
        maxHeight: 100
        maxWidth: 100
        horizontalAlignment: HorizontalAlignment.Left
    }
    Label {
        id: heading
        objectName: "heading"
        textStyle {
            fontSize: FontSize.Large
        }
        horizontalAlignment: HorizontalAlignment.Center
    }
    ImageButton {
        id: add
        objectName: "add"
        defaultImageSource: "asset:///images/add.png"
        onClicked: app.add()
        minHeight: 100
        minWidth: 100
        maxHeight: 100
        maxWidth: 100
        horizontalAlignment: HorizontalAlignment.Right
    }
    ActivityIndicator {
        id: activityIndicator
        objectName: "activityIndicator"
        minHeight: 100
        minWidth: 100
        maxHeight: 100
        maxWidth: 100
        horizontalAlignment: HorizontalAlignment.Right
    }
}
Sunseeker
  • 1,503
  • 9
  • 21
-2

In QML anchors are used for that purpose. See: http://qt-project.org/doc/qt-4.8/qml-anchor-layout.html

e.g. your Button needs something like:

anchors.left: parent.left
anchors.leftMargin: 10

You can alternatively use a Column, Row or Grid QML element. http://jryannel.wordpress.com/2010/02/19/rows-and-columns/ http://harmattan-dev.nokia.com/docs/library/html/qt4/qml-grid.html

user2230199
  • 149
  • 10