CS1371 Introduction to Computing for Engineers

1. CS1371Introduction to Computing for Engineers Basic Graphics

2. Basic Graphics Graphics Principles • Containers • Components • Layouts • Events Learning Objectives Basics of Java Graphics

3. Objective (demo Graphic4)

4. Background • As we have already seen, printing to, and reading from, a text window is pretty ugly. • Java is not intended for text I/O • This module is all about what Java was designed for: graphical window interaction • So this should be really easy, right? • Well, everything is relative. Java graphics are much easier than, for example, C++. • Moreover, they are completely portable between computers. • If your program runs on your computer, it will run on anything with the same or later release of the Java Virtual Machine (JVM)

5. Agenda Graphical User Interfaces -- overview -- essential elements Containers -- overview -- composition vs. inheritance Components -- examples Layout Managers -- examples Our Roadmap

6. Agenda Graphical User Interfaces -- overview -- essential elements Containers -- overview -- composition vs. inheritance Components -- examples Layout Managers -- examples Our Roadmap

7. Downloading libcrypt ... Enter Edit File 40% Cancel Open Save Save As... Quit Graphical User Interface • A Graphical User Interface (GUI) is one variety of user interface. . • User interacts with objects on the screen (icons, buttons, scroll-bars, etc.) via mouse clicks or keyboard actions. Ok

8. GUI Popularity • Popularized in 1980s by the Macintosh. • Now state of the practice, and not final word in UI • Intended to replace text-based "command line" and "function key" interfaces. • Despite similarities, GUIs are typically platform-specific (Windows 95/98/NT/1900, MacOS, X Windows look-and-feel standards). • Some graphical toolkits now provide cross-platform APIs. E.g. wxWindows, GTK+, Java.

9. 1. 2. Java’s GUI Capabilities Java provides essentially two related toolkits for making GUIs: The Abstract Windowing Toolkit ("AWT"), and The Java Foundation Classes ("Swing") Swing is merely an expanded version of the AWT, and provides greater control and convenience.

10. Why Two Toolkits in Java? MFC AWT, then JFC or "Swing" Well, it’s a long story. In short, JFC (swing) is Sun’s answer to Microsoft’s MFC--a detailed toolkit library.

11. Button JButton Cautionary Note • Java has two flavors of toolkits: • Swing and • AWT. • It is not wise to mix AWT and Swing Components. • For your first programs, stick with one toolkit or the other. • We’ll start off with AWT, and the switch to Swing Components. • How do you tell them apart? • Generally, but not always, Swing Components will have a • "J" in front of the class name: AWT Swing

12. Keep in Mind • We will program graphical elements in source code (text). • There are drag and drop systems but usually there is an underlying text-based system • Eventually you need to get down to the text level • Java is designed to work across different platforms. • This poses special challenges • As does the very nature of WIMP GUI’s (windows, icons, menus, and pointing device graphic user interface)

13. Steps to GUI Construction We will learn GUI creation in two steps: the "view", and then the "controls" or event handling. 1. • In Java, to create a GUI, you (1): • Specify a Container, using . . . • a Layout Manager to . . . • place Components and/or Containers of Components . . . on the screen as desired. I.e. UI form and appearance FIRST LATER 2. • In Java, to make a GUI act as the • interface for a program, you (2) • Design human/computer dialog, using Listeners and component-generated events I.e. UI interaction and behavior

14. Agenda Graphical User Interfaces -- overview -- essential elements Containers -- overview -- composition vs. inheritance Components -- examples Layout Managers -- examples Our Roadmap

15. File Edit Help CLICK ME GUI Design & Creation There are three essential constructs in any GUI: Containers -- used to hold items (e.g., the frame) Components -- the widgets or interactors (e.g., buttons) LayoutManagers -- the hidden algorithm used to organize the widgets inside the container offset offset

16. 1. Containers File Edit Help offset 2. Components CLICK ME 3. LayoutManagers offset Pop Quiz (hint) What are the three basic constructs used in every GUI?

17. Agenda Graphical User Interfaces -- overview -- essential elements Containers -- overview -- composition vs. inheritance Components -- examples Layout Managers -- examples Our Roadmap

18. Examples of Containers: Swing AWT • JPanel • JFrame • JApplet • JWindow • Panel • Frame • Applet • Window Containers STEP 1 Containers are special components that may contain other components. Note: Containment is not the same as inheritance extension. A Frame may contain buttons, but buttons are not subclasses of Frame.

19. Containers • A Container is a class that extends from java.awt.Container • As it turns out, the class "Container" is itself a Component. • Containers can have: • Layouts set on them • Other components or containers added to them. Object Component Container

20. Example Let’s make a simple Frame. When working with GUIs, you often have to consult the API. Note the inheritance structure of your classes.

21. Example • So far, we’ve used the API to learn how to make a Frame. • We found constructors for: • public JFrame (); • public JFrame (String strTitle); • Now, how can we set the size of the Frame? • We again return to the API.

22. Example The class java.awt.Frame does not contain a method to set its size. But such a method was inherited from java.awt.Component:

23. Example Likewise, there’s no method in java.awt.Frame to make the Frame visible. Instead, we find the method "show()" was inherited from java.awt.Window

24. Hello GUI import java.awt.*; public class HelloGUI { public static void main (String[ ] arg) { System.out.println ("About to make GUI"); Frame f = new Frame ("Hello GUI"); f.setSize( 200, 200 ); f.show(); System.out.println ("Finished making GUI"); } // main } // class HelloGUI

25. (Demonstration)

26. Notice anything odd? When we reach the end of main (as our print statement indicates) why doesn’t the program end?

27. import javax.swing.*; public class HelloGUI { public static void main (String[ ] arg) { System.out.println ("About to make GUI"); JFrame f = new JFrame ("Hello GUI"); f.setSize( 200, 200 ); f.show(); System.out.println ("Finished making GUI"); } // main } // class HelloGUI Explanation When the Java VM created our JFrame, it entered into a kind of ‘infinite loop’, waiting for input and events. (This is common of graphical toolkits.) while(true){ //get user input // handle event }

28. Agenda Graphical User Interfaces -- overview -- essential elements Containers -- overview -- composition vs. inheritance Components -- examples Layout Managers -- examples Our Roadmap

29. 1. Inheritance -- our class extends a container 2. Composition -- our class holds a container Design Idea We really have two choices when working with top-level containers: java.awt.Frame MyGUI We will implement containers using composition MyGUI java.awt.Frame

30. Check the API Will call constructor, so the show() method gets called Example import java.awt.*; public class HelloComposition { Frame f; public HelloComposition(){ f = new Frame("Composition Test"); f.setSize(200,200); f.setBackground(Color.red); f.show(); } public static void main (String[] arg) { HelloComposition h = new HelloComposition(); } }

31. myFrame.setBackground(Color.red); An inherited method A class, also in the API Container Summary Creating containers requires careful study of the API. Watch the inheritance structure of the classes. A top-level container, like a Frame, requires event handlers (covered later). There are many useful methods for customizing containers. Just look them up in the API. E.g.:

32. Agenda Graphical User Interfaces -- overview -- essential elements Containers -- overview -- composition vs. inheritance Components -- examples Layout Managers -- examples Our Roadmap

33. Components STEP 2 • Most interactionsin a Java GUI are with Components. • Another generic term for Component in other GUIs • (e.g. X Windows) is "widget". • Different types of components for different types of • interaction (e.g. buttons, etc.) • User interactions with components create events (thus, allow event-driven programming) • As a rule, a Component cannot have other components inside • Exceptions to rule: pop up menus may have menu items added to them. And Containers are themselves components due to inheritance.

34. Component Examples

35. Recall: A Container "is a" Component Component Examples Component - generic widget that you can interact with Button - a widget that you can press Canvas - a widget that you can draw on Checkbox - a widget that is checked or not checked Choice - an option menu that drops down Container - a generic class that contains Components Panel - a Container to be used inside another container; used to split an existing window Label - a single line of read-only text List - a list of Strings Scrollbar - a horizontal or vertical scrollbar TextComponent TextArea - multi-line editable text TextField - single-line editable text

36. Components--Examples • Canvas: • typically a drawing surface on which shapes, graphs, pictures, etc can be drawn. • utilize mouse events and mouse motion events to interact with the user to accomplish the drawing tasks. • TextField: • a one-line data entry area • theoretically infinite in length • can generate Key events to indicate that the user has typed a key • more typically, it generates an Action event when the user finishes the data entry and hits Return in the TextField.

37. Components--Examples • Button: • simply a clickable component • appears as a standard button on whatever graphical environment the user happens to be running at the time • generates an Action event when clicked • Label: • a one-line field of text. • user cannot change this text directly; program changes text with setText( ) method. • usually not used to capture events (but could) • usually used as a one-way information source to provide a message to the user.

38. Joining Components & Containers Containers have a method: public void add (Component c) that allows us to place items inside. Thus: Panel p = new Panel(); Button b1 = new Button ("Example 1"); Button b2 = new Button ("Example 2"); p.add(b1); p.add(b2); In this example, two buttons are added to the panel.

39. Example import java.awt.*; public class HelloComponent { Frame f; public HelloComponent(){ f = new Frame("Component Test"); f.setSize(200,200); f.setBackground (Color.red); Panel p = new Panel(); Button b = new Button ("Hello Components"); p.add(b); f.add(p); f.show(); } public static void main (String[] arg) { new HelloComponent(); } }

40. (Demonstration)

41. Questions?

42. CS1371Introduction to Computing for Engineers Basic Graphics II

43. Basic Graphics II Graphics Principles • Containers • Components • Layouts • Events Learning Objectives Basics of Java Graphics

44. Objective (demo Graphic4)

45. Agenda Graphical User Interfaces -- overview -- essential elements Containers -- overview -- composition vs. inheritance Components -- examples Layout Managers -- examples Our Roadmap

46. Layout Managers STEP 3 We can now create Components and Containers. But how can they be organized? We might be tempted to call methods that set the x, y location of a component in a container. Consulting the API, we find some likely methods: public void setLocation(int x, int y); public void setSize(int width, int height);

47. 75 pixels down Click 25 pixels over Layout Managers -- Motivation • To arrange items, one could specify the location of a Component by specific x and y coordinates. The Component class contains the method setLocation(int width, int height): • Frame f = new Frame(); • f.setSize(500,500); • Button myButton = new Button ("Click"); • add(myButton); • myButton.setLocation(25, 75); NOTE: Origin 0,0 at top left What’s wrong with this approach? Note: Button’s x and y coordinate starts from top left

48. Layout Managers -- Motivation • Problems with specifying x, y coordinates for Component: • This becomes tedious for even mildly complex GUIs. • Addition of more components requires recalculation of every component’s x, y coordinate • If container resizes (e.g., user expands window), calculations have to be redone! • Solution: • Position components based on a percentage of available container size. Or create an algorithm to place components . . . • But Java already does this for you . . .

49. Layout Managers -- AWT Based • Java provides several layout managers. • We will concentrate here on several of them: • BorderLayout • GridLayout • FlowLayout • BoxLayout • To tell a container which layout manager to use, invoke the method: • setLayout( ); • and specify a type of layout. • For example: • To specify a BorderLayout: • setLayout (new BorderLayout());

50. Layout Managers: Two General Flavors • One can conceptually divide layout managers into two types: • Those that attach constraints to their components. • Those that do not. • What does this mean, "attach constraints"?If a manager attaches constraints to a component, then information about a component’s location (e.g., compass points) is stored with the object.