2. GUI development in Java L. Grewe

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

4. 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. 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.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.Applets have method called paint(Graphics g) that gives you the Graphics object. Graphics class has methods draw* Graphics class has methods draw* Look at current API for complete list of methods. Look at current API for complete list of methods.

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

6. Example of simple drawing //Purpose: Draws Squares import java.awt.Graphics; //Graphics Classes import java.awt.Graphics; //Graphics Classes import java.applet.Applet; //Applet Class import java.applet.Applet; //Applet Class import java.awt.Color; //Color Class public class test5 extends Applet { public Color color1, color2, color3, background; 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); } }

7. 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.awt.*; import java.applet.Applet; 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); } }

8. GUI Components The Idea: The Idea: 1.Setup container’s layout: Container is object which will hold the components you will create. (e.g. Panel/JPanel) 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. Layout refers to how you place components in the container. 2.Create a GUI Component (e.g Button/JButton) 3.Add the component to the container of choice

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

10. Lightweight vs. Heavyweight Swing vs. AWT A heavyweight component is one that is associated with its own native screen resource (commonly known as a peer). 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"). 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. Lightweight components sit on top of heavyweight components. Always, ALWAYS, use lightweight (Swing or “J”) components when you can. 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: All AWT components are heavyweight and all Swing components are lightweight, except for the top-level ones: JWindowJWindow JFrameJFrame JDialogJDialog JAppletJApplet The differences boil down to the following: The differences boil down to the following: A lightweight component can have transparent pixels; a heavyweight is always opaque.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.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.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.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/ From: http://java.sun.com/products/jfc/tsc/articles/mixing/http://java.sun.com/products/jfc/tsc/articles/mixing/

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

12. GUI Hierarchy Here is one hierarchy trace Here is one hierarchy trace ObjectObject Component Component ContainerContainer JContainer JContainer GUI components inherit from Component. GUI components inherit from Component. Container is a GUI component that can hold other components. Container is a GUI component that can hold other components. Notice that Container is a Component so Containers can be added to other Containers.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. JContainer is the lightweight version of Container and is, therefore, the superclass of all lightweight Swing components.

13. Some Basic Layout Managers FlowLayout FlowLayout Default for some containersDefault for some containers Adds in order, from upper left to bottom right.Adds in order, from upper left to bottom right. BorderLayout BorderLayout Adds to one of 5 areas of the screen.Adds to one of 5 areas of the screen. Default for JFrame.Default for JFrame. GridLayout GridLayout Rows and column layout.Rows and column layout. My favorite – fast and easy.My favorite – fast and easy. GridBagLayout GridBagLayout Like GridLayout, but much more complex.Like GridLayout, but much more complex. Uses Constraints to position Components.Uses Constraints to position Components. BoxLayout 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.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 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.This means NO layout manager, you can use methods on Components to set their location exactly in terms of pixel location in the container.

14. Some Additional Layout Managers….here is one from swing GroupLayout GroupLayout hierarchically groups components in order to position them in a Container. GroupLayout is intended for use by builders, but may be hand-coded as wellhierarchically groups components in order to position them in a Container. GroupLayout is 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.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.Group 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.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.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.

15. 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 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.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.

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

17. 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.SequentialGroup hGroup = 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.SequentialGroup vGroup = 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.

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

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

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

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

22. JFrame Structure Most things go into content pane Most things go into content pane getContentPane()getContentPane() Use glassPane for pop up menus, some animations Use glassPane for pop up menus, some animations Methods Methods getRootPane()getRootPane() getLayeredPane()getLayeredPane() getContentPane()getContentPane() getGlassPane()getGlassPane() Can set…Pane explicitly Can set…Pane explicitly glassPane rootPane JFrame layeredPane LayeredPane contains contentPane LayeredPane manages (optional) JMenuBar