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: 139
Registered: ‎05-24-2011
My Device: Z30 running 10.2 and Playbook 4GLTE running OS2.1
My Carrier: rogers

noob question

hey gang,

 

I'm trying to structure my UI, and I have a really dumb question, but I can't figure it out.

 

can you have more than 3 containers on a Page?  the reason i ask is that the veritcalAlignment property only allows .Top, .Bottom, .Center.  So what if i need 4?  or 5?

 

my Page is pretty simple... I just want to divide the screen into 4 sections, each with a nice-sliced border... 

 

I'm sure i'm just really dumb.

 

// Navigation pane project template
import bb.cascades 1.0

NavigationPane {
    id: navigationPane
    Page {
        id: mainPage
        // page with a picture thumbnail
        Container {
            id: mainContainer
            background: Color.Gray
            topPadding: 30
            leftPadding: 30
            rightPadding: 30
            bottomPadding: 30
            horizontalAlignment: HorizontalAlignment.Fill
            verticalAlignment: VerticalAlignment.Fill
            layout: DockLayout {}
                ImageView {
                    imageSource: "asset:///images/black-border.amd"
                    opacity: 0.7
                    horizontalAlignment: HorizontalAlignment.Fill
                    verticalAlignment: VerticalAlignment.Fill
                }            
            Container {
                id: checkBoxContainer
                background: Color.White
                layout: StackLayout {}
                horizontalAlignment: HorizontalAlignment.Fill
                verticalAlignment: VerticalAlignment.Top
                topPadding: 30
                bottomPadding: 30
                leftPadding: 30
                rightPadding: 30
            CheckBox {
                id: btCheck
                checked: false
                text: "check one"
                verticalAlignment: VerticalAlignment.Top
            }
            CheckBox {
                id: cellCheck
                checked: false
                text: "check two"
                verticalAlignment: VerticalAlignment.Center
                }
            CheckBox {
                id: wifiCheck
                checked: true
                text: "check three"
                enabled: false
                verticalAlignment: VerticalAlignment.Bottom
                }
            } // check box container
            
            Container {
                id: dividerContainer
                verticalAlignment: VerticalAlignment.Center
                Divider {}
            }
            Container {
                id: labelContainer
                verticalAlignment: VerticalAlignment.Bottom
                horizontalAlignment: HorizontalAlignment.Fill
                layout: StackLayout {}
                background: Color.White
                topPadding: 30
                bottomPadding: 30
                leftPadding: 30
                rightPadding: 30
	            LabelLabel {
	                id: label1
	                label: "label :"
	                text: "the quick brown fox"
	            }
	        }
	        Container {
	            id: anotherContainer
                topPadding: 30
                bottomPadding: 30
                leftPadding: 30
                rightPadding: 30
                layout: StackLayout {
                    }
                verticalAlignment: VerticalAlignment.Bottom
                horizontalAlignment: HorizontalAlignment.Fill
                TextArea {
                    id: textArea
                    // multiline: true
                    horizontalAlignment: HorizontalAlignment.Fill
                    }	            
	            }
	        
        } // Container
                actions: [
                    ActionItem {
                        title: "page 2"
                        ActionBar.placement: ActionBarPlacement.OnBar
                        onTriggered: {
                            label1.text = "Action 1 selected";
                            var newPage = secondPageDefinition.createObject();
                            navigationPane.push(newPage);
                            }
                        },
                    ActionItem {
                        title: "page 3"
                        ActionBar.placement: ActionBarPlacement.OnBar
                        onTriggered: {
                            label1.text = "Action 2 selected"
                            var newPage = thirdPageDefinition.createObject();
                            navigationPane.push(newPage);
                            }
                        }
                    ]
                        attachedObjects: [
                        ComponentDefinition {
                            id: thirdPageDefinition
                            source: "ThirdPage.qml"
                        },
	                    ComponentDefinition {
	                        id: secondPageDefinition
	                        source: "DetailsPage.qml"
	                    }
	                ]
    } // Page
    onCreationCompleted: {
        // this slot is called when declarative scene is created
        // write post creation initialization here
        console.log("NavigationPane - onCreationCompleted()");

        // enable layout to adapt to the device rotation
        // don't forget to enable screen rotation in bar-bescriptor.xml (Application->Orientation->Auto-orient)
        OrientationSupport.supportedDisplayOrientation = SupportedDisplayOrientation.All;
        }
}

 

bron: a cron-like scheduler for BlackBerry 10
http://apps.oddelement.com
Regular Contributor
Posts: 77
Registered: ‎01-27-2010
My Device: Dev Alpha
My Carrier: Verizon

Re: noob question

Hi

You should give your Page has only one Containner and that Containner can has one or more Containners inside it.

And you must correct

 

LabelLabel {

                id: label1

                label: "label :"

                text: "the quick brown fox"

}

 

to

Label {

                    id: label1

                    //                label: "label :"

                    text: "the quick brown fox"

}


 

Maz

Developer
Posts: 116
Registered: ‎10-31-2012
My Device: BB10 Dev Alpha B
My Carrier: -

Re: noob question

Read mazmellow's repsonse.

 

But yes, you can have an aribrary number of containers within a page, have a look at how the Layout Managers work.

 

https://developer.blackberry.com/cascades/reference/bb__cascades__stacklayout.html

https://developer.blackberry.com/cascades/reference/bb__cascades__docklayout.html

 

Developer
Posts: 139
Registered: ‎05-24-2011
My Device: Z30 running 10.2 and Playbook 4GLTE running OS2.1
My Carrier: rogers

Re: noob question

tthe LabelLabel is a custom qml control - from the examples, it works, but i can remove it.

 

what i dont' understand is how to align the controls if i need more than 3.

 

e.g.:

 

Page

-> Container

-----> Container

-----> Container

-----> Container

-----> Container

-----> Container

 

 

how do i set verticalAlignment on these to get them to stack one on top of the other?

 

or should it be something like:

Page

-> Container

-----> Container, align: Top

---------->Container, align Top

---------->Container, align Center

---------->Container, align Bottom

-----> Container, align: Center

---------->Container, align Top

---------->Container, align Center

---------->Container, align Bottom

-----> Container, align, Bottom

 


I was reading the documentation, but all the examples show only 3 controls - that's why i'm asking how to do more than 3... 

 

thanks guys!  helpful as always.  these forums are great!

 

J

 

bron: a cron-like scheduler for BlackBerry 10
http://apps.oddelement.com
Developer
Posts: 116
Registered: ‎10-31-2012
My Device: BB10 Dev Alpha B
My Carrier: -

Re: noob question

You add la layout to your container, in your case it would probably be StackLayout. StackLayout allows you to keep adding content to your heart's desire. In C++ it looks something like :

 

Container * brandingContainer = new Container(contentContainer);
brandingContainer->setLayout(new StackLayout());
brandingContainer->layout()->setProperty("orientation", LayoutOrientation::TopToBottom);

ImageView * logo = ImageView::create(
"[filename here]");
logo->setHorizontalAlignment(HorizontalAlignment::Left);
logo->setScale(0.5f);
logo->setImplicitLayoutAnimationsEnabled(false);
brandingContainer->add(logo);

brandingContainer->add(new Label("hello"));
brandingContainer->add(new Label("world"));

 

Notice the "LayoutOrientation::TopToBottom", it can also be LeftToRight.

 

Basically, you need to read up on the layout managers. What you've been lookign at is an example of DockLayout, what you want is probably StackLayout as above.