GUI – Part I Overall Steps for Completing a GUI Application (if you get confused) 1. Design a Layout on Paper a. use “tick” marks for dimensions (pixel dimensions) b. use Layouts (and Layouts within Layouts) 2. Setup classes (files) a. Driver -> I’m going to give you this!!! Don’t touch!! b. GUI class/file -> most construction of GUI 3. set up constructor within GUI class a. where MOST of the code really goes b. Driver (copy, paste and change what I have) 4. Add Actionlistener Designing the Layout Should be your FIRST STEP!!! Without regard to Java, draw up what you would want to a GUI to look like o Share it with someone else, they may have good ideas or questions about the interface Draw a design for a Simple Calculator using the UPPER section of the paper. The Java Components Next, we have to determine WHAT GUI components we want 1
Transcript
GUI – Part IOverall Steps for Completing a GUI Application(if you get confused)
1. Design a Layout on Papera. use “tick” marks for dimensions (pixel dimensions)b. use Layouts (and Layouts within Layouts)
2. Setup classes (files)a. Driver -> I’m going to give you this!!! Don’t touch!!b. GUI class/file -> most construction of GUI
3. set up constructor within GUI classa. where MOST of the code really goesb. Driver (copy, paste and change what I have)
4. Add Actionlistener
Designing the Layout Should be your FIRST STEP!!! Without regard to Java, draw up what you would want to a GUI to look like
o Share it with someone else, they may have good ideas or questions about the interface
Draw a design for a Simple Calculator using the UPPER section of the paper.
The Java Components Next, we have to determine WHAT GUI components we want http://docs.oracle.com/javase/tutorial/ui/features/components.html Tips and tricks
o Give each GUI components a name use the Component type as part name
JButton => JBexito Create all components in one area of code (specified later)
Easier to find if you need to change something since all in one area
How many JButtons, JTextFields, JRadioButtons, etc… do you need for your design? Write it down on your sheet of paper.
all GUI aspectsGUI methods will CALL source methods
start of the entire project(much like C++)
ALWAYS COMPILE FROM HERE!!
Not everyone will use this systemo easier for now until the student gets more experienceo use this today for your examples
Creating the Driver for the First Application before getting into the details, getting the first GUI application running can
be challengingOpen whatever IDE you are using, and download the “Files for Calc” at the website.1. In Eclipse create a new Project2. Copy the code below into your code3. Please note, the code is NOT complete!!
GuiDriverForCalc.java
import javax.swing.*;
public class GuiDriverForCalc{
public static void main(String[] args){
JFrame JFwindow = new JFrame("Lupoli’s Simple Calculator");JFwindow.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
// close window when someone hit’s "x"
JFwindow.getContentPane().add(new Calc()); // get’s Calc, and places it into THIS window/frame
JFwindow.pack();JFwindow.setVisible(true);
}}
2
Explaining the JFrame created in the Driver within the main() highest window in the hierarchy items that need to be completed
JFrame explanation in Main()public static void main(String[] args){
JFrame window = new JFrame(“Lupoli’s Simple Calculator”);// creating an instance of the JFrame Window along with a title
JFwindow.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);// setting how the window will close this code below closes the window// when someone hit’s “x”
JFwindow.getContentPane().add(new Calc());// add other COMPLETED JPanel CLASSES to the JFrame,// all JPanels will be separate classes
JFwindow.pack();// pack the JPanels together inside the JFrame window
JFwindow.setVisible(true);// enable the JFrame window
}
Organizing Panels always have a game plan remember, the GUI class itself is a Panel!!
o I will call it a “base” panel can add more panels to the base panel but can also add panels to panels!! then the buttons/images, etc.. are added to those panels
private JTextField JTFanswer = new JTextField("0", 40);private JButton JBnum1 = new JButton("1");private JButton JBnum2 = new JButton("2");private JButton JBnum3 = new JButton("3");
Calc(){
// adding directly to the base panelthis.add(JTFanswer);this.add(JBnum1);this.add(JBnum2);this.add(JBnum3);
}}
// create the rest of the buttons (0-9) and add them to the base panel
4
Scenario #2 – Adding sub panels to the Base Panel
public class Calc extends JPanel{
private JTextField JTFanswer = new JTextField("0", 40);private JButton JBnum1 = new JButton("1");private JButton JBnum2 = new JButton("2");private JButton JBnum3 = new JButton("3");
Calc(){
// creating sub panels Left and Right!!JPanel JPLeft = new JPanel();JPLeft.setBackground(Color.RED); // must add importJPLeft.setPreferredSize(new Dimension(200, 50));JPLeft.add(JBnum1);
JPanel JPRight = new JPanel();JPRight.setBackground(Color.BLUE);JPRight.setPreferredSize(new Dimension(150, 90));JPRight.add(JBnum2);
// now adding the sub panels BACK to the BASE panelthis.add(JPLeft);
this.add(JPRight);}
}
5
Scenario #3 – Forgot to add a panel to the basepublic class Calc extends JPanel{
private JTextField JTFanswer = new JTextField("0", 40);private JButton JBnum1 = new JButton("1");private JButton JBnum2 = new JButton("2");private JButton JBnum3 = new JButton("3");
Calc(){
// creating sub panels Left and Right!!JPanel JPLeft = new JPanel();JPLeft.setBackground(Color.RED); // must add importJPLeft.setPreferredSize(new Dimension(200, 50));JPLeft.add(JBnum1);
JPanel JPRight = new JPanel();JPRight.setBackground(Color.BLUE);JPRight.setPreferredSize(new Dimension(150, 90));JPRight.add(JBnum2);
JPanel JPRight2 = new JPanel();JPRight2.setBackground(Color.YELLOW);JPRight2.setPreferredSize(new Dimension(150, 90));JPRight2.add(JBnum3);
// now adding the sub panels BACK to the BASE panelthis.add(JPLeft);
this.add(JPRight); //this.add(JPRight2);}
}
6
Scenario #4 – Correctly Adding 3 subpanels to the Base panel
public class Calc extends JPanel{
private JTextField JTFanswer = new JTextField("0", 40);private JButton JBnum1 = new JButton("1");private JButton JBnum2 = new JButton("2");private JButton JBnum3 = new JButton("3");
Calc(){
// creating sub panels Left and Right!!JPanel JPLeft = new JPanel();JPLeft.setBackground(Color.RED); // must add importJPLeft.setPreferredSize(new Dimension(200, 50));JPLeft.add(JBnum1);
JPanel JPRight = new JPanel();JPRight.setBackground(Color.BLUE);JPRight.setPreferredSize(new Dimension(150, 90));JPRight.add(JBnum2);
JPanel JPRight2 = new JPanel();JPRight2.setBackground(Color.YELLOW);JPRight2.setPreferredSize(new Dimension(150, 90));JPRight2.add(JBnum3);
// now adding the sub panels BACK to the BASE panelthis.add(JPLeft);
this.add(JPRight); this.add(JPRight2);}
}
7
Creating the GUI File for the First Application right now, we can create the GUI components we need but we need to do much more before a window will work notice a NEW CLASS!! (Look at which file pictured)
private JTextField JTFanswer = new JTextField("0", 40); // 0 is placed into the text, 40 chars long
private JButton JBnum1 = new JButton("1"); //text on Button is ‘1’
1. Inside your “Calc” constructor, set the base panel’s background color to GREEN and the size (400x400), etc… Have fun!
a. You are NOT touching the driver file!!!b. Figure out the code for setting the base panel’s color and dimension.
Yes. I have not exactly given it to you, but use previous code!!c. No subpanels are needed!!
2. Below the creation of all of the JButtons (0-9), finish creating the code for the operation buttons (+ - / * =) for your Java Components for the Simple Calculator.
3. Also, on the back on your paper design, mark the name given on each Java Component
8
The Base JPanel file setup each Master JPanel needs to contain
o private “section” where ALL GUI components for that JPanel are created
o constructor **** where background and preferred size are set where a LAYOUT is determined remember this for later!!
will cover in a minute where GUI items are added to the JPanel many examples to follow
o methods many examples to follow
o an internal class for an ActionListener will cover that in a minute
JPanel File with GUI interfaceimports…
class somethingPanel extends JPanel{// all GUI Componentsprivate JButton JButton1 = new JButton(); // instance of original class…
Constructor/GUI Setup
Methods
ActionListener CLASS
}
9
Types of Layouts JPanel must be created first, class extension, Import java.awt.*; download code for these, LayoutExamples.zip all coded examples are for the BASE panel
o easy adapted for a sub panelo subpanel.setLayout(…..)
Borderlayouto BROKEN UP INTO SECTIONS
all code (for base or sub panels) are placed inside the constructor
BorderLayout JPanelNorth
West Center (Greedy!!) EastSouth
Calc() // Calc constructor{
this.setLayout(new BorderLayout()); // this line goes INSIDE the constructor (in Calc)…
FlowLayouto default setting for ALL panels!! o Single Panelo Flows GUI components left to righto Great for laying buttons togethero Left justified
FlowLayout JPanel
Calc() // Calc constructor
GUI Component1 GUI Component2 GUI Component3
10
{this.setLayout(new FlowLayout());// this line goes INSIDE the constructor (in Calc)
Grid Layouto sets GUI component into a matrix formato great for laying buttons togethero to set inside the container
GridLayout 2x3 Example
Calc() // Calc constructor{
this.setLayout(new GridLayout(2, 3)); // ROW, then COLUMN…
private JButton JBnum1 = new JButton("1");private JButton JBnum2 = new JButton("2");private JButton JBnum3 = new JButton("3");private JButton JBnum4 = new JButton("4");private JButton JBnum5 = new JButton("5");private JButton JBnum6 = new JButton("6");private JLabel JLabel1 = new JLabel("label");
Calc(){
JPanel subPanel = new JPanel();subPanel.setLayout(new
GridLayout(2,3)); // rows then columnssubPanel.add(JBnum1);subPanel.add(JBnum2);subPanel.add(JBnum3);subPanel.add(JBnum4);subPanel.add(JLabel1);subPanel.add(JBnum6);
// add subpanel to basethis.add(subPanel);
}}
1. set your base panel for Calc to GridLayout2. add all your components in a meaningful order to the grid layout3. display it
15
Showing the Different Layouts in Action
“None”o You can specify that a JPanel NOT to have a layouto In only ONE component in a certain area
16
Mixing Layouts OTHER Layouts can be added inside of other Layouts OTHER JPanels can be added to the ORIGINAL JPanel/JFrame
o must watch how you declareo inside THAT new panel can have smaller panels
JPanel subPanel = new JPanel();subPanel.setLayout(new GridLayout(2,3)); // rows then columnssubPanel.add(JBnum1);subPanel.add(JBnum2);subPanel.add(JBnum3);subPanel.add(JBnum4);subPanel.add(JBnum5);subPanel.add(JBnum6);
// add subpanel to basethis.add(JLabel1); // leftthis.add(subPanel);this.add(JLabel2);this.add(JLabel3); // rightmost
}}
18
1. For Calc, Create two JLabels, with “-“ values (or blank)2. Remake your base Layout “BorderLayout”3. CENTER BORDERLAYOUT, use a gridlayout for button 0-9
a. Label, 0 label for the bottom row4. EAST - > = button5. NORTH -> Textbox
19
Overall Placement for GUI Success There is an order to everything! There is also a specific place for everything!!
Overall placement of everything
// all imports go here
class Calc extends JPanel{
Data membersprivate JButton JBnum1 = new JButton(“1”);
// create ALL GUI components here
20
ConstructorCalc(){
// set base panel defaults// set GUI component attributes (size, color, etc…)// create sub panels (if necessary)// add buttons to panels// add sub panels to base panel// add GUI components to ActionListener
}
ActionListenerprivate class ButtonListener implements ActionListener{// create actionListener class}
}
21
Exercise Set #1 (not longer needed??)Complete this in order in Calc.java
1. Create Calc constructor // do not re-create the buttons!!!2. inside the constructor
a. set layout to BorderLayoutb. create 2 secondary (smaller) JPanels (INSIDE THE CONSTRUCTOR!!)
i. name one NORTH use FlowLayoutii. name other CENTER use GridLayout
c. add JTextField to NORTHd. add all buttons to CENTER JPanel
3. add north and center to Calc’s JPanel4. Compile and run (hopefully)
a. notice that if you hit a button, nothing happens
Exercise Set #2Create a new Project “TicTacToe”9 JButtons, no labelsNotice Color and numbering in PictureGridLayout (3)Driver.java and TicTacToe.java- No internal panels, add buttons directly to Master Panel
22
Introduction to the ActionListener used to set code into effect when an event happens
o like a button being pressed import a java file
o java.awt.event.*; // for Action Listeners is a PRIVATE CLASS INSIDE the GUI Class USES A RESERVED FUNCTION
o used inside the JPANEL classo function header must be:
public void actionPerformed(ActionEvent e)o conditions on where ActionListener function should be placedo each GUI Component that we want to have an event happen:
we must ADD IT TO THE ACTIONLISTENER button1.addActionListener(new ButtonListener());
this line above belo ngs in the constructorAction Listener Class Example
// REMEMBER, this code is WITHIN a GUI CLASS!!private class ButtonListener implements ActionListener{
public void actionPerformed(ActionEvent e){
String actionCommand = e.getActionCommand();// gets what was written on GUI Component
// add actionlistener to GUI ComponentsJBnum1.addActionListener(new ButtonListener());JBnum2.addActionListener(new ButtonListener());
23
JBnum3.addActionListener(new ButtonListener());
24
Determining which GUI component was selected by “text” on the component
o good for label, button, etc…o matches what was written on the button
ActionListener that matches text on Componentpublic void actionPerformed(ActionEvent e){String actionCommand = e.getActionCommand(); // gets what was written on GUI Component
if(actionCommand.equals("Button 1")){ … }
by component o named in private section of the JPanel class
ActionListener that matches Component’s namepublic void actionPerformed(ActionEvent event){
if(event.getSource() == JBnum1) // Button 1 was hit{ …}
ActionListener Setup ComparisonText Match Variable name matchCalc(){this.add(JTFanswer);this.add(JBnum1);this.add(JBnum2);this.add(JBnum3);
// add actionlistener to GUI ComponentsJBnum1.addActionListener(new ButtonListener());JBnum2.addActionListener(new ButtonListener());JBnum3.addActionListener(new ButtonListener());}
SAME!!
private class ButtonListener implements ActionListener{
public void actionPerformed(ActionEvent e){ String actionCommand = e.getActionCommand();
public class LeftWindow2 extends JPanel{ private JButton JButton1 = new JButton("Button 1"); private JButton JButton2 = new JButton("Button 2"); private JButton JButton3 = new JButton("Button 3");
public LeftWindow2() { setBackground(Color.RED); setPreferredSize(new Dimension(200, 70)); // add all GUI components to action listener button1.addActionListener(new ButtonListener()); button2.addActionListener(new ButtonListener()); button3.addActionListener(new ButtonListener());
// add Components to THIS JPanel add(button1); add(button2); add(button3); }
private class ButtonListener implements ActionListener { public void actionPerformed(ActionEvent e) { String actionCommand = e.getActionCommand(); // gets what was written on GUI Component
