Object Oriented Programming with JAVA Graphical User Interface GUI Lecture 6

1. Object Oriented ProgrammingwithJAVA Graphical User Interface GUI Lecture 6

2. GUI: Creating Simple Drawings • Java Coordinate system. • Coordinate units are measured in pixels (picture element);

3. GUI • The original graphical user interface (GUI) for Java was called the Abstract Windowing Toolkit (AWT( • A new GUI interface, known as Swing. Swing provides replacements for most of the AWT components

4. Swing vs. AWT • Abstract Window Toolkit (AWT) • AWT components are: • called heavyweight components. • They must rely on the local platform's windowing system to determine their functionality and their look and feel. • Every graphical units it will invoke native methods • Swing components are : • called lightweight components. • They don’t rely on the local platform's windowing system • Most Swing components are pure Java components which means they are written completely in Java [It doesn't invoke native methods] • Complete

6. GUI import java.awt.*; import javax.swing.*; import java.awt.FlowLayout; // specifies how components are arranged import java.awt.Graphics; import javax.swing.JFrame; // provides basic window features import javax.swing.JLabel; // displays text and images import javax.swing.ImageIcon; // loads images import javax.swing.JApplet; import javax.swing.JPanel;

7. Swing Components • JLabel – Displays uneditable text or icons. • JTextField – Enables user to enter data from the keyboard. Can also be used to display editable or uneditable text. • JButton – Triggers an event when clicked with the mouse. • JCheckBox – Specifies an option that can be selected or not selected. • JComboBox – Provides a drop-down list of items from which the user can make a selection by clicking an item or possibly by typing into the box.

8. Swing Components , cont… • JList – Provides a list of items from which the user can make a selection by clicking on any item in the list. Multiple elements can be selected. • JPanel – Provides an area in which components can be placed and organized. Can also be used as a drawing area for graphics.

13. Swing Components

14. Swing Components

15. Swing Components

16. Swing Components

17. Swing Components

18. Swing Components

20. Creating simple drawing class DrawPanel extends JPanel{ // draws an X from the corners of the panel public void paintComponent( Graphics g ){ // g is created by render device (screen) // call paintComponent to ensure the panel displays correctly super.paintComponent( g ); // Typical Swing approach that paint background int width = getWidth(); // get width of JPanel component. int height = getHeight(); // total height of current JPanel component // draw a line from the upper-left to the lower-right g.drawLine( 0, 0, width, height ); // draw a line from the lower-left to the upper-right g.drawLine( 0, height, width, 0 ); } // end method paintComponent } // end class DrawPanel

21. Creating simple drawing – cont. import java.awt.Graphics; import javax.swing.*; public class DrawPanelTest{ public static void main( String args[ ] ){ // create a panel that contains our drawing DrawPanel panel = new DrawPanel(); // create a new frame to hold the panel JFrame application = new JFrame(); // set the frame to exit when it is closed application.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); application.add( panel ); // add the panel to the frame application.setSize( 250, 250 ); // set the size of the frame application.setVisible( true ); // make the frame visible } // end main } // end class DrawPanelTest

22. Drawing Rectangles and Ovals public class ShapesTest{ public static void main(String[] args){ JFrame mf=new JFrame("Test Shapes"); mf.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); mf.setSize(300,300); Shapes ms=new Shapes(2); mf.add(ms); mf.setVisible(true); } } import javax.swing.*; import java.awt.*; class Shapes extends JPanel{ private int choice=0; public Shapes(int choice){ this.choice=choice; } public void paintComponent(Graphics g) { super.paintComponent(g); switch(choice){ case 1: for(int i=0;i<5;i++) g.drawRect(10+i*10,10+i*10,50+i*50,50+i*50); break; case 2: for(int i=0;i<10;i++) g.drawOval(10+i*10,10+i*10,50+i*50,50+i*50); } } }

23. drawRect & drawOval • drawRect & drawOval takes four arguments, the first two are for the left top position coordinate, the other two are for the width and height respectively.

24. Colors and Filled Shapes • Colors displayed on computer screens are defined by their red, green, and blue components. These components, called RGB values, have integer values from 0 to 255. The higher the value of a particular component, the brighter the particular shade will be in the final color. • Java uses class Color in package java.awtto represent colors using their RGB values. For convenience, the Color object contains 13 predefined static Color objects: Color.BLACK, Color.BLUE, Color.CYAN, Color.DARK_GRAY, Color.GRAY, Color.GREEN, Color.LIGHT_GRAY, Color.MAGENTA, Color.ORANGE, Color.PINK, Color.RED, Color.WHITE andColor.YELLOW. Class Color also contains a constructor of the form: public Color( int r, int g, int b ) • Filled rectangles and filled ovals are drawn using Graphics methods fillRect and fillOval , respectively.

25. Filling: Example public class ColorsTest{ public static void main(String[] args){ JFrame mf=new JFrame("Test Colors"); mf.setSize(300,300); mf.add(new UseColors()); mf.setVisible(true); } } import java.awt.*; import javax.swing.*; class UseColors extends JPanel{ public void paintComponent(Graphics g){ super.paintComponent(g); g.setColor(Color.YELLOW); g.fillOval( 10, 10, 200, 200 ); //eyes g.setColor(Color.BLACK); g.fillOval( 55, 65, 30, 30 ); g.fillOval( 135, 65, 30, 30 ); //draw mouth g.fillOval( 50, 110, 120, 60 ); g.setColor( Color.YELLOW ); g.fillRect( 50, 110, 120, 30 ); g.fillOval( 50, 120, 120, 40 ); } }

26. Example – Rainbow cont… import java.awt.*; import javax.swing.*; class DrawRainbow extends JPanel{ // Define indigo and violet final Color VIOLET = new Color( 128, 0, 128 ); final Color INDIGO = new Color( 75, 0, 130 ); // colors to use in the rainbow, starting from the innermost // The two white entries result in an empty arc in the center private Color colors[] ={ Color.WHITE, Color.WHITE, VIOLET, INDIGO, Color.BLUE, Color.GREEN, Color.YELLOW, Color.ORANGE, Color.RED }; // constructor public DrawRainbow(){ setBackground( Color.WHITE ); // set the background to white } // end DrawRainbow constructor

27. Example - Rainbow // draws a rainbow using concentric circles public void paintComponent( Graphics g ){ super.paintComponent( g ); int radius = 20; // radius of an arch // draw the rainbow near the bottom-center int centerX = getWidth() / 2; int centerY = getHeight() - 10; // draws filled arcs starting with the outermost for ( int counter = colors.length; counter > 0; counter-- ){ // set the color for the current arc g.setColor( colors[ counter - 1 ] ); // fill the arc from 0 to 180 degrees g.fillArc( centerX - counter * radius, centerY - counter * radius, counter * radius * 2, counter * radius * 2, 0, 180 ); } // end for } // end method paintComponent } // end class DrawRainbow

28. Example – Rainbow cont… public class DrawRainbowTest{ public static void main( String args[ ] ){ DrawRainbow panel = new DrawRainbow(); JFrame application = new JFrame(); application.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE ); application.add( panel ); application.setSize( 400, 250 ); application.setVisible( true ); } // end main } // end class DrawRainbowTest

29. Example – Rainbow cont… Method setBackground takes a single Color argument and sets the background of the component to that color. • Method fillArc requires six parameters. The first four represent the bounding rectangle in which the arc will be drawn. The first two specify the coordinates for the upper-left corner of the bounding rectangle, and the next two specify its width and height. The fifth parameter is the starting angle on the oval, and the sixth specifies the sweep, or the amount of arc to cover. The starting angle and sweep are measured in degrees, with zero degrees pointing right. A positive sweep draws the arc counter-clockwise, while a negative sweep draws the arc clockwise. A method similar to fillArc is drawArc it requires the same parameters as fillArc , but draws the edge of the arc rather than filling it.