How to Change the Properties of a Button on a Java Form

In the last part, you saw how to add a button to your Java form. In this lesson, you'll see how to change its properties.

Go back to Design view and make sure your button is selected. We can change the text on the button. What we want is a number, one number for each button on the calculator. The textproperty is used for button text. So locate this property in the properties window. Delete the default and type the number 1 instead:

Press the enter key on your keyboard and you should see the text change on your button. It will also be resized:

You can change the size of the button in the properties window. Locate Horizontal Size andVertical Size, under the Layout heading:

Change these values from the default to 50, 30:

You can also change the font and font size in the properties window. Make sure your button is selected. Now locate the font property. Click the small button to the right of the font row:

When you click the font button, you should see a dialogue box appear. Change the font size to 14 points, and make it bold:

Your form should now look like this (to see the outline of the panel, just hover your mouse over it):

You now need to add nine more buttons in the same way, for the numbers 2 to 9, and a 0. Change each variable name to btnTwo, btnThree, btnFour, etc. Delete the default text, and enter a number instead. Then change the size of each button to 50, 30. Finally, change the font property of each button.

When you're finished, your Inspector area should look like this:

(Note that the 0 button has the name btnZero.)

If your buttons are in the wrong place, click a button to select it. Hold down your left mouse button. Keep it held down and drag to a new location in the panel. To move all the buttons at once, select the panel and drag it to a new location:

When you're happy with your form, it should look something like this (We've resized the text field):

Only three more buttons to add: a plus button, an equals button, and a clear button. We'll add these to a panel of their own, and move them to the right of the calculator.

As you can see, our calculator doesn't have any room on the right. But you can easily resize a form.

Click on just the form, and not the panel or the text field. If you do it right, you should see an orange rectangle surrounding the form. Now move your mouse to the edges of the form. The mouse pointer should change shape, as in the image below (bottom right):

Hold down your left mouse button when the pointer changes shape. Now drag to a new size.

Add a panel in the space you've just created:

Add three buttons to the new panel. Change the variables names to: btnPlus, btnEquals, andbtnClear. For the text for the buttons, type a + symbol for the Plus button, a = symbol for equals button, and the word "clear" for the clear button. Change the font to the same as the number buttons, 14 point bold. The size for the plus and equals button should be the same as the number buttons: 50, 30. For the Clear button, change it to 70, 30. Your form should then look like this:

The Inspector area of NetBeans should look like this:

You can run your form at this stage, just to see what it looks like:

Looking quite nice, hey! Nothing will happen when you click on the buttons, though. We'll add some code shortly. First, a word about Events.