Graphical User Interface (GUI)

Transcription

1 Graphical User Interface (GUI) An example of Inheritance and Sub-Typing 1

2 Java GUI Portability Problem Java loves the idea that your code produces the same results on any machine The underlying hardware and software of different machines has different GUI capabilities Different operating systems implement the same GUI concepts differently 2

3 Abstract Window Toolkit (AWT) First released in 1995 with Sun s first Java release Thin abstract layer between the Java view of a user interface and the underlying hardware/software For instance AWT checkbox: maps to Windows checkbox on a Windows machine, maps to X checkbox on Unix machine Simple, but not hardware independent 3

4 Swing Built on top of AWT Coded in 1997 (Released Java 1.2) Name derived from code name because Sun programmers liked swing music Deeper interface less dependent on machine / operating system More complicated (18 packages, 737 classes as of JDK 8) 4

5 Example of Swing Class Hierarchy 5

6 JavaFX Enhancement(?) / Replacement for Swing Makes the creation of a GUI simpler Requires a GUI building tool Installation of a 3 rd party tool with different release levels, interactions with Eclipse, etc. Hides the details of the GUI from the coder Removes capability Can override the GUI builder with Swing to get that capability back if you know Swing Use if you want, but we teach Swing 6

7 Graphics Basics Your screen is a two dimensional array of pixels Think of each pixel as having an (x,y) coordinate The upper left hand side of the screen is (0,0) The X axis increases from left to right The Y axis increases from top to bottom 7

8 Binghamton (0,0) X (1920,0) Y (0,1080) 8

9 Single Pixel Each pixel is described by three numbers Amount of Red Amount of Green Amount of Blue Higher numbers are brighter Black is 0,0,0 White is 255,255,255 9

10 Swing s Job Enable the programmer to describe what should go on the screen In some relatively high level, abstract way Translate the programmer description to pixels (render) Enable the user to interact with the screen Select an active window Move the graphical (mouse) cursor in that window Mouse button clicks and wheel motion Touch screen motions Keyboard key-press Enable the programmer to define responses to user actions 10

11 Swing Strategy Divide and Conquer Everything on the screen can be thought of as a rectangular area on the screen called a Component JComponent is an abstract class in Swing JComponent class manages things like: rendering the component Handle drag/drop Support key bindings Manage the application wide look and feel of the component Components may contain sub-components! 11

12 Swing Components in Containers Container is an abstract class which extends Component You can add or remove components to/from a container You can find the parent of a component (direct container) Swing will Lay out the contained component Containers have layout managers (more later) Components can give hints about how they should be laid out preferred, minimum, maximum size Alignment vs other in the X and Y directions Orientation See: 12

13 Top Level Components Designed to interact with underlying hardware, operating system, graphics packages, and application software Top level components are sub-classes of Container To create a new application window, use JFrame To create a sub-window (e.g. popup), use JDialog To create a sub-window within (say) a browser, use Japplet No border or title bar 13

14 Class Hierarchy (so far) Component Container JFrame JDialog JApplet 14

15 Class Hierarchy (in reality) awt.component awt.container awt.window awt.panel awt.frame awt.dialog applet.applet swing.jframe swing.jdialog swing.japplet 15

16 Text Based Components Like JLabel (simplest) String text field Rendered by bitmapping each character A font is an array of bitmaps - one for each Unicode character Different fonts look different Includes letter size and style e.g. italic, bold, etc. Fonts do not specify color of background or foreground Bit on implies foreground Bit off implies background 16

17 Investigating Rendering Swing renders or paints a component when requested to System Requests When the component is first made visible on the screen When the component is resized When the component was damaged and needs repair e.g. uncovered Program Requests The program changed the component and wants the user to see the change The component has a paint(graphics g) method This is invoked by swing whenever rendering is required Override the paint method to change how a component is rendered Don t invoke the paint method! Swing does that for you (repaint instead) 17

18 What s in a paint method? Paint uses the Graphics object passed as a parameter Graphics has methods to draw and fill things on the screen void drawline(intx1,int y1,int x2, int y2) void fillrect(int x,int y,int width, int height) void drawstring(string str, int x, int y) void drawimage(image img, int x, int y, ) Most of the time, we don t need to override paint the Swing classes already do that for us 18

19 Common Look and Feel Common look and feel information kept in the Graphics object Transform from user coordinates to pixel X and Y Clipping coordinates Boundaries Background/Foreground Colors Font Component has methods to modify this state information Unless you change something, you get your Container s state 19

20 The Event Loop GUI s are managed by an endless loop called the event loop Within this loop, Swing checks for user input If an event occurs, tasks are dispatched Events are user input, timer events, system events, etc The dispatched tasks can: Read the user input Update the screen Do calculations Dispatch future events Optionally exit the loop 20

21 Runnable Interface Requires a single method void run(); Used to indicate a class than can be run i.e. that has a run method that can be invoked Note that run takes no arguments, and returns no result. We don t care how run works, what it does, or whether it worked we just know we can run it until it finishes. 21

22 Conceptual View of the Event Loop while(1) { if (eventque.hasdata()) { newevent=eventque.getfirst(); newevent.run(); if (eventrequestedexit) break; } if (newevent=getevent()) eventque.addlast(newevent); } 22

23 BootStrapping the even loop class MyGui implements Runnable { public void run() { // Create and show GUI } } public static void main(string[] args) { MyGui gui = new MyGui(); javax.swing.swingutilities.invokelater(gui)); } 23

24 invokelater invokelater is a static method in the SwingUtilities class Adds it s argument to the end of the AWT event list Starts the AWT event loop All events in the AWT event loop must be Runnable When the AWT event handler finds an object on its event list, it invokes object.run() 24

25 Using Swing directly If a Swing component does everything you want it to, use it as it stands For instance, in helloworld, all we want to do is put up a window that says hello. We can use JFrame to create a frame, and Jlabel to create a label No extra work required 25

26 Common Swing Widgets JFrame top level frame JPane A rectangular container used for separate parts of a frame JButton a push button JCheckBox On/Off check box JRadioButton one of a set of buttons in which only one is on JComboBox Text field with choice pull-down JDialog Ask a pop-up question, get an answer and pop-down JTextField User editable text field and many more 26

27 Common Swing Widgets JFrame JButton JPanel JCheckBox JRadioButton JTextField 27

28 Extending Swing If we want to extend the capabilities of Swing components, we can create child classes Override the methods we want to change For instance, add a shape to a label See MyCircle.java See CircleDemo.java 28

29 Dynamic GUI s 29

30 Dynamic GUIs So far, our GUI s have been pretty static How do we React to a keypress or button press? Alter the GUI? Do more stuff? How do we prevent getting inundated by actions? Moving a cursor may generate thousands of (x,y) cursor positions Just grabbing a window and moving it can alter The window that s moving Each window it moves over 30

31 The CallBack Concept Joe: Hi there Jim Jim: Hi Joe Joe: How is the beach today seen any dolphins yet? Jim: Not yet but the sun is out and they should be here soon Joe: Hey, give me a call back when you see a dolphin! Jim: Sure thing talk later! [Click] [ Some time goes by ] [Rrring] Jim: Hey Joe, I just saw three dolphins swim by! 31

32 Callbacks Tell a library function you want a callback Terminology: Registering a callback Agreement on what triggers invocation of a callback function Agreement on what arguments are passed to the callback function Agreement on interpretation of returned value from callback 32

33 Swing Callback Implementation Components with actions have an ActionListener list ActionListener : an object which implements ActionListener requires the void actionperformed(actionevent e) method addactionlistenter(x) adds x to the ActionListener list x must implement ActionListener Registers a callback to x when an action occurs When an action occurs x.actionperformed(event) is invoked for each x in the ActionListener list 33

34 The ActionEvent Class Whenever an action (like a button press) occurs, Swing generates an ActionEvent The ActionEvent has information about what action occurred, and at what time An ActionEvent object is passed to an action listener via an argument to the actionperformed method Use this argument to determine which action occurred So a single actionperformed method can handle multiple buttons 34

35 The ActionCommand String Each action object has an Action Command String The Action Command String defaults to something useful E.g. for buttons, defaults to the label of the button Change the action command string using setactioncommand(x) The action command string is copied to an actionevent In your actionperformed method, manage actions by checking e.getactioncommand() Enables mapping buttons to actions (1->many or many->1) 35

36 Managing Actions from a Class Add implements ActionListener to your class Add actionperformed method to your class public void actionperformed(actionevent e) { } For each button: Invoke button.setactioncommand( <commandstring> ) Invoke button.addactionlistener(this) For each action command string: Add: if (e.getactioncommand().equals( commandstring )) { } to your actionperformed method 36

37 Action Processing 1. User clicks on button 2. Triggers an event in the event loop 3. Event triggers event processing code in Swing library 4. For each actionlistener, invoke listener.actionperformed(event) 5. You registered as a listener, so your actionperformed method is invoked 6. You check the actioncommand associated with the event to figure out which button called you 7. You perform whatever action is required in response to the button push 37

38 Example Button Managment See example code in Swing Tutorial under CircleDemo2.java 38

39 Much More We have barely scratched the surface Many sophisticated widgets in the Swing library Radio Buttons Combo Box Text File Select Menu Bar Popup Menu Progress Bar Scroll bar 39