Getting Started with Buttons Icons and

Clicks

Copyright 2012, Oracle. All rights reserved.

Oracle Academy Java Fundamentals Institute: Day 1

Eclipse Activity
Let us create a small project on user interaction in Java
using Eclipse.

Copyright 2012, Oracle. All rights reserved.

Oracle Academy Java Fundamentals Institute: Day 1

Eclipse Activity
We will create a new Workspace
File, Switch Workspace, Other,
Browse To Destination Folder
Enter Folder Name, Click OK

Copyright 2012, Oracle. All rights reserved.

Oracle Academy Java Fundamentals Institute: Day 1

Eclipse Activity
We will create a new project named ui_demo
File, New, Java Project
Enter Project Name as ui_demo
Click Finish

Copyright 2012, Oracle. All rights reserved.

Oracle Academy Java Fundamentals Institute: Day 1

Eclipse Activity
We will create a new package
File, New, Package
Select Source Folder as ui_demo
Enter Package name as com.example.ui_demo
Click Finish

Copyright 2012, Oracle. All rights reserved.

Getting Started with Greenfoot

Eclipse IDE
The Eclipse IDE looks like the following

Copyright 2012, Oracle. All rights reserved.

Oracle Academy Java Fundamentals Institute: Day 1

Eclipse Activity
Add a main class with default main method
Select created package com.example.ui_demo
Select File, New, Class
Enter name as GameMain
Select public static void main(String[] args

Copyright 2012, Oracle. All rights reserved.

Oracle Academy Java Fundamentals Institute: Day 1

Eclipse Activity
Create a new class to extend JFrame (MainFrame)
Select created package com.example.ui_demo
Select File, New, Class
Enter name as MainFrame
Edit class to following
public class MainFrame extends JFrame{
We also require to Add the import statement
import javax.swing.JFrame;

Copyright 2012, Oracle. All rights reserved.

Oracle Academy Java Fundamentals Institute: Day 1

Eclipse Activity
Add constructor with call to super and title as parameter
public MainFrame(){
super(Game Panel");
}

Copyright 2012, Oracle. All rights reserved.

Oracle Academy Java Fundamentals Institute: Day 1

Eclipse Activity
Update constructor to set the Layout manager we wish to
use.
public MainFrame(){
super("Game panel");
setLayout(new GridLayout(2,2));
//display frame
pack();
setLocationRelativeTo(null); //centre
setVisible(true);
}
We also require to Add another import statement
import java.awt.GridLayout;

Copyright 2012, Oracle. All rights reserved.

10

Oracle Academy Java Fundamentals Institute: Day 1

Eclipse Activity
Add instance of MainFrame to main, and update
constructor to instantiate.
public class GameMain {
public static MainFrame gFrame;
public static void main(String[] args) {
// create an instance of MainFrame
gFrame= new MainFrame();
}
}

Copyright 2012, Oracle. All rights reserved.

11

Oracle Academy Java Fundamentals Institute: Day 1

Eclipse Activity
Copy Image folder to same folder as src folder in project

Copyright 2012, Oracle. All rights reserved.

12

Oracle Academy Java Fundamentals Institute: Day 1

Eclipse Activity
Create a new class to extend JButton (Fruit), and add event listener
public class Fruit extends JButton implements ActionListener{

We also require to Add other import statements and

unimplemented methods to remove errors
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import javax.swing.ImageIcon;
import javax.swing.JButton;

Copyright 2012, Oracle. All rights reserved.

13

Oracle Academy Java Fundamentals Institute: Day 1

Eclipse Activity
add class level attributes to store images and a boolean to
determine if a card has been turned
private ImageIcon frontImg, backImg;
private boolean faceUp;

Copyright 2012, Oracle. All rights reserved.

14

Oracle Academy Java Fundamentals Institute: Day 1

Eclipse Activity
add a constructor to accept front image and if turned. Add
ActionListener method to deal with mouse clicks.
public Fruit(String fruitName, boolean visible){
frontImg = new ImageIcon(fruitName);
backImg= new ImageIcon("Images//card_back.jpg");
faceUp=visible;
if(faceUp){
setIcon(frontImg);
}
else{
setIcon(backImg);
}
addActionListener(this); //set to react to mouse clicks
}

Copyright 2012, Oracle. All rights reserved.

15

Oracle Academy Java Fundamentals Institute: Day 1

Eclipse Activity
Create an instance of a button in the MainFrame: - 1 st
create class level declaration
private Fruit apple;

then instantiate in constructor before the code to draw the frame

apple = new Fruit("Images//apple.png", false);
add(apple);
Run to test, then change false to true and run again. Reset as false.

Copyright 2012, Oracle. All rights reserved.

16

Oracle Academy Java Fundamentals Institute: Day 1

Eclipse Activity
Add 3 more instances for Bananas, cherries and grapes,
set visible parameter in constructor for cherries and grapes
to true
private Fruit apple, cherries, grapes, banana;
banana = new Fruit("Images//banana.png", false);
add(banana);
cherries = new Fruit("Images//cherries.png", true);
add(cherries);
grapes = new Fruit("Images//grapes.png", true);
add(grapes);

Run and test again.

Copyright 2012, Oracle. All rights reserved.

17

Oracle Academy Java Fundamentals Institute: Day 1

Eclipse Activity
Next, we can add some code to the overridden method
auto created earlier to deal with the mouse click in the Fruit
Class:
public void actionPerformed(ActionEvent e) {
System.out.println("mouse click detected");
if(!faceUp){
setIcon(frontImg);
faceUp=true;
}
else{
setIcon(backImg);
faceUp=false;
}
}

Run and test again.

Copyright 2012, Oracle. All rights reserved.

18

Oracle Academy Java Fundamentals Institute: Day 1

Eclipse Activity
Finally create a way of passing information from the Fruit
class to the MainFrame class to deal with situation
Checking In the MainFrame class create a class level attribute to
keep track of number of cards face up
private int cardsTurned;
in the final line of the constructor, set it to 2
cardsTurned=2;

Copyright 2012, Oracle. All rights reserved.

19

Oracle Academy Java Fundamentals Institute: Day 1

Eclipse Activity
Create a new method in the MainFrame class to update
number of cards face up
public void update(int change){
cardsTurned+=change;
System.out.println("Cards face up: "+cardsTurned);
}
In the Fruit class, add a call to the update method with the correct
value in the ActionPerformed method:
GameMain.gFrame.update(1);

Copyright 2012, Oracle. All rights reserved.

20

Oracle Academy Java Fundamentals Institute: Day 1

Eclipse Activity
In the Fruit class, add a call to the update method with the correct
value in the ActionPerformed method:
if(!faceUp){
setIcon(frontImg);
faceUp=true;
GameMain.gFrame.update(1);
}
else{
setIcon(backImg);
faceUp=false;
GameMain.gFrame.update(-1);
}

Copyright 2012, Oracle. All rights reserved.

21