Wednesday, September 22, 2010

Using the Button component: Part 3

In today's tutorial we will continue styling our buttons. Today we will learn how to set size and label placement of the button and what results will we get.

Button component has a method called setSize, which, you guessed it, sets the size of our button. Two parameters - width and height, very simple to use. Another advantage of the Button component is that when we want to scale it, the label text will keep the initial size.

myBtn.setSize(80,50)

labelPlacement is a property of Button components. There are 4 possible values - ButtonLabelPlacement.LEFT, ButtonLabelPlacement.RIGHT, ButtonLabelPlacement.TOP and ButtonLabelPlacement.BOTTOM.

myBtn.labelPlacement=ButtonLabelPlacement.LEFT

You will need to import the ButtonLabelPlacement class for it to work. Also, if you don't have Button component in your library, you will need to import it too.

import fl.controls.ButtonLabelPlacement;
import fl.controls.Button;

Below is an example of 4 buttons with different label placements. I have also included icons to show you how the buttons behave with them.


Here is the code:

import fl.controls.ButtonLabelPlacement;

btnOne.setStyle("icon", greenIcon);
btnOne.labelPlacement=ButtonLabelPlacement.LEFT
btnOne.setSize(80,50);
btnOne.label="Left"

btnTwo.setStyle("icon", greenIcon);
btnTwo.labelPlacement=ButtonLabelPlacement.RIGHT
btnTwo.setSize(80,50);
btnTwo.label="Right"

btnThree.setStyle("icon", greenIcon);
btnThree.labelPlacement=ButtonLabelPlacement.TOP
btnThree.setSize(80,50);
btnThree.label="Top"

btnFour.setStyle("icon", greenIcon);
btnFour.labelPlacement=ButtonLabelPlacement.BOTTOM
btnFour.setSize(80,50);
btnFour.label="Bottom"

Thanks for reading!

Related:

Using Button component part 1
Using Button component part 2
Using Button component part 4
Using Button component part 5

No comments:

Post a Comment