Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Developer
Posts: 63
Registered: ‎12-16-2011
My Device: Red 10
My Carrier: Mobifone
Accepted Solution

UI design with cascade: How to make 2 controls arranged in one line?

Dear all

 

Using cascade I can easily drag/drop the control into qml definition and can preview it visually. But it seem to draw the controls row by row. How to make the controls position absolutely  in one line?

Regular Contributor
Posts: 54
Registered: ‎07-15-2010
My Device: Not Specified

Re: UI design with cascade: How to make 2 controls arranged in one line?

In this case you should use the AbsoluteLayout as the layout for this Container, but note that you have to specify the coordinates for each control. Check the example below to put two Buttons on the same line:

 

import bb.cascades 1.0
import bb.system 1.0

Page {
    Container {
        layout: AbsoluteLayout {}
	        
            Button {
                id: btnConn
	        objectName: "btnConn"
	        text: "Connect"
	        preferredWidth: 330
                layoutProperties: AbsoluteLayoutProperties {
                    positionX: 44
                    positionY: 260
                }
	    }
	        
	    Button {
	        id: btnDisc
	        objectName: "btnDisc"
	        text: "Disconnect"
	        preferredWidth: 330
                layoutProperties: AbsoluteLayoutProperties {
                    positionX: 394
                    positionY: 260
                }
	    }
    }
}

 

I hope this helps.

Highlighted
Developer
Posts: 571
Registered: ‎04-11-2009
My Device: BB 10 Dev Alpha

Re: UI design with cascade: How to make 2 controls arranged in one line?

Hi,

 

Just change Orientation of your Container.

 

Container {
    layout: StackLayout {
        orientation: LayoutOrientation.LeftToRight
    }
}

 As Orientation is TopToBottom, you see them draw row-by-row.

Regards,
Kanak Sony
------------------------------------------------------------------------------------------
http://dodevelopnshare.wordpress.com/ | http://www.linkedin.com/profile/view?id=188131481&trk=tab_pro