F27SB2 Software Development 2 Lecture 6: Java GUIs 5.

Slides:



Advertisements
Similar presentations
Graphical User Interfaces
Advertisements

Computer Science 209 Images and GUIs. Working with Java Colors The class java.awt.Color includes constants, such as Color.red, for some commonly used.
Graphical User Interfaces (Part IV)
Unit 3 Graphical User Interface (GUI) Dr. Magdi AMER.
Graphic User Interfaces Layout Managers Event Handling.
F27SB2 Programming Languages
CMSC 341 Building Java GUIs. 09/26/2007 CMSC 341 GUI 2 Why Java GUI Development? Course is about Data Structures, not GUIs. We are giving you the opportunity.
Introduction to Java Classes, events, GUI’s. Understand: How to use TextPad How to define a class or object How to create a GUI interface How event-driven.
Tic Tac Toe Game playing strategies
F27SB2 Software Development 2 Lecture 7: State Diagrams.
Representing a Game Board In a game, we represent the action taking place using an array – In a very simple game, we use individual variables to represent.
Java Swing Recitation – 11/(20,21)/2008 CS 180 Department of Computer Science, Purdue University.
Event Driven Programming and GUIs Part 3 CS221 – 4/15/09.
GUI Tutorial Day 3. Custom Dialog Create, display, hide, retrieve information.
IEEM 110 Computing in Industrial Applications Basic User Interface in Java.
GUI and Event-Driven Programming Recitation – 3/6/2009 CS 180 Department of Computer Science, Purdue University.
CS102--Object Oriented Programming Lecture 19: – The Swing Package (II) Copyright © 2008 Xiaoyan Li.
Layout Mangers CSC 171 FALL 2001 LECTURE 14. History: The Transistor William Shockley, John Bardeen, and Walter Brattain invent the transfer resistance.
Slides prepared by Rose Williams, Binghamton University Chapter 17 Swing I.
F27SB2 Software Development 2 Lecture 8: State Diagram & GUI Example.
Introduction to GUI Java offers a great number of pre-defined classes to support the development of graphical user interfaces –These are broken down into.
1 Event Driven Programming wirh Graphical User Interfaces (GUIs) A Crash Course © Rick Mercer.
OOD Case Study (For parallel treatment, see Chapter 2 of the text)
Consolidation. Code making (i.e. making ciphers) is undertaken by a cryptographer whereas cryptanalysts try to break ciphers in order to gain intelligence.
Layout Management Containers can arrange their components. Our container is a JPanel, and it can set the way it’s components will be laid out : mypanel.setLayout.
Applets and Frames CS 21a: Introduction to Computing I First Semester,
F27SB2 Software Development 2 Lecture 4: Java GUIs 3.
Introduction to GUI in Java 1. Graphical User Interface Java is equipped with many powerful,easy to use GUI component such as input and output dialog.
GUI Components and Design Here we add one more component to our programs, JButtons –JButtons can only be inserted into JPanels (or JApplets) –Clicking.
Java Event Handling CSIS 3701: Advanced Object Oriented Programming.
CSC 205 Programming II Lecture 18 The Eight Queens Problem.
Static Class Methods CSIS 3701: Advanced Object Oriented Programming.
Copyright © 2002, Systems and Computer Engineering, Carleton University c-Gui3.ppt * Object-Oriented Software Development Part 18-c Building.
Announcements This Wednesday, Class and Labs are cancelled! The last lab is due this Wednesday … how many people are planning on doing it? Finally posted.
Timer class and inner classes. Processing timer events Timer is part of javax.swing helps manage activity over time Use it to set up a timer to generate.
MT311 Java Application Development and Programming Languages Li Tak Sing ( 李德成 )
Applets and Frames. Copyright 2005, by the authors of these slides, and Ateneo de Manila University. All rights reserved L14: GUI Slide 2 Applets Usually.
GUI Basics. What is GUI? A graphical user interface (GUI) is a type of user interface item that allows people to interact with programs in more ways than.
Two-Dimensional Arrays That’s 2-D Arrays Girls & Boys! One-Dimensional Arrays on Steroids!
Georgia Institute of Technology More on Creating Classes part 2 Barb Ericson Georgia Institute of Technology Oct 2005.
Introduction to GUI in 1 Graphical User Interface 2 Nouf Almunyif.
CIS Intro to JAVA Lecture Notes Set July-05 GUI Programming – Home and reload buttons for the webbrowser, Applets.
COP3502 Programming Fundamentals for CIS Majors 1 Instructor: Parisa Rashidi.
Review_6 AWT, Swing, ActionListener, and Graphics.
Computer Science 209 GUIs Model/View/Controller Layouts.
Chapter 11 - A GUI Interacting With a Problem Domain Class1 Chapter 11 A GUI Interacting With a Problem Domain Class 11.
Graphical User Interfaces A Graphical User Interface (GUI) in Java is created with at least three kinds of objects: –components, events, and listeners.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Tutorial 4 – Completing the Inventory Application.
Creating a GUI Class An example of class design using inheritance and interfaces.
1 Layout Managers Layout managers –Provided for arranging GUI components –Provide basic layout capabilities –Processes layout details –Programmer can concentrate.
Arrays Chapter 7. MIS Object Oriented Systems Arrays UTD, SOM 2 Objectives Nature and purpose of an array Using arrays in Java programs Methods.
© Copyright by Deitel & Associates, Inc. and Pearson Education Inc. All Rights Reserved. 1 Outline 17.1 Test-Driving the Student Grades Application.
Swing GUI Components So far, we have written GUI applications which can ‘ draw ’. These applications are simple, yet typical of all Java GUI applications.
Graphical User Interface (GUI)
5-1 GUIs and Events Rick Mercer. 5-2 Event-Driven Programming with Graphical user Interfaces  Most applications have graphical user interfaces to respond.
Visual Basic Declaring Variables Dim x as Integer = 0 In the statement above, x is being declared as an Integer (whole number) and is initialised.
GUIs & Event-Driven Programming Chapter 11 Review.
Java Visual Applications CSIS 3701: Advanced Object Oriented Programming.
GUI.1 Graphical User Interfaces GUIs. GUI.2 The Plan Components Flat Layouts Hierarchical Layouts Designing a GUI Coding a GUI.
Arrays Chapter 7.
Modular Event Handling
CompSci 230 S Programming Techniques
Swing JComponents.
“Form Ever Follows Function” Louis Henri Sullivan
Graphical User Interface (pronounced "gooey")
Ellen Walker Hiram College
Timer class and inner classes
PC02 Consolidation %WITTY_QUOTE%. PC02 Consolidation %WITTY_QUOTE%
CiS 260: App Dev I Chapter 6: GUI and OOD.
Graphical User Interface
Presentation transcript:

F27SB2 Software Development 2 Lecture 6: Java GUIs 5

Buttons and enumerated types often want to manipulate a problem specific set of values e.g. a student my fail, pass, gain merit or gain distinction in an exam useful if we had distinct values for each possibility enumerated type – set of discrete values with textual identifiers

Buttons and enumerated types could use distinct variable names e.g. exam grades: fail, pass, merit, distinction could give each variable a distinct value from an existing class e.g. exam grades as integer final int fail = 0; final int pass = 1; final int merit = 2; final int distinction = 3;

Buttons and enumerated types can now use variables as if they were values disadvantage – no distinct class for the enumerated type can use any value from representation class in context where enumerated type value is expected e.g. int mygrade = 27;

Buttons and enumerated types better to define a new class class Grade { private int rep; public Grade(int r) { rep = r; } }... Grade fail = new Grade(0); Grade pass = new Grade(1);...

Buttons and enumerated types a variable of a class can only be set to values from that class Grade mygrade = 27; // type error! Grade mygrade = pass; // OK! still problems of input/output – everything must be represented in files/from keyboard/on screen using characters – need to convert characters to/from enumerated type – user can enter invalid characters

Buttons and enumerated types Grade readGrade(BufferedReader f) { String g = f.readLine().trim(); if(g.equals(”fail”)) return fail; if(g.equals(”pass”)) return pass;... throw new Exception(“bad grade”); }

Buttons and enumerated types replace string input with JButton s one JButton for each value select JButton to enter value no need to check validity user can only select from available JButton s no need to convert string

Buttons and enumerated types e.g. count fruit consumption JButton - select fruit JLabel - display count fruit count JFrame JButton JLabel

Buttons and enumerated types represent each item of fruit as member of a class with own: – JButton – JLabel – integer count class Item { JButton b; JLabel c; int count;

Buttons and enumerated types constructor to initialise JButton, count, and JLabel public Item(String name) { b = new JButton(name); b.setFont(new Font("sanserif",Font.BOLD,24)); b.setForeground(Color.white); b.setBackground(Color.black); count=0; c = new JLabel("0",JLabel.CENTER); c.setFont(new Font("sanserif",Font.BOLD,24)); c.setBackground(Color.white); }

Buttons and enumerated types NB no separate String field for name – hold name on JButton – use getText if we need the name class for Fruit enumerated type class Fruit extends Frame implements ActionListener constructor to: – create each value – add each JLabel and JButton to JFrame – add ActionListener for each JButton

Buttons and enumerated types could use individual variables { Item papaya = new Item(“papaya”); Item peach = new Item(“peach”);... for many Item s use an array { Item [] f; String [] names = {"papaya","peach","pear","persimmon", "physalis","pineapple","plum","pomegranite"}; final int FMAX = 8;

Buttons and enumerated types public Fruit() { f = new Item[FMAX]; setLayout(new GridLayout(FMAX,2)); for(int i=0;i<FMAX;i++) { f[i] = new Item(names[i]); add(f[i].b); f[i].b.addActionListener(this); add(f[i].c); }

Buttons and enumerated types papaya 1 peach 1 pomegranite 221 f 0 1 FMAX JButton b JLabel c int count

Buttons and enumerated types actionPerformed to: – identify JButton – update count & JLabel public void actionPerformed(ActionEvent e) { for(int i=0;i<FMAX;i++) if(e.getSource()==f[i].b) { f[i].count++; f[i].c.setText(f[i].count+""); }

Buttons and enumerated types class TestFruit { public static void main(String [] args) throws IOException {... } }

Numeric key pad use as front end to other programs 10 decimal digit keys – clear key - Z(ero) multiple digit display

Numeric key pad Z0 digit Ndigit 0 JFrame JPanel of JLabels JPanel of JButtons

Numeric key pad keep track of current value in display key 0-9 – shift all displays left – put new key value in right-most display – multiply current value by 10 and add new digit

Numeric key pad e.g. current value is 14 user presses 5 current value = 14 * ==

Numeric key pad Z – set all displays to 0 & set current value to 0 use BorderLayout for JFrame add display to North add keys to Center use GridLayout for JPanels

Numeric key pad make array of JLabels for display make array of JButtons for keypad class Keypad extends JFrame implements ActionListener { JLabel [] display; final int DISPLAYS = 10; JButton [] keys; JButton CLR; int value; final int KEYS = 10; JPanel d,k;

Numeric key pad JLabel setupLabel(String s) { JLabel l = new JLabel(s,JLabel.CENTER); l.setFont(new Font("Sansserif",Font.PLAIN,18)); l.setBackground(Color.white); l.setOpaque(true); return l; } public JButton setupButton(String s,Container c) { JButton b = new JButton(s); b.setFont(new Font("Sansserif",Font.PLAIN,18)); b.setBackground(Color.white); b.setOpaque(true); b.addActionListener(this); c.add(b); return b; }

Numeric key pad map JLabels to display public Keypad() { int i; d = new JPanel(new GridLayout(1,DISPLAYS)); display = new JLabel[DISPLAYS]; for(i=0;i<DISPLAYS;i++) display[i]=setupLabel("0"); add JLabels to display in reverse order for(i=DISPLAYS-1;i>=0;i--) d.add(display[i]); add(BorderLayout.NORTH,d);

Numeric key pad add keypad JButton s in order: 1-9, Z, 0 k = new JPanel(new GridLayout(4,3)); keys = new JButton[KEYS]; for(i=1;i<KEYS;i++) keys[i] = setupButton(i+"",k); CLR = setupButton("Z",k); keys[0] = setupButton("0",k); add(BorderLayout.CENTER,k); value = 0; }

Numeric key pad public void actionPerformed(ActionEvent e) { if(e.getSource()==CLR) { value = 0; for(int i=0;i<DISPLAYS;i++) display[i].setText("0"); } else { for(int i=0;i<KEYS;i++) if(e.getSource()==keys[i]) ith key selected so new digit has value i { value=10*value+i;

Numeric key pad shift text from display[j] to display[j+1] lose text on leftmost display... for(int j=DISPLAYS-2;j>=0;j--) display[j+1]. setText(display[j].getText()); set rightmost display to i display[0].setText(i+""); return; }

Numeric keypad

Sliding blocks puzzle 8 square blocks with a distinctive mark on each block square tray with 3*3 block positions arrange blocks in tray in some specified order from some initial configuration cannot pick blocks up can only slide block into free space

Sliding blocks puzzle c) b) a) d)

Sliding blocks puzzle represent tray as 3*3 grid of JButtons numbered blocks block in row i/column j has number: i*3+j column: row: block in row 0 column 0 = 0*3+0+1 = 1 block in row 0 column 1 = 0*3+1+1 = 2 block in row 0 column 2 = 0*3+2+1 = 3 block in row 1 column 0 = 1*3+0+1 = 4 block in row 1 column 1 = 1*3+1+1 = 5 block in row 1 column 2 = 1*3+2+1 = 6 block in row 2 column 0 = 2*3+0+1 = 7 block in row 2 column 1 = 2*3+1+1 = 8

Sliding block puzzle user selects JButton to “move” block into space program swaps text on selected JButton and space JButton can only move block if it is next to the space – i.e. in same row and block is to left/right of space – i.e. in same column and block is above/below space

Sliding block puzzle suppose block is in row i and column j suppose space is in row spaceI and column spaceJ block can move into space if: i==spaceI && (j==spaceJ-1 || j==spaceJ+1) || j==spaceJ && (i==spaceI-1 || i==spaceI+1)

Sliding blocks puzzle class Blocks extends JFrame implements ActionListener { JButton [][] blocks; remember row/column for space int spaceI,spaceJ; public JButton setupButton(String s,Container c) { JButton b = new JButton(s); b.setFont(new Font("Sansserif",Font.PLAIN,18)); b.setBackground(Color.white); b.setOpaque(true); c.add(b); b.addActionListener(this); return b; }

Sliding blocks puzzle public Blocks() { setLayout(new GridLayout(3,3)); blocks = new JButton[3][3]; set up each block with appropriate label for(int i=0;i<3;i++) for(int j=0;j<3;j++) blocks[i][j]= setupButton((i*3+j+1)+"",this); set up space JButton in bottom right corner blocks[2][2].setText(""); spaceI=2; spaceJ=2; }

Sliding blocks puzzle public void actionPerformed(ActionEvent e) { for(int i=0;i<3;i++) for(int j=0;j<3;j++) if(e.getSource()==blocks[i][j]) if((i==spaceI && (j==spaceJ-1 || j==spaceJ+1)) || (j==spaceJ && (i==spaceI-1 || i==spaceI+1))) set current space JButton text to text from selected JButton { blocks[spaceI][spaceJ]. setText(blocks[i][j].getText());

Sliding blocks puzzle remember row/column position of new space JButton and set text to blank spaceI=i; spaceJ=j; blocks[spaceI][spaceJ].setText(""); return; } class TestBlocks {... }

Sliding blocks puzzle

Noughts and crosses game played on 3*3 board each player makes either “O” or “X” mark players take it in turns to place mark on free grid square of their choice first player to place 3 marks in horizontal/vertical/diagonal straight line wins X O X O

Noughts and crosses represent board as 3*3 grid of JButton s – player presses JButton to make mark messages X OO X JFrame JLabel JPanel of JButton s

Noughts and crosses computers chooses/marks JButton in turn after user plays: – check if legal square i.e. no mark – set mark – check if user wins – computer plays in next free square if none then draw many better algorithms – check if computer wins

Noughts and crosses class Noughts extends Frame implements ActionListener { JButton [][] squares; JLabel messages; JPanel board; public JButton setupButton(String s,Container c) { JButton b = new JButton(s); b.setFont(new Font("Sansserif",Font.PLAIN,24)); b.setBackground(Color.white); b.setOpaque(true); c.add(b); b.addActionListener(this); return b; }

Noughts and crosses public Noughts() { board = new JPanel(new GridLayout(3,3)); squares = new JButton[3][3]; for(int i=0;i<3;i++) for(int j=0;j<3;j++) squares[i][j]= setupButton("",board); add(BorderLayout.CENTER,board); messages = new JLabel("Select a square to play X.", JLabel.CENTER); messages.setFont(new Font("Serif",Font.ITALIC,18)); messages.setBackground(Color.white); add(BorderLayout.NORTH,messages); }

Noughts and crosses boolean checkwin(String mark) { boolean rwin, cwin; for(int i=0;i<3;i++) { rwin=true; cwin=true; for(int j=0;j<3;j++) check next in row i { rwin=rwin && squares[i][j].getText().equals(mark); check next in column i cwin=cwin && squares[j][i].getText().equals(mark); } if(rwin || cwin) return true; }

Noughts and crosses check both diagonals return (squares[0][0].getText().equals(mark) && squares[1][1].getText().equals(mark) && squares[2][2].getText().equals(mark)) || (squares[0][2].getText().equals(mark) && squares[1][1].getText().equals(mark) && squares[2][0].getText().equals(mark)); }

Noughts and crosses return boolean to indicate whether or not computer could find a blank square boolean computerplay() { for(int i=0;i<3;i++) for(int j=0;j<3;j++) if(squares[i][j].getText().equals("")) { squares[i][j].setText("O"); return true; } return false; }

Noughts and crosses public void actionPerformed(ActionEvent e) { for(int i=0;i<3;i++) for(int j=0;j<3;j++) if(e.getSource()==squares[i][j]) if(squares[i][j].getText().equals("")) { squares[i][j].setText("X"); if(checkwin("X")) messages.setText("You win."); else if(!computerplay()) messages.setText("Draw."); else if(checkwin("O")) messages.setText("I win.");

Noughts and crosses else messages.setText("Select a square to play X."); return; } else { messages. setText("Can't play in that square."); return; } class TestNoughts {... }

Noughts and crosses