GUI Development in Java Using Two Methodologies: Painting and GUI Elements Creation

1. GUI development in Java L. Grewe

2. Two methodologies for things to appear on the screen • By painting / drawing • e.g. drawing an Image • By the creation and addition of GUI elements. • e.g. create Button and add it to the GUI.

3. Painting / Drawing to Interface • Have an GUI element you can draw in, e.g. Graphics object associated with a GUI component class like a panel. • Applications will have windows and panels that can grab Graphics object from. • Applets have method called paint(Graphics g) that gives you the Graphics object. • Graphics class has methods draw* • Look at current API for complete list of methods.

4. A Graphics object • Made up of pixels, origin is in upper left hand corner. • Most draw* methods based on pixel coordinates.

5. Example of simple drawing //Purpose: Draws Squares import java.awt.Graphics; //Graphics Classes import java.applet.Applet; //Applet Class import java.awt.Color; //Color Class public class test5 extends Applet { public Color color1, color2, color3, background; public void init() { color1 = new Color(255,0,0); color2 = new Color(0,255,0); color3 = new Color(0,0,255); background = new Color(255,255,255); } public void paint(Graphics g) { g.setColor( background ); g.fillRect(0,0,100,200); g.setColor( color1 ); g.fillRect(0,0,100,100); g.setColor( color2 ); g.fillRect(20,20,60,60); g.setColor( color3 ); g.fillRect(40,40,20,20); } }

6. Drawing an Image //Purpose: Open an image from the same directory as the web-page // that includes this applet and display it to the screen. import java.awt.*; import java.applet.Applet; public class test7 extends Applet { Image butch; public void init() { butch = getImage(getDocumentBase(), "B.jpg"); } //draw as must as you can of the image. // Note that we use the Applet itself (this) as // an object that implements the ImageObserver interface // the applet inheirits this from is Component superclass. // this monitors the loading of the Image. public void paint(Graphics g) { g.drawImage(butch, 0, 0, this); } }

7. GUI Components • The Idea: • Setup container’s layout: • Container is object which will hold the components you will create. (e.g. Panel/JPanel) • Layout refers to how you place components in the container. • Create a GUI Component (e.g Button/JButton) • Add the component to the container of choice

8. Java GUI Classes AWT (Abstract Window Toolkit) (java.awt.*) Old GUI framework for Java (Java 1.1) Some reliance on native code counterparts Platform independence problems Swing (javax.swing.*) New GUI framework first introduced in Java 1.2 Includes AWT features plus many enhancements Pure Java components (no reliance on native code) Pluggable look and feel architecture SWT (Standard Widget Toolkit; from Eclipse) and others???

9. Lightweight vs. HeavyweightSwing vs. AWT • A heavyweight component is one that is associated with its own native screen resource (commonly known as a peer). • A lightweight component is one that "borrows" the screen resource of an ancestor (which means it has no native resource of its own -- so it's "lighter"). • Lightweight components sit on top of heavyweight components. • Always, ALWAYS, use lightweight (Swing or “J”) components when you can. • All AWT components are heavyweight and all Swing components are lightweight, except for the top-level ones: • JWindow • JFrame • JDialog • JApplet • The differences boil down to the following: • A lightweight component can have transparent pixels; a heavyweight is always opaque. • A lightweight component can appear to be non-rectangular because of its ability to set transparent areas; a heavyweight can only be rectangular. • Mouse events on a lightweight component fall through to its parent; mouse events on a heavyweight component do not fall through to its parent. • When a lightweight component overlaps a heavyweight component, the heavyweight component is always on top, regardless of the relative z-order  of the two components. • From: http://java.sun.com/products/jfc/tsc/articles/mixing/

10. GUI Containers • There are a number of classes that are containers. Some Examples: • Frame/JFrame • Panel/JPanel • Applet/JApplet

11. GUI Hierarchy • Here is one hierarchy trace • Object • Component • Container • JContainer • GUI components inherit from Component. • Container is a GUI component that can hold other components. • Notice that Container is a Component so Containers can be added to other Containers. • JContainer is the lightweight version of Container and is, therefore, the superclass of all lightweight Swing components.

12. Some Basic Layout Managers • FlowLayout • Default for some containers • Adds in order, from upper left to bottom right. • BorderLayout • Adds to one of 5 areas of the screen. • Default for JFrame. • GridLayout • Rows and column layout. • My favorite – fast and easy. • GridBagLayout • Like GridLayout, but much more complex. • Uses Constraints to position Components. • BoxLayout • laid out either vertically or horizontally. The components will not wrap so, for example, a vertical arrangement of components will stay vertically arranged when the frame is resized. • null • This means NO layout manager, you can use methods on Components to set their location exactly in terms of pixel location in the container.

13. Some Additional Layout Managers….here is one from swing • GroupLayout • hierarchically groups components in order to position them in a Container. GroupLayoutis intended for use by builders, but may be hand-coded as well • Grouping is done by instances of the Group class. GroupLayout supports two types of groups. A sequential group positions its child elements sequentially, one after another. A parallel group aligns its child elements in one of four ways. • GroupLayout treats each axis independently. That is, there is a group representing the horizontal axis, and a group representing the vertical axis. The horizontal group is responsible for determining the minimum, preferred and maximum size along the horizontal axis as well as setting the x and width of the components contained in it. The vertical group is responsible for determining the minimum, preferred and maximum size along the vertical axis as well as setting the y and height of the components contained in it. • Each Component must exist in both a horizontal and vertical group, otherwise an IllegalStateException is thrown during layout, or when the minimum, preferred or maximum size is requested.

14. GroupLayout manager • The following diagram shows a sequential group along the horizontal axis. The sequential group contains three components. A parallel group was used along the vertical axis. • The following diagram shows the same three components, but with the parallel group along the horizontal axis and the sequential group along the vertical axis. Note C1, the largest element determines the size of the parallel group along horizontal axis.

15. GroupLayout manager • The following diagram shows a sequential group along both the horizontal and vertical axis.

16. Example using GroupLayout from Oracle Java API The following builds a panel consisting of two labels in one column, followed by two textfields in the next column: JComponent panel = ...; GroupLayout layout = new GroupLayout(panel); panel.setLayout(layout); // Turn on automatically adding gaps between components layout.setAutoCreateGaps(true); // Turn on automatically creating gaps between components that touch // the edge of the container and the container. layout.setAutoCreateContainerGaps(true); // Create a sequential group for the horizontal axis. GroupLayout.SequentialGrouphGroup = layout.createSequentialGroup(); // The sequential group in turn contains two parallel groups. // One parallel group contains the labels, the other the text fields. // Putting the labels in a parallel group along the horizontal axis // positions them at the same x location. // // Variable indentation is used to reinforce the level of grouping. hGroup.addGroup(layout.createParallelGroup(). addComponent(label1).addComponent(label2)); hGroup.addGroup(layout.createParallelGroup(). addComponent(tf1).addComponent(tf2)); layout.setHorizontalGroup(hGroup); // Create a sequential group for the vertical axis. G roupLayout.SequentialGroupvGroup = layout.createSequentialGroup(); // The sequential group contains two parallel groups that align // the contents along the baseline. The first parallel group contains // the first label and text field, and the second parallel group contains // the second label and text field. By using a sequential group // the labels and text fields are positioned vertically after one another. vGroup.addGroup(layout.createParallelGroup(Alignment.BASELINE). addComponent(label1).addComponent(tf1)); vGroup.addGroup(layout.createParallelGroup(Alignment.BASELINE). addComponent(label2).addComponent(tf2)); layout.setVerticalGroup(vGroup); When run the following is produced.

17. GUI Components • Buttons (i.e. Button and JButton) • Menus • Check Boxes • Text Fields • Scrolling Lists

18. Many Helper classes • Describe properties of other GUI Components…some examples • Color • Graphics • Dimension • Other

19. Summary …how to Create a GUI • Container …..Define for example Frame or Applet to hold the components. • Setup Layout of container • Add components to the frame • Later we will learn about event handling, adding listeners to GUI components

20. Lets look at an example container class….the JFrame • Number of ancestors • methods including inherited ones allow for operations such as • resizing, setting properties, adding components, etc. Object Component Container Window Frame JFrame