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 [email protected]

or [email protected]

Room 213 Office Hours: Mon/Thurs 4-6 or by appointment Class webpage: http://www.oit.edu/faculty/sherry.yang/CST238

Instructor Background

Klamath Falls Professor of Software Engineering Technology 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 In-Class Assignments 30% 15% Labs/Assignments Presentations 45% 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: 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).

“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