1 / 30

Java GUI Components Overview for User-Friendly Applications

Learn about Java GUI components, including AWT and Swing, JFrame, JLabel, JButton, JTextField, event-driven programming concept, layout managers, and more for creating interactive graphical interfaces. Explore sample components and best practices for maximizing user guidance with minimal errors in your applications.

davidvasquez
Download Presentation

Java GUI Components Overview for User-Friendly Applications

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Lec.10 (Chapter 8 & 9) GUI Jiang (Jen) ZHENG June 27th, 2005

  2. Outline • Intro. To Java GUI • AWT & SWING • Java Components • Sample Components • JFrame, JLabel, JButton, JTextField • Even-Driven Programming Concept • Layout Manager • FlowLayout, GridLayout • JPanel, BorderLayout • Terminating a GUI • ActionListener, WindowListener, • MouseListener • Updating the Display CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  3. Graphical Interfaces • So far all of our programs have used • Input from the keyboard • Output to the console • This is effective but in today’s world is not so user-friendly • Users want to use the mouse • Users want windows with dialog boxes and buttons • Users need maximum guidance with minimum room for error CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  4. Graphical Interfaces • Java has all of the tools for us to design and implement complex graphical interfaces • Graphical output • Use of a mouse • Graphical components for input • Ex: Windows with buttons, textfields, pulldown menus, radiobuttons, labels, and more • To use these tools we need to learn some Java classes and some programming theory • But once we learn how to do it we will typically prefer it over console applications CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  5. AWT and Swing • The AWT (Abstract Windowing Toolkit) was developed for the first versions of Java • Created components such as Frame, Panel, Button, TextField, Label • However, the look and feel of the AWT varied on different windowing systems • The same AWT Java program looks different when run on MS Windows machines, MACs and Sun Workstations • This is because the underlying windowing systems on those machines differ CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  6. AWT and Swing • Since a goal of Java is to be platform independent, its look and feel should also be platform independent • Swing was developed from Java v. 1.2 to be more consistent in its look and feel across all platforms • It also adds some extra features that did not exist in the AWT • Many Swing components are similar to AWT in name, but with a “J” in front • Ex: JFrame, JPanel, JButton, JTextField, JLabel CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  7. Components • Components: the objects that make up a GUI • JButton • JLabel • JCkeckbox • JTextField • JRadioButton • JFileChooser • … CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  8. Sample Components JRadioButton JCheckBox JButton JComboBox JList JButton CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  9. Sample Components JMenu Different Borders CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  10. Sample Components JScroll Bar JSlider Dialog (JOptionPane) CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  11. Sample Components File Selection Dialog (JFileChooser) CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  12. JFrames • JFrames are objects that will be the windows in our graphical applications • We can draw/paint graphics within them • We can place and manipulate graphical components within them • To use them we: • Create a JFrame object • Size it as desired • Show it on the display CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  13. JLabels • JLabels are simple components to show formatted text on the display • We can set the font type, size and color • We can set and change the text itself as desired throughout program execution • Let’s look at a very simple example: • Create a JFrame, then put a JLabel in it and display it CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  14. Simple Example • See ex23a.java • See the comments to determine how the various objects are created and set up properly • Note that this example does not really do much • No interaction with the user • Closing the window does not even terminate the program • We must CTRL-C in the console to terminate • But it does show us some of the basic setup for graphical applications • Let’s now add a bit more functionality • Add a button that user can click to change the color of the label text CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  15. JButtons • JButtons are simple components that can also show text on the display • However, in addition to showing text, they also respond to clicks of the mouse • If a user clicks the mouse within a JButton, an ActionEvent object is generated in response • This object is passed automatically to an ActionListener object • The ActionListener must be registered to “listen” to the JButton • ActionListener is actually an interface with the single method actionPerformed() • Any class that implements actionPerformed() can be an ActionListener CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  16. Event-Driven Programming • This causes the actionPerformed method within the ActionListener to execute • It is the actionPerformed method that is doing the actual response to the button click • This idea is called event-driven programming • As program executes, user generates events in various ways • Ex: click a button, move the mouse, edit text • Programmer writes code to respond to the various events that may occur • There are many different types of events in Java programs, but the basic idea for all of them is similar: CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  17. Event-Driven Programming • Some object generates an event object • The event object is passed to some event listener object • A method in the event listener executes to handle the event • It is important that event handlers are linked to the appropriate event generators • Otherwise event will still be generated but will not be responded to • See ex23b.java CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  18. Another Example • Let’s look at another simple example: • Toggle Button • Click it once and it does an action • Click it again and it does a different action • Each click it alternates between the two actions • The setup of this program is very similar to ex23b.java • Only difference is what the listener is doing • See ex23c.java CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  19. Multiple Components • If we want to have multiple components, we need to determine how to lay them out • To do this we use a layout manager • These determine how components appear in a window and how much space is allocate for them • There are many layout managers in Java • Two simple ones are: • FlowLayout • Places components as we read a book – left to right top to bottom • GridLayout • Places components in an equally sized 2-dimensional rectangular grid CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  20. Multiple Components • Multiple components may also need to interact with each other • Listener for one component may need to access the other component • In this case we must allow the listener access to all components involved -- so it must be different from how we did it in ex23b.java and ex23c.java • Ex: Consider a JTextField • This is a component in which the user can enter text • Once user hits “Enter”, the component generates an ActionEvent • Same event generated by a JButton CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  21. Multiple Components • We can use this to process input from a user • For example to change the contents of a JLabel or a JButton • Let’s look at another example • Our JFrame will have a JButton and a JTextField • The JButton will behave as in ex23b – clicking it will change the color of the text • The JTextField will allow us to enter new text for the JButton • We will also set things up differently to allow for more convenient access • See ex23d.java CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  22. JPanel • What if we want different parts of our window laid out differently? • There is a GridBagLayout that allows for arbitrary configurations, but it is quite complicated to use • A simpler solution is to subdivide our window • We can do this with JPanels • Have most of the functionality of JFrames, except without the title/menu bar • Can store other components and lay them out using a layout manager CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  23. BorderLayout • So now we can use the layout manager of our JFrame to store our JPanels • We can then use our JPanels to store our other components • See drawing on board • When doing this, a common way of laying out our JFrame is BorderLayout • BorderLayout subdivides our window into 5 areas • NORTH, SOUTH, EAST, WEST, CENTER • We can put a component in each area or just some of them • If the component is a JPanel, we can then put our other components within that CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  24. How to Terminate GUIs • How to terminate a graphical program? • So far we have seen that closing the window does not necessarily stop the program • This is because graphical applications in Java must be explicitly terminated using the System.exit(0);method call • However, we need to make sure the method is called only when we really want to quit the program • In the text, they show how you can set up a button to stop the program • This is fine, but most users would like closing the window to also stop the program CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  25. ActionListener, WindowListener • We can handle this with another listener • So far we have only discussed ActionListener, which listens for ActionEvents • Another useful listener in Java is WindowListener, which listens for WindowEvents • Ex: opening, minimizing, closing, activating, etc. • See API • Because there are many different things a WindowEvent can represent, we have multiple methods in the WindowListener interface • However, we are only interested in one for now: windowClosing() CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  26. WindowListner • However, to be a WindowListener, a class must implement all methods in the interface • So we would have to implement all 7 methods, even though we only really need one • For the other 6 we would just have empty braces • To avoid this problem, Java has adapter classes for most of its event handling interfaces • These trivially implement ALL of the methods in the interface • We then extend the adapter and override only the methods we need • In this case WindowAdapter • See Counters.java CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  27. MouseEvents and MouseListeners • One of the most useful events in Java is the MouseEvent • Allows us to act based on users manipulation of the mouse • There are two different listeners for the mouse • One for "change of state" • Pressing or releasing a button • Entering or leaving a component • One for "motion" • Moving the mouse • Dragging the mouse • Let's see how to do this • See ex24.java CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  28. Updating the Display • Often an event will cause some change on the display • A JLabel or JButton will be changed • These are updated on the display automatically, so we don't have to take any extra action • Some graphics are drawn • In this case we DO have to take action • Components have a Graphics context that allows graphics to be painted on the screen • Graphics are drawn through execution of the method paint() or paintComponent() CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  29. Updating the Display • Note that there are a LOT of different ways of drawing and updating the display in Java, using JFrames, JPanels, JComponents, JCanvas, etc. • However, they all have one important requirement: • By default graphics are only drawn when "necessary" • Ex: If the window is covered and then uncovered, or minimized and then restored • If we want them to be drawn at other times, we must request this via the method repaint() • This asks the window to be redrawn when it otherwise would not have been CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

  30. Updating the Display • For example, if we are drawing a line as we move the mouse, we must repaint the screen after EACH PIXEL in order to see its effect • Let's look at another example • See ex25.java CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

More Related