GUI Tutorial

  • View

  • Download

Embed Size (px)


GUI Tutorial. Images. Images. Useful Info not on final exam. Images and Icons. Image class Abstract class why? Superclass of all graphical image classes Icon interface Represents a fixed-sized picture Methods getIconHeight, getIconWidth, paintIcon - PowerPoint PPT Presentation


  • GUI TutorialImages

  • ImagesUseful Info not on final exam

  • Images and IconsImage classAbstract class why?Superclass of all graphical image classesIcon interfaceRepresents a fixed-sized pictureMethods getIconHeight, getIconWidth, paintIconCan be used to decorate buttons, labels, tabbed panesImageIcon classImplementation of the Icon interfaceCreates an icon from a GIF, JPEG, or PNG image. *

  • Wheres the image?Common issue: Eclipse must be able to find the imagesFor compatibility with jar files, store under srcHow can Eclipse find the image?Create images folder under the [Project]/srcDrag your file into Eclipse (DO NOT just copy in Windows, Eclipse wont know about it.)

  • Need to find the imageURL url = getClass().getResource("/images/sm_crazybird.gif");

    URL = uniform resource locatorgetClass() returns a Class object. Stores details about the class, such as methods, fields etc. getResource(String) finds a resource with a given name. First creates absolute name of resource. If the String begins with /, absolute name is String (minus the /). Otherwise, the package name is appended to the front. In the package name, . are converted to / (e.g. package one.two.three would be one/two/three. Important in order to match directory structure. Toolkit - abstract superclass of all actual implementations of the Abstract Window Toolkit. Subclasses of Toolkit are used to bind the various components to particular native toolkit implementations. Toolkit.getDefaultToolkit() gets appropriate toolkit for this platformToolkit.getDefaultToolkit().getImage(url) reads gif, png or jpg pixel data, creates an Image

  • Potential IssueImages have to be loaded from disk, can take timeMight have code to draw image on JPanel, but image isnt loaded when app displays Solution: MediaTrackerCreate a MediaTracker objectAdd image(s)Wait for image(s) to loadMust use try/catch, in case process is interrupted

  • Put it in codepublic class ImagePanel extends JPanel {private Image thumbnail; public ImagePanel() { MediaTracker tracker = new MediaTracker(this); URL url = getClass().getResource("/images/crazy_cat.gif"); Image original = Toolkit.getDefaultToolkit().getImage(url); tracker.addImage(original, 0); try { tracker.waitForID(0); } catch (InterruptedException e) { return; } thumbnail = original.getScaledInstance(64, 64, Image.SCALE_FAST); } public void paintComponent(Graphics g) { int PADDING = 20; g.drawImage(thumbnail, PADDING, PADDING, 64, 64, null); }}CHANGE image name as needed

  • Images and Buttonspublic class ButtonPanel extends JPanel {private JButton myButton;private ImageIcon myImage;

    public ButtonPanel() { myButton = new JButton(); URL url = getClass().getResource("/images/crazycat.gif"); myImage = new ImageIcon(Toolkit.getDefaultToolkit().getImage(url)); myButton.setIcon(myImage); add(myButton); }}

  • Put it all togetherpublic class ImageFrame extends JFrame { public ImageFrame() { setTitle("Image Play"); setSize(180, 250); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); ImagePanel imagePanel = new ImagePanel(); add(imagePanel, BorderLayout.CENTER); ButtonPanel buttonPanel = new ButtonPanel(); add(buttonPanel, BorderLayout.SOUTH); } public static void main(String[] args) { // Puts GUI on regular event queue, will update as soon as possible SwingUtilities.invokeLater(new Runnable() { public void run() { ImageFrame frame = new ImageFrame(); frame.setVisible(true); } });}}

  • Quick Info: ThreadsThreads are covered in detail in CSCI400 and CSCI442For now, its good to know that there are potentially 3 threads:Initial threads, the threads that execute initial application code. The main method runs in this threadThe event dispatch thread, where all event-handling code is executed. Most code that interacts with the Swing framework must also execute on this thread.Worker threads, also known as background threads, where time-consuming background tasks are executed. We wont deal with these.

  • Correct way to start a GUIpublic static void main(String[] args) {SwingUtilities.invokeLater(new Runnable() { public void run() { ImageFrame frame = new ImageFrame();frame.setVisible(true); } });}

  • More ImagesDraw on a panel, MediaTracker

  • MediaTrackerImages that are created from a URL, filename or byte array are preloaded using MediaTracker to monitor the loaded state of the image.

  • You can also draw imagesimport javax.swing.*;import*;import java.awt.*;public class ImagePanel extends JPanel {private Image original;private MediaTracker tracker;public static final int PADDING = 20;

    public ImagePanel(){ tracker = new MediaTracker(this); original = getImage("/images/crazycat.gif"); tracker.addImage(original, 0); try { tracker.waitForID(0); } catch (InterruptedException e) { return; }}Use MediaTracker to control timing without this, the panel may display before the image is loaded.

  • Drawing images, continuedpublic void paintComponent(Graphics g) { g.drawImage(original, PADDING, PADDING, 64, 64, null);}private Image getImage(String pathName) { URL url = getClass().getResource(pathName); Image image = Toolkit.getDefaultToolkit().getImage(url); return image; }public static void main(String[] args) { JFrame frame = new JFrame("Image Play"); ImagePanel panel = new ImagePanel(); frame.add(panel); frame.setSize(200, 200); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true);}}

  • Advanced Topics

    Image in a jar

  • Jar FileIn Eclipse, highlight projectRight-click, Export, Jar. Pick location for jar fileOn the last dialog, identify the class containing main

  • Complete program for reference - Imageimport java.awt.*;import javax.swing.*;import*;

    public class ImageGUI extends JPanel {private ImageIcon myImage;public ImageGUI(){ JButton button = new JButton(); add(button); myImage = new ImageIcon(getImage("/images/crazycat.gif")); Image original = myImage.getImage(); button.setIcon(myImage);}public Image getImage(String pathName){ URL url = getClass().getResource(pathName); Image image = Toolkit.getDefaultToolkit().getImage(url); return image;}public static void main(String[] args) { JFrame frame = new JFrame("Image Play"); ImageGUI panel = new ImageGUI(); frame.add(panel, BorderLayout.CENTER); frame.setSize(200, 200); frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE); frame.setVisible(true);}

    } // end of class