1 graphical user interfaces in java tủ tài liệu bách khoa

Dr Manuel Carcenac - European University of Lefke Graphical User Interfaces in Java Introduction Elements of a GUI GUI hierarchy of containers and components Blueprint for the definition of a GUI Tuning the aspect of the GUI Some available containers and atomic components Events created by containers and components Examples: how to use the containers and atomic components Elaborate GUIs (Mode variables, Dynamically evolving GUIs) Examples: elaborate GUIs References: http://download.oracle.com/javase/tutorial/ http://download.oracle.com/javase/tutorial/uiswing/ Dr Manuel Carcenac - European University of Lefke Introduction Graphical User Interface: collection of input / output devices (buttons, …) inserted into one or more windows these windows and IO devices are displayed on the screen also, the IO devices react to actions over the keyboard and mouse two predefined packages: old package: Abstract Windowing Toolkit (AWT) new package built over AWT: Swing always include these imports at the start of your program: import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.event.*; if you use AffineTransform (see geometric transformations in next chapter), then include as well: import java.awt.geom.*; Dr Manuel Carcenac - European University of Lefke example: a basic GUI in Java with Swing and AWT import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.event.*; public class P { public static void main(String[] arg) { Gui gui = new Gui(); } } class Gui { JFrame f; JButton b; Gui() { f = new JFrame(); f.setFocusable(true); f.setVisible(true); f.getContentPane().setLayout(new FlowLayout(FlowLayout.LEFT)); b = new JButton(); b.setText("end"); f.getContentPane().add(b); b.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { System.exit(0); } } ); f.setSize(new Dimension(150 + 16 , 150 + 38)); } } Dr Manuel Carcenac - European University of Lefke Elements of a GUI containers: rectangular area containing other containers and/or atomic components top-level container: window containing the GUI can be a frame (in fact, we can have several frames) or an applet contains a content pane (special container) and eventually a menu bar general-purpose container = panel frame menu bar panels content pane atomic components: elaborate input / output device label (text and/or icon) , tool tip (a component's property) , button (with text and/or icon) menubar , menu , menu item check box , radio button text field , text area combo box , list , file chooser slider option pane Dr Manuel Carcenac - European University of Lefke events: due to the user manipulating the GUI (button clicked, …) , a container or atomic component (event source object) may produce an event object  in response to this event object , an event method will be called to process the request of the user GUI managing thread: "in parallel" with the thread of the program , the GUI managing thread: handles the events triggered by the containers and atomic components  it executes the event methods associated with the events carries out the painting of the containers and atomic components Dr Manuel Carcenac - European University of Lefke GUI hierarchy of containers and atomic components the top-level container (frame or applet) contains: ♦ eventually, a menu bar (we include it with setJMenuBar() ) ♦ always, a content pane (created automatically with the frame or applet and obtained with getContentPane() ) the content pane contains: ♦ several panels and/or atomic components (we include them with add() and remove them with remove() ) each panel contains: ♦ eventually, nothing (reserved area for graphics) ♦ or several panel containers and/or atomic components (we include them with add() and remove them with remove() ) frame frame.setJMenuBar(menu_bar); frame.getContentPane() menu_bar content_pane frame.getContentPane().add(panel); frame.getContentPane().add(panel); frame.getContentPane().add(button); button panel1 panel1.add(label); label panel2 panel1.add(text_field); text_field Dr Manuel Carcenac - European University of Lefke Blueprint for the definition of a GUI we describe the Graphical User Interface through the definition of the class Gui: declare the containers and atomic components as instance variables of Gui eventually, if we want to draw graphics in one or several panel or atomic component , subclass its class and override its paintComponent method = such subclasses are defined as member classes of Gui inside the constructor of Gui: create the containers (including one -or several- frame) for each frame, do: frame.setFocusable(true); frame.setVisible(true); create the atomic components, menu elements and establish their hierarchy (what contains what) define event listeners for some containers, atomic components, menu elements = reflex reactions to some events = it is ONLY WITHIN these reflex reactions that the containers or atomic components, the hierarchy of the GUI and the menu can be modified (add / remove an atomic component, reorganize the GUI, create another frame) At the end of the constructor, ONCE all the elements of a frame have been defined, we must enforce the layout: frame.setSize(new Dimension(width , height)); (enforce a given frame size) or frame.pack(); (frame size automatically set to pack up all components) Dr Manuel Carcenac - European University of Lefke class Gui { JFrame frame; JButton b1; subclass(es) of JPanel with paintComponent method overriden Gui() { create the containers, atomic components, menu elements and build their hierarchy: frame = new JFrame(); frame.setFocusable(true); frame.setVisible(true); b1 = new JButton(); frame.getContentPane().add(b1 , …); define event listeners on some of these containers, atomic components and menu elements to respond to events triggered by them for each frame: frame.setSize(new Dimension(width , height)); or frame.pack(); } } creation of the GUI inside main(): Gui gui= new Gui(); creation of the GUI inside a method of a class: class MyClass { Gui gui; myMethod( .) { gui = new Gui(); } } Dr Manuel Carcenac - European University of Lefke termination of the program: reaching the end of main() is not enough to terminate the program! indeed, the program consists of two threads: ♦ ♦ the default thread that executes main() the GUI managing thread that keeps displaying the GUI and answering events by executing event methods  to terminate the program, call System.exit(0); either in main() or in an event method Dr Manuel Carcenac - European University of Lefke Tuning the aspect of the GUI font: Font font = new Font(name , style , size); with name = style = "Serif" (equivalent to "TimesRoman") or "SansSerif" (equivalent to "Helvetica") or "Monospaced" (equivalent to "Courier") Font.PLAIN or Font.BOLD or Font.ITALIC or Font.BOLD+Font.ITALIC (combination) size = from 10 to 72 impose a font to the text inside a container, atomic component or menu element: c.setFont(font); color: color corresponding to given intensities of red, green, blue: Color color = new Color( (float ) 0.0 to 1.0 , (float ) 0.0 to 1.0 , (float ) 0.0 to 1.0); predefined colors (class variables): Color.black , Color.white Color.darkGray , Color.gray , Color.lightGray Color.red , Color.green , Color.blue Color.orange Color.pink Color.yellow set the background color of a container, atomic component or menu element: c.setBackground(color); (color behind text) set the foreground color of a container, atomic component or menu element: c.setForeground(color); (color of text) 10 Dr Manuel Carcenac - European University of Lefke example 3: check boxes class Gui { JFrame f; JPanel p; Gui() { f = new JFrame(); JCheckBox c1 , c2 , c3; f.setFocusable(true); f.setVisible(true); p = new JPanel(); p.setLayout(new GridLayout(0 , 1)); f.getContentPane().add(p, BorderLayout.WEST); c1 = new JCheckBox(); c1.setText("first choice"); c1.setSelected(true); p.add(c1); c2 = new JCheckBox(); c2.setText("sec choice"); c2.setSelected(false); p.add(c2); c3 = new JCheckBox(); c3.setText("third choice"); c3.setSelected(true); p.add(c3); c1.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { System.out.println("first choice is " + c1.isSelected()); } } ); c2.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { System.out.println("second choice is " + c2.isSelected()); } } ); c3.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { System.out.println("third choice is " + c3.isSelected()); } } ); f.setSize(new Dimension(200 + 16 , 200 + 38)); } } 39 Dr Manuel Carcenac - European University of Lefke example 4: radio buttons class Gui { JFrame f; JPanel p; Gui() { f = new JFrame(); JRadioButton r1 , r2 , r3; ButtonGroup g; f.setFocusable(true); f.setVisible(true); p = new JPanel(); p.setLayout(new GridLayout(0 , 1)); f.getContentPane().add(p, BorderLayout.WEST); r1 = new JRadioButton(); r1.setText("first choi."); r1.setSelected(false); p.add(r1); r2 = new JRadioButton(); r2.setText("sec choi."); r2.setSelected(true); p.add(r2); r3 = new JRadioButton(); r3.setText("third choi."); r3.setSelected(false); p.add(r3); g = new ButtonGroup(); g.add(r1); g.add(r2); g.add(r3); r1.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { System.out.println("first choice is " + r1.isSelected()); } } ); r2.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { System.out.println("second choice is " + r2.isSelected()); } } ); r3.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { System.out.println("third choice is " + r3.isSelected()); } } ); f.setSize(new Dimension(200 + 16 , 200 + 38)); } } 40 Dr Manuel Carcenac - European University of Lefke example 5: text field class Gui { JFrame f; JTextField tf; Gui() { f = new JFrame(); JLabel lb; f.setFocusable(true); f.setVisible(true); f.getContentPane().setLayout(new FlowLayout(FlowLayout.LEFT)); tf = new JTextField(7); tf.setFont(new Font("Serif", Font.ITALIC, 16)); tf.setText("Good"); f.getContentPane().add(tf); lb = new JLabel(); f.getContentPane().add(lb); tf.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { lb.setText(tf.getText()); } } ); f.setSize(new Dimension(200 + 16 , 100 + 38)); } } 41 Dr Manuel Carcenac - European University of Lefke example 6: class Gui { JFrame f; scrollable text area JTextArea ta; JScrollPane sp; Gui() { f = new JFrame(); f.setFocusable(true); f.setVisible(true); f.getContentPane().setLayout(new FlowLayout(FlowLayout.LEFT)); ta = new JTextArea(3 , 10); // ta.setLineWrap(true); ta.setWrapStyleWord(true); ta.setFont(new Font("Serif", Font.ITALIC, 16)); ta.setText("Hello\nhow are you?\n"); sp = new JScrollPane(ta , JScrollPane.VERTICAL_SCROLLBAR_AS_NEEDED , JScrollPane.HORIZONTAL_SCROLLBAR_AS_NEEDED); f.getContentPane().add(sp); f.setSize(new Dimension(200 + 16 , 200 + 38)); } } 42 Dr Manuel Carcenac - European University of Lefke example 7: combo box class Gui { JFrame f; JComboBox cb; Gui() { f = new JFrame(); JLabel lb; f.setFocusable(true); f.setVisible(true); cb = new JComboBox(new String[] { "Mehmet" , "Ayse" , "Akin" } ); cb.setEditable(true); cb.insertItemAt("Yiltan" , 2); cb.setSelectedIndex(2); f.getContentPane().add(cb , BorderLayout.SOUTH); lb = new JLabel(); f.getContentPane().add(lb , BorderLayout.NORTH); cb.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { lb.setText((String)cb.getSelectedItem()); } } ); f.setSize(new Dimension(200 + 16 , 100 + 38)); } } 43 Dr Manuel Carcenac - European University of Lefke example 8: list import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.event.*; public class Listprog { public static void main(String[] arg) { Gui gui = new Gui(); } } class Gui { JFrame frame; JList list; String[] array_list; Gui() { frame = new JFrame(); frame.setFocusable(true); frame.setVisible(true); array_list = new String[]{ " Mehmet" , " Ahmet" , " Ayse" , " Huseyin" , " Hasan" }; list = new JList(array_list); frame.getContentPane().add(list , BorderLayout.EAST); list.setSelectedIndex(2); list.addListSelectionListener(new ListSelectionListener() { public void valueChanged(ListSelectionEvent e) { int i = list.getSelectedIndex(); System.out.println(" selected item: " + array_list[i]); } } ); frame.setSize(new Dimension(200 + 16 , 200 + 38)); } } 44 Dr Manuel Carcenac - European University of Lefke example 9: file chooser class Gui { JFrame f; JButton b; Gui() { f = new JFrame(); JFileChooser fc; f.setFocusable(true); JLabel lb; f.setVisible(true); b = new JButton(); b.setText("select a file"); f.getContentPane().add(b , BorderLayout.NORTH); fc = new JFileChooser("."); lb = new JLabel(); f.getContentPane().add(lb , BorderLayout.SOUTH); b.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { int answer = fc.showDialog(f , "select"); if (answer == JFileChooser.APPROVE_OPTION) lb.setText(fc.getSelectedFile().getPath()); } } ); f.setSize(new Dimension(650 + 16 , 100 + 38)); } } 45 Dr Manuel Carcenac - European University of Lefke example 10: slider class Gui { JFrame f; JPanel p; JSlider sh , sv; JLabel lbh , lbv; Gui() { f = new JFrame(); f.setFocusable(true); f.setVisible(true); p = new JPanel(); f.getContentPane().add(p , BorderLayout.NORTH); lbh = new JLabel(); p.add(lbh); lbv = new JLabel(); p.add(lbv); sh = new JSlider(JSlider.HORIZONTAL , -100 , +100 , 0); sh.setMajorTickSpacing(20); sh.setMinorTickSpacing(5); sh.setPaintTicks(true); sh.setPaintLabels(true); f.getContentPane().add(sh , BorderLayout.SOUTH); sh.addChangeListener(new ChangeListener() { public void stateChanged(ChangeEvent e) { lbh.setText(" slider horizontal = " + sh.getValue()); } } ); sv = new JSlider(JSlider.VERTICAL , -1000 , +1000 , -500); sv.setMajorTickSpacing(200); sv.setMinorTickSpacing(50); sv.setPaintTicks(true); sv.setPaintLabels(true); f.getContentPane().add(sv , BorderLayout.EAST); sv.addChangeListener(new ChangeListener() { public void stateChanged(ChangeEvent e) { lbv.setText(" slider vertical = " + sv.getValue()); } } ); f.setSize(new Dimension(400 + 16 , 400 + 38)); } } 46 Dr Manuel Carcenac - European University of Lefke example 11: option pane import java.awt.*; import java.awt.event.*; import javax.swing.*; import javax.swing.event.*; public class P { public static void main(String[] arg) { Gui gui = new Gui(); String s; double value; int answer; { { s = JOptionPane.showInputDialog(gui.f , "enter a positive value"); value = Double.valueOf(s).doubleValue(); if (value < 0) JOptionPane.showMessageDialog(gui.f , "you entered a negative value!"); } while (value < 0); answer = JOptionPane.showConfirmDialog(gui.f , "continue?"); } while (answer == JOptionPane.YES_OPTION); System.exit(0); } } class Gui { JFrame f; Gui() { f = new JFrame(); f.setFocusable(true); f.setVisible(true); f.setSize(new Dimension(200 + 16 , 100 + 38)); } } 47 Dr Manuel Carcenac - European University of Lefke example 12: keyboard entry class Gui { JFrame f; JLabel lb; Gui() { f = new JFrame(); lb = new JLabel(); f.setFocusable(true); f.setVisible(true); f.getContentPane().add(lb , BorderLayout.NORTH); f.addKeyListener(new KeyAdapter() { public void keyTyped(KeyEvent e) { lb.setText(" you have typed the character key " + e.getKeyChar()); } } ); f.addKeyListener(new KeyAdapter() { public void keyPressed(KeyEvent e) { String s; switch (e.getKeyCode()) { case KeyEvent.VK_SHIFT: s = "shift"; break; case KeyEvent.VK_UP: s = "arrow up"; break; case KeyEvent.VK_DOWN: s = "arrow down"; break; case KeyEvent.VK_LEFT: s = "arrow left"; break; case KeyEvent.VK_RIGHT: s = "arrow right"; break; default: s = "other"; break; } lb.setText(" you have pressed the key: " + s); } } ); f.setSize(new Dimension(300 + 16 , 100 + 38)); } } 48 Dr Manuel Carcenac - European University of Lefke example 13: class Gui { JFrame f; mouse JPanel p; JLabel lb_pos , lb_in; Gui() { f = new JFrame(); f.setFocusable(true); f.setVisible(true); p = new JPanel(); f.getContentPane().add(p , BorderLayout.CENTER); lb_pos = new JLabel(); f.getContentPane().add(lb_pos , BorderLayout.NORTH); lb_in = new JLabel(); f.getContentPane().add(lb_in , BorderLayout.SOUTH); p.addMouseMotionListener(new MouseMotionAdapter() { public void mouseMoved(MouseEvent e) { lb_pos.setText(" mouse at ( " + e.getX() + " , " + e.getY() + " )" ); } } ); p.addMouseListener(new MouseAdapter() { public void mouseClicked(MouseEvent e) { String s; switch (e.getButton()) { case MouseEvent.BUTTON1: s = "BUTTON1"; break; case MouseEvent.BUTTON2: s = "BUTTON2"; break; case MouseEvent.BUTTON3: s = "BUTTON3"; break; default: s = "unknown button"; break; } lb_pos.setText(" mouse clicked " + e.getClickCount() + " times with " + s + " at ( " + e.getX() + " , " + e.getY() + " )" ); } } ); p.addMouseListener(new MouseAdapter() { public void mouseEntered(MouseEvent e) { lb_in.setText(" mouse inside panel" ); } } ); p.addMouseListener(new MouseAdapter() { public void mouseExited(MouseEvent e) { lb_in.setText(" mouse outside panel" ); } } ); f.setSize(new Dimension(400 + 16 , 200 + 38)); } } 49 Dr Manuel Carcenac - European University of Lefke Elaborate GUIs mode variables (or state variables): operating mode that consists in a succession of steps  implement the operating mode with a state machine or automaton: step step mode inactive step a mode (or state) variable indicates: ♦ if the operating mode is under way ♦ the next step to be carried out (if there are several steps) dynamically evolving GUIs: we can add or remove a GUI component after the GUI creation in constructor Gui() it must be done inside an event method, that is by the GUI managing thread at the end of this event method, we must call: frame.validate(); frame.repaint(); 50 Dr Manuel Carcenac - European University of Lefke Examples: elaborate GUIs example 1: mode variables class Point { int x , y; } class Line { int x1 , y1; int x2 , y2; } class Gui { JFrame f; JPanel p; JLabel lb; JMenuBar mb; JMenu m0; JMenuItem mi00 , mi01; Point point = new Point(); Line line = new Line(); Boolean mode_getpoint = false; int mode_getline = 0; Gui() { f = new JFrame(); f.setFocusable(true); f.setVisible(true); p = new JPanel(); f.getContentPane().add(p , BorderLayout.CENTER); lb = new JLabel(); f.getContentPane().add(lb , BorderLayout.SOUTH); mb = new JMenuBar(); f.setJMenuBar(mb); m0 = new JMenu(); m0.setText("get"); mb.add(m0); mi00 = new JMenuItem(); mi00.setText("point"); m0.add(mi00); mi01 = new JMenuItem(); mi01.setText("line"); m0.add(mi01); mi00.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { mode_getpoint = true; lb.setText(""); } } ); mi01.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { mode_getline = 1; lb.setText(""); } } ); 51 Dr Manuel Carcenac - European University of Lefke example (continued): p.addMouseListener(new MouseAdapter() { public void mouseClicked(MouseEvent e) { if (mode_getpoint) { point.x = e.getX(); point.y = e.getY(); lb.setText(" mode_getpoint = false; new point (" + point.x + " , " + point.y + ")" ); } else if (mode_getline == 1) { line.x1 = e.getX(); line.y1 = e.getY(); mode_getline = 2; } else if (mode_getline == 2) { line.x2 = e.getX(); line.y2 = e.getY(); mode_getline = 0; lb.setText(" new line (" + line.x1 + " , " + line.y1 + " , " + line.x2 + " , " + line.y2 + ")" ); } } } ); f.setSize(new Dimension(200 + 16 , 200 + 60)); } } 52 Dr Manuel Carcenac - European University of Lefke example 2: dynamic addition / removal of some components class Gui { JFrame f; JLabel lb; JTextField tf; JMenuBar mb; JMenu m0; JMenuItem mi00 , mi01 , mi02; Gui() { f = new JFrame(); f.setFocusable(true); f.setVisible(true); lb = new JLabel(); f.getContentPane().add(lb , BorderLayout.SOUTH); tf = new JTextField(); mb = new JMenuBar(); f.setJMenuBar(mb); m0 = new JMenu(); m0.setText("add"); mb.add(m0); mi00 = new JMenuItem(); mi00.setText("add textfield"); m0.add(mi00); mi01 = new JMenuItem(); mi01.setText("add new menu item"); m0.add(mi01); mi02 = new JMenuItem(); mi02.setText("new menu item"); mi00.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { f.getContentPane().add(tf , BorderLayout.NORTH); f.validate(); f.repaint(); } } ); mi01.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { m0.add(mi02); } } ); mi02.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { m0.remove(mi02); lb.setText(" menu item removed"); } } ); tf.addActionListener(new ActionListener() { public void actionPerformed(ActionEvent e) { f.getContentPane().remove(tf); lb.setText(tf.getText()); f.validate(); f.repaint(); } } ); f.setSize(new Dimension(200 + 16 , 100 + 60)); } } 53 ... example: a basic GUI in Java with Swing and AWT import java. awt.*; import java. awt.event.*; import javax.swing.*; import javax.swing.event.*; public class P { public static void main(String[] arg) {... selected string to be edited: combobox.setEditable(true); select a certain choice string by specifying its index (starts from 0): combobox.setSelectedIndex(index); insert a new choice string at index... slider: slider.setInverted(true); establish major and minor ticks according to some intervals: slider.setMajorTickSpacing(major_interval); slider.setMinorTickSpacing(minor_interval); display