Sei sulla pagina 1di 26
UNIT |9 ‘Graphical sr nerfae (3) 4.2 Understanding Different GUI Components Objectives 1. List ehe steps to create a simple graphical user interface. 2. Explain and ereate basic GUL components such as frame, button and label. 43. Explain and create other GUI components such as text field, text areas, checkboxes and radio buttons, Introduction Creating GUIs with Java usually involves extending and creating objects of the classes provided by the software library. In che following sections, we discuss these GUI components one by one, so that you can enrich your GUI as you learn more about GUI components. First, che three basic components you will learn include creating frame, button and label. The frame component will act as a container to hold the basic components such as burton and label. The label is usually used co ‘explain the purpose af the frame and also to give instructions ro users. Then, you also learn other GUI components such as getting text from users by textfield for textarea, Besides text entry, you also allow users o make choices using checkbox cor radio buttons. As there are alot of other components which may be needed in designing more advanced interface, the basic skill of creating these commonly used components is important for you to prepare yourself in applying these skills when ‘creating other similar components. The steps in creating a graphical user interface ‘The steps in creating GUls with Java and Swing components are as follows: 1. \Greating arop-levél conrainer abject} Most GUI components, such as a button, label and checkbox, cannot be shown on the screen by themselves. Instead, the Java software library defines top-level container classes so:that objects of these:clases cam be shown on the screen. 2. Creatilg’ GUT eoniponemes and adding them to sherop-level container object ‘A top-level container object shown on the screen by itselfis useless. Therefore, swe need to add some GUI components co it so that the top-level container object embeds those GUI components. Whenever the top-level container object is shown on the screen, all embedded GUI component objects are shown on the screen as well, and the user can then operate the GUI. 10 WAWASAN OPEN UNIVERSITY HEC 102 Computing 3. Adding’ the functionalities the GUT éaniponenss:Even though the GUI ‘components are shown on the screen, such as a button shown in a top-level container object, the GUI performs nothing when you operate the components, such as clicking a button. When you click a button in a GUL, itis an event received by che GUI and it is necessary to teach the GUI how to handle it. That is, you need to define how a' GUI responds by writing some methods. Event handling is discussed after we finish discussing the building of GUIs. A top-level container can be a standalone window shown on the screen. GUI components are the widgets that compose the GUI. For example, the ‘SwingCalcelator is shown in Figure 4.3 to illustrate the top-level container and GUI components. Top-level container Amenu bar label ou ‘components Buttons Figure 4.3 Top-level container and GUI components In Figure 4.3, the GUI is made up of the following components: 1. Altop:levelteoiitatnér chat is an independent window on the screen that can embed other GUI components, such as the menu bat, the label containing the number 0 and the calculator buttons. 2. A fei baris a GUI component that consolidates many operations that the application provides and partitions all operations in groups as pull- down menus. [Fyou click a menu on the menu bar, its drop-down menu lise, if any, wil be shown, 3. Allabél is commonly used to show data, such as text, on the screen but is not editable by the user. In the figure, itis the component showing the number 0 and it occupies the space between the menu bar and the bucton groups. 4. A(biiétaitis a common GUI component that the user can press to invoke a particular operation of the application. There ate 27 buttons in the figure. UNIT4 [11 rp erste | The following reading will provide you some basic eading on the GUI components, 8 Reading Malik, D $ (2006) java Programming: From Problem Analysis 20 Program Design, 2" edn, ‘Graphical User Interface (GUI Components)’, Chapter 6, p. 302-305. Basic GUI components: frame, button and label JFrame ‘As mentioned earlier, the firs step in creating a GUI isto create a top-level container object. The software library thar comes with the J2SDK provides a class, javax. swing. JPane (or simply sFxame) chat isa top-level container class. [cis commonly used as the cop-level container ofa GUI-based application. ‘When a steams objectis created: itis invisible. Before showing iton the screen, other GUI components are added to ir so that the JFrame object embeds the components. ‘Afterwards, the Jeane object can be shown on the screen, and it can be moved and resized like a usual GUI-based application. To create a aFrame object, we need to know its constructor so that we can pass the necessary supplementary data to it. There are four overloaded constructors in toral. ‘The following two are usually used: public JFrame) public JFrame(String titie) HUE SPACLEAE When a rane objec is way tobe shown onthe screen, we can send a message show to it ‘We now have sufficient knowledge to ereate our first GUI. An example program, the tostaPrame class, is written as shown in Figure 4.4 10 illustrate che sceps in creating and showing a JFrame object.