Layouts in blackberry 10 using qml

Question

I'm learning Blackberry 10. I want to design a page in qml for balckberry 10 like below.

I didn't understand the layouts in qml. I want the layouts with specific width and height and with some alignments.

Could you please provide me the source code in qml for the below page.

Answer 1

Here is the layout you're requesting. Of course, you need to provide your own assets for ImageView, ImageButton etc.

import bb.cascades 1.0

Page {
    // root
    Container {
        //[0]
        Container {
            maxHeight: 300
            minHeight: maxHeight
            layout: StackLayout {
                orientation: LayoutOrientation.LeftToRight
            }
            ImageView {
            }
            ImageView {
            }
            ImageView {
            }
        } //[0]

        // [1]
        Container {
            maxHeight: 150
            minHeight: maxHeight
            layout: StackLayout {
                orientation: LayoutOrientation.LeftToRight
            }
            Label {
                text: "Label"   
            }
            Button {
                text: "Button 1"
            }
            Button {
                text: "Button 2"
            }
        } // [1]

        // [2]
        Container {
            maxHeight: 600
            minHeight: maxHeight
            horizontalAlignment: HorizontalAlignment.Fill
            // [2-1]
            Container {
                layout: StackLayout {
                    orientation: LayoutOrientation.LeftToRight
                }
                ImageButton {
                }
                ImageButton {
                }
                ImageButton {
                }
            } // [2-1]

            // [2-2]
            Container {
                layout: StackLayout {
                    orientation: LayoutOrientation.LeftToRight
                }
                ImageButton {
                }
                ImageButton {
                }
                ImageButton {
                }
            } // [2-2]

            // [2-3]
            Container {
                horizontalAlignment: HorizontalAlignment.Fill
                layout: DockLayout {
                }
                Button {
                    horizontalAlignment: HorizontalAlignment.Right
                    text: "Button 3"
                }
            } // [2-3]
        } // [2]

        // [3]
        Container {
            maxHeight: 150
            minHeight: maxHeight
            layout: StackLayout {
                orientation: LayoutOrientation.LeftToRight
            }
            TextArea {
                text: "Text Box"
            }
            ImageView {
            }
        } // [3]
    } // root
}

Also, if you want to have different relative sizes of widgets and their position in respect to each other within the same StackLayout, I'd advise to play around StackLayoutProperties in that case.