C# Forms and Events. Evolution of GUIs. Macintosh VT Datavetenskap, Karlstads universitet 1

Transcription

1 C# Forms and Events VT 2009 Evolution of GUIs Until 1984, console-style user interfaces were standard Mostly dumb terminals as VT100 and CICS Windows command prompt is a holdover In 1984, Apple produced Macintosh intuitive desktop, mouse-oriented GUI Actually GUIs were developed by Xerox PARC (Palo Alto Research Center) in the late 1970s Apple visited Xerox in 1979, and became convinced that GUI would become the shit. In1995, Windows 95 appeared with a GUI similar to the Mac Windows now dominant with over 87% of market Macintosh, 1

2 Desktop environment Evolution of GUIs Almost all modern OSs support desktop GUI toolkits Unix and Linux use X Windows (Motif) Different GUIs have similar features but are not programmed the same way C# and.net support Desktop GUI Browser GUI (e.g. PocketPC and PDA GUIs Mobile telephone applications GUI Philosophy A GUI is event-driven Responds to user requests at the time the user makes them in the order they are made Requests are often made using a pointing device The look is of windows that overlap one another Programming of a GUI is inherently object oriented, 2

3 Controls A control is a single visual component button, list box, text box There are many different controls Some appear on a form, some do not A ListBoxdoes, a Timerdoes not Drawing properties All controls have properties associated with them Fonts Foreground color Background color Visibility The (name) property determines what the control is called Can be set during development in VS using the property sheet Most can also be set programmatically using direct property assignment button1.backcolor = Color.LightCoral; Container controls A form is a container control on which to place other controls Form is what we often think of as window There are other container controls, such as panel we can put a control in a panel and the panel in the form, or a control in a panel, the panel in another panel, that panel in a form, etc. Idea corresponds to the Composite design pattern, 3

4 Anchoring and docking Size and location of a control can be set absolutely in terms of x and y coordinates Good? Anchoring controls the position from which a control is attached For example: top, left Generally spacing is retained Control might be stretched Docking divides the container into five quadrants Control will be resized to fit the area Usually a panel is put into each quadrant and then other controls are put on the panel Events User interaction with a control generates an event Pressing and releasing a button selecting an item from a list Events are important in the.net infrastructure Common across all CLI languages Events contain information Type of event Which component generated the event Events must be processed by an event handler Handler delegates the actual processing to a method we write Event processing Sent to the registered handler Processing delegated to a method in the GUI program User generates event (ex pushing button) Forwarded by CLI { } { } Processing method specified when event handler created, 4

5 Adding event methods Different types of events exist Control specific events such as button click Form-level events such as form load Visual studio has easy event processing Double-click on control puts you right in the event method for that control Application object Methods of the Application used to control execution Application.Run( application ) starts message pump so that events are dispatched to the specified application Application.Exit() stops the message pump, closes the window and exits Application object is not really an object, but a class with static methods commonly referred to as an object, but incorrectly so Adding a control Visual studio adds a control by creating an instance of the control setting its properties adding it to the Controlscollection of the form this.button1.location = new System.Drawing.Point(13, 13); this.button1.name = "button1"; this.button1.size = new System.Drawing.Size(75, 23); this.button1.tabindex = 0; this.button1.text = "button1"; this.button1.usevisualstylebackcolor = true; this.button1.click += new System.EventHandler(this.button1_Click); this.controls.add(this.button1);, 5

6 Adding event handling Visual studio generates some behind-the-scenes code Creates an event handler (System.EventHandler) Passes the address of our event method to the event handler called a delegate what is a delegate? Registers the event handler by connecting itto the control s property that will generate the event button click text changed Adding event handling Property that generates the event Create event handler Delegate to event method this.button1.click += new System.EventHandler(this.button1_Click); Register the Handler private void button1_click(object sender, EventArgs e) { Close(); } System.EventHandler class To register the handler, the special += operator is used button.click += handler; The event-processing method must have the specification protected void eventmethod(object sender, EventArgs event_args); sender is the object ID of the control that originated the event event_args contains additional arguments for the specific event, 6

7 Message boxes Special case of GUI programming sometimes called a dialog box typically appears on top of a main form used for modal confirmation-type messages Has a special static method called show to make these dialogs easy static methods can be executed without creating an object instance returns a DialogResult object MessageBox.Show(this, Message, Title, buttons, icons) Message boxes - example private void button2_click(object sender, EventArgs e) { DialogResult dr = MessageBox.Show(this, "Drop your weapopn. You have 15 seconds to comply", "ED-209", MessageBoxButtons.OKCancel, MessageBoxIcon.Warning); if (dr == DialogResult.OK) Application.Exit(); } Example Now, we are going to see how to make a very simple GUI program, using a text editor and visual studio, 7

8 Forgetting the User Developers often design for what they know, not what the users know It is even more harmfulin the interface because it immediately makes the user feel incapable of using the product Avoid this error diligently Give Users Control GUI designers' need for control is evident in applications that continually attempt to control user navigation by graying and blackening menu items or controls within an application Controlling the user is completely contradictory to event-driven design in which the user rather than the software dictates what events will occur Give Users Control As business changes at a faster pace, flexibility in user interfaces will become a key enabler for change Allowing the user to access the application in ways you never dreamed can be scary, but satisfying for you as a developer and empowering for the user, 8

9 Too Many Features at the Top Level Examine a VCR built in 1985 and then a dvd from 2007 More features, but less at the top level Too Many Features at the Top Level You should ensure that features used frequently are readily available Avoid the temptation to put everything on the first screen or load the toolbar with rarely used buttons Do the extra analysis to find out which features can go behind the panel instead of on the faceplate GUI Successes Good GUIs are more intuitive than their character-based counterparts Use real-world metaphors whenever possible Another important characteristic of good GUIs is speed Speed can be the make-or-break factor in determining an application's acceptability in the user community, 9

10 Speed factors Avoid repainting the screen unless it is absolutely necessary Give the power user the capability to enter each field of each data record rapidly mnemonics, accelerator keys, and toolbar buttons with meaningful icons Code efficiently (intelligently) Optimize for speed. Design for Clarity GUI applications often are not clear to end users One effective way to increase the clarity of applications is to develop and use a list of reserved words A common complaint among users is that certain terms are not clear or consistent Design for Consistency Good GUIs apply consistent behavior throughout the application Build upon a user's prior knowledge of other successful applications Business travelers are not looking for a new and exciting experience at each new city., 10

11 Control Design Control Number Of Choices In Domain Shown Type Of Controls Menu Bar Maximum 10 items Static action Pull-Down Menu Maximum 12 items Static action Cascading Menu Maximum 5 items, 1 cascade deep Static action Pop-up Menu Maximum 10 items Static action Push-button 1 for each button, maximum of 6 per dialog box Static action Check Box 1 for each box, maximum of 10 to 12 per group Static set/select value Radio Button 1 for each button, maximum of 6 per group box Static set/select value List Box 50 in list, display 8 to 10 rows Dynamic set/select value Drop-down List Box Combination List Box Display 1 selection in control at a time, up to 20 in a drop-down box Display 1 selection in control at a time in standard format up to 20 in a dropdown box Dynamic set/select single value Dynamic set/select single value; add value to list Spin Button Maximum 10 values Static set/select value Slider Dependent on data displayed Static set/select value in range Copyright notice htm Other factors Provide Visual Feedback Provide Audible Feedback Keep Text Clear Provide Traceable Paths Provide Keyboard Support Watch the Presentation Model The look and feel must be consistent, 11

12 Examples of bad design Haven Works Fabric Land Connecting Point Sarasota-Tampa Express Examples of good design Trillian Astra Google Spotify Spotify, 12