1. 1 IM103 week 10 Enhancing the user interface By the end of lecture you should be able to:  distinguish between heavyweight and lightweight components;  explain the relationship between the AWT and Swing packages;  use a variety of swing components;  add borders and icons to components;  create message boxes and input boxes;  create your own colours and fonts;  use the CardLayout manager;  explain some of the principles behind the creation of good user interfaces.

2. 2 the Swing classes build on the AWT classes to provide enhanced functionality and appearance. The Swing version of the Hostel GUI The Java Swing package

3. 3 with the AWT classes, any component that we create is associated with the corresponding component in the native operating system; for example, when we use methods of an AWT Button object, this communicates with a corresponding object - its peer - provided by the operating system. consequently the button will look like, for example, a Windows button or a Mac button; components that rely on the native operating system are called heavyweight components as they make extensive use of the system's resources; with Swing, most of the components are written in Java and all the code is provided as part of the Swing package; components that are written in Java are called lightweight components. the Swing package, along with the AWT, is part of the Java Foundation Classes (JFC). It must be noted that any JVM needs to be packaged with the all the classes of the JFC in order for Swing programs to work; not all browsers are packaged with Swing. when writing Swing programs you must include the import statement: import javax.swing.*; The Java Swing package … continued

4. 4 javax.swing Java.awt Object Component Container WindowPanel FrameDialog Applet JDialogJWindowJFrameJAppletJComponent Java.lang

5. 5  you can create attractive borders on all the basic components;  you can easily combine text and graphics on components (using the Icon interface);  you can add scrolling facilities to any component (using the JScrollPane class);  you can easily provide message boxes and input boxes (using the JOptionPane class);  the swing equivalent to the AWT Applet class - the JApplet class - has a method that allows you to add menus to objects of this class. Some advantages of using Swing

6. 6 The JFrame class Program 19.1 : running the HostelSwing class import javax.swing.*; import java.awt.*; public class RunHostelSwing { public static void main(String[] args) { JFrame frame = new JFrame(); frame.setDefaultCloseOperation(JFrame.DO_NOTHING_ON_CLOSE); frame.setTitle("Student Hostel"); HostelSwing property = new HostelSwing(20); frame.setSize(500,440); frame.getContentPane().setBackground(new Color(0,190,170)); frame.getContentPane().add(property); frame.setVisible(true); }

7. 7 Analysis of Program 19.1 Setting the default close operation: frame.setDefaultCloseOperation(JFrame.DO_NOTHING_ON_CLOSE); the three possible values are: JFrame.DO_NOTHING_ON_CLOSE JFrame.HIDE_ON_CLOSE (the default); JFrame.DISPOSE_ON_CLOSE.

8. 8 Analysis of Program 19.1 … continued Communicating with the JFrame A JFrame allows more than one container to be added to it: a content pane; an optional JMenuBar; a transparent glass pane that is positioned above the other components and allows layering. frame.getContentPane().setBackground(new Color(0,190,170)); frame.getContentPane().add(property);

9. 9 all the basic components are derived from JComponen t, and inherit its setBorder method, which can be used to add the border of your choice. in the javax.swing.border package is a Border interface; in this package there are eight standard border classes that implement this interface:  BevelBorder ;  SoftBevelBorder ;  LineBorder ;  EtchedBorder ;  TitledBorder ;  MatteBorder ;  CompoundBorder ;  EmptyBorder. The Border interface

10. 10 The Border interface … continued

11. Creating borders BevelBorder bevel = new BevelBorder(BevelBorder.RAISED); SoftBevelBorder soft = new SoftBevelBorder(SoftBevelBorder.LOWERED); LineBorder line = new LineBorder(Color.black, 2); EtchedBorder etched = new EtchedBorder(EtchedBorder.RAISED); TitledBorder titled = new TitledBorder("Title goes here"); MatteBorder matte = new MatteBorder(new ImageIcon("Circle.gif")); Adding a border myLabel.setBorder(bevel);

12. Combining text and graphics with the Icon interface The SquareIcon class import javax.swing.*; import java.awt.*; class SquareIcon implements Icon { private int size; public SquareIcon(int sizeIn) { size = sizeIn; } // all the following methods are required by the Icon interface public void paintIcon(Component c, Graphics g, int x, int y) { g.setColor(Color.red); g.fillRect(x, y, size, size); } public int getIconWidth() { return size; } public int getIconHeight() { return size; }

13. import javax.swing.*; import java.awt.*; import java.awt.event.*; class IconDemo extends JPanel implements ActionListener // adds an icon and text to a component { private JButton button = new JButton(); private SquareIcon icon = new SquareIcon(30); public IconDemo() { button.setMargin(new Insets(0,0,0,0)); button.setIcon(icon); // adds the icon to the button button.setText(" Quit "); // adds the text to the button add(button); button.addActionListener(this); } public void actionPerformed(ActionEvent e) { System.exit(0); } Using the SquareIcon class: the IconDemo class

14. 14 import javax.swing.*; public class RunIconTest { public static void main(String[] args) { JFrame frame = new JFrame(); IconDemo icDemo = new IconDemo(); frame.getContentPane().add(icDemo); frame.setSize(180,100); frame.setVisible(true); } Program 19.2: Running the IconDemo class

15. 15 Result of running Program 19.2

16. 16 allows you to create an icon from a file in.gif or.jpg format; for example, we took a file called "Quit.gif", which consists of a red circle on a white background, and then, in the IconDemo class, replaced this line private SquareIcon icon = new SquareIcon(30); with this one: private ImageIcon icon = new ImageIcon("Quit.gif"); The IconImage class

17. 17 Result of running the new version of program 19.2

18. 18 Creating message boxes and input boxes with the JOptionPane class The JOptionPane Dialogue Types OptionDisplays a list of buttons to enable the user to choose an option. InputAllows the user to enter data via a text field or list. Also provides an "OK" and "Cancel" buttons. MessageDisplays a message and an "OK" button; ConfirmAsks the user a question and provides "Yes" and "No" buttons for the answer.

19. 19 An Option Dialogue A Message Dialogue (information) A Message Dialogue (error) An Input Dialogue A Confirm Dialogue Examples of different types of dialogue box

20. 20 Message types available in the JOptionPane class JOptionPane.PLAIN _ MESSAGE No icon is displayed JOptionPane.INFORMATION _ MESSAGE An information icon is displayed JOptionPane.ERROR _ MESSAGE An error icon is displayed JOptionPane.QUESTION _ MESSAGE A question icon is displayed JOptionPane.WARNING _ MESSAGE A warning icon is displayed

21. 21 Possible return values from the showConfirmDialog method JOptionPane.YES _ OPTION The "Yes" button was pressed JOptionPane.NO _ OPTION The "No" button was pressed JOptionPane.CANCEL _ OPTION The "Cancel" button was pressed JOptionPane.OK _ OPTION The "OK" button was pressed JOptionPane.CLOSED _ OPTION The dialogue was closed by clicking on the cross-hairs

22. 22 Creating new colours : program 19.4 import java.awt.*; import java.swing.*; public class ColourTester { public static void main(String[] args) { Color magenta = new Color(255,0,255); Color cyan = new Color(0,255,255); Color black = new Color(0,0,0); Color purple = new Color(210,100,210); Color orange = new Color(250,150,0); Color brown = new Color(200,150,150); …………………………………………..

23. …………………………………………………… JFrame frame = new JFrame(); frame.setSize(150,160); frame.setVisible(true); Graphics g = frame.getGraphics(); g.setColor(magenta); g.drawString("This is magenta", 10,40); g.setColor(cyan); g.drawString("This is cyan", 10,60); g.setColor(black); g.drawString("This is black", 10,80); g.setColor(purple); g.drawString("This is purple", 10,100); g.setColor(orange); g.drawString("This is orange", 10,120); g.setColor(brown); g.drawString("This is brown", 10,140); } Creating new colours : program 19.4 … continued

24. 24 Output from program 19.4

25. 25 Creating new fonts : program 19.5 import java.awt.*; import javax.swing.*; public class FontTester { public static void main(String[] args) { Font font1 = new Font("SansSerif",Font.PLAIN,16); Font font2 = new Font("Serif",Font.PLAIN,20); Font font3 = new Font("Monospaced",Font.PLAIN,30); Font font4 = new Font("Dialog",Font.BOLD,20); Font font5 = new Font("DialogInput",Font.BOLD,20); Font font6 = new Font("Serif",Font.ITALIC,30); Font font7 = new Font("Serif",Font.ITALIC + Font.BOLD,16); …………………………………………………………………………………

26. Creating new fonts : program 19.5 … continued ……………………………………………………………………… JFrame frame = new JFrame(); frame.setSize(260,260); frame.setVisible(true); Graphics g = frame.getGraphics(); g.setFont(font1); g.drawString("This is font1", 10,47); g.setFont(font2); g.drawString("This is font2", 10,75); g.setFont(font3); g.drawString("This is font3", 10,105); g.setFont(font4); g.drawString("This is font4", 10,135); g.setFont(font5); g.drawString("This is font5", 10,165); g.setFont(font6); g.drawString("This is font6", 10,200); g.setFont(font7); g.drawString("This is font7", 10,230); }

27. 27 Output from program 19.5

28. 28 the components in a container that implements a CardLayout policy are arranged like cards in a pack; the CardLayout class provides five methods that allow you to display each "card" in turn: first; next; previous; last; random. this layout policy is useful when you want to break up a screen into different sections, so that the sections can be shown one at a time. The CardLayout manager

29. Using the CardLayout manager

30. 30 private CardLayout cardLayout = new CardLayout(); Analysis of the Cards class Creating a new CardLayout private JPanel firstCard = new JPanel(); private JPanel secondCard = new JPanel(); private JPanel thirdCard = new JPanel(); Creating the cards centrePanel.setLayout(cardLayout); Setting the layout

31. 31 Analysis of the Cards class … continued Implementing the event handlers public void actionPerformed(ActionEvent e) { if(e.getSource() == nextButton) { cardLayout.next(centrePanel); } else if(e.getSource() == previousButton) { cardLayout.previous(centrePanel); }