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

Department of Computer Systems Engineering Technology

Ph.D. in Computer Science

Senior Software Engineer

Application Software Engineer

Klamath Falls

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%

GradingYour grade will be calculated as follows:*

90%+ = A80%+ = B70%+ = C60%+ = D59%- = 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.

• 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 ResponsibilitiesStudent 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.

Student ResponsibilitiesStudent Responsibilities

Accommodations for Students with DisabilitiesIf 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 Demo”

The first mouse

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: hardware-independent 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 MS-DOS. No overlapping windows (tiled instead).

Image: http://lowendmac.com/orchard/06/apple-vs-microsoft.html

“You’re stealing from us!” – Steve Jobs to Bill Gates in Pirates of Silicon Valley

• 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

http://toastytech.com/guis/os211menu.png

“I believe OS/2 is destined to be the most important operating system, and possibly program, of all time.” – Bill Gates (1987)

• 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

• 2005 – Ajax technique coined by Jesse James Garrett, sparks move from desktop apps to web apps

http://en.wikipedia.org/wiki/File:Ipodwheelwiki.svg

2010 TED talk by John Underkoffler

• 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 #1Must 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 #1Due 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