Lesson 5 GUI Programming AUBG ICoSCIS Team Assoc. Prof. Stoyan Bonev

1. Lesson 5GUI ProgrammingAUBG ICoSCIS TeamAssoc. Prof. Stoyan Bonev

2. Lesson 5GUI ProgrammingAUBG ICoSCIS TeamAssoc. Prof. Stoyan Bonev March, 23 - 24, 2013 SWU, Blagoevgrad

3. Lesson Contents: • Building Win apps technologies using Java & class libraries • Swing • AWT (Abstract Windows Toolkit)

4. Java GUI programming Java GUI programming has its own specific: Terminology Concept Philosophy Ideology Technologies: Hand-made programming (project:Java, Java application) Visual, component programming (project:Java, Java Desktop application) 4

5. Terminology Java Microsoft Frame Form Panel Palette Toolbox 5

6. Concept, Philosophy, Ideology Based on class libraries, grouped in packages When Java was introduced, GUI classes bundled in AWT library The AWT UI components were replaced by a more robust and flexible library, known as Swing components. To distinguish Swing components to their AWT counterparts, the Swing GUI components are named with a prefixed J. 6

7. The Java GUI API – 3 groups of classes Component classes – used for creating UI JButton, JLabel, JTextField, … Container classes – used to contain other components JFrame, JPanel, JApplet Helper classes – used to support GUI components. Graphics, Color, Font, FontMetrics, Dimension 7

8. GUI Class Hierarchy (Swing)

9. Swing GUI Components

10. Frames • To create a UI, you need a container, i.e. a frame. • Frame is a window that is not contained inside another window. Frame is the basis to contain other user interface components in Java GUI applications. • The JFrame class can be used to create windows. • For Swing GUI programs, use JFrame class to create windows.

11. Frames import javax.swing.*; public class MyFrame { public static void main(String[] args) { JFrame frame = new JFrame("Test Frame"); frame.setSize(400, 300); frame.setVisible(true); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); } }

12. Frames

13. Frames – To create empty frame • Practice: Recommended IDE: NetBeans • Create your own project: sbJavaWinEmptyForm • Hand-made programming (project:Java, Java application) • Type import javax.swing.*; • Type stmt within main() method to create a frame JFrame mySBForm = new JFrame("Empty Form"); • Run the project • No frame appears on the screen

14. Frames – To create empty frame • Frame not visible if method setVisible() not invoked • Add one more stmt mySBForm.setVisible(true); • Do you see the form? Look at the top left corner of the screen

15. Frames – To create empty frame • Frame may move to the center of the screen using method setLocationRelativeTo() • Add one more stmt mySBForm.setLocationRelativeTo(null); • Do you see the form? Look at the screen center

16. Frames – To create empty frame • Frame sized to display just the title bar if method setSize() not used • Add one more stmt mySBForm.setSize(900, 300); // dimensions in pixels • Do you see the effect of the change? • Hint: setSize() to invoke before invoking setLocationRelativeTo()

17. Frames – To create empty frame • How to tell the program to terminate when the frame gets closed? • Add one more stmt mySBForm.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); • If this stmt is not used, the program does not terminate when the frame is closed

18. Adding components to a frame • Modify the frame constructor argument JFrame mySBForm = new JFrame("Empty Form"); To JFrame mySBForm = new JFrame(“My frame with Components");

19. Adding components to a frame • To add a component, we must : • Create a component • Add it to the frame (to the content pane of the frame) • This may happen in • Two steps • JLabel myLabel1 = new Jlabel(“This is not Empty Frame”); • mySBForm.add(myLabel1); • Or in one step creating anonymous component • mySBForm.add(new JLabel(“This is not Empty Frame”));

20. Removing components from a frame • To remove a component, we must use method remove(): • mySBForm.remove(myLabel1); • Can we remove anonymous component?

21. Adding two or more components to a frame • To add more than one component, we must : • JLabel myLabel1 = new Jlabel(“This is not Empty Frame”); • mySBForm.add(myLabel1); • JLabel myLabel2 = new Jlabel(“This is Frame with components”); • mySBForm.add(myLabel2); • //JButton myBtn1 = new JButton(“My Button”); • //mySBForm.add(myBtn1); • Do you see more than one component on the screen? • No. • What’s the problem?

22. Adding two or more components to a frame • This is because components are put in the frame by the content pane’s layout manager and the default layout manager if not specified explicitly, allocates all the frame to the current component replacing/substituting the previous component if there is any. • It’s time to introduce several different layout managers to place components in the desired locations

23. Frames – To create empty frame • Practice: Recommended IDE: NetBeans • Create your own project: sbJavaWinEmptyForm • Visual, component programming (project:Java, Java Desktop application) • Use the toolbox facility to configure your project • Run the project

24. Layout Managers • For more details open file • LayoutManagersAndMore.ppt

25. More on GUI programming

26. JFileChooser chooser = new JFileChooser();chooser.setDialogTitle("Load which file?"); int result = chooser.showOpenDialog(enclosingJFrame);if (result != JFileChooser.APPROVE_OPTION) { File file = chooser.getSelectedFile(); // use file} You could also test for CANCEL_OPTION orERROR_OPTION You will get back a File object; to use it, you must know how to do file I/O! Load file dialogs Assoc. Prof. Stoyan Bonev

27. JFileChooser chooser = new JFileChooser();chooser.setDialogTitle(“Save file as?"); int result = chooser.showSaveDialog(enclosingJFrame);if (result != JFileChooser.APPROVE_OPTION) { File file = chooser.getSelectedFile(); // use file} You could also test for CANCEL_OPTION orERROR_OPTION You will get back a File object; to use it, you must know how to do file I/O! Save file dialogs Assoc. Prof. Stoyan Bonev

28. GUI BasicsorWindows Based Applications

29. Motivations To build Windows application you need a frame (with title bar and content pane) structured to contain components/controls such as buttons, labels, text fields, check boxes, radio buttons, combo boxes, and others. See next slide for illustration

30. Creating GUI Objects Radio Button Label Text field Check Box // Create a button with text OK JButton jbtOK = new JButton("OK"); Button Combo Box

31. Creating GUI Objects Radio Button Label Text field Check Box // Create a label with text "Enter your name: " JLabel jlblName = new JLabel("Enter your name: "); Button Combo Box

32. Creating GUI Objects Radio Button Label Text field Check Box // Create a text field with text "Type Name Here" JTextField jtfName = new JTextField("Type Name Here"); Button Combo Box

33. Creating GUI Objects Radio Button Label Text field Check Box // Create a check box with text bold JCheckBox jchkBold = new JCheckBox("Bold"); Button Combo Box

34. Creating GUI Objects Radio Button Label Text field Check Box // Create a radio button with text red JRadioButton jrbRed = new JRadioButton("Red"); Button Combo Box

35. Creating GUI Objects Radio Button Label Text field Check Box // Create a combo box with choices red, green, and blue JComboBox jcboColor = new JComboBox(new String[]{"Red", "Green", "Blue"}); Button Combo Box

36. Creating GUI Objects Radio Button Label Text field Check Box // Create a button with text OK JButton jbtOK = new JButton("OK"); // Create a label with text "Enter your name: " JLabel jlblName = new JLabel("Enter your name: "); // Create a text field with text "Type Name Here" JTextField jtfName = new JTextField("Type Name Here"); // Create a check box with text bold JCheckBox jchkBold = new JCheckBox("Bold"); // Create a radio button with text red JRadioButton jrbRed = new JRadioButton("Red"); // Create a combo box with choices red, green, and blue JComboBox jcboColor = new JComboBox(new String[]{"Red", "Green", "Blue"}); Button Combo Box

37. Swing vs. AWT Swing class library OR AWT class library (Abstract Windows Toolkit)

38. Swing vs. AWT So why do the GUI component classes have a prefix J? Instead of JButton, why not name it simply Button? In fact, there is a class already named Button in the java.awt package. When Java was introduced, the GUI classes were bundled in a library known as the Abstract Windows Toolkit (AWT).For every platform on which Java runs, the AWT components are automatically mapped to the platform-specific components through their respective agents, known as peers. AWT is fine for developing simple graphical user interfaces, but not for developing comprehensive GUI projects. Besides, AWT is prone to platform-specific bugs because its peer-based approach relies heavily on the underlying platform. With the release of Java 2, the AWT user-interface components were replaced by a more robust, versatile, and flexible library known as Swing components. Swing components are painted directly on canvases using Java code, except for components that are subclasses of java.awt.Window or java.awt.Panel, which must be drawn using native GUI on a specific platform. Swing components are less dependent on the target platform and use less of the native GUI resource. For this reason, Swing components that don’t rely on native GUI are referred to as lightweight components, and AWT components are referred to as heavyweight components.

39. GUI Class Hierarchy (Swing)

40. The Java GUI API • The Java GUI API contains classes that may classify in three groups: • Component classes • Used to create interface • Container classes • Used to contain components • Helper classes • Used to support components

41. AWT (Optional)

42. Frames • To create a user interface, you need to create a frame. • Frame is a window that is not contained inside another window. Frame is the basis to contain other user interface components in Java GUI applications. • The JFrame class can be used to create windows. • For Swing GUI programs, use JFrame class to create windows.

43. Creating Frames(open file ProgPureFrame.java) • import javax.swing.*; • public class MyFrame { • public static void main(String[] args) { • JFrame frame = new JFrame("Test Frame"); • frame.setSize(400,300); • frame.setLocationRelativeTo(null); • frame.setDefaultCloseOperation( • JFrame.EXIT_ON_CLOSE); • frame.setVisible(true); • } • }

44. Adding Components into a Frame // Add a button into the frame frame.getContentPane().add( new JButton("OK")); Title bar Content pane

45. Content Pane Delegation in JDK 1.5 // Add a button into the frame frame.getContentPane().add( new JButton("OK")); Title bar // Add a button into the frame frame.add( new JButton("OK") ); Content pane

46. JFrame Class Demo: Open file ProgFrameAndControls.java

47. Demo – different source text structure – same functionality • Open file ProgFrameAndControls.java • Open file ProgFrameAndControlsStyleStandard.java • Open file ProgFrameAndControlsStyleRecommended.java • Open file ProgFrameAndControlsStyleSeparateClasses.java

48. Demo • Open file ProgFrameAndControls.java • You cannot visualize more than one component. • Each new component replaces the previous one • The component occupies all the frame space • How to proceed with more components? • You need a layout manager to associate with the container using method setLayout() in context <container>.setLayout(<arg>);

49. Layout Managers • Java’s layout managers provide a level of abstraction to automatically map your user interface on all window systems. • The UI components are placed in containers. Each container has a layout manager to arrange the UI components within the container. • Layout managers are set in containers using the setLayout(LayoutManager) method in a container.

50. Kinds of Layout Managers • FlowLayout • GridLayout • BorderLayout • Several other layout managers will be introduced in Chapter 33, “Containers, Layout Managers, and Borders”