1. CST238 GUI Programming Dr. Sherry Yang Oregon Institute of Technology

2. Week 1 Introduction Syllabus, class information Brief GUI introduction First Windows Forms program – code only Using Designer In-Class Exercise Take-home lab#1

3. Instructor Sherry Yang sherry.yang@oit.edu or csetyang@gmail.com sherry.yang@oit.educsetyang@gmail.com Room 213 Office Hours: Mon/Thurs 4-6 or by appointment Class webpage: http://www.oit.edu/faculty/sherry.yang/CST238 http://www.oit.edu/faculty/sherry.yang/CST238

4. 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

5. 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.

6. 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

7. 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/Quizzes30% In-Class Assignments15% Labs/Assignments45% Presentations10%

8. 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.

9. 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.

10. 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.

11. 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.

12. 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

13. 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 Responsibilities

14. 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.

15. History of the Graphical User Interface (GUI) Thanks to Frank McCown @Harding University for this material

16. 1950s – Command-line interfaces (CLIs) require typing memorized commands DOS screen from 1980: http://osxbook.com/book/bonus/ancient/vpc/images/dos1x.gif http://osxbook.com/book/bonus/ancient/vpc/images/dos1x.gif

17. 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

18. 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.jpghttp://toastytech.com/guis/altosystem.jpg

19. 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 visitApple had already been working on the GUI “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

20. 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.htmlhttp://toastytech.com/guis/star.html

21. 1980s – Text user interfaces (TUIs), retronym coined after GUIs http://en.wikipedia.org/wiki/Text_user_interface

22. 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.htmlhttp://en.wikipedia.org/wiki/File:Apple_Lisa.jpg http://toastytech.com/guis/lisaos1LisaTour.html

23. 1984 – Apple Macintosh popularizes the GUI. Super Bowl commercial shown once, most expensive ever made at that time Image: http://toastytech.com/guis/macos1.htmlhttp://toastytech.com/guis/macos1.html

24. 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.pnghttp://en.wikipedia.org/wiki/File:X-Window-System.png

25. 1985 – Windows 1.0 – provided GUI interface to MS- DOS. No overlapping windows (tiled instead). Image: http://lowendmac.com/orchard/06/apple-vs-microsoft.htmlhttp://lowendmac.com/orchard/06/apple-vs-microsoft.html “You’re stealing from us!” – Steve Jobs to Bill Gates in Pirates of Silicon Valley

26. 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

27. 1987 – Windows 2.0 – Overlapping and resizable windows, keyboard and mouse enhancements Image: http://en.wikipedia.org/wiki/File:Windows_2.0.pnghttp://en.wikipedia.org/wiki/File:Windows_2.0.png

28. 1987 – Macintosh II: first full-color Mac http://www.techdigest.tv/2009/06/galleries/the_ten_greates.php?pic=1

29. 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

32. 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)

33. 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

34. 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.pnghttp://en.wikipedia.org/wiki/File:Windows_3.11_workspace.png

35. 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)

36. 1998 – Windows 98: Integration with Web, IE is bundled with OS (controversy) http://toastytech.com/guis/win98.html

37. 2001 – Windows XP – Product activation, GUI enhancements, first support for 64-bit processors http://en.wikipedia.org/wiki/File:Windows_XP_SP3.png

38. 2001 – Apple revamps GUI with MacOS X (BSD Unix core) Image: http://theoligarch.com/microsoft_vs_apple_history.htmhttp://theoligarch.com/microsoft_vs_apple_history.htm

39. 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

40. 2007 – Apple’s iPhone popularizes the touch screen interface http://passion-for-iphone.blogspot.com/

41. 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 UIApple files lawsuit

42. 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.pnghttp://en.wikipedia.org/wiki/File:Windows_8_start_screen.png

43. 2014

44. 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

45. GUI Programming Windows Desktop Apps – Based on.NET framework – Windows Forms programming with C# Three key pieces: – Forms – Controls – Events

46. 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

47. 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

48. 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

49. 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

50. 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

51. 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

52. 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) { …. }

53. 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.

54. 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)

55. 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.

56. 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