GUI – Part I



AWT GUI – Part II

Overall Steps for Completing a GUI Application

(if you get confused)

1. Design a Layout on Paper

a. use Layouts (and Layouts within Layouts)

2. Setup classes

a. Driver

b. GUI class

3. set up init() in 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

|Button |CheckBox |ComboBox |Label |

|PasswordField |RadioButton |Slider |TextArea |

|TextField |ToggleButton |EditorPane |ScrollPane |

|OptionPane |Canvas | | |

o Give each GUI component a name

o Easier to find if you need to change something since all in one area

How many Buttons, TextFields, RadioButtons, etc… do you need for your design? Write it down on your sheet of paper.

Where do we put the code (Overall)?

|Three File System |

|[pic] |[pic] |[pic] |

|source |GUI (Panel) |driver/main() |

|methods involving calculation |all GUI aspects |start of the entire project |

|DATA STRUCTURES!! |GUI methods will CALL source methods |(much like C++) |

| | |ALWAYS COMPILE FROM HERE!! |

• Not everyone will use this system

o easier for now until the student gets more experience

o use this today for your examples

Where do we put the code (GUI Code)?

• There is an EXACT place for everything

• sources found on the internet may look different, but need to be placed in the same areas

|Overall placement of everything |

| |

|// all imports go here |

| |

|class Calc extends Applet |

|{ |

| |

|Data members |

| |

|private Button number1 = new Button(“1”); |

| |

|// create ALL GUI components here |

| |

| |

|Init |

| |

|init() |

|{ |

|// set Panel defaults (setSize, setLayout) |

|// add GUI components to ActionListener |

|// set all component properties (color, etc..) |

|// create internal panels (if necessary) |

|// add components to panels |

|// add any sub Panels to Base Panel |

|} |

| |

| |

|Paint(graphics) |

| |

|public void paint(Graphics g) |

|{ |

|Graphics2D g2 = (Graphics2D) g; |

|// paint and draw objects here |

|} |

| |

| |

| |

|ActionListener |

| |

|private class ButtonListener implements ActionListener |

|{ |

|// create actionListener class |

|} |

| |

| |

|} |

Creating the Driver for the First Application

• before getting into the details, getting the first GUI application running can be challenging

Open whatever IDE you are using, and download the “Files for Calc” at the website.

1. In Eclipse create a new Project

2. Create the file GUIDriver (also below) and Calc.java

3. From the zip file (link in website) copy and paste the code to the appropriate files. Make sure you name the files(classes the same) The code is NOT complete!!

|AWTGuiDriver.java |

| |

| |

|[pic] |

|[pic] |

|[pic] |

| |

|import java.awt.*; |

|import java.applet.*; |

|import java.awt.event.WindowAdapter; |

|import java.awt.event.WindowEvent; |

| |

| |

|public class AWTGuiDriver |

|{ |

|public static void main(String[] args) |

|{ |

|Frame window = new Frame("Second AWT GUI Window"); |

|window.addWindowListener(new WindowAdapter() |

|{ public void windowClosing(WindowEvent e) {System.exit(0);} }); |

|Applet applet = new Master(); |

|applet.init(); |

|window.add(applet); |

|window.pack(); |

|window.setVisible(true); |

|} |

|} |

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)

|Calc.java |

|import java.awt.*; |

|import java.awt.event.*; |

|[pic] |

|[pic] |

|[pic] |

| |

|import java.awt.*; |

|import java.applet.Applet; |

| |

| |

|public class Calc extends Applet |

|{ |

|private TextField answer = new TextField("0", 40); |

|// 0 is placed into the text, 40 chars long |

| |

|private Button number1 = new Button("1"); //text on Button is ‘1’ |

1. Below Button “number1” from code above, finish creating the code for the next 5 buttons and an operation button for your Java Components for the Simple Calculator.

2. Also, on the back on your paper design, mark the name given on each Java Component

GUI Windows

• each window is created by a Frame

o created in the MAIN of the Driver Class

o find it in the main!!

• the Frame would be the window that holds all of the other panels together

o panels are smaller windows that contain the GUI components such as a button, text field, etc…

o Panels are ADDED to the Frame

o Frames SHOULD NOT hold GUI components

• Things can get dicey since other Panels can be ADDED to other Panels

|Visualizing the Java Windowing Structure |

|Frame | |

| |Panel |

| | |

|Panel | |

| |Panel |

|Panel |Panel |

| | |

| |Panel |

|Panel |Panel |

| | |

|Panel | |

| | |

| | |

| | |

Frames, Base Panel, and Sub Panels

• Frames

o outer most window

o only messed with in the main

• Base Panel

o Applet class itself is a panel

o only manipulated in the init() method

o sub panels can be added to it

• Sub Panels

o created from scratch in init()

o added to BASE panel only when all features are manipulated

|First Sub Panel Example (Master.java) |

|import java.applet.Applet; |

|import java.awt.*; |

| |

|public class Master extends Applet |

|{ |

| |

|// …. |

| |

|public void init () |

|{ |

|setSize(new Dimension(500,500); |

| |

|Panel LeftWindow = new Panel(); |

|LeftWindow.setBackground(Color.RED); // must add import |

|LeftWindow.setPreferredSize(new Dimension(200, 50)); |

| |

|Panel RightWindow = new Panel() |

|RightWindow.setBackground(Color.BLUE); |

|RightWindow.setPreferredSize(new Dimension(150, 90)); |

| |

|add(LeftWindow); |

|add(RightWindow); |

|} |

|} |

Create an new project Window and add the code I have here.

[pic]

Change the color of one of the windows, the size, etc… Have fun!

Add a new CENTER window!!!

Types of Layouts

• Panel must be created first

• download code for these, LayoutExamples.zip

• Borderlayout

o BROKEN UP INTO SECTIONS

setLayout(new BorderLayout()); // this line goes INSIDE the init() (in Calc)

|BorderLayout Panel |

|North |

|West |Center |East |

|South |

• FlowLayout

o Single Panel

o Flows GUI components left to right

o Great for laying buttons together

o Left justifed

setLayout(new FlowLayout());// this line goes INSIDE the init() (in Calc)

|FlowLayout Panel |

|GUI Component1 |GUI Component2 |GUI Component3 |

• Grid Layout (GridBagLayout – less boxy)

o sets GUI component into a matrix format

o great for laying buttons together

o to set inside the container

init() // Calc init()

{

setLayout(new GridLayout(2, 3)); // ROW, then COLUMN

….

|2 x 3 GridLayout Example |

|GUI Component1 |GUI Component2 |GUI Component3 |

|GUI Component4 |GUI Component5 |GUI Component6 |

1. Create THE CODE for the GridLayout needed for you Calc. Where will the code code?? ****

2. Add a FEW buttons to the layout. Make sure your ORDER is correct.

add(number1)….. // where will it go?? And run it!!

• BoxLayout

o import javax.swing.BoxLayout;

o a set of GUI Components in a row, or in a column

▪ add to BASE Panel

• setLayout( new BoxLayout(this, BoxLayout.Y_AXIS) ); // or X_AXIS

▪ add to SUB Panel

• north.setLayout( new BoxLayout(north, BoxLayout.Y_AXIS) ); // or X_AXIS

| Horizontal Box Layout Example (X_AXIS) |Vertical Box Layout Example (Y_AXIS) |

| |GUI1 |

|GUI1 | |

|GUI2 |GUI2 |

|GUI3 | |

|GUI4 |GUI3 |

| | |

| |GUI4 |

| | |

|Showing the Different Layouts in Action |

|[pic] |[pic] |[pic] |

|[pic] |[pic] |

• “None”

o You can specify that a Panel NOT to have a layout

o In only ONE component in a certain area

More Layout Stuff



Nested Layouts

• OTHER Layouts can be added inside of other Layouts

• OTHER Panels can be added to the ORIGINAL Panel/Frame

o must watch how you declare

o inside THAT new panel can have smaller panels

• here are some other possibilities

|Nested Layout Examples |

|North |

| |

| |

| |

| |

| |

| |

| |

| |

| |

| |

| |

| |

| |

| |

|Center |

|East |

| |

| |

| |

| |

| |

| |

| |

| |

|Panel with a Panel |

| |

|Title |

| |

| |

| |

|Panel(s) |

| |

|BorderLayout Panel |

| |

|North |

| |

|West |

|Center |

|East |

| |

|South |

| |

| |

| |

|import java.awt.*; |

|import java.awt.*; |

| |

|public class MixedLayoutDemo extends Applet |

|{ |

|public MixedLayoutDemo() |

|{ |

|// base panel settings |

|setSize(new Dimension(300, 200)); |

|setLayout( new BoxLayout(this, BoxLayout.Y_AXIS) ); |

|setBackground(Color.CYAN); |

| |

|// sub Panels |

|Panel grid = new Panel(); |

|grid.setLayout(new GridLayout(3,3)); |

| |

|Panel flow = new Panel(); |

|flow.setLayout(new FlowLayout()); |

| |

|add(grid); // add OTHER PANEL to this BASE panel |

|add(flow); // add OTHER PANEL to this BASE panel |

| |

|// DRAW a VERY simple example of each of these layout with 3 buttons |

|// (Grid, 1 column, 3 rows) |

|} |

|} |

|Mixed Layout Example |

|[pic] |

1. Draw a new Calc reflecting the LAYOUT, and components inside on the LOWER half of the design paper.

2. What layout will you use? (You will need a mixed layout for the Simple Calculator). ( (SLIP)

3. Describe what Java Components will be in each Layout.

(Lupoli’s way of doing things)

Procedure for adding a Component to Panel(s)

• slight review, but with code

• all done in init() method

|Building an Applet |

|Init Layout |

|init() |[pic] |

|{ | |

|// set Panel defaults (setSize, setLayout) | |

|// add GUI components to ActionListener | |

|// set all component properties (color, etc...) | |

|// create internal panels (if necessary) | |

|// add components to panels | |

|// add any sub Panels to Base Panel | |

|} | |

|Init Example |

| |

|public void init() |

|{ |

|// base panel settings |

|setSize(new Dimension(300, 200)); |

|setLayout( new BoxLayout(this, BoxLayout.Y_AXIS) ); |

|setBackground(Color.CYAN); |

| |

|// set all component properties (color, etc..) |

|button1.setBackground(Color.red); |

| |

|// create sub Panels |

|Panel grid = new Panel(); |

|grid.setLayout(new GridLayout(3,3)); |

|Panel flow = new Panel(); |

|flow.setLayout(new FlowLayout()); |

| |

|// add components to panels |

|add(button1); |

|add(button2); |

|add(button3); |

|grid.add(button4); |

|grid.add(button5); |

|grid.add(button6); |

|grid.add(button7); |

|grid.add(button8); |

|grid.add(button9); |

| |

|// add any sub Panels to Base Panel |

|add(grid); |

|add(flow); |

| |

|} |

|// INSIDE THE INIT() |

|button1.addActionListener(new ButtonListener()); |

|button2.addActionListener(new ButtonListener()); |

|button3.addActionListener(new ButtonListener()); |

Complete this in order in Calc.java

1. Create Calc init() // do not re-create the buttons!!!

2. inside the init()

a. set layout to BorderLayout

b. create 2 secondary (smaller) Panels (INSIDE THE INIT()!!)

i. name one NORTH use FlowLayout

ii. name other CENTER use GridLayout

c. add TextField to NORTH

d. add all buttons to CENTER Panel

3. add north and center to Calc’s Panel

4. Compile and run (hopefully)

a. notice that if you hit a button, nothing happens

[pic]

ActionListener

• used to set code into effect when an event happens

o like a button being pressed

• import a java file

• is a PRIVATE CLASS INSIDE the GUI Class

java.awt.event.*; // for Action Listeners

• USES A RESERVED FUNCTION

o used inside the PANEL class

o function header must be:

▪ public void actionPerformed(ActionEvent e)

o conditions on where ActionListener function should be placed

o each GUI Component that we want to have an event happen:

▪ we must ADD IT TO THE ACTIONLISTENER

▪ button1.addActionListener(new ButtonListener());

|Action 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 |

| |

|if(actionCommand.equals("Button 1")) |

|{ OptionPane.showMessageDialog(null, "You pressed BUTTON 1"); return; } |

|if(actionCommand.equals("Button 2")) |

|{ OptionPane.showMessageDialog(null, "You pressed BUTTON 2"); return; } |

|if(actionCommand.equals("Button 3")) |

|{ OptionPane.showMessageDialog(null, "You pressed BUTTON 3"); return; } |

|} |

|} |

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

o example above

|ActionListener that matches text on Component |

|public void actionPerformed(ActionEvent e) |

|{ |

|String actionCommand = e.getActionCommand(); // gets what was written on GUI Component |

| |

|if(actionCommand.equals("Button 1")) |

|{ … } |

• by component variable’s name

o named in private section of the Panel class

|ActionListener that matches Component’s name |

|public void actionPerformed(ActionEvent event) |

|{ |

|if(event.getSource() == button1) // Button 1 was hit |

|{ …} |

| |

First Example with an ActionListener – (Text Match)

• it also has a few GUI Components (Buttons)

• uses the SAME “RightWindow.java”

• different GUIDriver (slighty), and new LeftWindow2.java

o download “ActionListener1.zip”

|LeftWindow2.java (all new) |

|import java.awt.Color; |

|import java.awt.Dimension; |

|import java.awt.*; |

|import java.awt.event.*; |

| |

|import java.awt.Panel; |

| |

|public class LeftWindow2 extends Applet |

|{ |

|private Button button1 = new Button("Button 1"); |

|private Button button2 = new Button("Button 2"); |

|private Button button3 = new Button("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 Panel |

|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 |

| |

|if(actionCommand.equals("Button 1")) |

|{ OptionPane.showMessageDialog(null, "You pressed BUTTON 1"); return; } |

|if(actionCommand.equals("Button 2")) |

|{ OptionPane.showMessageDialog(null, "You pressed BUTTON 2"); return; } |

|if(actionCommand.equals("Button 3")) |

|{ OptionPane.showMessageDialog(null, "You pressed BUTTON 3"); return; } |

|} |

|} |

|} |

[pic][pic]

First Example with an ActionListener – (Source Match)

• uses the SAME “RightWindow.java”, and “GuiDriver.java”

• new LeftWindow3.java

o download “ActionListener2.zip”

|LeftWindow3.java |

|import java.awt.Color; |

|import java.awt.Dimension; |

|import java.awt.*; |

|import java.awt.event.*; |

| |

|import java.awt.Panel; |

| |

|public class LeftWindow3 extends Applet |

|{ |

|private Button button1 = new Button("Button 1"); |

|private Button button2 = new Button("Button 2"); |

|private Button button3 = new Button("Button 3"); |

| |

|public LeftWindow3() |

|{ |

|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 Panel |

|add(button1); |

|add(button2); |

|add(button3); |

|} |

| |

|private class ButtonListener implements ActionListener |

|{ |

|public void actionPerformed(ActionEvent e) |

|{ |

|if(e.getSource() == button1) |

|{ OptionPane.showMessageDialog(null, "You pressed BUTTON 1"); return; } |

|if(e.getSource() == button2) |

|{ OptionPane.showMessageDialog(null, "You pressed BUTTON 2"); return; } |

|if(e.getSource() == button3) |

|{ OptionPane.showMessageDialog(null, "You pressed BUTTON 3"); return; } |

|} |

|} |

|} |

1. Import the ActionListener file needed

2. Create an ActionListener class and function for the Calc GUI.

a. Remember where do we physically place the code?

3. Using the “source match” method, for each NUMERICAL button place the code:

OptionPane.showMessageDialog(null, "You pressed "+ button1.getText() ); return;

4. Compile and Run

Java Component Reference

• Attached documentation

• Shows how to create and manipulate each

Setting the size of Java Components

• you can set the size of ANY GUI Component

• all have a default size

• (width, height) in PIXELS

button1.setPreferredSize(new Dimension(25, 25)); // Button

LeftWindow.setPreferredSize(new Dimension(200, 70)); // Frame/Panel

Problems that have occurred

• Java isn’t perfect with GUI

• Images would not change (transition of images only)

|Images in transition fix |

| |

|this.paintImmediately(this.getVisibleRect()); // this is the Extended Button |

|// place inside extended Button class |

setOpaque

• How transparent a component is

• Effects labels, radio/check boxes

o Label1.setOpaque(true);

Adding Images in AWT

Scenario 1

|In private member section |

| |

|customCanvas imageCanvas = new customCanvas(); |

|In void init() |

| |

|add(imageCanvas); |

|Added to END of the GUI Class |

| |

|private class customCanvas extends Canvas |

|{ |

|private static final long serialVersionUID = 1L; |

| |

|customCanvas() {} |

| |

|public void paint (Graphics g) |

|{ |

|Image img = null; |

|try { img = ImageIO.read(new File ("general_cargo_ship_dwg.jpg")); } |

|catch (IOException e) {e.printStackTrace();} |

|g.drawImage(img, 0,0, null); |

|} |

|} |

| |

Items to incorporate into these notes

lateness.setMinimumSize(new java.awt.Dimension(80, 20));

jScrollPane2.setViewportView(idtxt);

boatid.setCursor(new java.awt.Cursor(java.awt.Cursor.TEXT_CURSOR));

length.setDragEnabled(true); // length is a textfield

.addGap(18, 18, 18)

panelOne.add(Box.createRigidArea(new Dimension(0,10)));panelOne.add(rowOne);

-----------------------

Right Window

LeftWindow

Frame

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download