BM214E Object Oriented Programming Lecture 12
|
|
- Cornelia Foster
- 5 years ago
- Views:
Transcription
1 BM214E Object Oriented Programming Lecture 12
2 Graphical User Interfaces -- overview -- essential elements Agenda Containers -- overview -- composition vs. inheritance Components -- examples Layout Managers -- examples
3 Graphical User Interfaces -- overview -- essential elements Agenda Containers -- overview -- composition vs. inheritance Components -- examples Layout Managers -- examples
4 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. Downloading libcrypt... File Edit Open Save Save As... Quit 40% Cancel Ok Enter
5 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 platformspecific (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.
6 Java s GUI Capabilities Java provides essentially two related toolkits for making GUIs: 1. The Abstract Windowing Toolkit ("AWT"), and 2. The Java Foundation Classes ("Swing") Swing is an expanded version of the AWT, and provides greater control and convenience.
7 Cautionary Note We ve noted that Java has two flavors of toolkits: Swing and AWT. It is not always wise to mix AWT and Swing Components. For your first programs, stick with one toolkit or the other. In the following slides, we will use AWT Components to show the basics. Then, we will 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 Button JButton
8 Keep in Mind We are going to be describing 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.
9 Steps to GUI Construction We will learn GUI creation in two steps: the "view", and then the "controls" or event handling. In Java, to create a GUI, you (1): Specify a Container, using... a Layout Manager to... place Components and/or Containers of Components TODAY I.e. UI form and appearance on the screen as desired. I.e. UI interaction and behavior LATER In Java, to make a GUI act as the interface for a program, you (2) Design human/computer dialog, using Listeners and componentgenerated events 2.
10 Graphical User Interfaces -- overview -- essential elements Agenda Containers -- overview -- composition vs. inheritance Components -- examples Layout Managers -- examples
11 GUI Design & Creation There are three essential constructs in any GUI: Containers -- used to hold items (e.g., the frame) File Edit Help Components -- the widgets or interactors (e.g., buttons) CLICK ME offset LayoutManagers -- the hidden algorithm used to organize the widgets inside the container offset
12 Pop Quiz (hint) What are the three basic constructs used in every GUI? 1. Containers File Edit Help 2. Components CLICK ME offset 3. LayoutManagers offset
13 Graphical User Interfaces -- overview -- essential elements Agenda Containers -- overview -- composition vs. inheritance Components -- examples Layout Managers -- examples
14 Containers Containers are special components that may contain other components. Examples of Containers: AWT Panel Frame Applet Window Swing JPanel JFrame Japplet JWindow Note: Containment is not the same as inheritance extension. A Frame may contain buttons, but buttons are not subclasses of Frame.
15 Containers A Container is a class that extends from java.awt.container Object As it turns out, the class "Container" is itself a Component. Component Containers can have: Layouts set on them Container Other components or containers added to them.
16 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.
17 Example So far, we ve used the API to learn how to make a Frame. We found constructors for: public Frame (); public Frame (String strtitle); Now, how can we set the size of the Frame? We again return to the API.
18 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:
19 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
20 import java.awt.*; public class HelloGUI { Hello GUI public static void main (String[ ] arg) { System.out.println ("About to make GUI"); Frame f = new Frame ("Hello GUIs"); f.setsize( 200, 200 ); f.show(); System.out.println ("Finished making GUI"); }// main }// class HelloGUI
21 (Demonstration)
22 What? Our program runs, and the frame never goes away. When we reach the end of main (as our print statement indicates) why doesn t the program end?
23 When the Java VM created our Frame, it entered into a kind of infinite loop, waiting for input and events. (This is common of graphical toolkits.) Explanation while(true){ //get user input // handle event } import java.awt.*; public class HelloGUI { public static void main (String[ ] arg) { System.out.println ("About to make GUI"); Frame f = new Frame ("Hello GUIs"); f.setsize( 200, 200 ); f.show(); System.out.println ("Finished making GUI"); }// main }// class HelloGUI Since we didn t write any event handlers, not even the "window disposal" button will work.
24 Solution To fix this problem, we ll have to write some event handling code. But in order to write some event handling code, we have to create some components So, for now, you ll just have to use Ctrl-C to end the program. Once the basics of GUI construction are covered, we ll return to this problem.
25 Graphical User Interfaces -- overview -- essential elements Agenda Containers -- overview -- composition vs. inheritance Components -- examples Layout Managers -- examples
26 Design Idea We really have two choices when working with top-level containers: 1. Inheritance -- our class extends a container java.awt.frame MyGUI 2. Composition -- our class holds a container MyGUI java.awt.frame
27 Design Note HAS -A IS-A But the tension between inheritance and composition has been with us.
28 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(); We save our single inheritance Check the API } public static void main (String[] arg) { HelloComposition h = new HelloComposition(); } Will call constructor, so the show() method gets called
29 A few changes Example allows us to convert between the two import java.awt.*; public class HelloInheritance extends Frame { Frame f; public HelloInheritance(){ f = new Frame super("composition Test"); f this.setsize(200,200); f this.setbackground (Color.red); f this.show(); } public static void main (String[] arg) { HelloInheritance h = new HelloInheritance(); h.show(); } }
30 Which One is Better? Inheritance Use up our single inheritance "Wasted inheritance" occurs where we subclass, but fail to override anything. Easier to change basic GUI behavior Composition Saves the single inheritance Useful when you want the "factory settings" for a GUI, with no changed behavior Often requires more code, more references
31 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.: myframe.setbackground(color.red); An inherited method A class, also in the API
32 Container Summary We may often use "composition" where: -- We don t anticipate changing behaviors -- We need to save our single inheritance We may often use "inheritance" where: -- We need to change basic GUI behaviors
33 Graphical User Interfaces -- overview -- essential elements Agenda Containers -- overview -- composition vs. inheritance Components -- examples Layout Managers -- examples
34 Components Most interactions in 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, eventdriven 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.
35 Component Examples
36 Component Examples Component - generic widget that you can interact with Recall: A Container "is a" Component Button Canvas Checkbox Choice Container Panel Label List Scrollbar TextComponent - a widget that you can press - a widget that you can draw on - a widget that is checked or not checked - an option menu that drops down - a generic class that contains Components - a Container to be used inside another container; used to split an existing window - a single line of read-only text - a list of Strings - a horizontal or vertical scrollbar TextArea - multi-line editable text TextField - single-line editable text
37 Canvas: Components--Examples 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.
38 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. Components--Examples 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.
39 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.
40 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(); } }
41 Graphical User Interfaces -- overview -- essential elements Agenda Containers -- overview -- composition vs. inheritance Components -- examples Layout Managers -- examples
42 LayoutManagers 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);
43 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 Note: Button s x and y coordinate starts from top left Click 25 pixels over 75 pixels down What s wrong with this approach?
44 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...
45 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: Layout Managers -- AWT Based To specify a BorderLayout: setlayout (new BorderLayout());
46 LayoutManagers: 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.
47 LayoutManagers: Constraints BorderLayout specifies constraints corresponding to compass regions of a container: NORTH WEST CENTER EAST SOUTH
48 LayoutManagers: Constraints BorderLayout then appends constraint information on all components, e.g.: this.setlayout (new BorderLayout()); Button e = new Button ("East"); Button w = new Button ("West"); Button n = new Button ("North"); add(e, "East"); // deprecated add("west", w); // works; deprecated add(n, BorderLayout.NORTH); // better
49 LayoutManagers: Constraints
50 LayoutManagers: Another Example import java.awt.*; public class Test extends Frame { public Test() { super ("BorderLayout Demo"); this.setsize(200,200); this.setlayout(new BorderLayout()); this.add (new Button ("North"), BorderLayout.NORTH); this.add (new Button ("South"), BorderLayout.SOUTH); this.add (new Button ("East"), BorderLayout.EAST); this.add (new Button ("West"), BorderLayout.WEST); this.add (new Button ("Center"), BorderLayout.CENTER); } public static void main (String[ ] args) { new Test().show(); } } // test
51 Giving: LayoutManager: Example
52 WEST BorderLayout BorderLayout specifies the arrangement: NORTH CENTER EAST SOUTH To add components to a BorderLayout, specify the position in which the component will reside. Only one component (or container) can go in each of the five positions.
53 BorderLayout--Example setlayout (new BorderLayout()); add(new Label ("Hello!"), "North"); Canvas mycanvas = new Canvas(); // more about Canvas in a moment add (mycanvas, "Center"); Hello! { a fresh canvas for drawing here}
54 Simple Example import java.awt.*; public class HelloLayout { public static void main(string[] args) { Frame f = new Frame(); f.setsize(400,400); BorderLayout bord = new BorderLayout(); f.setlayout(bord); Button b = new Button ("Hello"); f.add(b, BorderLayout.SOUTH); } } // HelloLayout Will this work? Let s run it and find out...
55 (Demonstration)
56 Simple Example import java.awt.*; public class HelloLayout { public static void main(string[] args) { Frame f = new Frame(); f.setsize(400,400); BorderLayout bord = new BorderLayout(); f.setlayout(bord); Button b = new Button ("Hello"); f.add(b, BorderLayout.SOUTH); f.show(); } } // HelloLayout Ahh.. We forgot to set our Frame visible. Now it works. Welcome to the exciting world of GUI debugging.
57 LayoutManager: No Constraints The second type of LayoutManager does not specify constraints for the objects it holds. Examples: GridLayout() FlowLayout() Without constraints, you cannot accurately predict layout behavior across platforms
58 LayoutManager: No Constraints import java.awt.*; public class FlowTest extends Frame { String Labels[] = {"Short", "Short", "Long Label", "Really Long Label", "Really, really long"}; public FlowTest(){ this.setsize(400,200); setlayout(new FlowLayout()); for (int i = 0; i < Labels.length; i++){ Button temp = new Button (Labels[i]); add (temp); } } public static void main (String arg[]){ new FlowTest().show(); } } //class test
59 LayoutManager: No Constraints Yields:
60 LayoutManager: No Constraints And also:
61 Demonstration
62 Note: LayoutManager: No Constraints Since pixels, fonts and insets vary with each platform, layout without constraints will vary greatly. Lesson: Use layout managers without constraints only when you have few components, or you ve anticipated their possible movement.
63 LayoutManager: No Constraints Don t think that layout managers without constraints are not useful! One of the most useful constraint-free layout manager is "GridLayout". public GridLayout(); public GridLayout(int rows, int cols); public GridLayout (int rows, int cols, int hgap, int vgap);
64 GridLayout GridLayout specifies a grid pattern via: setlayout (new GridLayout (rows, columns)); For example: setlayout (new GridLayout(2,3)); generates:
65 GridLayout To add components (or containers) to a GridLayout, particular locations are not specified (unlike BorderLayout). Instead, the components (or containers) are positioned by the sequence in which they are added, as indicated by numerals below. Significantly, GridLayout is distortive(değiştirilebilir), meaning components are stretched to fill the available space in the grid
66 GridLayout Optionally, two additional parameters may be used with GridLayout to specify the horizontal and vertical spacing (in pixels) between grid elements: setlayout (new GridLayout (rows, columns, hspace, vspace)); where hspace specifies horizontal size, and vspace specifies vertical size, e.g., setlayout (new GridLayout (2, 2, 7, 5));
67 GridLayout: Example import java.awt.*; public class CalcPad extends Frame { } public CalcPad() { setlayout(new GridLayout(5,3)); int off[]={-2,2,0}; for (int i=9; i >= 1; i--) add (new Button (""+(i+off[i%3]))); add (new Button (".")); add (new Button ("0")); add (new Button ("+/-")); add (new Panel()); public static void main (String[] arg){ } }//CalcPad CalcPad ti = new CalcPad(); ti.setsize(150,150); ti.show();
68 Box Layout: Motivation Often, it is desirable to place items in horizontal or vertical direction. A grid layout may not be the best choice, since grid components are resized to fit the available space--it distorts its contents. container component Desired look A (3, 1) grid forces size changes
69 BoxLayout A BoxLayout provides this feature. It resembles a FlowLayout, but with directional control, and other features Horizontal and vertical flow control
70 BoxLayout: How The BoxLayout has a single constructor: BoxLayout(Container target, int axis); The target is the container we wish to layout. The axis is a static field: BoxLayout.X_AXIS; BoxLayout.Y_AXIS; JPanel buttonpanel = new JPanel(); BoxLayout blayout = new BoxLayout (buttonpanel, BoxLayout.X_AXIS); buttonpanel.setlayout(blayout);
71 Questions?
72 Exercise Please Log In User Name Password Let s design a simple class that displays a login prompt. No events will be handled; let s just experiment with components, containers and layout managers.
73 Step 1: List Components Please Log In User Name Password Labels Text Fields
74 Step 2: List Containers Please Log In User Name Password Panel (out container) Panel (perhaps a grid?)
75 Step 3: Select Layouts Please Log In User Name Password Grid Layout
76 Step 3: Select Layouts (cont d) Please Log In User Name Password BorderLayout
77 Step 4: Code import java.awt.*; public class LoginPanel extends Panel { TextField password, username; Panel innerpanel; public LoginPanel () { this.setlayout(new BorderLayout()); innerpanel = new Panel(); innerpanel.setlayout(new GridLayout(2,2)); innerpanel.add(new Label("User Name")); username = new TextField(10); innerpanel.add(username); innerpanel.add(new Label("Password")); password = new TextField(10); innerpanel.add(password); this.add(innerpanel, BorderLayout.CENTER); this.add(new Label("Please Log In"), BorderLayout.NORTH); }
78 // class LoginPanel (con td) public static void main(string[] args) { Frame f= new Frame(); f.setsize(400,400); f.add(new LoginPanel()); f.show(); } } // LoginPanel
79 Demonstration
80 Step What happened?
81 Analysis Recall that grid layout distorts, and stretches the cell contents to fit the maximum allowed space.
82 Revision #1 User Name Password Since the grid was distortive, we ll wrap the contents in an inner panel. The wrapping panel will get stretched, but not its contents.
83 import java.awt.*; public class LoginPanel extends Panel { TextField password, username; Panel innerpanel; public LoginPanel () { this.setlayout(new BorderLayout()); innerpanel = new Panel(); innerpanel.setlayout(new GridLayout(2,2)); innerpanel.add(wrapinpanel(new Label("User Name"))); username = new TextField(10); innerpanel.add(wrapinpanel(username)); innerpanel.add(wrapinpanel(new Label("Password"))); password = new TextField(10); innerpanel.add(wrapinpanel(password)); this.add(innerpanel, BorderLayout.CENTER); this.add(new Label("Please Log In"), BorderLayout.NORTH); } public Panel wrapinpanel(component c){ Panel ptemp = new Panel(); ptemp.setlayout(new FlowLayout()); Here, we wrap ptemp.add(c); return ptemp; the components } before adding
84 /* Revised LoginPanel class (cont d) */ public static void main(string[] args) { Frame f= new Frame(); f.setsize(400,400); f.add(new LoginPanel()); f.show(); } } // LoginPanel
85 Demonstration
86 Result: Hmmm. This time, it s the BorderLayout that s distorting the grid panel Our solution so far has been adequate for a basic GUI. But let s see how to really solve this problem.
87 The Fix We want the components to have their natural size: User Name A box layout (X_AXIS) will do this. We also want the sets of widgets to take up their proper vertical position, as if there were springs forcing the components away from the top/bottom. User Name Password
88 Solution As it turns out, there s an API call for creating this spring effect: mycontainer.add (Box.createHorizontalGlue()); mycontainer.add(new Button ("hi")); Hi Horizontal glue pushes the component away
89 import java.awt.*; import javax.swing.*; public class LoginBoxPanel extends Panel{ TextField password, username; public LoginBoxPanel () { password = new TextField(10); username = new TextField(10); Panel pinner = new Panel(); pinner.setlayout (new BoxLayout(pInner, BoxLayout.Y_AXIS)); Panel puser = getpanelpair(new Label("User Name"), username); Panel ppass = getpanelpair(new Label("Password"), password); pinner.add(puser); pinner.add(ppass);
90 // constructor (cont d)... this.setlayout(new BoxLayout(this, BoxLayout.Y_AXIS)); Panel prompt = new Panel(); prompt.setlayout(new FlowLayout(FlowLayout.LEFT)); prompt.add(new Label ("Please Log In")); this.add(prompt); this.add(box.createverticalglue()); this.add(pinner); this.add(box.createverticalglue()); } public Panel getpanelpair (Component first,component second){ Panel ptemp = new Panel(); ptemp.setlayout (new BoxLayout(pTemp, BoxLayout.X_AXIS)); ptemp.add(first); ptemp.add(second); Panel pwrapper = new Panel(); pwrapper.setlayout(new FlowLayout()); pwrapper.add(ptemp); return pwrapper; }
91 public static void main(string[] args) { Frame f= new Frame(); f.setsize(400, 200); f.add(new LoginBoxPanel()); f.show(); }// main } // LoginBoxPanel
92 Demonstration
93
94 Ulcer Check Confused by the preceding? Yea, it s a lot to take in. BUT THE POINT IS THAT YOU CAN PLACE CONTAINERS INSIDE OTHER CONTAINERS, and thereby create a novel layout. For now, stick with the simple layouts (e.g., the simple BorderLayout/GridLayout), and become comfortable with components.
95 Questions?
Java. GUI building with the AWT
Java GUI building with the AWT AWT (Abstract Window Toolkit) Present in all Java implementations Described in most Java textbooks Adequate for many applications Uses the controls defined by your OS therefore
More informationIntroduction to Graphical User Interfaces (GUIs) Lecture 10 CS2110 Fall 2008
Introduction to Graphical User Interfaces (GUIs) Lecture 10 CS2110 Fall 2008 Announcements A3 is up, due Friday, Oct 10 Prelim 1 scheduled for Oct 16 if you have a conflict, let us know now 2 Interactive
More informationThe Java Programming Language Basics. Identifiers, Keywords, and Types. Expressions and Flow Control. Object-Oriented Programming. Objects and Classes
Building GUIs 8 Course Map This module covers setup and layout of graphical user interfaces. It introduces the Abstract Windowing Toolkit, a package of classes from which GUIs are built. Getting Started
More informationIntroduction to the JAVA UI classes Advanced HCI IAT351
Introduction to the JAVA UI classes Advanced HCI IAT351 Week 3 Lecture 1 17.09.2012 Lyn Bartram lyn@sfu.ca About JFC and Swing JFC Java TM Foundation Classes Encompass a group of features for constructing
More informationCS 251 Intermediate Programming GUIs: Components and Layout
CS 251 Intermediate Programming GUIs: Components and Layout Brooke Chenoweth University of New Mexico Fall 2017 import javax. swing.*; Hello GUI public class HelloGUI extends JFrame { public HelloGUI ()
More informationCHAPTER 2. Java Overview
Networks and Internet Programming (0907522) CHAPTER 2 Java Overview Instructor: Dr. Khalid A. Darabkh Objectives The objectives of this chapter are: To discuss the classes present in the java.awt package
More information11/6/15. Objec&ves. RouleQe. Assign 8: Understanding Code. Assign 8: Bug. Assignment 8 Ques&ons? PROGRAMMING PARADIGMS
Objec&ves RouleQe Assign 8: Refactoring for Extensibility Programming Paradigms Introduc&on to GUIs in Java Ø Event handling Nov 6, 2015 Sprenkle - CSCI209 1 Nov 6, 2015 Sprenkle - CSCI209 2 Assign 8:
More informationGraphic User Interfaces. - GUI concepts - Swing - AWT
Graphic User Interfaces - GUI concepts - Swing - AWT 1 What is GUI Graphic User Interfaces are used in programs to communicate more efficiently with computer users MacOS MS Windows X Windows etc 2 Considerations
More informationWhat is Widget Layout? Laying Out Components. Resizing a Window. Hierarchical Widget Layout. Interior Design for GUIs
What is Widget Layout? Laying Out Components Positioning widgets in their container (typically a JPanel or a JFrame s content pane) Basic idea: each widget has a size and position Main problem: what if
More informationWindow Interfaces Using Swing Objects
Chapter 12 Window Interfaces Using Swing Objects Event-Driven Programming and GUIs Swing Basics and a Simple Demo Program Layout Managers Buttons and Action Listeners Container Classes Text I/O for GUIs
More informationLaying Out Components. What is Widget Layout?
Laying Out Components Interior Design for GUIs What is Widget Layout? Positioning widgets in their container (typically a JPanel or a JFrame s content pane) Basic idea: each widget has a size and position
More informationGUI in Java TalentHome Solutions
GUI in Java TalentHome Solutions AWT Stands for Abstract Window Toolkit API to develop GUI in java Has some predefined components Platform Dependent Heavy weight To use AWT, import java.awt.* Calculator
More informationHandout 14 Graphical User Interface (GUI) with Swing, Event Handling
Handout 12 CS603 Object-Oriented Programming Fall 15 Page 1 of 12 Handout 14 Graphical User Interface (GUI) with Swing, Event Handling The Swing library (javax.swing.*) Contains classes that implement
More information2110: GUIS: Graphical User Interfaces
2110: GUIS: Graphical User Interfaces Their mouse had a mean time between failure of a week it would jam up irreparably, or... jam up on the table--... It had a flimsy cord whose wires would break. Steve
More informationTopic 9: Swing. Swing is a BIG library Goal: cover basics give you concepts & tools for learning more
Swing = Java's GUI library Topic 9: Swing Swing is a BIG library Goal: cover basics give you concepts & tools for learning more Assignment 5: Will be an open-ended Swing project. "Programming Contest"
More informationTopic 9: Swing. Why are we studying Swing? GUIs Up to now: line-by-line programs: computer displays text user types text. Outline. 1. Useful & fun!
Swing = Java's GUI library Topic 9: Swing Swing is a BIG library Goal: cover basics give you concepts & tools for learning more Why are we studying Swing? 1. Useful & fun! 2. Good application of OOP techniques
More informationCommand-Line Applications. GUI Libraries GUI-related classes are defined primarily in the java.awt and the javax.swing packages.
1 CS257 Computer Science I Kevin Sahr, PhD Lecture 14: Graphical User Interfaces Command-Line Applications 2 The programs we've explored thus far have been text-based applications A Java application is
More informationPackages: Putting Classes Together
Packages: Putting Classes Together 1 Introduction 2 The main feature of OOP is its ability to support the reuse of code: Extending the classes (via inheritance) Extending interfaces The features in basic
More informationDr. Hikmat A. M. AbdelJaber
Dr. Hikmat A. M. AbdelJaber JWindow: is a window without a title bar or move controls. The program can move and resize it, but the user cannot. It has no border at all. It optionally has a parent JFrame.
More informationResizing a Window. COSC 3461: Module 5B. What is Widget Layout? Size State Transitions. What is Widget Layout? Hierarchical Widget Layout.
COSC 3461: Module 5B Resizing a Window Widgets II What has changed? scrollbar added menu has wrapped toolbar modified (buttons lost) 2 What is Widget Layout? Size State Transitions Recall: each widget
More informationKF5008 Program Design & Development. Lecture 1 Usability GUI Design and Implementation
KF5008 Program Design & Development Lecture 1 Usability GUI Design and Implementation Types of Requirements Functional Requirements What the system does or is expected to do Non-functional Requirements
More informationCPS122 Lecture: Graphical User Interfaces and Event-Driven Programming
CPS122 Lecture: Graphical User Interfaces and Event-Driven Programming Objectives: Last revised March 2, 2017 1. To introduce the notion of a component and some basic Swing components (JLabel, JTextField,
More informationStarting Out with Java: From Control Structures Through Objects Sixth Edition
Starting Out with Java: From Control Structures Through Objects Sixth Edition Chapter 12 A First Look at GUI Applications Chapter Topics 12.1 Introduction 12.2 Creating Windows 12.3 Equipping GUI Classes
More informationGraphical User Interfaces (GUIs)
CMSC 132: Object-Oriented Programming II Graphical User Interfaces (GUIs) Department of Computer Science University of Maryland, College Park Model-View-Controller (MVC) Model for GUI programming (Xerox
More informationBASICS OF GRAPHICAL APPS
CSC 2014 Java Bootcamp Lecture 7 GUI Design BASICS OF GRAPHICAL APPS 2 Graphical Applications So far we ve focused on command-line applications, which interact with the user using simple text prompts In
More informationWindow Interfaces Using Swing Objects
Chapter 12 Window Interfaces Using Swing Objects Event-Driven Programming and GUIs Swing Basics and a Simple Demo Program Layout Managers Buttons and Action Listeners Container Classes Text I/O for GUIs
More informationOutline. Topic 9: Swing. GUIs Up to now: line-by-line programs: computer displays text user types text AWT. A. Basics
Topic 9: Swing Outline Swing = Java's GUI library Swing is a BIG library Goal: cover basics give you concepts & tools for learning more Assignment 7: Expand moving shapes from Assignment 4 into game. "Programming
More informationBuilding a GUI in Java with Swing. CITS1001 extension notes Rachel Cardell-Oliver
Building a GUI in Java with Swing CITS1001 extension notes Rachel Cardell-Oliver Lecture Outline 1. Swing components 2. Building a GUI 3. Animating the GUI 2 Swing A collection of classes of GUI components
More informationWhat is Widget Layout? COSC 3461 User Interfaces. Hierarchical Widget Layout. Resizing a Window. Module 5 Laying Out Components
COSC User Interfaces Module 5 Laying Out Components What is Widget Layout? Positioning widgets in their container (typically a JPanel or a JFrame s content pane) Basic idea: each widget has a size and
More informationJava Swing. Lists Trees Tables Styled Text Components Progress Indicators Component Organizers
Course Name: Advanced Java Lecture 19 Topics to be covered Java Swing Lists Trees Tables Styled Text Components Progress Indicators Component Organizers AWT to Swing AWT: Abstract Windowing Toolkit import
More informationBM214E Object Oriented Programming Lecture 13
BM214E Object Oriented Programming Lecture 13 Events To understand how events work in Java, we have to look closely at how we use GUIs. When you interact with a GUI, there are many events taking place
More informationTop-Level Containers
1. Swing Containers Swing containers can be classified into three main categories: Top-level containers: JFrame, JWindow, and JDialog General-purpose containers: JPanel, JScrollPane,JToolBar,JSplitPane,
More informationCSSE 220 Day 19. Object-Oriented Design Files & Exceptions. Check out FilesAndExceptions from SVN
CSSE 220 Day 19 Object-Oriented Design Files & Exceptions Check out FilesAndExceptions from SVN A practical technique OBJECT-ORIENTED DESIGN Object-Oriented Design We won t use full-scale, formal methodologies
More informationGraphical User Interfaces. Comp 152
Graphical User Interfaces Comp 152 Procedural programming Execute line of code at a time Allowing for selection and repetition Call one function and then another. Can trace program execution on paper from
More informationINTRODUCTION TO (GUIS)
INTRODUCTION TO GRAPHICAL USER INTERFACES (GUIS) Lecture 10 CS2110 Fall 2009 Announcements 2 A3 will be posted shortly, please start early Prelim 1: Thursday October 14, Uris Hall G01 We do NOT have any
More informationPart I: Learn Common Graphics Components
OOP GUI Components and Event Handling Page 1 Objectives 1. Practice creating and using graphical components. 2. Practice adding Event Listeners to handle the events and do something. 3. Learn how to connect
More informationThe AWT Package, An Overview
Richard G Baldwin (512) 223-4758, baldwin@austin.cc.tx.us, http://www2.austin.cc.tx.us/baldwin/ The AWT Package, An Overview Java Programming, Lecture Notes # 110, Revised 02/21/98. Preface Introduction
More informationLecture 5: Java Graphics
Lecture 5: Java Graphics CS 62 Spring 2019 William Devanny & Alexandra Papoutsaki 1 New Unit Overview Graphical User Interfaces (GUI) Components, e.g., JButton, JTextField, JSlider, JChooser, Containers,
More informationSystems Programming Graphical User Interfaces
Systems Programming Graphical User Interfaces Julio Villena Román (LECTURER) CONTENTS ARE MOSTLY BASED ON THE WORK BY: José Jesús García Rueda Systems Programming GUIs based on Java
More informationCSE 143. Event-driven Programming and Graphical User Interfaces (GUIs) with Swing/AWT
CSE 143 Event-driven Programming and Graphical User Interfaces (GUIs) with Swing/AWT slides created by Marty Stepp based on materials by M. Ernst, S. Reges, D. Notkin, R. Mercer, Wikipedia http://www.cs.washington.edu/331/
More informationCSSE 220 Day 19. Object-Oriented Design Files & Exceptions. Check out FilesAndExceptions from SVN
CSSE 220 Day 19 Object-Oriented Design Files & Exceptions Check out FilesAndExceptions from SVN A practical technique OBJECT-ORIENTED DESIGN Object-Oriented Design We won t use full-scale, formal methodologies
More informationDatenbank-Praktikum. Universität zu Lübeck Sommersemester 2006 Lecture: Swing. Ho Ngoc Duc 1
Datenbank-Praktikum Universität zu Lübeck Sommersemester 2006 Lecture: Swing Ho Ngoc Duc 1 Learning objectives GUI applications Font, Color, Image Running Applets as applications Swing Components q q Text
More informationGraphical User Interface (GUI) components in Java Applets. With Abstract Window Toolkit (AWT) we can build an applet that has the basic GUI
CBOP3203 Graphical User Interface (GUI) components in Java Applets. With Abstract Window Toolkit (AWT) we can build an applet that has the basic GUI components like button, text input, scroll bar and others.
More informationJava Programming Lecture 6
Java Programming Lecture 6 Alice E. Fischer Feb 15, 2013 Java Programming - L6... 1/32 Dialog Boxes Class Derivation The First Swing Programs: Snow and Moving The Second Swing Program: Smile Swing Components
More informationCourse Status Networking GUI Wrap-up. CS Java. Introduction to Java. Andy Mroczkowski
CS 190 - Java Introduction to Java Andy Mroczkowski uamroczk@cs.drexel.edu Department of Computer Science Drexel University March 10, 2008 / Lecture 8 Outline Course Status Course Information & Schedule
More informationPROGRAMMING DESIGN USING JAVA (ITT 303) Unit 7
PROGRAMMING DESIGN USING JAVA (ITT 303) Graphical User Interface Unit 7 Learning Objectives At the end of this unit students should be able to: Build graphical user interfaces Create and manipulate buttons,
More informationAll the Swing components start with J. The hierarchy diagram is shown below. JComponent is the base class.
Q1. If you add a component to the CENTER of a border layout, which directions will the component stretch? A1. The component will stretch both horizontally and vertically. It will occupy the whole space
More informationGraphical User Interfaces. Swing. Jose Jesus García Rueda
Graphical User Interfaces. Swing Jose Jesus García Rueda Introduction What are the GUIs? Well known examples Basic concepts Graphical application. Containers. Actions. Events. Graphical elements: Menu
More informationPIC 20A GUI with swing
PIC 20A GUI with swing Ernest Ryu UCLA Mathematics Last edited: November 22, 2017 Hello swing Let s create a JFrame. import javax. swing.*; public class Test { public static void main ( String [] args
More informationGraphics programming. COM6516 Object Oriented Programming and Design Adam Funk (originally Kirill Bogdanov & Mark Stevenson)
Graphics programming COM6516 Object Oriented Programming and Design Adam Funk (originally Kirill Bogdanov & Mark Stevenson) Overview Aims To provide an overview of Swing and the AWT To show how to build
More informationContainers and Components
Containers and Components container A GUI has many components in containers. A container contains other components. A container is also a component; so a container may contain other containers. component
More informationGraphical User Interface (GUI)
Graphical User Interface (GUI) An example of Inheritance and Sub-Typing 1 Java GUI Portability Problem Java loves the idea that your code produces the same results on any machine The underlying hardware
More informationSwing from A to Z Using Focus in Swing, Part 2. Preface
Swing from A to Z Using Focus in Swing, Part 2 By Richard G. Baldwin Java Programming, Lecture Notes # 1042 November 27, 2000 Preface Introduction Sample Program Interesting Code Fragments Summary What's
More informationJava Swing. Recitation 11/(20,21)/2008. CS 180 Department of Computer Science, Purdue University
Java Swing Recitation 11/(20,21)/2008 CS 180 Department of Computer Science, Purdue University Announcements Project 8 is out Milestone due on Dec 3rd, 10:00 pm Final due on Dec 10th, 10:00 pm No classes,
More informationCS11 Java. Fall Lecture 4
CS11 Java Fall 2006-2007 Lecture 4 Today s Topics Interfaces The Swing API Event Handlers Inner Classes Arrays Java Interfaces Classes can only have one parent class No multiple inheritance in Java! By
More informationCSEN401 Computer Programming Lab. Topics: Graphical User Interface Window Interfaces using Swing
CSEN401 Computer Programming Lab Topics: Graphical User Interface Window Interfaces using Swing Prof. Dr. Slim Abdennadher 22.3.2015 c S. Abdennadher 1 Swing c S. Abdennadher 2 AWT versus Swing Two basic
More informationJava Applets / Flash
Java Applets / Flash Java Applet vs. Flash political problems with Microsoft highly portable more difficult development not a problem less so excellent visual development tool Applet / Flash good for:
More informationChina Jiliang University Java. Programming in Java. Java Swing Programming. Java Web Applications, Helmut Dispert
Java Programming in Java Java Swing Programming Java Swing Design Goals The overall goal for the Swing project was: To build a set of extensible GUI components to enable developers to more rapidly develop
More informationBasicsof. JavaGUI and SWING
Basicsof programming3 JavaGUI and SWING GUI basics Basics of programming 3 BME IIT, Goldschmidt Balázs 2 GUI basics Mostly window-based applications Typically based on widgets small parts (buttons, scrollbars,
More informationSri Vidya College of Engineering & Technology
UNIT-V TWO MARKS QUESTION & ANSWER 1. What is the difference between the Font and FontMetrics class? Font class is used to set or retrieve the screen fonts.the Font class maps the characters of the language
More informationLecture 3: Java Graphics & Events
Lecture 3: Java Graphics & Events CS 62 Fall 2017 Kim Bruce & Alexandra Papoutsaki Text Input Scanner class Constructor: myscanner = new Scanner(System.in); can use file instead of System.in new Scanner(new
More informationLayout. Dynamic layout, Swing and general layout strategies
Layout Dynamic layout, Swing and general layout strategies Two Interface Layout Tasks Designing a spatial layout of widgets in a container Adjusting that spatial layout when container is resized Both
More informationNo SVN checkout today. Object-Oriented Design
No SVN checkout today Object-Oriented Design Software development methods Object-oriented design with CRC cards LayoutManagers for Java GUIs BallWorlds work time Analysis Design Implementation Software
More informationBuilding Java Programs Bonus Slides
Building Java Programs Bonus Slides Graphical User Interfaces Copyright (c) Pearson 2013. All rights reserved. Graphical input and output with JOptionPane JOptionPane An option pane is a simple dialog
More informationFrames, GUI and events. Introduction to Swing Structure of Frame based applications Graphical User Interface (GUI) Events and event handling
Frames, GUI and events Introduction to Swing Structure of Frame based applications Graphical User Interface (GUI) Events and event handling Introduction to Swing The Java AWT (Abstract Window Toolkit)
More informationIntroduction to Graphical Interface Programming in Java. Introduction to AWT and Swing
Introduction to Graphical Interface Programming in Java Introduction to AWT and Swing GUI versus Graphics Programming Graphical User Interface (GUI) Graphics Programming Purpose is to display info and
More informationCS 2113 Software Engineering
CS 2113 Software Engineering Java 5 - GUIs Import the code to intellij https://github.com/cs2113f18/template-j-5.git Professor Tim Wood - The George Washington University Class Hierarchies Abstract Classes
More informationOutput in Window Systems and Toolkits
Output in Window Systems and Toolkits Recap Low-level graphical output models CRTs, LCDs, and other displays Colors (RGB, HSV) Raster operations (BitBlt) Lines, curves, path model Fonts Affine Transforms
More informationPart 3: Graphical User Interface (GUI) & Java Applets
1,QWURGXFWLRQWR-DYD3URJUDPPLQJ (( Part 3: Graphical User Interface (GUI) & Java Applets EE905-GUI 7RSLFV Creating a Window Panels Event Handling Swing GUI Components ƒ Layout Management ƒ Text Field ƒ
More informationCSE 331. Event-driven Programming and Graphical User Interfaces (GUIs) with Swing/AWT
CSE 331 Event-driven Programming and Graphical User Interfaces (GUIs) with Swing/AWT slides created by Marty Stepp based on materials by M. Ernst, S. Reges, D. Notkin, R. Mercer, Wikipedia http://www.cs.washington.edu/331/
More informationUnit 6: Graphical User Interface
Faculty of Computer Science Programming Language 2 Object oriented design using JAVA Dr. Ayman Ezzat Email: ayman@fcih.net Web: www.fcih.net/ayman Unit 6: Graphical User Interface 1 1. Overview of the
More informationCPS122 Lecture: Graphical User Interfaces and Event-Driven Programming
CPS122 Lecture: Graphical User Interfaces and Event-Driven Programming Objectives: Last revised 1/15/10 1. To introduce the notion of a component and some basic Swing components (JLabel, JTextField, JTextArea,
More informationGUI Components: Part 1
1 2 11 GUI Components: Part 1 Do you think I can listen all day to such stuff? Lewis Carroll Even a minor event in the life of a child is an event of that child s world and thus a world event. Gaston Bachelard
More informationIntroduction. Introduction
Introduction Many Java application use a graphical user interface or GUI (pronounced gooey ). A GUI is a graphical window or windows that provide interaction with the user. GUI s accept input from: the
More informationUI Software Organization
UI Software Organization The user interface From previous class: Generally want to think of the UI as only one component of the system Deals with the user Separate from the functional core (AKA, the app
More informationGraphical User Interface (GUI)
Graphical User Interface (GUI) Layout Managment 1 Hello World Often have a run method to create and show a GUI Invoked by main calling invokelater private void run() { } JFrame frame = new JFrame("HelloWorldSwing");
More informationJFrame In Swing, a JFrame is similar to a window in your operating system
JFrame In Swing, a JFrame is similar to a window in your operating system All components will appear inside the JFrame window Buttons, text labels, text fields, etc. 5 JFrame Your GUI program must inherit
More informationGraphical User Interfaces in Java
COMP16121 Graphical User Interfaces in Java COMP16121 Sean Bechhofer sean.bechhofer@manchester.ac.uk Why? With the dominance of windows-based systems, Graphical User Interfaces (GUIs) are everywhere. They
More information(Incomplete) History of GUIs
CMSC 433 Programming Language Technologies and Paradigms Spring 2004 Graphical User Interfaces April 20, 2004 (Incomplete) History of GUIs 1973: Xerox Alto 3-button mouse, bit-mapped display, windows 1981:
More informationWelcome to CIS 068! 1. GUIs: JAVA Swing 2. (Streams and Files we ll not cover this in this semester, just a review) CIS 068
Welcome to! 1. GUIs: JAVA Swing 2. (Streams and Files we ll not cover this in this semester, just a review) Overview JAVA and GUIs: SWING Container, Components, Layouts Using SWING Streams and Files Text
More informationCSCI 201L Midterm Written SOLUTION Fall % of course grade
CSCI 201L Midterm Written SOLUTION Fall 2015 10% of course grade 1. Inheritance Answer the following questions about inheritance. a. Does Java allow overloading, overriding, and redefining of methods?
More informationParts of a Contract. Contract Example. Interface as a Contract. Wednesday, January 30, 13. Postcondition. Preconditions.
Parts of a Contract Syntax - Method signature Method name Parameter list Return type Semantics - Comments Preconditions: requirements placed on the caller Postconditions: what the method modifies and/or
More informationTo gain experience using GUI components and listeners.
Lab 5 Handout 7 CSCI 134: Fall, 2017 TextPlay Objective To gain experience using GUI components and listeners. Note 1: You may work with a partner on this lab. If you do, turn in only one lab with both
More informationCS11 Java. Fall Lecture 3
CS11 Java Fall 2014-2015 Lecture 3 Today s Topics! Class inheritance! Abstract classes! Polymorphism! Introduction to Swing API and event-handling! Nested and inner classes Class Inheritance! A third of
More information17 GUI API: Container 18 Hello world with a GUI 19 GUI API: JLabel 20 GUI API: Container: add() 21 Hello world with a GUI 22 GUI API: JFrame: setdefau
List of Slides 1 Title 2 Chapter 13: Graphical user interfaces 3 Chapter aims 4 Section 2: Example:Hello world with a GUI 5 Aim 6 Hello world with a GUI 7 Hello world with a GUI 8 Package: java.awt and
More informationLecture (06) Java Forms
Lecture (06) Java Forms Dr. Ahmed ElShafee 1 Dr. Ahmed ElShafee, Fundamentals of Programming I, Introduction You don t have to output everything to a terminal window in Java. In this lecture, you ll be
More informationExample: Building a Java GUI
Steven Zeil October 25, 2013 Contents 1 Develop the Model 2 2 Develop the layout of those elements 3 3 Add listeners to the elements 9 4 Implement custom drawing 12 1 The StringArt Program To illustrate
More informationExample Programs. COSC 3461 User Interfaces. GUI Program Organization. Outline. DemoHelloWorld.java DemoHelloWorld2.java DemoSwing.
COSC User Interfaces Module 3 Sequential vs. Event-driven Programming Example Programs DemoLargestConsole.java DemoLargestGUI.java Demo programs will be available on the course web page. GUI Program Organization
More informationChapter 12 Advanced GUIs and Graphics
Chapter 12 Advanced GUIs and Graphics Chapter Objectives Learn about applets Explore the class Graphics Learn about the classfont Explore the classcolor Java Programming: From Problem Analysis to Program
More informationExample: Building a Java GUI
Steven Zeil October 25, 2013 Contents 1 Develop the Model 3 2 Develop the layout of those elements 4 3 Add listeners to the elements 12 4 Implement custom drawing 15 1 The StringArt Program To illustrate
More informationWidgets. Overview. Widget. Widgets Widget toolkits Lightweight vs. heavyweight widgets Swing Widget Demo
Widgets Overview Widgets Widget toolkits Lightweight vs. heavyweight widgets Swing Widget Demo Widget Widget is a generic name for parts of an interface that have their own behavior: buttons, progress
More information10/23/2008. CSG 170 Round 6. Prof. Timothy Bickmore. Quiz. Open book / Open notes 15 minutes
Human-Computer Interaction CSG 170 Round 6 Prof. Timothy Bickmore Quiz Open book / Open notes 15 minutes 1 Team Project task #3 Start thinking about high-level design Interaction Metaphors Make a list
More informationGraphical User Interface (GUI)
Graphical User Interface (GUI) An example of Inheritance and Sub-Typing 1 Java GUI Portability Problem Java loves the idea that your code produces the same results on any machine The underlying hardware
More informationJava Swing. based on slides by: Walter Milner. Java Swing Walter Milner 2005: Slide 1
Java Swing based on slides by: Walter Milner Java Swing Walter Milner 2005: Slide 1 What is Swing? A group of 14 packages to do with the UI 451 classes as at 1.4 (!) Part of JFC Java Foundation Classes
More informationObject-Oriented Programming Design. Topic : Graphics Programming GUI Part I
Electrical and Computer Engineering Object-Oriented Topic : Graphics GUI Part I Maj Joel Young Joel.Young@afit.edu 15-Sep-03 Maj Joel Young A Brief History Lesson AWT Abstract Window Toolkit Implemented
More informationencompass a group of features for building Graphical User Interfaces (GUI).
Java GUI (intro) JFC Java Foundation Classes encompass a group of features for building Graphical User Interfaces (GUI). javax.swing.* used for building GUIs. Some basic functionality is already there
More informationSwing from A to Z Some Simple Components. Preface
By Richard G. Baldwin baldwin.richard@iname.com Java Programming, Lecture Notes # 1005 July 31, 2000 Swing from A to Z Some Simple Components Preface Introduction Sample Program Interesting Code Fragments
More informationGraphics. Lecture 18 COP 3252 Summer June 6, 2017
Graphics Lecture 18 COP 3252 Summer 2017 June 6, 2017 Graphics classes In the original version of Java, graphics components were in the AWT library (Abstract Windows Toolkit) Was okay for developing simple
More informationWidgets. Widgets Widget Toolkits. User Interface Widget
Widgets Widgets Widget Toolkits 2.3 Widgets 1 User Interface Widget Widget is a generic name for parts of an interface that have their own behavior: buttons, drop-down menus, spinners, file dialog boxes,
More informationGUI and its COmponent Textfield, Button & Label. By Iqtidar Ali
GUI and its COmponent Textfield, Button & Label By Iqtidar Ali GUI (Graphical User Interface) GUI is a visual interface to a program. GUI are built from GUI components. A GUI component is an object with
More information