F27SB2 Software Development 2

1. F27SB2 Software Development 2 Lecture 10: Java GUIs 7

2. Displaying images • how to display images in a GUI? BufferedImage • from AWT • low level representation as array of pixels • image processing is complex Image • from AWT • displayable image • platform independent

3. Displaying images Icon • interface • from Swing • object that can draw a graphic of specified width/height at a specific location setIcon(Icon i) • place Icon on JComponent

4. Displaying images ImageIcon • implementation of Icon interface • uses an Image to draw an Icon ImageIcon(String filename) • constructs ImageIcon from image from a specified file • then set ImageIconon JComponent getImage() • returns Image fromImageIcon

5. Display single image • specify file name via main • display in JLabel in JFrame import javax.swing.*; import java.awt.*; import java.awt.event.*; class Photo1 extends JFrame { JLabel l;

6. Display single image Photo1() { setLayout(new GridLayout(1,1)); l = new JLabel("picture",JLabel.CENTER); l.setVisible(true); l.setOpaque(true); add(l); } void setPhoto(String s) { l.setIcon(new ImageIcon(s)); } }

7. Display single image class TestPhoto1 { public static void main(String [] args) { Photo1 p = new Photo1(); p.setSize(400,420); p.setVisible(true); p.setTitle("Photo1"); p.addWindowListener (new WindowAdapter() { public void windowClosing(WindowEvent e) {System.exit(0);}}); p.setPhoto(args[0]); } }

8. Display single image original image (EE5.jpg) display • original image not same size/shape as display • centre of image is displayed • no scaling/resizing

9. Resizing image getScaledInstance (intwidth,intheight,inthints) • resizes Image to be width*height • hints • determine how scaling is performed • we’ll use Image.SCALE_SMOOTH • NB direct scaling to dimensions of JComponentmay distort image if not same shape

10. Resizing image • want resized image to retain original dimensions • new image width/new image height = old image width/old image height • for given new image height: • new image width = new image height*old image width/old image height • for given new image width: • new image height = new image width*old image height/old image width

11. Resizing image JLabel Image 1 lh i1h lw i1w • image width/image height < JLabel width/JLabel height • new image height = JLabel height • new image width = JLabel height* image width/ • image height

12. Resizing image JLabel Image 2 i2h lh i2w lw • image width/image height > JLabel width/JLabel height • new image width = JLabelwidth • new image height = JLabelwidth*image height/ • image width

13. Resizing image import javax.swing.*; import java.awt.*; import java.awt.event.*; class Photo2 extends JFrame { JLabel l; Photo2() { setLayout(new GridLayout(1,1)); l = new JLabel("picture",JLabel.CENTER); l.setVisible(true); l.setOpaque(true); add(l); }

14. Resizing image void setPhoto(String s) { Image i1 = (new ImageIcon(s)).getImage(); intlw = l.getWidth(); intlh = l.getHeight(); intiw = i1.getWidth(this); intih = i1.getHeight(this); int w = lw; inth = lh; if(iw>lw){ w = lw; h = lh*ih/iw; } else if(ih>lh){ w = lw*iw/ih; h = lh; } Image i2 = i1.getScaledInstance(w,h,Image.SCALE_SMOOTH); l.setIcon(new ImageIcon(i2)); } }

15. Resizing image class TestPhoto2 { public static void main(String [] args) { Photo2 p = new Photo2(); p.setSize(400,420); p.setVisible(true); p.setTitle("Photo2"); p.addWindowListener (new WindowAdapter() { public void windowClosing(WindowEvent e) {System.exit(0);}}); p.setPhoto(args[0]); } }

16. Resizing image original image (EE5.jpg) display

17. Photo Browser • choose directory • scroll through images which are .jpg or .JPG JLabel file name < photo > JFrame JButton

18. Photo Browser ... class Browser extends JFrame implements ActionListener { JMenuBarjb; JMenu file; JMenuItemMNew,MOpen,MClose,MExit; JFileChooser files; JButtonleft,right; JLabel photo; JLabelfileName;

19. Photo Browser • maintain array of File for contents of chosen directory File [] directory; • keep track of current File in directory intcurrent;

20. Photo Browser Browser() { jb = new JMenuBar(); file = new JMenu("Picture"); MOpen = new JMenuItem("Open"); MOpen.addActionListener(this); file.add(MOpen); jb.add(file); setJMenuBar(jb); files = new JFileChooser();

21. Photo Browser • need file chooser which will only select directories • change file chooser mode setFileSelectionMode(intmode) mode: • DIRECTORIES_ONLY • FILES_AND_DIERCTORIES • FILES_ONLY

22. Photo Browser files.setFileSelectionMode (JFileChooser.DIRECTORIES_ONLY); Font f = new Font("Sans Serif",Font.BOLD,24); left = new JButton("<"); left.setFont(f); left.addActionListener(this); add(left,BorderLayout.WEST); photo = new JLabel(); add(photo,BorderLayout.CENTER);

23. Photo Browser right = new JButton(">"); right.setFont(f); right.addActionListener(this); add(right,BorderLayout.EAST); fileName = new JLabel("",JLabel.CENTER); fileName.setFont (new Font("Sans Serif",Font.PLAIN,18)); add(fileName,BorderLayout.NORTH); }

24. Photo Browser • directories may contain files of mixed type • check if file name ends with appropriate extension booleanendsWith(String s1,String s2) { int d = s1.length()-s2.length(); if(d<0)return false; for(int i = s2.length()-1;i>=0;i--) if(s1.charAt(i+d)!=s2.charAt(i)) return false; return true; } • built in String method endsWith(String s)

25. Photo Browser • require name & path information from File String getName() • returns file name in directory String getPath() • returns file path from root directory

26. Photo Browser booleancheckJPG(inti) { Image i1,i2; intph,pw,ih,iw; String name = directory[i].getName(); if(endsWith(name,".jpg") || endsWith(name,".JPG")) { String path = directory[i].getPath(); i1 = (new ImageIcon(path)).getImage(); ph = photo.getHeight(); pw = photo.getWidth(); ih = i1.getHeight(this); iw = i1.getWidth(this); int w = pw; int h = ph;

27. Photo Browser if(iw>ih) { w = pw; h = ph*ih/iw; } else if(ih>iw) { w = pw*iw/ih; h = ph; } i2 = i1.getScaledInstance (w,h,Image.SCALE_SMOOTH); photo.setIcon(new ImageIcon(i2)); current = i; fileName.setText(name); return true; } return false; }

28. Photo Browser • need list of directory contents from chooser selection File [] listFiles() • returns array of File from chooser • can then check each in turn to see if appropriate file type

29. Photo Browser public void doOpen() { int response = files.showOpenDialog(this); if(response==JFileChooser.APPROVE_OPTION) { File f = files.getSelectedFile(); directory = f.listFiles(); for(inti=0;i<directory.length;i++) if(checkJPG(i)) return; } }

30. Photo Browser public void doRight() { for(int i=current+1;i<directory.length;i++) if(checkJPG(i)) return; } public void doLeft() { for(int i=current-1;i>=0;i--) if(checkJPG(i)) return; }

31. Photo Browser public void actionPerformed(ActionEvent e) { if(e.getSource()==MOpen) doOpen(); else if(e.getSource()==left) doLeft(); else if(e.getSource()==right) doRight(); } } class TestBrowser{...}

32. Photo Browser