CODEWITHSUNDEEP
qmlblackberry-10blackberry-cascadesdocklayoutpanel
Suresh Basina
Suresh Basina

Reputation: 185

Layouts in blackberry 10 using qml

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

enter image description here

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.

Upvotes: 0

Views: 670

Answers (1)

Sunseeker
Sunseeker

Reputation: 1513

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.

Upvotes: 2

Related Questions