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
Contributor
Posts: 23
Registered: ‎01-11-2014
My Device: Z10
My Carrier: Vodafone

Unable to add 8 buttons in a row

Hi,

 

I want to add 8 buttons in one line horizontally with some padding to them away from the screen edges. I am able to do that but the first and the last button are going out of screen. I have tried changing the button size using 'preferredWidth' but nothing happens...I m not able to add an image....sorry abt that

 

 

Went through the manuals...but nothing seems to work.

Can someone please help me with this?

 

 

 

Developer
Posts: 828
Registered: ‎10-16-2012
My Device: Red Z10
My Carrier: Rogers

Re: Unable to add 8 buttons in a row

Buttons have a system defined minimum width and won't go below that.

 

There are 2 things you could do, either place the buttons inside a ScrollView and allow for horizontal scrolling so the user can scroll through them.

 

Or, you could not use buttons and instead use containers, paired with onTouch listeners to tell if the area has been touched

 

Container {
    id: button1
    onTouch: {
       if (event.isDown()){
           button1.background = Color.Blue
       } else if (event.isUp()){
           button1.background = Color.White
       } else if (event.isCancel()){
           button1.background = Color.White
       }

    }
}

 

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Unable to add 8 buttons in a row

Designing to fit into exact dimensions is never the smart thing to do, instead look at alternatives.

If someone changes the size of your text then it will change the layout any way.

Instead you should allow for movement or use scrolling.

 

As for slashkyles suggestion for using onTouch unless you understand about how scene graphs are put together and object interact I would avoid going to such a low level as you will just end up with multiple calls.

 

Instead attach one of the gesture handlers...

 

http://developer.blackberry.com/native/reference/cascades/bb__cascades__taphandler.html 


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Contributor
Posts: 23
Registered: ‎01-11-2014
My Device: Z10
My Carrier: Vodafone

Re: Unable to add 8 buttons in a row

Thanks slashkyles and BBSJdev !

 

That min size limitation is not gud...so i've decided to place the buttons in 3X3 matrix..

 

Thanks !

Developer
Posts: 889
Registered: ‎08-31-2009
My Device: 9530, 9630, 9800, 8530, 9900, 9810, 9930, PlayBook, Dev Alpha
My Carrier: Verizon

Re: Unable to add 8 buttons in a row

You should really use an onTapped event instead of the onTouch event.

 

gestureHandlers:
[
    TapHandler
    {
        onTapped:
        {
                
        }
    }
]

 


Read my thoughts on BlackBerry Development at news.ebscer.com
Developer
Posts: 828
Registered: ‎10-16-2012
My Device: Red Z10
My Carrier: Rogers

Re: Unable to add 8 buttons in a row

[ Edited ]

the only downside I see to a tap handler is that it is not animation friendly

 

when a user touches an element it doesn't have to but should give them some sort of visual feedback, with the onTapped handler you can only get that visual feedback after the touch has been released and the user no longer has contact with the element.  At this point visual feedback should have already been given and interaction with the element should start if it hasn't already.

 

But overall it appears the OP is looking to stick with the default button and just change how they're laid out

 

Edit

I do notice that it's also getting signals for move events, but I don't see any better way to account for adding visual effects or to prevent so many additional signals being sent

 

Contributor
Posts: 10
Registered: ‎01-21-2014
My Device: Q5
My Carrier: 503381198

Re: Unable to add 8 buttons in a row

[ Edited ]

I have the same issue.

Could someone tell us how BB developers created buttons in system calculator app?

There are 5 buttons in a row and have smaller width than avaliable Smiley Sad

Developer
Posts: 508
Registered: ‎01-19-2011
My Device: My Trusty Red Plane
My Carrier: Outer Space

Re: Unable to add 8 buttons in a row

there shouldn't be a problem if it's 'just' 5 buttons. Especially in case of the calculator app, which only shows one character on each button. Buttons with one character have a fixed minWidth of ~100 on Z10 and ~80 on Q10, and the displays are 768 and 720 respectively, you do the math Smiley Wink (and don't forget the buffers between buttons, unless you use AbsoluteLayout)

 

If you really want to have 8 buttons (or more) in a row and they do not have to look like buttons (e.g. in a game), consider using ImageViews and connect a TouchEvent to them. See the Kakel example for that, they use a 6x6 field, which is easily extendable to 8x8

 

https://github.com/blackberry/Cascades-Samples/tree/master/kakel

-----------------------------------------------------------------------
I'm a bird from outer space. But I'm not flappy o.o
Contributor
Posts: 23
Registered: ‎01-11-2014
My Device: Z10
My Carrier: Vodafone

Re: Unable to add 8 buttons in a row

Not sure abt calc...but I did the following workaround...

 

I solved this problem by creating ImageViews in QML...instead of buttons...they can have whatever size u give them...

 

        ImageView {
                            id: imageView3
                            objectName: "imageView3"
                            imageSource: "asset:///images/tile3.png"
                            preferredWidth: 90.0
                            preferredHeight: 100.0
                        }

 

and then just associate it with the signals and slots

 

    bool connectResult = connect(imageViewPtr,
                    SIGNAL(touch(bb::cascades::TouchEvent *)), this,
                    SLOT(onTileTouch(bb::cascades::TouchEvent *)));
    Q_ASSERT(connectResult);

 

and handle the touch event

 

void onTileTouch(bb::cascades::TouchEvent *event)
{

if(event->isDown())
    {

       //do processing

    }

}

 

Thanks !

Contributor
Posts: 10
Registered: ‎01-21-2014
My Device: Q5
My Carrier: 503381198

Re: Unable to add 8 buttons in a row

Hi.
Thank You for reply. I didn't know that minimum size is determined by platform. I'll try to put 5 buttons.
It seems that Calc app has about 10 point spacing.