JButtons 
Lab3c

Now we will look at the JButton  

1. Open Lab3 save as Lab3c1, make window size 150 by 260
Add the following

2. In the object variable section add this

     JButton b1, b2, b3, b4; 

3. Add these in the create object section
     b1 = new JButton("ONE" ); 
     b2 = new JButton("TWO"); 
     b3 = new JButton("3"); 
     b4 = new JButton("FOUR"); 

4. Add these in the container.add section

     container.add(b1); 
     container.add(b2); 
     container.add(b3); 
     container.add(b4); 

It should look like what you see on the right

5. Each JButton is a different size. By twicking what is inside the quotes, we can make each JButton almost the same size. Make the following changes

Change this  to this
 It will look like this

"ONE"

"--ONE--"
"TWO" "--TWO--"
"3" "-THREE-"
"FOUR" "-FOUR--"

6.  This is an optional command - it removes the purple line around a button - compile and run - see the difference?
             b1.setFocusPainted(false); 

7.  JButtons are colored the same way as you color JTextfields - color all 4 buttons differently
      b1.setForeground(Color.blue);
      b1.setBackground(Color.yellow); 

8.  ToolTip works on JButtons - add this line and a tooltip to JButton 2 - verify that they work
           b1.setToolTipText("Click here for help");

9.  Save all these icons to your unit 3 folder. (you should have these already)

                        

                        

 

We can add one icon to  a button - put a different icon on each button
      b1.setIcon(new ImageIcon("cupcake.gif"));

 

10. Add a container background color - I used darkGray - reminder: this command goes with the container stuff

container.setBackground(Color.darkGray);

11. The text and the icon can be arranged - Use the same commands that we used on JLabels.  My second and third button have horizontal text alignment - same command that you used for JLabels
      b2.setHorizontalTextPosition(SwingConstants.xxxxx);

Make the first and fourth button have CENTER alignment - one on top and one on the bottom
      b1.setHorizontalTextPosition(SwingConstants.CENTER);
      b1.setVerticalTextPosition(SwingConstants.xxxxx);

Notice that the JButtons change size.

12.  There are optional borders for the JButton. - Put each of these with the correct JButtons.
      I used a different one for each button - notice how they change the size of the buttons

b1.setBorder(BorderFactory.createLineBorder(Color.red));

b2.setBorder(BorderFactory.createEmptyBorder( ));

b3.setBorder(BorderFactory.createRaisedBevelBorder( ));

b4.setBorder(BorderFactory.createLoweredBevelBorder( ));

They shifted because adding edging changes the size of the buttons. Normally one would use the same shape on every button. I personally like the edging on b1 or use no border command.

13.  This is very cool. The JButton can have a tooltip and a RollOver Icon. This icon will appear on  where the current icon is when the mouse is moved over the Button.
                 b1.setRolloverIcon(new ImageIcon("icecream.gif"));

Add a rollOver icon to another JButton 2
           

JButtons never exist alone. We will now use them with JLabels and JTextfields in the second lab of the assignment.

ASSIGNMENT

Lab3c2 - 50 points

Start with Lab3 or Lab3c1 - use save as before you start

1.  Make the window size is 200 by 100
     the title of window is "Two buttons" - copy these gif's

                        

2.  Use 2 JButton with black background, yellow or pink or cyan lettering,
-----on one JButton use the icon for up arrow (cyuarrw) with the mouse passover to show down arrow (cydarrw).
----on the second button use the icon for the left arrow (cylarrw) with the mouse passover to show the right arrow (cyrarrw).

3. Position the words centered, below the icon

4. For JButton border use "RaisedBevel" or "LowerBevel" to look like mine.

It should change icons as you roll your mouse over the JButtons

In the picture below, this is what you would see with the icon rollover of the second button.

Lab3c3

Start with Lab3 or Lab3c1 - use save as before you start
50 points if you use 5 items, 40 pts for 4 items, 30 pts for 3 items

1. Make the window size is 200 by 450, change the window name.

Use JLabels for the questions,
       JButtons for the icons
      JTextFields  ( for the answers later)

2.  I used the no border for the JButtons
3.  Size of columns is 15 - your choice for food icons, color of foregrounds and backgrounds

We will use this one again when we learn to "listen" to the JButtons