GUI Lecture 10 Intro to GUI l GUI

GUI Lecture 10

Intro to GUI l GUI = Graphical User Interface -- “Gooey” l Just because it’s “gooey” does not mean you may write messy code. • GUI is the “view layer”, and we should try separating it from the controller and model layers. l AWT = Abstract Windowing Toolkit l Swing = better versions of AWT classes

GUI terminology l Components = buttons, text fields, frames, dialog boxes, scrollbars, popup menus, scrollable lists, etc. l Containers = things that hold Components. A container is also a component. Examples: Panel, Window. l Layout. Managers arrange Components inside of Containers. l Use Graphics objects to draw directly onto a component. This can draw shapes, text, images, etc. l “Painting” is when a component is drawn onto the screen. l Events occur when a user clicks the mouse, types on the keyboard, types in a text field, or selects an item from a list. l Listeners (or adapters) handle events, and are specific to a certain type of event.

Java Foundation Classes (JFC) l l l AWT Swing Java 2 D (Accessibility API) (Drag and Drop API)

A few important GUI packages l AWT (java. awt and subpackages) • Components / Containers • • Layout Managers • • l Don’t mix AWT and Swing components. AWT managers works on swing, and Swing also has some extra managers. Events Listeners /Adapters (Java 2 D (java. awt. geom)) Swing (javax. swing and subpackages) • • Components is replacing AWT components Has more layout managers Has new types of events Listeners and Adapters work similar

Swing vs. AWT l l Don’t mix AWT with Swing, and always use Swing if available AWT was original GUI API – quite limited! • • • l Swing is built on AWT, and is a big improvement • • l not very platform independent you must do double-buffering yourself native windows consume a lot of system resources mostly light-weight classes 100% pure java = platform independent, because it doesn’t depend on native code pluggable look and feel allows the program to reflect the platform it’s currently running on double buffers automatically Note that Swing components start with “J”. • • “Frame” refers to the old AWT class. “JFrame” refers to the new Swing class.

Swing: Hello. World package examples. windows; import javax. swing. JFrame; import javax. swing. JLabel; import java. awt. Border. Layout; public class Hello. World extends JFrame { public Hello. World( String title. Text ) { super( title. Text ); set. Default. Close. Operation( JFrame. EXIT_ON_CLOSE ); JLabel greeting = new JLabel( "Hello World!", JLabel. CENTER ); get. Content. Pane(). add( greeting, Border. Layout. CENTER ); set. Size( 300, 100 ); set. Visible( true ); } public static void main( String[] args ) { new Hello. World( "Hello World! Sample" ); } }

Swing Components l l common swing components: see figure 6 -3, p 393 -396 MVC layers • • • The model layer is a separate class, which may be shared by multiple Swing components In Swing, the Controller and View layers of a component are not separated, because of the nature of GUI components – the view is the controller. See figure 6 -4 on page 397 & 398

Layout Managers l l l Layout. Managers arrange components within Containers. They account for things that you cannot know at compile time, like differing screen resolutions, platform differences, fonts, etc. Containers are components, and child containers can have a Layout. Manger that is different from their parent’s.

Using Layout. Managers l l Create a new Container. It has a default Layout. Manager, which you can override by calling the set. Layout method on it. Layout. Manager classes: • • • Border. Layout Box. Layout Card. Layout Flow. Layout Grid. Bag. Layout Grid. Layout

Layout Paradigms l Border. Layout: North, South, East, West, and Center. figures 6 -12 & 613 l Flow. Layout: lines the components up horizontally from left to right. Can specifiy justification; default is center. fig. 6 -14 l Grid. Layout: has columns and rows. components are added left to right and top to bottom, like a text editor. figure 6 -15 Gridbag. Layout: more flexible than Grid. Layout – components can be added to any cell, and can span multiple rows and columns. figure 6 -16 Card. Layout: imagine a deck of cards – only one component is visible at a time. Box. Layout: components are in a single-file line, which can be horizontal or vertical. figure 6 -17 Note: the above figures are in a JTabbed. Pane, which does it’s own Layout. Managing. l l

Example Layouts JTabbed. Pane Experiment with the Swing tutorials in Suns web site.

Events: The Hollywood model l “Don’t call us, we’ll call you. ” No polling loops. Don’t poll the environment looking for events. When an event ccurs, the event dispatch thread will call you.

Events l l Events are objects that encapsulate changes in state that are initiated by the user or operating system. java. awt. event examples • l Key. Event, Mouse. Event, Paint. Event, Window. Event Javax. swing. event examples • List. Selection. Event, Menu. Event, etc.

Selected methods of selected event classes l l l Key. Event. get. Key. Code() Mouse. Event. get. Point() (mouse location) Mouse. Event. get. Button()

Listener / Adapters l Listener – interfaces • • Flexibility Each kind of event has a listener interface • l Key. Event / Key. Listener etc. Adapter classes • Convenience – you only have to implement the methods you need.

How to create event handlers Define a class that implements some chosen listener interface. 1. l Adapter or interface implementation Register an instance of the class with the component affected by the event. 2. • Component. addxxx. Listener(xxx. Listener object)

addxxx. Listener l All components have the methods • add. Component. Listener, add. Focus. Listener, add. Mouse. Motion. Listener Class my. Handler implements Text. Listener { public void text. Value. Changed(Text. Event e){ // implementation details omitted } } Text. Listener t 1 = new my. Handler(); JText. Area t = new JText. Area(); t. add. Text. Listener(t 1);

Painting l l l You can override a Swing component’s paint. Component method if you don’t want to use the component’s default appearance. Call super. paint. Component (unless you want transparency). Call repaint() when you want to explicitly refresh what the user is seeing. Then the JVM first calls update() and then paint() for the current component. Unless you are performing animation (games) you typically don’t have to override the paint() method. You can also override update() if you want close control over the refreshing of a part of the component’s appearance. You may update selective areas of the component. Don’t call paint. Component() or paint() directly. Leave that to the event dispatch thread.

Methods you can paint with l Graphics class • • • draw. String draw. Line draw. Rect draw. Polygon draw. Arc draw. Image fill. Rect fill. Polygon fill. Arc set. Color set. Font • set. XORMode( Color c) • • gives colors that are an XOR of c and what was already there – fun to play with set. Paint. Mode() • just overwrite what’s there – this is the default

Java 2 D l Parts of API • • l Graphics 2 D class in java. awt. geom java. awt. font java. awt. image Advantages over Graphics class • • antialiasing smooths edges can fill with contents other than a solid colors • • • (patterns, gradients…) can use any system font printing is easier (see chapter 7) can paint any shape you want, not just predefined ones “Strokes” – any width, and varying patterns (dashed, etc. ) Transformations. You can stretch, rotate, etc. anything you draw

GUI Task static class Image. Displayer extends JComponent { private boolean showing = false; private Image. Icon image. Icon = new Image. Icon("images/happy-frog. gif"); private java. util. Timer timer = new java. util. Timer(); public void show. Image. Briefly() { // fill in to show the image for 1. 5 seconds, // and then stop showing it } public void paint. Component(Graphics g) { // fill in to draw a blue rectangle, // and then paint the image. Icon inside of it } }

GUI Task Solution static class Image. Displayer extends JComponent { private boolean showing = false; private Image. Icon image. Icon = new Image. Icon("images/happy-frog. gif"); private java. util. Timer timer = new java. util. Timer(); public void show. Image. Briefly() { showing = true; repaint(); timer. schedule(new Timer. Task() { public void run() { showing = false; repaint(); } }, 1500); } public void paint. Component(Graphics g) { super. paint. Component(g); if (!showing) { g. set. Color(new Color(0, 0, 255)); g. fill. Rect(10, image. Icon. get. Icon. Width()+10, image. Icon. get. Icon. Height()+10); image. Icon. paint. Icon(this, g, 15); } } }