Download Graphical User Interfaces - Web Design and Development - Lecture Handouts and more Lecture notes Web Design and Development in PDF only on Docsity!
Web Design & Development CS-
Graphical User Interfaces
A graphical user interface is a visual interface to a program. GUIs are built from GUI components (buttons, menus, labels etc). A GUI component is an object with which the user interacts via the mouse or keyboard.
Together, the appearance and how user interacts with the program are known as the program look and feel.
Support for GUI in Java
The classes that are used to create GUI components are part of the “java.awt” or “javax.swing” package. Both these packages provide rich set of user interface components.
GUI classes vs. Non-GUI Support Classes
The classes present in the awt and swing packages can be classified into two broad categories. GUI classes & Non-GUI Support classes.
The GUI classes as the name indicates are visible and user can interact with them. Examples of these are JButton, JFrame & JRadioButton etc
The Non-GUI support classes provide services and perform necessary functions for GUI classes. They do not produce any visual output. Examples of these classes are Layout managers (discussed latter) & Event handling (see handout on it) classes etc.
java.awt package
AWT stands for “Abstract Windowing Toolkit“ contains original GUI components that came with the first release of JDK. These components are tied directly to the local platform’s (Windows, Linux, MAC etc) graphical user interface capabilities. Thus results in a java program executing on different java platforms (windows, linux, solaris etc) has a different appearance and sometimes even different user interaction on each platform.
AWT components are often called Heavy Weight Components (HWC) as they rely on the local platform’s windowing system to determine their functionality and their look and feel. Every time you create an AWT component it creates a corresponding process on the operating system. As compared to this SWING components are managed through threads and are known as Light Weight Components.
This package also provides the classes for robust event handling (see handout on it) and layout managers.
Web Design & Development CS-
javax.swing package
These are the newest GUI components. Swing components are written, manipulated and displayed completely in java, therefore also called pure java components. The swing components allow the programmer to specify a uniform look and feel across all platforms.
Swing components are often referred to as Light Weight Components as they are completely written in java. Several swing components are still HWC. e.g. JFrame etc.
A part of the FrameWork
Object
Component
Container
JComponent
JPanel
Window
Frame
JFrame
AbstractButton
JButton
Web Design & Development CS-
3. Get the component area of the top level container
Review the hierarchy given above, and observe that JFrame is a frame is a window. So, it can be interpreted as JFrame is a window.
Every window has two areas. System Area & Component Area
The programmer cannot add/remove components to the System Area.
The Component Area often known as Client area is a workable place for the programmer. Components can be added/removed in this area.
So, to add components, as you guessed right component area of the JFrame is required. It can be accomplished by the following code of line
Conntainer con = frame .getContentPane();
frame is an instance of JFrame and by calling getContentPane() method on it, it returns the component area. This component area is of type container and that is why it is stored in a variable of a Container class. As already discussed, container allows other components to be added / removed.
4. Apply layout to component area
The layout (size & position etc. How they appear) of components in a container is usually governed by Layout Managers.
The layout manager is responsible for deciding the layout policy and size of its components added to the container.
Layout managers are represented in java as classes. (Layout Managers are going to be discussed in detail later in this handout)
To set the layout, as already discussed use setLayout method and pass object of layout manager as an argument.
con.setLayout( new FlowLayout( ) );
We passed an object of FlowLayout to the setLayout method here.
We can also use the following lines of code instead of above.
FlowLayout layout = new FlowLayout(); con.setLayout(layout);
Web Design & Development CS-
5. Create and Add components
Create required components by calling their constructor.
JButton button = new JButton ( );
After creating all components your are interested in, the next task is to add these components into the component area of your JFrame (i.e ContentPane, the reference to which is in variable con of type Container)
Use add method of the Container to accomplish this and pass it the component to be added.
con.add(button);
6. Set size of frame and make it visible
A frame must be made visible via a call to setVisible(true) and its size defined via a call setSize(rows in pixel, columns in pixel) to be displayed on the screen.
frame.setSize(200, 300) ; frame.setVisible(true) ;
Note: By default, all JFrame’s are invisible. To make visible frame visible we have passed true to the setVisible method.
frame.setVisible(false) ;
Web Design & Development CS-
//Step 6: set size of frame and make it visible myFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); myFrame.setSize(200,150); myFrame.setVisible(true);
} //end initGUI method
public GUITest () { // default constructor initGUI (); }
public static void main (String args[ ]) { GUITest gui = new GUITest(); }
} // end of class
Important Points to Consider
main method (from where program execution starts) is written in the same class. The main method can be in a separate class instead of writing in the same class its your choice.
Inside main, an object of GUI test class is created that results in calling of constructor of the class and from the constructor, initGUI method is called that is responsible for setting up the GUI.
The following line of code is used to exit the program when you close the window
myFrame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
If you delete this line and run your program, the desired GUI would be displayed. However if you close the window by using (X) button on top left corner of your window, you’ll notice that the control doesn’t return back to command prompt. The reason for this is that the java process is still running. How ever if you put this line in your code, when you exit your prompt will return.
