Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Graphical User Interface (Gui)


Published on

This presentation is a courtesy of bilalAmjad

Published in: Education, Technology
  • Be the first to comment

Graphical User Interface (Gui)

  1. 1. GUI(Graphical User Interface)© 1
  2. 2. An Introduction• A graphical user interface (GUI) presents a user-friendly mechanism for interacting with an application. A GUI (pronounced “GOO-ee”) gives an application a distinctive “look and feel.” GUIs are built from GUI components. These are sometimes called controls or widgets—short for window gadgets. A GUI component is an object with which the user interacts via the mouse, the keyboard or another form of input, such as voice recognition. Java’s so-called Swing GUI components from the javax.swing package. 2
  3. 3. Simple GUI-Based Input/Output with JOptionPane Taking Input from User Using Input Dialog Box Converting String Into integer value 3 Showing Message by Message Dialog Box
  4. 4. Output 4
  5. 5. Different JoptionPane Message Icons 5
  6. 6. JOptionPane Message Icon (cont) 6
  7. 7. JOptionPane Message Icon (cont) 7
  8. 8. An Overview of SWING components• Though it’s possible to perform input and output using the JOptionPane dialogs, most GUI applications require more elaborate user interfaces. Following is the list of some Basic GUI components: 8
  9. 9. Swing V/s AWT• There are actually two sets of GUI components Swing components and AWT components.• In Java’s early days, GUIs were built with components from the Abstract Window Toolkit (AWT) inpackage java.awt.• It Look like the native GUI components of the platform on which a java program execute.For example, a Button object displayed in a Java program running on MicrosoftWindows looks like those in other Windows applications. On Apple Mac OS X,the Button looks like those in other Mac applications. Sometimes, even themanner in which a user can interact with an AWT component differs betweenplatforms. The component’s appearance and the way in which the userinteracts with it are known as its look-and-feel. 9
  10. 10. Swing Components• Swing is the primary Java GUI widget toolkit. It is part of Oracles Java Foundation Classes (JFC) — an API for providing a graphical user interface (GUI) for Java programs.• Swing was developed to provide a more sophisticated set of GUI components than the earlier Abstract Window Toolkit (AWT). Swing provides a native look and feel that emulates the look and feel of several platforms, and also supports a pluggable look and feel that allows applications to have a look and feel unrelated to the underlying platform. It has more powerful and flexible components than AWT. In addition to familiar components such as buttons, check box and labels, Swing provides several advanced components such as tabbed panel, scroll panes, trees, tables and lists.• Unlike AWT components, Swing components are not implemented by platform-specific code. Instead they are written entirely in Java and therefore are platform-independent. The term "lightweight" is used to describe such an element. 10
  11. 11. Swing Component Example 11
  12. 12. Awt components• The Abstract Window Toolkit (AWT) is Javas original platform- independent windowing, graphics, and user-interface widget toolkit. The AWT is now part of the Java Foundation Classes (JFC) — the standard API for providing a graphical user interface (GUI) for a Java program.• AWT is also the GUI toolkit for a number of Java ME profiles. For example, Connected Device Configuration profiles require Java runtimes on mobile telephones to support AWT. 12
  13. 13. Displaying Text and Images in a window• Most windows you’ll create that can contain Swing GUI components are instances of class JFrame or a subclass of JFrame.• JFrame is an indirect subclass of class java.awt.Window that provides the basic attributes and behaviors of a window—a title bar at the top, and buttons to minimize, maximize and close the window.See the Example Program on the Next Slide 13
  14. 14. D ImportingI ClassesS That will beP Used in theL programAYI Declaring threeN JLabel InstancesGTEXTOf the programAConstructorNDIMA 14GES
  15. 15. Output of the Program 15
  16. 16. Labeling GUI components• A typical GUI consists of many components. GUI designers often provide text stating the purpose of each. Such text is known as a label and is created with a JLabel—a subclass of JComponent.AJLabel displays read-only text, an image, or both text and an image. Applications rarely change a label’s contents after creating it. Following is the Example program: 16
  17. 17. Output of the program 17
  18. 18. Common GUI Event Types and Listener Interfaces• Following Figure illustrates a hierarchy containing many event classes from the package java.awt.event. These event types are used with both AWT and Swing components. Additional event types that are specific to Swing GUI components are declared in package javax.swing.event. 18
  19. 19. Jbutton• A button is a component the user clicks to trigger a specific action.• A Java application can use several types of buttons, including command buttons, checkboxes, toggle buttons and radio buttons. Following is the Swing Button Hierarchy: 19
  20. 20. JbuttonExample Importing swing and AWT classes ButtonFram class is extending JFrame Declaring Jbuttons Variables plainJButton And fancyJButton Adds the Jbutton To JFrame Creating Image Icon Adding button to JFrame Creating Button Handler These lines declares actionPerformed To display a message 20 Dialog Box containing the label for the button The user pressed
  21. 21. JbuttonExample (cont) Creating Main 21
  22. 22. Buttons that Maintains States• The Swing GUI components contain three types of state buttons1. JToggleButtonA toggle button is a button that represents a settings with twostates i.e. on and off. Toggle buttons look similar to command buttons and display a graphic or text (or both) to identify the button.The graphic or button text should remain the same whether the button is in the on or off state.The state is indicated by highlighting the background of the buttons. Users can click toggle buttons to turn a setting on or off--for instance, to switch between italic and plain style in selected 22 text.
  23. 23. Button that maintain States (cont)2-Check Boxes:A checkbox is a control that represents a setting or value with an on or off choice.The setting of an individual checkbox is independent of other checkboxes--that is, more than one checkbox in a set can be checked at any given time.A check mark within the checkbox indicates that the setting is selected. The following figure shows both available and unavailable checkboxes in selected and unselected states. 23The user clicks a checkbox to switch its setting from off to on, or on to off. When a checkbox is unavailable, the user cannot change its setting.
  24. 24. JCheckBoxes ExampleImporting the classes Using method setFont inherited by JtextField indirectly from class component Creating two JCheckBox object Creating an instance of class CheckBoxHandler and register It with method addItemListener For both the JCheckBox objects 24 Event Handling is being performed By an instance of private inner class checkboxHandler
  25. 25. JCheckBox Example (Cont) Main Class 25
  26. 26. Buttons that Maintains States(cont) 3-Radio Buttons A radio button represents an exclusive choice within a set of related options. Within a set of radio buttons, only one button can be on at any given time. The following figure shows active radio buttons and inactive radio buttons in both on and off states. When users click a radio button, its setting is always set to on. An inner filled circle within the round button graphic indicates that the setting is selected. If another button in the set has previously been selected, its state changes to off. 26 When a radio button is unavailable, users cannot change its setting.
  27. 27. JRadioButton Example Creating 4 JRadioButtonobjects And adding them to JFrame 27
  28. 28. JRadioButton Example (Cont) Instantiates ButtonGroup Object radioGroup Using ButtonGroup method add To associate each of the JRadioButtons with radio group Creating four instances of inner class RadioButtonHandler Class RadioButtonHandler implements Interface ItemListener so it can handle ItemEvents generated by the JRadioButtons 28
  29. 29. JRadioButton (cont) 29
  30. 30. JComboBox A JComboBox, lets the user choose one of several choices, can have two very different forms. The default form is the uneditable combo box, which features a button and a drop-down list of values. The second form, called the editable combo box, features a text field with a small button abutting it. The user can type a value in the text field or click the button to display a drop-down list. 30
  31. 31. JComboBox Example Declaring and initializing array Icons with four new image icon objects It contains the names of the four Image files that are stored in the Same directory as the application A constructor initializes a JComboBox Object with the strings in array names As the elements in the list Using JComboBox method setMaximumRowCount to set Maximum number of elements That are displayed when the user Clicks JComboBox Are one statement that declares the event listner’s 31 Class,creates an object of that class and register It as the listener for imagesJComboBox’s ItemEvents.
  32. 32. JComboBoxExample (Cont) 32
  33. 33. JList• A JList presents the user with a group of items, displayed in one or more columns, to choose from.• Lists can have many items, so they are often put in scroll panes. The following figures shows two applications that use lists. 33
  34. 34. Jlist (Cont)Types of Lists: Single Selection Only one item can be selected at a time. When the user selects an item, any previously selected item is deselected first. Single Interval Selection Multiple, contiguous items can be selected. When the user begins a new selection range, any previously selected items are deselected first. 34
  35. 35. Jlist (Cont) Multiple Interval Selection:The default. Any combination of items can be selected. The user mustexplicitly deselect items. 35
  36. 36. Jlist Example Creating Jlist object colorJList This line uses Jlist method setSelectionMode To specify the list’s selection mode.Class ListSelectMode1 Declares three constants that specify A Jlist’s selectionMode-SINGLE SELECTIONAdding new instance of classJScrollPane to the Jframe. These lines uses Jlist method addListSelectionListener to register 36 An object that implements ListSelectionListner
  37. 37. Jlist Example (Cont) 37
  38. 38. JSlider• A JSlider component is intended to let the user easily enter a numeric value bounded by a minimum and maximum value. The following picture shows an application that uses a slider to control animation speed: 38
  39. 39. Jslider Example Class OvalPanel contains a paintComponent Method that draws a filled circle. A setDiameter method that changes the Circle’s diameter and repaints the OvalPanel A getPreferredSize method that returns The preferred width and height of an OvalPanel getMinimumSize method that returns An OvalPanel’s minimum width and height 39
  40. 40. Jslider Exapmle (Cont) These lines creates Jslider object DiameterSlider to control the diameter Of the circle drawn on the OvalPanel These lines customize the appearance Of the Jslider.Method setMajorTickSpacing Indicates that each major tick mark Represents 10 values in the range of Values supported by the Jslider. 40
  41. 41. Jslider Example (Cont) 41
  42. 42. Using Frames with Menus• A menu provides a space-saving way to let the user choose one of several options.• Menus are unique in that, by convention, they arent placed with the other components in the UI. Instead, a menu usually appears either in a menu bar or as a popup menu.• A menu bar contains one or more menus and has a customary, platform-dependent location — usually along the top of a window.• A popup menu is a menu that is invisible until the user makes a platform-specific mouse action, such as pressing the right mouse button, over a popup-enabled component. The popup menu then appears under the cursor. 42
  43. 43. Using Frames with Menus (cont)• The following figure shows many menu-related components: a menu bar, menus, menu items, radio button menu items, check box menu items, and separators. 43
  44. 44. This Was the Introduction to GUI however you can do more andmore with GUI this was just a lecture to tell you about GUI and What you can do with it. That’s All Thanks For Your Concentration 44