INF120 Basics in JAVA Programming AUBG, COS dept, Spring 2014

1. INF120 Basics in JAVA Programming AUBG, COS dept, Spring 2014 Lecture 32 Title: Multi Media Reference: MalikFarrell, chap 1, Liang Ch18

2. Lecture Contents: • Prelude to multimedia • Image Icons • Labels decorated with icon • Buttons decorated with text & icon • Displaying Images • Playing audio files

3. Image Icons Image icons can be displayed in many GUI components. In other words image icons serve to decorate many GUI components. As substitute of the component text property or As complement to the component text property. Image icons are objects created using the ImageIcon class.

4. Image Icons: How to decorate label Regular label control text titled JLabel lbl1 = new JLabel(“Label title”); Label control decorated with image icon ImageIcon icon = new ImageIcon("image/us.gif"); JLabel lbl2 = new JLabel(icon); No option for label to title with text and to decorate with image icon

5. Image Icons: How to decorate button Regular button control text titled JButton b1 = new JButton(“US flag”); Button control decorated with image icon ImageIcon icon = new ImageIcon("image/us.gif"); JButton b2 = new JButton(icon); Button: text titled and decorated with image icon ImageIcon icon = new ImageIcon("image/us.gif"); JButton b3 = new JButton(“US flag”,icon);

6. Image Icons • Java uses the javax.swing.ImageIcon class to represent an icon. • An icon is a fixed-size picture; typically it is small and used to decorate components. • Images are normally stored in image files. • You can use new ImageIcon(filename) to construct an image icon. For example, the stmt creates an icon from an image file us.gif in the image directory under the current class path: ImageIcon icon = new ImageIcon("image/us.gif");

7. Image Icons • An image icon can be displayed in a label control using new JLabel(arg: ImageIcon); • An image icon can be displayed in a button control using new JButton(arg: ImageIcon); • Demo program TestImageIcon.java displays icons in labels and buttons. It creates two labels and two buttons with icons TestImageIcon

8. Source: TestImageIcon.java import javax.swing.*; import java.awt.*; public class TestImageIcon extends JFrame { private ImageIcon usIcon = new ImageIcon("image/us.gif"); private ImageIcon myIcon = new ImageIcon("image/my.jpg"); private ImageIcon frIcon = new ImageIcon("image/fr.gif"); private ImageIcon ukIcon = new ImageIcon("image/uk.gif"); public TestImageIcon() { setLayout(new GridLayout(2, 2, 5, 5)); add(new JLabel(usIcon)); add(new JLabel(myIcon)); add(new JButton(frIcon)); add(new JButton(ukIcon)); } public static void main(String[] args) { TestImageIcon frame = new TestImageIcon(); frame.setTitle("TestImageIcon"); frame.setSize(500, 125); frame.setLocationRelativeTo(null); // Center the frame frame.setVisible(true);} }

9. Source: TestImageIcon.java • Compile, run and modify the demo program.

10. More on Buttons & Image Icons Reminder: • A button is a component that triggers an action event when clicked. Swing provides • regular buttons, • toggle buttons, • check box buttons, and • radio buttons. • The common features of these buttons are generalized injavax.swing.AbstractButton.

11. AbstractButton

12. JButton JButton inherits AbstractButton and provides several constructors to create buttons.

13. JButton Constructors The following are JButton constructors: JButton() JButton(String text) JButton(String text, ImageIcon icon) JButton(ImageIcon icon)

14. JButton Properties • text • icon • mnemonic • horizontalAlignment • verticalAlignment • horizontalTextPosition • verticalTextPosition • iconTextGap

15. Horizontal Alignments Horizontal alignment specifies how the icon and text are placed horizontally on a button. You can set the horizontal alignment using one of the five constants: LEADING, LEFT, CENTER, RIGHT, TRAILING. At present, LEADING and LEFT are the same and TRAILING and RIGHT are the same. Future implementation may distinguish them. The default horizontal alignment is SwingConstants.TRAILING.

16. Vertical Alignments Vertical alignment specifies how the icon and text are placed vertically on a button. You can set the vertical alignment using one of the three constants: TOP, CENTER, BOTTOM. The default vertical alignment is SwingConstants.CENTER.

17. Vertical Alignments ImageIcon icon1 = new ImageIcon("image/us.gif"); JButton b3 = new JButton("US flag",icon1); ImageIcon icon2 = new ImageIcon("image/us.gif"); JButton b4 = new JButton("US flag",icon2); … b3.setVerticalAlignment(AbstractButton.TOP); add(b3); b4.setVerticalAlignment(AbstractButton.BOTTOM); add(b4); 17

18. Source: TestImageIcon2.java import javax.swing.*; import java.awt.*; public class TestImageIcon2 extends JFrame { private ImageIcon usIcon = new ImageIcon("image/us.gif"); private ImageIcon myIcon = new ImageIcon("image/my.jpg"); private ImageIcon frIcon = new ImageIcon("image/fr.gif"); private ImageIcon ukIcon = new ImageIcon("image/uk.gif"); ImageIcon icon1 = new ImageIcon("image/us.gif"); JButton b3 = new JButton("US flag",icon1); ImageIcon icon2 = new ImageIcon("image/us.gif"); JButton b4 = new JButton("US flag",icon2); public TestImageIcon2() { setLayout(new GridLayout(3, 2, 5, 5)); add(new JLabel("usIcon")); add(new JLabel(myIcon)); add(new JButton(frIcon)); add(new JButton("UK flag",ukIcon)); b3.setVerticalAlignment(AbstractButton.TOP); add(b3); b4.setVerticalAlignment(AbstractButton.BOTTOM); add(b4); } public static void main(String[] args) { TestImageIcon2 frame = new TestImageIcon2(); frame.setTitle("TestImageIcon"); frame.setSize(500, 125); frame.setLocationRelativeTo(null); // Center the frame frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); } } 18

19. Source: TestImageIcon2.java Compile, run and modify the demo program. Modify the vertical alignments Test at least some of the horizontal alignments options 19

20. Horizontal Text Positions Horizontal text position specifies the horizontal position of the text relative to the icon. You can set the horizontal text position using one of the five constants: LEADING, LEFT, CENTER, RIGHT, TRAILING. The default horizontal text position is SwingConstants.RIGHT.

21. Vertical Text Positions Vertical text position specifies the vertical position of the text relative to the icon. You can set the vertical text position using one of the three constants: TOP, CENTER, BOTTOM. The default vertical text position is SwingConstants.CENTER.

22. Source: TestImageIcon2.java Compile, run and modify the demo program. Test the options for horizontal text positions Test the options for vertical text positions 22

23. Default Icons, Pressed Icons, and Rollover Icons A regular button has a default icon, a pressed icon, and a rollover icon. Normally, you use the default icon. All other icons are for special effects. A pressed icon is displayed when a button is pressed and a rollover icon is displayed when the mouse is over the button but not pressed. (A) Default icon (B) Pressed icon (C) Rollover icon 23

24. Default Icons, Pressed Icons, and Rollover Icons . . . ImageIcon usIcon = new ImageIcon("image/usIcon.gif"); ImageIcon caIcon = new ImageIcon("image/caIcon.gif"); ImageIcon ukIcon = new ImageIcon("image/ukIcon.gif"); JButton jbt = new JButton("Click it", usIcon); jbt.setPressedIcon(caIcon); jbt.setRolloverIcon(ukIcon); add(jbt); 24

25. Source: TestButtonIcons.java import javax.swing.*; public class TestButtonIcons extends JFrame { public static void main(String[] args) { JFrame frame = new TestButtonIcons(); // Create frame and set properties frame.setTitle("ButtonIcons"); frame.setSize(200, 100); frame.setLocationRelativeTo(null); // Center the frame frame.setVisible(true); } public TestButtonIcons() { ImageIcon usIcon = new ImageIcon("image/usIcon.gif"); ImageIcon caIcon = new ImageIcon("image/caIcon.gif"); ImageIcon ukIcon = new ImageIcon("image/ukIcon.gif"); JButton jbt = new JButton("Click it", usIcon); jbt.setPressedIcon(caIcon); jbt.setRolloverIcon(ukIcon); add(jbt); } } 25

26. Source: TestButtonIcons.java Compile, run and modify the demo program. TestButtonIcons 26

27. JCheckBox JCheckBox inherits all the properties such as text, icon, mnemonic, verticalAlignment, horizontalAlignment, horizontalTextPosition, verticalTextPosition, and selected from AbstractButton, and provides several constructors to create check boxes.

28. JRadioButton Radio buttons are variations of check boxes. They are often used in the group, where only one button is checked at a time.

29. Grouping Radio Buttons ButtonGroup btg = new ButtonGroup(); btg.add(jrb1); btg.add(jrb2);

30. Displaying Images

31. From Image Icons to Displaying Images Images are normally stored in image files. You already know how to create image icons & display image icons in labels and buttons. Reminder: following stmts create an image icon and display it in a label: ImageIcon imgIcon = new ImageIcon("image/us.gif"); JLabel jlblImage = new JLabel(imgIcon); An image icon displays a fixed-size image. To display an image in a flexible size, you need to use the java.awt.Image class. An image can be created from an image icon using the getImage() method as follows: Image image = imgIcon.getImage(); 31

32. Displaying Images Using a label as an area for displaying images is simple and convenient, but you don't have much control over how the image is displayed. A more flexible way to display images is to use the drawImage() method of the Graphics class on a panel. Four versions of the drawImage() method are shown here. 32

33. Displaying Images Examples Example 1: Java demo program as an Application Source: DisplayImage.java Example 2: Java demo program as an Applet Source: DisplayImageApplet.java 33

34. Displaying Images Example This example gives the code that displays an image from image/us.gif. The file image/us.gif is under the class directory. The Image from the file is created in the program. The drawImage() method displays the image to fill in the whole panel, as shown in the figure. DisplayImage 34

35. Source: DisplayImage.java import java.awt.*; import javax.swing.*; public class DisplayImage extends JFrame { public DisplayImage() { add(new ImagePanel()); } public static void main(String[] args) { JFrame frame = new DisplayImage(); frame.setTitle("DisplayImage"); frame.setSize(300, 300); frame.setLocationRelativeTo(null); // Center the frame frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); } }

36. Source: DisplayImage.java class ImagePanel extends JPanel { private ImageIcon imageIcon = new ImageIcon("image/x.gif"); private Image image = imageIcon.getImage(); @Override /** Draw image on the panel */ protected void paintComponent(Graphics g) { super.paintComponent(g); if (image != null) g.drawImage(image, 0, 0, this); //g.drawImage(image, 0, 0, Color.BLUE, this); //g.drawImage(image, 0, 0, getWidth(), getHeight(), this); //g.drawImage(image, 0, 0, getWidth(), getHeight(), Color.GREEN, this); } }

37. Source: DisplayImage.java • Compile, run and modify the demo program. • Test all four overloaded versions of the g.drawImage() method

38. Source: DisplayImageApplet.java import java.awt.*; import javax.swing.*; public class DisplayImage extends JFrame { public DisplayImage() { add(new ImagePanel()); } public static void main(String[] args) { JFrame frame = new DisplayImage(); frame.setTitle("DisplayImage"); frame.setSize(300, 300); frame.setLocationRelativeTo(null); // Center the frame frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); } } 38

39. Source: DisplayImageApplet.java // this text needs to be updated class ImagePanel extends JPanel { private ImageIcon imageIcon = new ImageIcon("image/x.gif"); private Image image = imageIcon.getImage(); @Override /** Draw image on the panel */ protected void paintComponent(Graphics g) { super.paintComponent(g); if (image != null) g.drawImage(image, 0, 0, this); //g.drawImage(image, 0, 0, Color.BLUE, this); //g.drawImage(image, 0, 0, getWidth(), getHeight(), this); //g.drawImage(image, 0, 0, getWidth(), getHeight(), Color.GREEN, this); } } 39

40. Source: DisplayImageApplet.java Compile, run and modify the demo program. 40

41. Case Study: ImageViewer Class Displaying an image is a common task in Java programming. This case study develops a reusable component named ImageViewer that displays an image in a panel. The ImageViewer class contains the properties image, imageFilename, stretched, xCoordinate, and yCoordinate. 41

42. ImageView Example This example gives an example that creates six images using the ImageViewer class. SixFlags Run 42

43. Source: SixFlags.java import javax.swing.*;import java.awt.*;public class SixFlags extends JFrame { public SixFlags() { Image image1 = new ImageIcon("image/us.gif").getImage(); Image image2 = new ImageIcon("image/ca.gif").getImage(); Image image3 = new ImageIcon("image/india.gif").getImage(); Image image4 = new ImageIcon("image/uk.gif").getImage(); Image image5 = new ImageIcon("image/china.gif").getImage(); Image image6 = new ImageIcon("image/norway.gif").getImage(); setLayout(new GridLayout(2, 0, 5, 5)); add(new ImageViewer(image1)); add(new ImageViewer(image2)); add(new ImageViewer(image3)); add(new ImageViewer(image4)); add(new ImageViewer(image5)); add(new ImageViewer(image6)); } public static void main(String[] args) { SixFlags frame = new SixFlags(); frame.setTitle("SixFlags"); frame.setLocationRelativeTo(null); // Center the frame frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setSize(400, 320); frame.setVisible(true); }}

44. Source: SixFlags.java Compile, run and modify the demo program. 44

45. Splash Screen A splash screen is an image that is displayed while the application is starting up. If your program takes a long time to load, you may display a splash screen to alert the user. For example, the following command: java –splash:image/us.gif TestImageIcon displays an image while the program TestImageIcon is being loaded. 45

46. Thank You For Your Attention! Any Questions?