If you are using Internet Explorer, please remove blackberry.com from your compatibility view settings.

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
Developer
p8
Posts: 132
Registered: ‎01-24-2013
My Device: blackberry z10
My Carrier: none
Accepted Solution

problems centering a button (vertically) on screen

Hello.

 

I have a blackberry 10 cascades app with code as below.

How would I get the button to fill the whole screen? I would have thought the code below would do the trick but it doesnt. The button expands horizontally to fill the width of the parent, but vertically the buttn just stays at the top of the screen the same as if I hadnt called setVerticalAlignment() at all.

 

Any ideas? Maybe this is a bug?

 

Thanks very much in Advance.

//-----------------------------------------

    Page *Pg = new Page();

    Button* Butt = new Button();
    Butt->setText("well");
    Butt->setHorizontalAlignment(HorizontalAlignment::Fill);
    Butt->setVerticalAlignment(VerticalAlignment::Fill);

    Pg->setContent(Butt);

   Application::instance()->setScene(Pg);

Please use plain text.
Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10
My Carrier: none

Re: problems centering a button (vertically) on screen

Buttons can't have their height changed right now, so you can't do that with Fill. You could consider an ImageButton https://developer.blackberry.com/cascades/reference/bb__cascades__imagebutton.html with an image sized to fill the screen, or possibly just use a Container with custom contents that look like a button, and process the touch "manually" by listening to the signal called touch(), which tells you when the user taps down and up.

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Please use plain text.
Developer
Developer
p8
Posts: 132
Registered: ‎01-24-2013
My Device: blackberry z10
My Carrier: none

Re: problems centering a button (vertically) on screen

Thanks for the helpful reply.

 

This wouldnt seem very unreasonable. However if I instead call

    Butt->setVerticalAlignment(VerticalAlignment::Center);

I would expect the button centered vertically on the screen of the device. Wouldnt you (or am I missing something)?

It doesnt, however. It just sits at the top of the screen no matter what I pass to setVerticalAlignment() (same as if I dont call it at all).

 

 

Please use plain text.
Developer
peter9477
Posts: 6,473
Registered: ‎12-08-2010
My Device: PlayBook, Z10
My Carrier: none

Re: problems centering a button (vertically) on screen

I would actually expect that to work only inside a Container with a DockLayout. I don't know what Pages do in terms of layout, but I'm going to guess they do nothing, which would mean that their single "content" component would not have its position adjusted at all, and would sit at 0,0 or the upper left.

It seems like you're experimenting a bit... in practice, I don't think anyone ever puts a single non-Container item on a Page, but generally always a Container with other stuff inside it. The default for a Container is StackLayout, so you'd have to change it to DockLayout, and the default alignment for stuff is Left and Top, so then with your Center for vertical alignment it should work.

Peter Hansen -- (BB10 and dev-related blog posts at http://peterhansen.ca.)
Author of White Noise and Battery Guru for BB10 and for PlayBook | Get more from your battery!
Please use plain text.
Developer
Developer
p8
Posts: 132
Registered: ‎01-24-2013
My Device: blackberry z10
My Carrier: none

Re: problems centering a button (vertically) on screen

Thanks very much.

Yes, youre right, Im experimenting.

Im quite used to programming Qt, but am new to Cascades.

Once you know the things your just explained everything is fine, but its hard to "figure it out" just by readingthe documentation, because it sems to be quite sparse on "this is the way containers and pages etc work together" type of info :-)

Ill "experiment" some more with using your advice and hopefully "orientate" myself better.

 

Thanks again.

Please use plain text.
Developer
Developer
p8
Posts: 132
Registered: ‎01-24-2013
My Device: blackberry z10
My Carrier: none

Re: problems centering a button (vertically) on screen

Just for reference (in case anyone else is interested)  code which would work is below.

 

Thanks again peter9477

 

//-------------------------------------------------------

    Page *Pg = new Page();


    Container *Cont = new Container();

    Button* Butt = new Button(Cont);
    Butt->setText("well");
    Butt->setHorizontalAlignment(HorizontalAlignment::Center);
    Butt->setVerticalAlignment(VerticalAlignment::Center);


  Cont->setLayout(DockLayout::create());
  Cont->setTopPadding(20.0f);
  Cont->setBackground(Color::fromARGB(0xff00f800));

    Pg->setContent(Cont);
    Application::instance()->setScene(Pg);

Please use plain text.