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: 10
Registered: ‎01-21-2014
My Device: Q5
My Carrier: 503381198

Re: Unable to add 8 buttons in a row

So I have to create image with text to put 7 buttons Smiley Sad in a row.
Contributor
Posts: 23
Registered: ‎01-11-2014
My Device: Z10
My Carrier: Vodafone

Re: Unable to add 8 buttons in a row

In my case the text was only alphabets..so I dwnlded free letter PNGs. If it is big text then u hve to think of something else...

 

Thanks!

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

Re: Unable to add 8 buttons in a row

Hi!

What about size of the image buttons? Is it possible to stretch image on the button and will change size as the container?

Contributor
Posts: 23
Registered: ‎01-11-2014
My Device: Z10
My Carrier: Vodafone

Re: Unable to add 8 buttons in a row

Image button is different from image views..

 

if you are talking abt image view then whatever size you to the imageview, the image will be adjusted in that and only that much space in the container will be used...rest will be unused

 

Image button only has a small icon of the image before the text

 

Thanks !

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

Re: Unable to add 8 buttons in a row

Sorry, of coure ImageView Smiley Happy

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

Re: Unable to add 8 buttons in a row

I have Q5 and checked 5 buttons in a row and last button goes out from screen (or touch right border). So Q5 case we can add only 4 buttons. System calc probably has image view instead of button.

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

Re: Unable to add 8 buttons in a row

Sorry...I have to continue investigation. In system calc the buttons are smaller than determined in cascades. I created imageview, added touch handling (to change imageview button appearance during push action):

 

void ApplicationUI:Smiley Tonguerzyc1(bb::cascades::TouchEvent *event)
{

 if(event->isDown())
  {
   ApplicationUI::imButton1->setImage(image2);
  }
 else if(event->isUp()||event->isCancel())
  { 
   ApplicationUI::imButton1->setImage(image1);
  }
}

 

 

And ApplicationUI:

ApplicationUI::imButton1 = new ImageView;
ApplicationUI::imButton1->setLoadEffect(ImageViewLoadEffect:Smiley Very Happyefault);
ApplicationUI::imButton1->setImage(image1);

 

I tested my image view button and compared to system calc button.

Image view button is not acting the same as button - when I touch the image view button and move finger out of bounds (when still touching) it shows "pressed image" until I untouched screen (even if I move my finger out of button border). 

System button acts different: touch button and still touching move out of button border. When finger outs of border (still touching) the button appearance changes to "untouch".

 

So I have two questions:

 

1. How to do button like in system calc (acting like cascade button) and put 5 buttons in a row (720 pix)?

2. How to handle image view button to change its image when finger outs of image view border?

 

I'm sorry for language mistakes Smiley Happy Hope You understand my issue.

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

1. use ImageViews

2. if TouchEvent is no good, try TapHandler

 

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

-----------------------------------------------------------------------
I'm a bird from outer space. But I'm not flappy o.o
Contributor
Posts: 10
Registered: ‎01-21-2014
My Device: Q5
My Carrier: 503381198

Re: Unable to add 8 buttons in a row

Below code did the job for 6 buttons in a row for 720 px:

Page {
    Container {
        layout: StackLayout {
            orientation: LayoutOrientation.LeftToRight
        }
        Button {
            text: "1"
            pivotX: -50
            scaleX: 0.815
            scaleY: 1.0
        }
        Button {
            text: "2"
            pivotX: -200
            scaleX: 0.815
            scaleY: 1.0
        }
        Button {
            text: "3"
            pivotX: -350
            scaleX: 0.815
            scaleY: 1.0
        }
        Button {
            text: "4"
            pivotX: -500
            scaleX: 0.815
            scaleY: 1.0
        }
        Button {
            text: "5"
            pivotX: -650
            scaleX: 0.815
            scaleY: 1.0
        }
        Button {
            text: "6"
            pivotX: -800
            scaleX: 0.815
            scaleY: 1.0
        }
    }
    }

 

Now I have to study about visual node to make the pivotX as in automatic scale dependent on screen/panel width and number of buttons:

 

Property: float pivotX

 

The position of pivot point of the visual node along the x-axis.

 

 

The pivot is used as the anchoring point when rotating and scaling the visual node. It is defined by the components pivotX, pivotY and pivotZ and is relative to the center of the visual node. The default position of the pivot point is (0.0, 0.0, 0.0), which means it is at the center of the visual node.

 

BlackBerry 10.0.0