Professional Documents
Culture Documents
Clicks
Eclipse Activity
Let us create a small project on user interaction in Java
using Eclipse.
Eclipse Activity
We will create a new Workspace
File, Switch Workspace, Other,
Browse To Destination Folder
Enter Folder Name, Click OK
Eclipse Activity
We will create a new project named ui_demo
File, New, Java Project
Enter Project Name as ui_demo
Click Finish
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
Eclipse IDE
The Eclipse IDE looks like the following
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
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;
Eclipse Activity
Add constructor with call to super and title as parameter
public MainFrame(){
super(Game Panel");
}
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;
10
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();
}
}
11
Eclipse Activity
Copy Image folder to same folder as src folder in project
12
Eclipse Activity
Create a new class to extend JButton (Fruit), and add event listener
public class Fruit extends JButton implements ActionListener{
13
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;
14
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
}
15
Eclipse Activity
Create an instance of a button in the MainFrame: - 1 st
create class level declaration
private Fruit apple;
16
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);
17
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;
}
}
18
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;
19
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);
20
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);
}
21