MT311 (Oct 2006) Java Application Development Tutorial 2 Graphical User Interface

Tutor Information Edmund Chiu (Group 1) OR Please begin your subject with [MT311] Webpage:

PART I GUI Components Containers Components Events and Listeners Layout Managers

Java GUI Framework In early day, Java GUI are supported by Abstract Window Toolkit (AWT) – Based on native widget in different platform – Buggy and not really portable Java Foundation Class (JFC) was introduced in Java 1.1 – AWT was replaced by Swing (javax.swing.*) – Other package in JFC provides 2D advanced graphics, pluggable look and feel, drag and drop and other facilities

Containers Originated from AWT Logical grouping of other containers and components Top level containers appear as windows and define your application areas – With title bar, system buttons and frame – Can be resized, moved and closed

JFrame Basic windowing supports such as title, positioning and resizing Steps to use JFrame 1. Create the frame with a particular title JFrame frame = new JFrame(Hello World); 2. Add containers and/or controls to the frame JButton button = new JButton(Say Hello); frame.getContentPane().add(button); 3. Arrange the controls frame.pack() 4. Make the frame visible frame.setVisible(true);

Sample Code (JFrame) import javax.swing.*; public class FrameDemo { public static void main (String[] args) { JFrame frame = new JFrame ( Demo ); frame.setSize(200,200); frame.setVisible(true); }

Other Issues on JFrame The close button only closes your JFrame, but not ends your application – Solution: frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE) You can set the initial size of your JFrame using setSize(int width, int height) You should explore the way to use other methods in JFrame by using the API specification

JDialog Simple window used for short-lived interactions such as – Prompting user for responses – Informing user of certain events To create a dialog JDialog dlg = new JDialog(owner, title, modality); – Modal dialog is used if you need user s response before proceeding – Non-modal dialog is used to present information that is safe to be ignored JOptionPane is used for generating common use standard dialogs

JOptionPane s Message Dialog Generate using: JOptionPane.showMessageDialog(null, I m the light of the world., Hello World, JOptionPane.INFORMATION_MESSAGE);

JApplet Applets are lightweight applications that can be embedded in a browser – Restricted from accessing and/or using local system resources No main methods – init() method do the initialization and kick off job

Sample Applet import javax.swing.*; public class AppletDemo extends JApplet { public void init() { JButton button = new JButton("Say Hello"); getContentPane().add(button); }

Intermediate Containers Intermediate containers are components that can contain other components – Cannot stand alone – Can be nested – containers can be placed inside a container JPanel is the most common intermeidate containers – JPanel does not have a visual realization – In general, it is used to group other controls to create More logical organization Easier positioning and resizing

JScrollPane A JScrollPane provides a scrollable view of a component – Horizontal and vertical scrollbars are given to move the component inside when it is larger than the physical area on the screen

JSplitPane Used to split an area into two distinct and independent partitions – splitPane = new JSplitPane( JSplitPane.HORIZONTAL_SPLIT, listScrollPane, pictureScrollPane);

JTabbedPane You can have several components (usually panels) share the same space. – By selecting the individual tab, one of the components can be shown at a time How to use: 1. Create a JTabbedPane 2. Add components to the JTabbedPane E.g.: tabbedPane.addTab("Tab 1", panel1);

JToolBar JToolBar is a container that groups several components (usually buttons with icons) into a row or column Often, tool bars provide easy access to functionality that is also in menus

Controls (JComponents) Controls differ from containers in that they actually do something on an interface Some common controls: – JLabel – display read-only text and icons support HTML formatting – Buttons – includes JButton, JRadioButton, and JCheckBox – Text Components – includes JTextField (single line text input) and JTextArea (multi-line editing) – Selection – JComboBox (drop-down list) and JList – Menus – JMenuBar, JMenu, JMenuItem, JCheckBoxMenuItem, and JRadioButtonMenuItem – Others – JSlider, JSpinner, Progress bars and etc.

JComponent Methods Common methods for the components – get/setText – setEnabled – isSelected – Millions of methods are supported by different components. You should review Java API specification and the respective online Java Tutorial to understand how to use them One last point on JRadioButton – They should be grouped into ButtonGroup in order to make only one radio button in the group being selected – However ButtonGroup is NOT a component and cannot be added to the container

Common Controls There are still many other!!

More Complex Components

Building a Swing Interface Step 1 – choose a top-level container – JFrame? JApplet? Step 2 – choose an intermediate container (if necessary) Step 3 – place your components (labels, buttons and etc.) onto the intermediate container(s) Step 4 – add your intermediate container(s) to the top- level container Step 5 – arrange the frame and show the window

Sample Program in Building Swing GUI import javax.swing.*; // import the Swing components public class HelloWorldSwing { public static void main(String[] args) { JFrame frame = new JFrame("Hello World"); JPanel pane = new JPanel(); JLabel label = new JLabel("Hello World"); JButton button = new JButton("Say Hello"); pane.add(label); pane.add(button); frame.getContentPane().add(pane); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.pack(); frame.setVisible(true); }

Event-Driven Programs In conventional procedural programs – Flow of control depends on input data only, deal with one input channel at a time (single-threaded) – Example: program wait for keyboard input and ignore other input until the first input is received – Disadvantage – most events are random in no particular order Event-driven program deals with any event when it arrives – User actions generate events – If you want to react to an event, you attach an event listener – When an event fires (happens), the event handler is invoked

Events An event is generated whenever there is a change to a component – Component resized component event – Mouse clicked mouse event A component can generate multiple event – A button clicked maybe mouse, maybe keyboard – We should handle semantic events (button clicked – ActionEvent) instead of low-level events

Event Listeners To react to a particular event, you need an event listener (interface) As there are many types of event, each should have their own listener interface Components have specific addXXXListener methods to attach event listeners to them Multiple event listeners may be registered to the same components The same event listener may be registered to multiple components

Events and Event Listeners ActionEvent ComponentEvent ContainerEvent FocusEvent InputEvent (Key/Mouse) InputMethodEvent InvocationEvent (run method) ItemEvent KeyEvent MouseEvent MouseWheelEvent PaintEvent TextEvent WindowEvent ActionListener ComponentListener ContainerListener FocusListener InputMethodListener ItemListener KeyListener MouseListener MouseMotionListener MouseWheelListener TextListener WindowFocusListener WindowListener WindowStateListener

Event Information To grab more information from an event to be handled, all event listener methods have a parameter giving the information regarding the specific event – public void actionPerformed (ActionEvent e) { … } The event object can provide information like – Event source – Event type

Extending HelloWorldSwing Example Add a class MyActionListener – public class MyActionListener implements ActionListener { public void actionPerformed(ActionEvent e) { JOptionPane.showMessageDialog( … ); } } Remember to register your button the action listener – MyActionListener myListener = new MyActionListener(); Button.addActionListener(myListener);

Event Adapters As Listeners are interfaces, you are required to implement all listener methods even you are not using one of them. – Empty methods can be used for those listener methods you are not required in the program Java provides Adapter classes for every Listener, with all methods empty – E.g., MouseListener has five methods: mousePressed, mouseReleased, mouseEntered, mouseExited and mouseClicked – User can use MouseAdapter and override only the method(s) they are care about.

Listener/Adapter Methods Component Listener/Adapter – componentHidden, componentMoved, componentResized, componentShown Container Listener/Adapter – componentAdded, componentRemoved Focus Listener/Adapter – focusGained, focusLost Key Listener/Adapter – keyPressed, keyReleased, keyTyped

Listener/Adapter Methods (cont d) Mouse Listener/Adapter – mouseClicked, mouseEntered, mouseExited, mousePressed, mouseReleased Mouse Motion Listener/Adapter – mouseDragged, moseMoved Mouse Input Listener/Adapter – mouse listener + mouse motion listener Window Listener/Adapter – windowActivted, windowClosed, windowClosing, windowDeactivated, windowDeiconified, windowIconified, windowOpened

Writing Event Listeners Many methods to write a event listener – Create a new ActionListener class (like the original example) Not good because creating a new class is rather heavy- handed – Making the HelloWorldSwing class implements ActionListener and put the method inside the HelloWorldSwing class Most casual programmers do so, but work in simple cases only. When the program becomes complex, we do not know which method is for the Listener and which is for the application

Writing Event Listeners (cont d) – Use inner class: define the listener class inside the application program Encapsulate the listener inside the class – Use anonymous class: we do not even need to have a class – the listener is only for the button we are handling – Inner class and anonymous class may make elegant and efficient code, but at the same time, may also make the code incomprehensible

Direct Implementing ActionListener public class HelloWorldSwing implements ActionListener { : public void actionPerformed(ActionEvent e) { JOptionPane.showMessageDialog( … ); }

Anonymous Event Listener button.addActionListener ( new ActionListener() { public void actionPerformed (ActionEvent e) { JOptionPane.showMessageDialog( … ); } );

Layout The way of arranging components on a container is layout – Overall placement and size Layout manager determine the relative position of the components. – Java can still use absolute positioning (by setting layout manager to null) – Layout managers are used because Java programs may appear in different platform which may have a different font, different screen size and etc. Flexible layouts are needed. Most GUI use flow layout as default – Default as BorderLayout: JApplet, JFrame and Dialog – Default as FlowLayout: Panel, Applet and JPanel

Common Layout Managers FlowLayout – arranges components from left to right GridLayout – displays components in a rectangular grid – E.g., container.setLayout(new GridLayout(2,3)); means 2 rows and 3 cols, components are added from left to right, then top to bottom. BorderLayout – divides the container into regions – programmers specifies where to place their components – The regions are PAGE_START (NORTH), PAGE_END (SOUTH), LINE_START (WEST), LINE_END (EAST) and CENTER

Border Layout Example import java.awt.*; import javax.swing.*; public class BorderLayoutDemo { public static void main(String[] args) { JFrame frame = new JFrame("BorderLayoutDemo"); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); Container pane = frame.getContentPane(); pane.add(new JButton("PAGE_START"), BorderLayout.PAGE_START); pane.add(new JButton("LINE_START"), BorderLayout.LINE_START); pane.add(new JButton("CENTER"), BorderLayout.CENTER); pane.add(new JButton("LINE_END"), BorderLayout.LINE_END); pane.add(new JButton("PAGE_END"), BorderLayout.PAGE_END); frame.pack(); frame.setVisible(true); }

Component Size By default, each component has a natural size – E.g., a button is just as tall and wide enough to fit the button label We can override the default by setting the preferred size – E.g., button.setPerferredSize(new Dimension(50, 200)); – You may set the maximum/minimum size of the component also, but the methods are not supported by all layout managers

Component Size and Layout Manager In Border Layout – Components in N and S will have natural height, but extend to full width – Components in E and W will have natural width but full height – Center is region is greedy, it occupies all area left by N, E, S, W In Grid Layout – Each component occupies full width and height of its own grid In Flow Layout – All components are in natural size Always use JPanel to group your components to make your layout flexible

Other Layout Manager Box Layout – Good for single row / single column layout Spring Layout – Most suitable for form – multiple rows and columns in varying width and height GridBag Layout – Most powerful layout – grid based, but a component can span multiple rows and/or columns

PART II Java Graphics

Graphics You can paint anything onto a graphical context – E.g, A JButton knows how to draw itself, and you can even make it to have an image on itself All components have a graphics context – Graphics g = component.getGraphics(); // not the usual way We usually get the graphics object through the paint method – void paint (Graphics g) – Paint method is called whenever the component needs repaint – Custom drawing is made by overriding the component s paint method

Coordinate System in Java Upper-left corner of the GUI component (a window or an applet) is (0, 0) x-coordinates increases from left to right y-coordinates increases from top to bottom coordinates are measured in the number of pixels

Drawing Lines and Shapes drawLine(int x1, int y1, int x2, int y2) – Draws a line between the points (x1, y1) and (x2, y2) in this graphics context's coordinate system. drawRect(int x, int y, int w, int h) – Draws a rectangle with its top-left corner at (x, y), and its width as w and its height as h drawOval(int x, int y, int w, int h) – Draws a circle or an ellipse that fits within the rectangle with top-left angle at (x, y), the width of the rectangle as w, and the height as h.

Drawing Lines and Shapes (cont d) drawPolygon(int[] xPoints, int[] yPoints, int nPoints) – Draws a closed Polygon which vertices are specified by the arrays of x- and y- coordinates drawArc(int x, int y, int width, int height, int startAngle, int arcAngle) – Draws the arc which: – begins at startAngle and extends for arcAngle degrees Angles are interpreted such that 0 degrees is at the 3 o'clock position. A positive value indicates a counter-clockwise rotation. – (x, y) is the coordinates of the top-left corner of the rectangle embedding the arc. The size of such rectangle is specified by the width and height arguments.

Filling Shapes The following methods draw a filled shape (filled with current Color) – fillRect(int x, int y, int w, int h) – fillOval(int x, int y, int w, int h) – fillPolygon(int[] xPoints, int[] yPoints, int nPoints) – fillArc(int x, int y, int width, int height, int startAngle, int arcAngle) There are still many other shapes Java can draw – draw3DRect, drawRoundRect, clearRect and etc.

Color Class Color class contains color constants and methods – Each color is created from RGB (Red-Green-Blue) value Color constructors: – public Color (int r, int g, int b) Color components can be retrieved using methods getRed(), getBlue() and getGreen() Common color can be retrieved using Color constants – Examples: Color.red, Color.orange, Color.yellow, Color.green To change the color used in a Graphics object, call setColor method – Example: g.setColor(Color.red);

Sample Applet of Drawing Lines and Shapes import javax.swing.JApplet; import java.awt.*; public class DrawLineDemo extends JApplet { public void init() { setBackground( new Color(0xcc, 0xcc, 0xcc)); } public void paint(Graphics g) { g.setColor(Color.red); g.drawLine(0, 0, 100, 100); g.setColor(Color.green); g.drawLine(250, 250, 120, 13); g.setColor(Color.blue); g.fillRect(100, 100, 100, 80); g.setColor(Color.orange); g.drawOval(30, 30, 200, 200); int x[] = { 19, 234, 9, 192, 62}; int y[] = { 35, 135, 241, 141, 71}; g.setColor(Color.cyan); g.fillPolygon(x, y, 5); }

Output of DrawLineDemo Applet

Graphics 2D Graphics object provides primary drawing functions only Graphics2D object provides more advanced features such as – Solid, dotted and patterned lines of any width – Gradient paint, image filling – Shape rotating, stretching and squashing You can safely upcast a Graphics object to Graphics2D

Sample Code of Graphics2D Applet (Only paint method is shown here) public void paint(Graphics g) { // cast Graphics to Graphics2D Graphics2D g2 = (Graphics2D) g; Dimension d = getSize(); // fill Ellipse2D.Double g2.setPaint(new GradientPaint(0, 0, Color.red, d.width, d.height, Color.white)); g2.fill(new Ellipse2D.Double(0, 0, d.width, d.height)); }

Output of Graphics2D Applet

Draw a String Method drawString(String s, int x, int y) can display a string s with the current font at the position of (x, y) (baseline of the first character) Current font can be set and retrieved using the methods – void setFont(Font f) – String getFont()

Using a Font Font class contains constants and methods for manipulating fonts Font Constructor: – public Font(String name, int style, int size) name = name of the font style = font style use font style constants: Font.PLAIN, Font.BOLD and Font.ITALIC (Font.BOLD | Font.ITALIC to apply both bold and italic) size are measured in points (1 point = 1/72 inch) Java 2D graphics has anti-aliasing capability to make text look smoother

Font Information A list of available fonts can be retrieved through method getFontList in the AWT Toolkit class: – String fontList[] = ToolKit.getDefaultToolKit().getFontList(); FontMetrics class defines methods to obtain font metrics such as height, ascent, descent and etc. – FontMetrics object can be retrieved from a Font object using getFontMetrics() – Using getStringBounds method in FontMetrics can know the exact length of a string shown in the screen

Drawing String Example public void paint(Graphics g) { Graphics2D g2 = (Graphics2D) g; g2.setRenderingHint( RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); g2.setColor(Color.blue); g2.setFont(new Font("Arial", Font.BOLD | Font.ITALIC, 18)); g2.drawString("Changing your font is FUNNY.", 50, 50); }

Drawing an Image To display image file, you use drawImage – boolean drawImage (Image img, int x, int y, ImageObserver o) draws image at x, y without scaling – boolean drawImage (Image img, int x, int y, int width, int height, ImageObserver o) draws image at x, y to a specific width and height To get image from the file – Image img = Toolkit.getDefaultToolkit().getImage( ); ImageObserver is the object which will be repainted when the image needs refresh (this)

Image Drawing Sample Code import javax.swing.JApplet; import java.awt.*; public class DrawImageDemo extends JApplet { Image img; public void init() { img = getImage(getDocumentBase(), "images/demo.gif"); setBackground(Color.white); } public void paint(Graphics g) { g.drawImage(img, 0, 0, getWidth(), getHeight(), this); }

Pluggable Look and Feel UIManager.setLookAndFeel( "com.sun.java.swing.plaf.gtk.GTKLookAndFeel");

Other Advanced Features Drag and Drop – Java s Data Transfer package (in Swing) supports Drag and Drop of GUI components and other objects Design Pattern – MVC – Observer/Observable pattern