3 Combining Widgets to create Graphical User Interfaces

Transcription

1 (Graphical User Interfaces - 41) 3 Combining Widgets to create Graphical User Interfaces 3.1 The Ressource Concept Goal: How to compose widgets to create complete user interfaces Problem: Composition has significant graphical, visual, usage aspects Programmers typically do not have the qualification Ideal Solution: Tools for user interface specialists, non-programmers, to compose GUIs from widgets: Interface Builder Selection and layout of widgets, definition of parameter values Technical Basis: Separation of widgets from the program code ressource concept Vorlesung Basic Idea: Many properties of widgets can be seen as data: Text Font Colour Border Thickness Border Style (simple line, double line) Enable/disable status Position (x-y-coordinates) Modification of these parameters in a tool without modifying the widget source code (ressource editors, interface builder) Visually/graphically working tool (instead of coding program parts) Mechanisms for reading parameter values from files (ressources, properties) Textual representation of the widgets within the ressources (Graphical User Interfaces - 42) Vorlesung

2 (Graphical User Interfaces - 43) Widgets are combined to complete dialogues: Example: Menus Menu Header Label Menu Header Font Menu Item Font List Of Menu Item Label Menu Item Checked Menu Item Id Definition of "container -widgets widgets containing other widgets Menu Header Label = "Datei" Menu Header Font = "Arial" Menu Item Font = "Arial" Menu Item Label = "Neu" Menu Item Checked = false Menu Item Id = 1 Menu Item Label = "Öffnen" Menu Item Checked = false Menu Item Id = 1 Example: dialogue boxes Information about contained widgets and their relative positions within the dialogue box E.g.: Group Boxes (Border, Border Text, contained widgets) Vorlesung Practical Example from a Delphi-4 implementation (Object Pascal): object EigenschaftenForm: TEigenschaftenForm Left = 256 Top = 79 Width = 453 Height = 415 Caption = 'Eigenschaften' Color = clbtnface Font.Charset = DEFAULT_CHARSET Font.Color = clwindowtext Font.Height = -11 Font.Name = 'MS Sans Serif' Font.Style = [] OldCreateOrder = False OnActivate = FormActivate PixelsPerInch = 96 TextHeight = 13 object Label1: TLabel Left = 24 Top = 8 Width = 108 Height = 13 Caption = 'Strichstärke (Pixel)' (Graphical User Interfaces - 44) Vorlesung

3 (Graphical User Interfaces - 45) Font.Charset = DEFAULT_CHARSET Font.Color = clwindowtext Font.Height = -11 Font.Name = 'MS Sans Serif' Font.Style = [fsbold] ParentFont = False end object SpinEdit1: TSpinEdit Left = 24 Top = 56 Width = 49 Height = 22 Font.Charset = DEFAULT_CHARSET Font.Color = clwindowtext Font.Height = -11 Font.Name = 'MS Sans Serif' Font.Style = [] MaxValue = 100 MinValue = 1 ParentFont = False TabOrder = 0 Value = 1 OnExit = SpinEdit1Change end object SchriftResetButton: TButton Left = 256 Top = 120 Width = 137 Height = 17 Caption = 'Standard wiederherstellen' TabOrder = 5 OnClick = SchriftResetButtonClick end object PfeilGefuelltCB: TCheckBox Left = 176 Top = 296 Width = 65 Height = 25 Caption = 'Gefüllt' TabOrder = 12 OnExit = PfeilGefuelltCBExit end end Vorlesung 2002, Prof. Dr. Gerd Szwillus (Graphical User Interfaces-46) How are ressources organized at best? Binaries? Too hardware dependent! Text files! Explicit notation of widget properties, assignment with text handling functions drawprog.fontsheet.style.backgroundcolor: red drawprog*backgroundcolor: blue Interactive specification: ressource editors How are ressources linked to executable programs? Macintosh: Combination of ressources and binaries in one single file X-UNIX: Paths: Specification of two files for code and ressources (flexible, error prone) MS Windows: Ressource- Compiler translates ressources into data segments, added to binaries (exe files) (Icon assignment from.exe files)

4 2002, Prof. Dr. Gerd Szwillus (Graphical User Interfaces-47) 3.2 Interface Builders Creation of "ressources" with appropriate interface builder tools 2002, Prof. Dr. Gerd Szwillus (Graphical User Interfaces-48) Development of dialogue boxes by combining predefined widgets:

5 2002, Prof. Dr. Gerd Szwillus (Graphical User Interfaces-49) Linking event handlers: procedure TEigenschaftenForm.OKButtonClick (Sender: TObject); begin Hide; end; 2002, Prof. Dr. Gerd Szwillus (Graphical User Interfaces-50) Large parts of the code are generated (example Object Pascal): unit Eigenschaften; interface uses Windows, Messages, SysUtils, Classes, Graphics, Controls, Forms, Dialogs, StdCtrls, Spin; type TEigenschaftenForm = class(tform) Label1: TLabel; SpinEdit1: TSpinEdit; Label2: TLabel; SpinEdit3: TSpinEdit; Label8: TLabel; SpinEdit6: TSpinEdit; Label9: TLabel; Label10: TLabel; SpinEdit7: TSpinEdit; PfeilGefuelltCB: TCheckBox; PfeilResetButton: TButton;

6 2002, Prof. Dr. Gerd Szwillus (Graphical User Interfaces-51) procedure SpinEdit1Change(Sender: TObject); procedure SpinEdit2Change(Sender: TObject); procedure FormActivate(Sender: TObject); procedure SpinEdit3Change(Sender: TObject); procedure SchriftResetButtonClick(Sender: TObject); procedure StrichResetButtonClick(Sender: TObject); procedure OKButtonClick(Sender: TObject); procedure CancelButtonClick(Sender: TObject); procedure SpinEdit4Exit(Sender: TObject); procedure SpinEdit5Exit(Sender: TObject); procedure AbstandResetButtonClick(Sender: TObject); procedure PfeilResetButtonClick(Sender: TObject); procedure SpinEdit6Exit(Sender: TObject); procedure SpinEdit7Exit(Sender: TObject); procedure PfeilGefuelltCBExit(Sender: TObject); end; var EigenschaftenForm: TEigenschaftenForm; AlteNormaleStrichstaerke: integer; AlteDefinierendeStrichstaerke: integer; , Prof. Dr. Gerd Szwillus (Graphical User Interfaces-52) Parts of the code are then provided by hand implementation $R *.DFM. procedure TEigenschaftenForm.SpinEdit2Change(Sender: TObject); begin DefinierendeStrichstaerke := SpinEdit2.Value; end;. procedure TEigenschaftenForm.OKButtonClick(Sender: TObject); begin Hide; end;. end.

7 2002, Prof. Dr. Gerd Szwillus (Graphical User Interfaces-53) Visual Must (in Java for Java) Interface Builder for Java programs written complete in Java , Prof. Dr. Gerd Szwillus (Graphical User Interfaces-54) 4 Programming Graphical User Interfaces in Java Program structure ( Event-Based-Programming, 30) For every single window (dialogue box, alert window, input form, ) to be displayed Create the window itself as Java object of an appropriate class Set initial properties of the window Create the elements contained in the window as Java object of an appropriate class Set initial properties of the elements Define layout details Place elements graphically "into" the window Display / Hide the window relative to program logic For every element with customized user interaction Provide code for capturing user interaction (including its parameters) Define what happens as a reaction to this user interaction

8 2002, Prof. Dr. Gerd Szwillus (Graphical User Interfaces-55) 4.1 Display Part Creating a window Select the type of window (JFrame, JDialog, ) from an appropriate widget library (e.g. javax.swing) Check the Java documentation about this type of object ( Include a new-statement in your program to create such an object with the appropriate constructor (rare) or Define a subclass of the window type class to be able to overwrite methods of the class and to add individual data a structures and methods of your application (typical) Example: class Durchschnitt extends JFrame Set initial properties of the window 2002, Prof. Dr. Gerd Szwillus (Graphical User Interfaces-56) Add method calls (typical: within the constructor) setting window parameters setsize, setlocation, settitle, setresizable, setdefaultcloseoperation, setcursor, setbackground, Example: Durchschnitt() extends JFrame Durchschnitt() setsize(250, 200); setlocation(300, 300); settitle("calculate Degree Average"); setvisible(true); setdefaultcloseoperation(exit_on_close);

9 2002, Prof. Dr. Gerd Szwillus (Graphical User Interfaces-57) Define layout details Select one of the available layout handler options BorderLayout, BoxLayout, CardLayout, FlowLayout, GridBagLayout, GridLayout, Assignment of a layout manager to a window by "setting" it for the window's content pane, optionally with additional parameters (i.e. creating a layout manager object with appropriate parameters and passing it on to the set method): setlayout(new GridLayout(3, 2)); setlayout(new FlowLayout(FlowLayout.LEFT)); // 3 rows, 2 columns // alignment along the left border Once the layout is defined, all elements placed "onto" the window are layed out according to these rules FlowLayout(FlowLayout.CENTER) is the default layout Example: Durchschnitt() extends JFrame Durchschnitt() getcontentpane().setlayout(new FlowLayout()); 2002, Prof. Dr. Gerd Szwillus (Graphical User Interfaces-58) Place elements graphically on the window Adding Java objects representing widgets to the window's contentpane, with its add()-method element = new JButton("OK"); // element is a Swing object of the UI (e.g. a button) getcontentpane().add(element); The order is relevant (first, second, third, ) as objects are layed out in that order The place of creation is irrelevant Possible: class X JLabel jl = new JLabel(""); class Y JFrame f = new JFrame("My Window"); X x = new X(); Y() f.getcontentpane().add(x.jl); Typical: class Z extends JFrame Z() getcontentpane().add(new JLabel(""));

10 2002, Prof. Dr. Gerd Szwillus (Graphical User Interfaces-59) Example: class Durchschnitt extends JFrame JLabel prompt = new JLabel("Enter the first degree"); JTextField numberinput = new JTextField("(integer number)", 20); JButton calculate = new JButton("Calculate"); JLabel result = new JLabel("***"); Durchschnitt() getcontentpane().add(prompt); getcontentpane().add(numberinput); getcontentpane().add(calculate); getcontentpane().add(result); Display / Hide the window relative to program logic setvisible(true) resp. setvisible(false); Avoid screen flashing by modifying invisible widgets only, i.e. prepare widgets for showing in the invisible state Default: objects are visible with their parent objects; frames/dialogues are initially invisible. 2002, Prof. Dr. Gerd Szwillus (Graphical User Interfaces-60) Example summarized (display part only): class Durchschnitt extends JFrame JLabel prompt = new JLabel("Enter the first degree"); JTextField numberinput = new JTextField("(integer number)", 20); JButton calculate = new JButton("Calculate"); JLabel result = new JLabel("***"); Durchschnitt() getcontentpane().setlayout(new FlowLayout()); getcontentpane().add(prompt); getcontentpane().add(numberinput); getcontentpane().add(calculate); getcontentpane().add(result); setsize(250, 200); setlocation(300, 300); settitle("calculate Degree Average"); setvisible(true); setdefaultcloseoperation(exit_on_close);

11 2002, Prof. Dr. Gerd Szwillus (Graphical User Interfaces-61) 4.2 Interaction Part 4.2.1Widget Interaction Provide code for capturing user interaction Input operation are "observed" by ActionListener objects An ActionListener object owns a void actionperformed(actionevent e) method ActionListener is a Java interface requesting only the actionperformed()-method X is an action listener class X implements ActionListener public void actionperformed(actionevent e) When the user performs an action on the UI element, the actionperformed-method is called with the executed action passed as ActionEvent parameter object for evaluation 2002, Prof. Dr. Gerd Szwillus (Graphical User Interfaces-62) To capture the user interactions of a UI element b (e.g. JButton b) with action listener x (e.g. X x), x is added to b as action listener with the addactionlistener method x is an action listener for b (rare) JButton b = new JButton(); X x = new X(); b.addactionlistener(x); F is action listener for the button b it contains (typical) class F extends JFrame implements ActionListener JButton b = new JButton(); public void actionperformed(actionevent e) F() b.addactionlistener(this);

12 2002, Prof. Dr. Gerd Szwillus (Graphical User Interfaces-63) Define what happens as a reaction to this user interaction ActionEvent objects provide information about what has happened getsource() from which object does the action event result (e.g. JButton b) getid() what is the type of action event getcommandstring() which command string is associated with the event getmodifiers() which additional keys were pressed (Ctrl, Shift, Alt, ) Typical structure of actionperformed-methods public void actionperformed(actionevent e) if (e.getsource()==bok) // action for JButton bok press if (e.getsource()==bcancel) // action for JButton bcancel press else 2002, Prof. Dr. Gerd Szwillus (Graphical User Interfaces-64) UI Elements can be assigned individual "action" strings JButton bok = new JButton ("OK"); bok.setactioncommand("in Ordnung"); "Action command" strings can be read from the ActionEvent steming from the button public void actionperformed(actionevent e) if (e.getactioncommand().equals("in Ordnung")) // action for JButton bok press if (e.getactioncommand().equals) // action for other Button

13 2002, Prof. Dr. Gerd Szwillus (Graphical User Interfaces-65) Example summarized (interaction part only): class Durchschnitt extends JFrame implements ActionListener public void actionperformed(actionevent e) if (e.getsource()==numberinput) int n = Integer.parseInt(numberInput.getText()); d.addnumber(n); calculate.setenabled(true); prompt.settext(""+d.getnumber()+" degrees entered. Enter next"); numberinput.settext(""); else if (e.getsource()==calculate) result.settext("average is "+d.getaverage()); calculate.setenabled(false); 2002, Prof. Dr. Gerd Szwillus (Graphical User Interfaces-66) 4.2.2Mouse Interaction Provide code for capturing user interaction Mouse operations are observed by MouseListener and MouseMotionListener objects o A MouseListener object owns mouseclicked, mouseentered, mouseexited, mousepressed,andmousereleased methods. o A MouseMotionListener object owns mousemoved and mousedragged methods Use MouseMotionListener only, if interested in explicit programmed action for every mouse movement (efficiency!) Define what happens as a reaction to mouse events User performs mouse actions appropriate event handler is called MouseEvent parameter object for evaluation, gives additional information such as getx(), gety(), getpoint() at which position has the mouse event happened getclickcount() number of mouse clicks (2 = double click)

14 2002, Prof. Dr. Gerd Szwillus (Graphical User Interfaces-67) Example for a mouse listener/mouse motion listener program: Permanently display the mouse coordinates and the mouse key status in the title bar of the window Push places a red circle on the canvas Release places a blue circle and a green line from the push position to the release position on the canvas 2002, Prof. Dr. Gerd Szwillus (Graphical User Interfaces-68) Program Concept class MyFrame extends MyFrame is doing "everything" MyFrame has two Point type attributes a and b, which store the last two push-release positions Whenever the frame is repainted, the necessary (one or two) circles and line are drawn onto the canvas class MyFrame extends JFrame Point a = null; Point b = null; MyFrame() public void paint() // dependent on Points a and b

15 2002, Prof. Dr. Gerd Szwillus (Graphical User Interfaces-69) The constructor of MyFrame: MyFrame() addmouselistener(..); addmousemotionlistener(..); setlocation(100, 100); setsize(400, 400); setdefaultcloseoperation(exit_on_close); setvisible(true); A MouseMotionListener is added to MyFrame, constantly re-writing the window title (Java construct: object instance of an anonymous class, MouseMotionAdapter implements all MouseMotionListener methods "doing nothing") addmousemotionlistener( new MouseMotionAdapter() public void mousemoved(mouseevent m) settitle("up "+m.getx()+" "+m.gety()); ); public void mousedragged(mouseevent m) settitle("down "+m.getx()+" "+m.gety()); 2002, Prof. Dr. Gerd Szwillus (Graphical User Interfaces-70) A MouseListener is added to MyFrame, reacting on "press" and "release" addmouselistener( new MouseAdapter() public void mousepressed(mouseevent m) a = m.getpoint(); // store "first" point b = null; // "second" point unknown repaint(); ); public void mousereleased(mouseevent m) b = m.getpoint(); // store "second" point repaint();