1. Joe Hummel, PhD Dept of Mathematics and Computer Science Lake Forest College hummel@lakeforest.edu http://164.68.21.9/hummel/workshops.htm hummel@lakeforest.edu http://164.68.21.9/hummel/workshops.htm Lecture 2: Event-driven Programming, GUIs, and WinForms

2. 2-2 2. GUIs in.NET 2.1 Intro to GUIs Event-driven programming Graphical User Interfaces in.NET

3. 2-3 2. GUIs in.NET A Simple GUI Application Consider a Calculator app for performing addition:

4. 2-4 2. GUIs in.NET GUIs are Event-driven Idea is very simple: –individual user actions are translated into “events” by OS — mouse click, mouse move, keypress, window activation, etc. –events are passed, 1 by 1, to application for processing –this is how most GUIs are programmed (Java, X,.NET, etc.)… GUI App

5. 2-5 2. GUIs in.NET Code-behind Events are handled by methods that live behind visual interface –known as "code-behind" –our job is to handle the events we care about…

6. 2-6 2. GUIs in.NET GUIs in.NET In.NET you can build two types of GUI applications –WinForms: this is a traditional desktop Windows GUI application –WebForms: this is a web-based GUI application It’s incredibly intuitive –approach made famous by Visual Basic in the 1990's…

7. 2-7 2. GUIs in.NET Example — Let's Create Calculator App Step-by-step…

8. 2-8 2. GUIs in.NET (1) Create Project Create a new project of type “Windows Application” –a blank form (window) will be created for you automatically –inherits default behavior from System.Windows.Forms.Form

9. 2-9 2. GUIs in.NET (2) Configure Form The Properties window is your friend Form properties to consider: –Text, StartPosition, Font, FormBorderStyle, MaximizeBox, …

10. 2-10 2. GUIs in.NET (3) Design UI Select desired controls from Toolbox… –Hover mouse over Toolbox to reveal –Drag-and-drop onto form –Position, resize, set properties

11. 2-11 2. GUIs in.NET (4) Naming Conventions Control’s programmatic name is set via (Name) property Naming convention is a 3-letter prefix –lbl, txt, cmd, etc.

12. 2-12 2. GUIs in.NET public partial class Form1 : Form { private void cmdAdd_Click(object sender, EventArgs e) { int i, j, k; i = System.Convert.ToInt32(this.txtNumber1.Text); j = System.Convert.ToInt32(this.txtNumber2.Text); k = i + j; string msg; msg = "Sum = " + k; System.Windows.Forms.MessageBox.Show(msg); } public partial class Form1 : Form { private void cmdAdd_Click(object sender, EventArgs e) { int i, j, k; i = System.Convert.ToInt32(this.txtNumber1.Text); j = System.Convert.ToInt32(this.txtNumber2.Text); k = i + j; string msg; msg = "Sum = " + k; System.Windows.Forms.MessageBox.Show(msg); } (5) Code Events of Interest Double-click on object to reveal default event handler Example: –Double-click on button to reveal Click event…

13. 2-13 2. GUIs in.NET (6) Run! Press F5 at any time to run what you have… static void Main() { Application.EnableVisualStyles(); Application.SetCompatibleTextRenderingDefault(false); Application.Run( new Form1() ); } static void Main() { Application.EnableVisualStyles(); Application.SetCompatibleTextRenderingDefault(false); Application.Run( new Form1() ); }

14. 2-14 2. GUIs in.NET 2.2 WinForms Desktop-based GUI applications in.NET

15. 2-15 2. GUIs in.NET Example: Census Data GUI Application Let's create a WinForms app to work with the Census Data

16. 2-16 2. GUIs in.NET Application Design Very similar to console-based version: census.txt 1 * 11

17. 2-17 2. GUIs in.NET UI Design Uses MenuStrip, ListBox, GroupBox, TextBox, Button, and Labels : ListBox (lstTopTenNames) GroupBox MenuStrip (mnuFile, mnuFileExit, mnuHelp, mnuHelpAbout)

18. 2-18 2. GUIs in.NET (1) File >> Exit, Help >> About Menus and menu items behave as buttons, with a Click event: private void mnuFileExit_Click(...) { this.Close(); // close app by closing main window } private void mnuHelpAbout_Click(...) { MessageBox.Show("Census Application written by..."); } private void mnuFileExit_Click(...) { this.Close(); // close app by closing main window } private void mnuHelpAbout_Click(...) { MessageBox.Show("Census Application written by..."); }

19. 2-19 2. GUIs in.NET private List namesCollection; private void Form1_Load(object sender, EventArgs e) { this.namesCollection = Program.ReadCensusData("census.txt"); for (int i = 0; i < 10; i++) // list top 10 family names in census { FamilyName nameObj = this.namesCollection[i]; this.lstTopTenNames.Items.Add(nameObj.Name); } private List namesCollection; private void Form1_Load(object sender, EventArgs e) { this.namesCollection = Program.ReadCensusData("census.txt"); for (int i = 0; i < 10; i++) // list top 10 family names in census { FamilyName nameObj = this.namesCollection[i]; this.lstTopTenNames.Items.Add(nameObj.Name); } (2) Form_Load Use Form_Load event to initialize form before it first appears –double-click on form’s background to reveal –code event to read census data and load list box:

20. 2-20 2. GUIs in.NET (3) Run and Test! Remember, you can run at any time — i.e. incremental development… –make sure "census.txt" file is in project's bin\Debug sub-folder

21. 2-21 2. GUIs in.NET (4) SelectedIndexChanged Listbox’s SelectedIndexChanged event… –code this event to display info when user selects an item… private void lstTopTenNames_SelectedIndexChanged(object sender, EventArgs e) { // get the name clicked on by the user: string name = (string) this.lstTopTenNames.SelectedItem; if (name == null) // nothing selected (occurs if we delete from listbox) return; // user has selected a name, use index to retrieve object from collection: int index = this.lstTopTenNames.SelectedIndex; System.Diagnostics.Debug.Assert(index >= 0 && index < 10); MessageBox.Show(namesCollection[index].ToString(), "Census Data GUI Application", MessageBoxButtons.OK, MessageBoxIcon.Information); } private void lstTopTenNames_SelectedIndexChanged(object sender, EventArgs e) { // get the name clicked on by the user: string name = (string) this.lstTopTenNames.SelectedItem; if (name == null) // nothing selected (occurs if we delete from listbox) return; // user has selected a name, use index to retrieve object from collection: int index = this.lstTopTenNames.SelectedIndex; System.Diagnostics.Debug.Assert(index >= 0 && index < 10); MessageBox.Show(namesCollection[index].ToString(), "Census Data GUI Application", MessageBoxButtons.OK, MessageBoxIcon.Information); }

22. 2-22 2. GUIs in.NET private void cmdSearch_Click(object sender, EventArgs e) { // get the name entered by the user: string username = this.txtUsername.Text; // search through collection: int index = this.namesCollection.IndexOf( new FamilyName(username, 0.0, 0) ); if (index < 0) MessageBox.Show("Sorry, name does not appear in the census data.",...); else MessageBox.Show(namesCollection[index].ToString(),...); } private void cmdSearch_Click(object sender, EventArgs e) { // get the name entered by the user: string username = this.txtUsername.Text; // search through collection: int index = this.namesCollection.IndexOf( new FamilyName(username, 0.0, 0) ); if (index < 0) MessageBox.Show("Sorry, name does not appear in the census data.",...); else MessageBox.Show(namesCollection[index].ToString(),...); } (5) Click Code search button’s Click event to search for a specific name:

23. 2-23 2. GUIs in.NET 2.3 What's Next? Lab exercise #2

24. 2-24 2. GUIs in.NET This page intentionally left blank