CST238 GUI Programming
Dr. Sherry Yang
Oregon Institute of Technology
Week 1
•
•
•
•
•
•
•
Introduction
Syllabus, class information
Brief GUI introduction
First Windows Forms program – code only
Using Designer
In-Class Exercise
Take-home lab#1
Instructor
•
•
•
•
Sherry Yang
sherry.yang@oit.edu or csetyang@gmail.com
Room 213
Office Hours: Mon/Thurs 4-6 or by
appointment
• Class webpage:
http://www.oit.edu/faculty/sherry.yang/CST238
Instructor Background
Professor of Software Engineering
Technology
Klamath Falls
Department of Computer Systems
Engineering Technology
Ph.D. in Computer
Science
Senior Software Engineer
Application Software Engineer
Getting to Know Each Other
• Pair up with one other person.
• Find out a little more about the person.
– Name
– Year in program
– Something interesting about the person
– Any previous GUI programming experience
– Any previous C# experience
• Introduce the person to the class.
Course Description
• This course is designed to introduce the basic concepts
associated with Graphical User Interface (GUI)
Programming in the Windows environment. We will
start with .NET framework and windows forms. We
might explore other framework if time permits. We
will also spend time on various aspects associated with
user interface design. Students are expected to
complete all in-class lab tasks and assigned coding
projects.
• PREREQUISITES: CST 211 with C or better & SPE111
Evaluation Methods
The final grade, which may range from A to F, is
determined by a composite evaluation of the
student's performance in:
Tests/Quizzes
30%
In-Class Assignments
15%
Labs/Assignments
45%
Presentations
10%
Grading
Your grade will be calculated as follows:*
90%+ = A
80%+ = B
70%+ = C
60%+ = D
59%- = F
* Class participation will be considered in evaluating
"borderline" grades.
• You must turn in ALL of the labs and complete the project to
pass the course with a C or better. If you failed to turn in all
assignments, you will receive an Incomplete.
Textbook
• Sells, Chris & Michael Weinhardt, “Windows
Forms 2.0 Programming”, Addison-Wesley
Profession, 2006.
• Johnson, Jeff, GUI Bloopers 2.0, Common User
Interface Design Don’ts and Dos.
Student Responsibilities
• Attendance:
– Students are expected to attend all class sessions. If you
know you will be absent on a certain day, please inform
the instructor in advance so arrangements can be made
to provide you with the material covered. Please make
every effort to attend all class sessions. There will be no
make up in-class exercises.
– Labs will be used as help sessions and to check off lab
assignments. (Monday evening – Lecture/Lab. Saturday
labs as needed in person or via Google Hangout)
Instructor will be out of town on some Saturdays for
conferences and meetings.
Student Responsibilities
• Tests:
– All tests are open book, open notes. No electronic
devices are allowed.
– There will be no make up tests unless there is an
emergency. If you miss a test for any reason, you
can make it up with additional projects.
– In case of emergency, please contact Abbie Allen
in Student Services. She will inform all of your
instructors.
Student Responsibilities
• Academic Dishonesty:
– No plagiarism or cheating is allowed in this class.
Please refer to your student handbook regarding
policies on academic dishonesty. A copy of the
policy is posted on the class webpage.
– It is okay to get help on your assignments. Please
acknowledge all source of help, including them in
the program documentation as appropriate.
Student Responsibilities
• Assignments:
– All in-class exercises and take-home labs are due
in class. They must be checked off by the
instructor.
– There will be a 20% penalty for late assignments
per week.
– All late assignments and project must be
submitted by Wednesday of Finals week to be
graded.
Accommodations for Students with Disabilities
If you have a disability and feel that you may
need accommodation in this course, please
speak with the instructor as soon as possible.
History of the Graphical User
Interface (GUI)
Thanks to Frank McCown @Harding University for this material
• 1950s – Command-line interfaces (CLIs)
require typing memorized commands
DOS screen from 1980:
http://osxbook.com/book/bonus/ancient/vpc/images/dos1x.gif
• 1968 – Doug Engelbart demonstrates NLS, a
system which uses a mouse, pointers, hypertext,
and multiple windows
The first mouse
“The Demo”
http://en.wikipedia.org/wiki/File:Firstmouseunderside.jpg
• 1970s – Researchers at Xerox Palo Alto Research
Center (many from SRI) develop WIMP paradigm
(Windows, Icons, Menus, Pointers)
• 1973 – Xerox Alto:
commercial failure due
to expense, poor user
interface, and lack of
programs
Image: http://toastytech.com/guis/altosystem.jpg
• 1979 – Steve Jobs and other Apple engineers
visit Xerox. Pirates of Silicon Valley dramatizes
the events, but Apple had already been
working on the GUI before the visit
“I felt like one of the Mongol
hoards coming to loot and
plunder a bunch of
defenseless villagers.” –
Steve Wozniak in Pirates of
Silicon Valley
• 1981 – Xerox Star: focus on WYSIWYG.
Commercial failure (25K sold) due to expense
($16K each), performance (minutes to save a
file, couple of hours to recover from crash),
and poor marketing
Image: http://toastytech.com/guis/star.html
• 1980s – Text user interfaces (TUIs), retronym
coined after GUIs
http://en.wikipedia.org/wiki/Text_user_interface
• 1983 – Apple Lisa: Many developers from Xerox, not
commercially successful
Images: http://en.wikipedia.org/wiki/File:Apple_Lisa.jpg
http://toastytech.com/guis/lisaos1LisaTour.html
• 1984 – Apple Macintosh popularizes the GUI.
Super Bowl commercial shown once, most expensive
ever made at that time
Image: http://toastytech.com/guis/macos1.html
• 1984 – MIT’s X Window System: hardwareindependent platform and networking protocol for
developing GUIs on UNIX-like systems
Image: http://en.wikipedia.org/wiki/File:X-Window-System.png
• 1985 – Windows 1.0 – provided GUI interface to MSDOS. No overlapping windows (tiled instead).
“You’re stealing from us!”
– Steve Jobs to Bill Gates
in Pirates of Silicon Valley
Image: http://lowendmac.com/orchard/06/apple-vs-microsoft.html
• 1985 – Microsoft and IBM start work on OS/2 meant to
eventually replace MS-DOS and Windows
• 1986 – Apple threatens to sue Digital Research because
their GUI desktop looked too much like Apple’s Mac.
Digital Research cripples their desktop so Apple won’t
sue
DRI’s GEM 1.1 desktop
http://en.wikipedia.org/wiki/File:Gem_11_Desktop.png
• 1987 – Windows 2.0 – Overlapping and resizable
windows, keyboard and mouse enhancements
Image: http://en.wikipedia.org/wiki/File:Windows_2.0.png
• 1987 – Macintosh II: first full-color Mac
http://www.techdigest.tv/2009/06/galleries/the_ten_greates.php?pic=1
NeXT and NeXTSTEP
• In 1988 Steve Jobs acquires Objective-C
license for NeXT
• Used Objective-C to build the NeXTSTEP
Operating System
• Objective-C made interface design for
NeXTSTEP much easier
• NeXTSTEP was derived from BSD Unix
• In 1995 NeXT gets full rights to Objective-C
from Stepstone
• 1988 – OS/2 1.10 Standard Edition (SE) has GUI written
by Microsoft, looks a lot like Windows 2
“I believe OS/2 is
destined to be the
most important
operating system, and
possibly program, of
all time.” – Bill Gates
(1987)
http://toastytech.com/guis/os211menu.png
• 1988 – Apple sues Microsoft claiming Windows 2.0
violates Apple's copyrights on the "visual displays" of
the Macintosh. Microsoft countersues and
eventually wins in 1993
• 1989 – Xerox sues Apple for violating copyrights
used in Lisa and Macintosh, but judge dismisses
lawsuit without any action
• 1990 – Windows 3.0: Access to 16 MB. Microsoft
and IBM split ways on OS/2
• 1992 – Windows 3.1 – Widely popular DOS shell:
TrueType fonts, multimedia, standardized common
dialog box
Image: http://en.wikipedia.org/wiki/File:Windows_3.11_workspace.png
• 1993 – Windows NT – MS’s first 32 bit OS, no longer
a shell over MS-DOS
HTML forms incorporate radio buttons, check boxes,
drop-down lists, etc.
• 1995 – Windows 95 – 32 bit, fewer hardware
demands than NT
“We have always been shameless
about stealing good ideas.”
- Steve Jobs in Triumph of the Nerds (1996)
• 1998 – Windows 98: Integration with Web, IE is
bundled with OS (controversy)
http://toastytech.com/guis/win98.html
• 2001 – Windows XP – Product activation, GUI
enhancements, first support for 64-bit processors
http://en.wikipedia.org/wiki/File:Windows_XP_SP3.png
• 2001 – Apple revamps GUI with MacOS X (BSD Unix
core)
Image: http://theoligarch.com/microsoft_vs_apple_history.htm
• 2002 –Minority Report popularizes concepts of the
gesture UI
2010 TED talk by John
Underkoffler
• 2005 – Ajax technique coined by Jesse James
Garrett, sparks move from desktop apps to web apps
http://en.wikipedia.org/wiki/File:Ipodwheelwiki.svg
• 2007 – Apple’s iPhone popularizes the touch screen
interface
http://passion-for-iphone.blogspot.com/
• 2008 – HTML5 working draft proposes UI elements
to match desktop app functionality
• 2010 – Windows 7 introduces few UI tweaks but is
commercially successful
• 2010 – Apple’s iPad brings touch screen interface to
the tablet
• 2010 – Apple files lawsuit against HTC (maker of
Android phones) claiming 20 patents were violated,
some related to UI
• 2012 – MS ditches skeumorphs in Windows 8 and
brings Metro touch-screen UI to the desktop
Image: http://en.wikipedia.org/wiki/File:Windows_8_start_screen.png
2014
Building a GUI App
• Start with platform / framework
– Determines the development language
– Provides a set of UI widgets
– May have some design strategy
– High-level vs. low-level
• Common characteristics
– Event-driven paradigm
– Relying on the framework to handle low level
functionality
GUI Programming
• Windows Desktop Apps
– Based on .NET framework
– Windows Forms programming with C#
• Three key pieces:
– Forms
– Controls
– Events
Building Forms from code
• Create class that inherits from
System.Windows.Forms.Form
• Set form properties in constructor
• Pass form object to Application.Run to make it
the start up form
• Use Show() or ShowDialog() to open
secondary forms
Application Object
• System.Windows.Forms.Application
– Singleton
• Application.Run starts message loop
• Application.Exit ends message loop
– Closing the start-up form invokes Application.Exit
• Use properties to get information about
running program
Control
• Interface for a form is built using controls
• Framework includes many useful controls
– Button, TextBox, Labels, etc.
• Large third-party control market
• You can create your own custom controls
• Some controls are supplied by other
framework
– i.e. Ribbon control is in WPF but in .NET
Framework
Controls
• Positioning controls on Form
• Set Top & Left properties or
• Set the Location Property (x,y)
• Sizing controls
– Set the Width and/or Height properties or
– Set the Size property
Add controls to a Form
• Create a private field for the control
• Create instance of control and set property
values in form constructor
• Set control properties
• Add control instance to form’s Controls
collection
Events and Event Handlers
• Events are raised as user interacts with
program
– A button is clicked
– A form is resized
• You can write a function that handles these
events, called event handlers
• An event may have multiple event handlers
• An event handler may handle multiple events
Dynamic Event Handler in C#
• Use += operator to attach an event handler
• Use -= operator to detach an event handler
Example:
public MyForm()
{
ShowMessageButton.Click += ClickHandler;
….
}
private void ClickHandler(object send, EventArgs e)
{
….
}
Windows Forms in Visual Studio
• Designer in Visual Studio can make the
programmer’s job a little easier.
• Professional programmers prefer to code the
forms by hand instead of using designer.
Using the Designer
• Drag/Drop controls from Toolbox to Designer
• Set properties of form and controls in
Properties window
• Attach event handlers using Events Windows
• Add event handler code (code behind)
In-Class Exercise #1
Must be checked off tonight!
• Write a simple Windows Forms program with labels,
textbox and button.
– It should reverse the string that the user typed in and
display it below.
Take Home Lab #1
Due next Monday (week 2)
Implement a number guessing game.
- It should check and make sure that the user entered a valid integer.
- It should check and see if the user entered a number between 0 and 100.
- It should generate a random number.
- It should be able to reset and get a different random number.
- It should check and see if the user entered the correct random number.
- It should tell the user to guess higher or lower if the number is incorrect.
- It should keep track of number of tries before the user guessed the right number.
- It should keep track of best score so far.
Number of tries:
0
Best Score so far: 2