c# forms and events · 2009-04-16 datavetenskap, karlstads universitet 1 karlstads universitet...

2009-04-16

Datavetenskap, Karlstads universitet 1

Karlstads universitet

Datavetenskap

DVGB07 – VT2009

C# Forms and Events

VT 2009


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


Datavetenskap

DVGB07 – VT2009

Macintosh

2009-04-16



Datavetenskap

DVGB07 – VT2009

Desktop environment


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


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

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


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;


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

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


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


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

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


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


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

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


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


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

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)


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();

}


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

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


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


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

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


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


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

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.


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


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

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


Datavetenskap

DVGB07 – VT2009

Copyright notice

• http://www.iie.org.mx/Monitor/v01n03/ar_ihc2.

htm


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

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/


Datavetenskap

DVGB07 – VT2009

Examples of good design

• Trillian Astra

– http://www.trillianastra.com/

• Google

– http://google.com/

• Spotify

– Spotify

c# forms and events · 2009-04-16 datavetenskap, karlstads universitet 1 karlstads universitet...

Documents