2009-04-16
Datavetenskap, Karlstads universitet 1
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
C# Forms and Events
VT 2009
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
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 wouldbecome ”the shit” ☺.
• In 1995, Windows 95 appeared with a GUI similar to the Mac
– Windows now dominant with over 87% of market
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
Macintosh
2009-04-16
Datavetenskap, Karlstads universitet 2
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
Desktop environment
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
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. http://280slides.com/Editor/)
– PocketPC and PDA GUIs
– Mobile telephone applications
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
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
2009-04-16
Datavetenskap, Karlstads universitet 3
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
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 ListBox does, a Timer does not
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
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;
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
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
2009-04-16
Datavetenskap, Karlstads universitet 4
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
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
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
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
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
Event processing
User generates event(ex pushing button)
Forwardedby CLI
{…}
Sent to the registered handler
{…}
Processingdelegated toa method inthe GUI program
Processing methodspecified when eventhandler created
2009-04-16
Datavetenskap, Karlstads universitet 5
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
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
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
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
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
Adding a control
• Visual studio adds a control by
– creating an instance of the control
– setting its properties
– adding it to the Controls collection 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);
2009-04-16
Datavetenskap, Karlstads universitet 6
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
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 it to the control’s
property that will generate the event
• button click
• text changed
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
Adding event handling
Delegate to event method
private void button1_Click(object sender, EventArgs e){
Close();}
this.button1.Click += new System.EventHandler(this. button1_Click);
Register the Handler
Create event handlerProperty thatgenerates the
event
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
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
2009-04-16
Datavetenskap, Karlstads universitet 7
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
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)
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
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, MessageBoxIco n.Warning);
if (dr == DialogResult.OK)Application.Exit();
}
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
Example
• Now, we are going to see how to make a very
simple GUI program, using a text editor and
visual studio
2009-04-16
Datavetenskap, Karlstads universitet 8
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
Forgetting the User
• Developers often design for what they know, not
what the users know
• It is even more harmful in the interface because
it immediately makes the user feel incapable of
using the product
• Avoid this error diligently
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
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
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
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
2009-04-16
Datavetenskap, Karlstads universitet 9
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
Too Many Features at the Top Level
• Examine a VCR built in
1985 and then a dvd
from 2007
• More features, but lessat the top level
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
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
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
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
2009-04-16
Datavetenskap, Karlstads universitet 10
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
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.
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
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
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
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. ”
2009-04-16
Datavetenskap, Karlstads universitet 11
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
Control Design
Static set/select value in rangeDependent on data displayedSlider
Static set/select valueMaximum 10 valuesSpin Button
Dynamic set/select single value; add value to list
Display 1 selection in control at a time in standard format up to 20 in a drop-down box Combination List Box
Dynamic set/select single valueDisplay 1 selection in control at a time, up to 20 in a drop-down boxDrop-down List Box
Dynamic set/select value50 in list, display 8 to 10 rows List Box
Static set/select value1 for each button, maximum of 6 per group box Radio Button
Static set/select value1 for each box, maximum of 10 to 12 per group Check Box
Static action1 for each button, maximum of 6 per dialog box Push-button
Static actionMaximum 10 itemsPop-up Menu
Static actionMaximum 5 items, 1 cascade deepCascading Menu
Static actionMaximum 12 itemsPull-Down Menu
Static actionMaximum 10 itemsMenu Bar
Type Of ControlsNumber Of Choices In Domain ShownControl
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
Copyright notice
• http://www.iie.org.mx/Monitor/v01n03/ar_ihc2.
htm
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
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
2009-04-16
Datavetenskap, Karlstads universitet 12
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
Examples of bad design
• Haven Works
– http://havenworks.com/
• Fabric Land
– http://www.fabricland.co.uk/
• Connecting Point
– http://www.cccp.com/
• Sarasota-Tampa Express
– http://www.stexps.com/
Karlstads universitet
Datavetenskap
DVGB07 – VT2009
Examples of good design
• Trillian Astra
– http://www.trillianastra.com/
– http://google.com/
• Spotify
– Spotify