WinForms: GUI Programmering i .NET January 2003 WinForms: GUI Programmering i .NET Kilde: Joe Hummel, kursus i .Net, jan. 2003 Denmark .NET Workshop © 2003 Joe Hummel

Mål 5. WinForms January 2003 “.NET supports two types of form-based apps, WinForms and WebForms. WinForms are the traditional, desktop GUI apps. The great news is that Visual Studio .NET enables quick, drag-and-drop construction of form-based applications…” Event-drevet, code-behind programmering Visual Studio .NET WinForms Controls GUI = Graphical User Interface Denmark .NET Workshop © 2003 Joe Hummel

Del 1 Event-drevet, code-behind programmering…

Event-driven applications Ideen er meget simpel: “user actions” bliver til “events” events overføres en for en til applikationen, som processererer eventen vha. en eventhandler Sådan programmeres de fleste GUI’er… GUI App

Eksempel på GUI-baserede events Mouse move Mouse click Mouse double-click Key press Button click Menu selection Change in focus Window activation etc.

Code-behind Events håndteres af metoder (eventhandlere) som ligger “bagved” den synlige GUI I MS-termer kendt som "code-behind" Vores job bliver at programmere disse metoder…

Call-backs Events er et call fra et objekt back til os… Hvordan oprettes forbindelsen? Visual Studio etablerer forbindelsen via auto-genereret kode

Del 2 Visual Studio .NET…

Visual Studio .NET (VS.NET) Ét IDE til alle former for .NET udvikling Fra klassebiblioteker over form-baserede apps til web services Du kan bruge C#, VB, C++, J#, etc.

Basal operation Visual Studio opererer i 1 af 3 tilstande: design run 5. WinForms January 2003 Visual Studio opererer i 1 af 3 tilstande: design run break Se VS title bar hvis du er i tvivl… design run break Denmark .NET Workshop © 2003 Joe Hummel

Eksempel: en windows-applikation 5. WinForms January 2003 GUI apps baseres på forms og controls… en form repræsenterer et vindue en form indeholder 0 eller flere controls en control interagerer med brugeren Lad os implementere en GUI app i en række skridt… Denmark .NET Workshop © 2003 Joe Hummel

Step 1 Opret et nyt projekt af typen “Windows Application” 5. WinForms January 2003 Opret et nyt projekt af typen “Windows Application” VS. Opretter automatisk en form… Denmark .NET Workshop © 2003 Joe Hummel

Step 2 — GUI design Vælg de ønskede controls fra toolbox’en… 5. WinForms January 2003 Vælg de ønskede controls fra toolbox’en… placer musen over toolbox for at se controls drag-and-drop til formen placer og tilpas størrelsen på dine control ESC key can be used to dismiss the toolbox window if it doesn't auto-hide by itself. The "Form Designer" is the name of the tool within Visual Studio that allows you to design GUIs via drag-and-drop. Denmark .NET Workshop © 2003 Joe Hummel

GUI design … En simpel regnemaskine: Placer og konfigurer controls 5. WinForms January 2003 En simpel regnemaskine: Placer og konfigurer controls klik for at vælge sæt properties via Propertiesvinduet You need 2 TextBox controls, and a Button control. Denmark .NET Workshop © 2003 Joe Hummel

Step 3 — kodedesign Implementer formens “Code behind”… 5. WinForms January 2003 Implementer formens “Code behind”… Dobbeltklik på den control du vil implementere kodeviduet popper automatisk frem Denmark .NET Workshop © 2003 Joe Hummel

Step 4 — run mode Kør! 5. WinForms January 2003 Denmark .NET Workshop © 2003 Joe Hummel

Break mode? 5. WinForms January 2003 Igangsættes i denne app eksempelvis ved forkert indtastning… Which is why input validation is so important… Denmark .NET Workshop © 2003 Joe Hummel

Arbejde med Visual Studio 5. WinForms January 2003 I Visual Studio arbejder vi med source files, projects & solutions Source files indeholder kode extension .cs, .vb, etc. Et projekt repræsenterer 1 assembly bruges af VS til at holde styr på source files alle source files skal skrives i samme sprog extension .csproj, .vbproj, etc. Solution (*.sln) files holder styr på projekter så man kan arbejde med flere projekter "All source files must be in the same lang" – what does this mean? In other words, when you create a project in Visual Studio, all the source files in that project must be in the same language — C#, VB, C++, whatever. This implies that if you want to work in different languages at the same time, you must either: use multiple projects in Visual Studio, one per language, or work outside of Visual Studio and create ".netmodules" using the command-line compilers. What's the purpose of the bin sub-directory? It's where the generated assemblies are placed. The obj sub-dir is used for temporary files during compilation. Denmark .NET Workshop © 2003 Joe Hummel

Del 3 WinForms…

WinForms 5. WinForms January 2003 Et andet navn for traditionelle, Windowsagtige GUI-applikationer i modsætning til WebForms, som er web-baserede Implementeres vha. FCL dvs. portabelt til enhver .NET platform Recall that FCL = .NET's Framework Class Library Denmark .NET Workshop © 2003 Joe Hummel

Abstraktion FCL fungerer som abstraktion 5. WinForms January 2003 FCL fungerer som abstraktion adskiller WinForm app fra den underlæggende platform instance of FCL class object System.Windows.Forms.Form CLR Windows OS Denmark .NET Workshop © 2003 Joe Hummel

Form properties 5. WinForms January 2003 Form properties kontrollerer formens visuelle fremtræden: AutoScroll BackgroundImage ControlBox FormBorderStyle (sizable?) Icon Location Size StartPosition Text (fx window's caption) WindowState (minimized, maximized, normal) Form1 form; form = new Form1(); form.WindowState = FormWindowState.Maximized; form.Show(); Most properties can also be set within Visual Studio via the Properties window (select form, press F4). Denmark .NET Workshop © 2003 Joe Hummel

Form metoder Actions der kan udføres på en form: 5. WinForms January 2003 form.Hide(); . form.Show(); Actions der kan udføres på en form: Activate: giv denne form fokus Close: luk & frigør tilknyttede ressourcer Hide: gem, men hold fast i ressourcerne til senere visning. Refresh: redraw Show: gør formen synlig på skærmen & activate Modal? Dialog boxes are "modal" windows, meaning the user can't switch to other windows in the application — they must complete the "dialog" and dismiss the dialog box before they can work with the application again. Denmark .NET Workshop © 2003 Joe Hummel

Form events Events du kan reagere på: find propertiesvinduet 5. WinForms January 2003 Events du kan reagere på: find propertiesvinduet dobbeltklik på event-navnet Load: lige før formen vises første gang Closing: når formen lukkes (mulighed for cancel) Closed: når formen helt sikkert lukkes Resize: når brugerer ændrer på formstørrelsen Click: når brugeren klikker på formens baggrund KeyPress: når brugeren trykker en tast mens formen har fokus When to code these events? Load: to initialize form before user's sees it for the first time Closing: to ask user to save changes before form is closed Closed: to save any data on the form before form is closed Resize: to resize / rearrange controls on form in response to user changing the form's size Click: right-button click to display context-sensitive popup menu KeyPress: implement keyboard shortcuts without having to use menus Denmark .NET Workshop © 2003 Joe Hummel

Eksempel Spørg brugeren før formen lukkes: 5. WinForms January 2003 Spørg brugeren før formen lukkes: private void Form1_Closing(object sender, System.ComponentModel.CancelEventArgs e) { DialogResult r; r = MessageBox.Show("Do you really want to close?", "MyApp", MessageBoxButtons.YesNo, MessageBoxIcon.Question, MessageBoxDefaultButton.Button1); if (r == DialogResult.No) e.Cancel = true; } If the form being closed is the main form (i.e. the first form shown when app starts), then the Closing event represents the closing of the application. Denmark .NET Workshop © 2003 Joe Hummel

Part 4 Controls…

Controls Brugerinterfaceobjekter på formen: labels buttons text boxes 5. WinForms January 2003 Brugerinterfaceobjekter på formen: labels buttons text boxes menus list & combo boxes option buttons check boxes etc. For a basic list, see your toolbox. There are many more "advanced" controls that you can work with; right-click on toolbox, and select "Customize Toolbox…". Denmark .NET Workshop © 2003 Joe Hummel

Abstraction Som forms, er controls baseret på klasser i FCL: System.Windows.Forms.Label System.Windows.Forms.TextBox System.Windows.Forms.Button etc. Controls er objekter af disse klasser object object object object object object

Hvem opretter alle disse objekter? 5. WinForms January 2003 Hvem er ansvarlig for oprettelsen af control-objekter? koden auto-genereres af Visual Studio Efter formobjektet er oprettet oprettes control-objekterne… Obviously, don't modify the auto-generated code :-) Denmark .NET Workshop © 2003 Joe Hummel

Naming conventions Sæt dine controllers navne via Name property The Microsoft Naming Convention: cmdOK refererer til en command-knap lstNames refererer til en List Box Control txtFirstName refererer til en Textbox Control

Labels Til statisk visning af tekst bruges til at label andre ting på formen eller til visning af read-only resultater Interesting properties: Text: Det som brugeren ser Font: Hvordan brugeren ser det

Command-knapper Til at klikke på og derved få udført en handling Interessante properties: Text: Knaptekst Font: Hvordan knapteksten vises Enabled: Kan den klikkes på? AcceptButton: Sat til at klikke knappen på ENTER CancelButton: Sat til at klikke knappen på ESC Interessante events: Click: Når der trykkes på knappen

Text boxes Mest almindelige control! Til visning af text til data fra eksempelvis db Masser af features…

Text box properties Basale properties: Text: tekstboksens indhold (string) Modified: er teksten modificeret af brugeren? (boolean) ReadOnly: hvis brugeren ikke skal kunne modificere Multi-line text boxes? MultiLine: True tillader flere linier Lines: array of strings, en for hver linie i tekstboksen ScrollBars: none, horizontal, vertical eller både horiz. & vert. AcceptsReturn & AcceptsTab: skal brugeren kunne bruge tabulator og return

Text box methods Interessante metoder: Clear: fjern indholdet Cut, Copy, Paste: interaktion med clipboard’et Undo: undo sidste rettelse i tekstboksen Select, SelectAll: vælg noget af/alt indholdet

Text box hændelser Interesante hændelser: 5. WinForms January 2003 Interesante hændelser: Enter, Leave: forekommer, når fokus ændres KeyPress: forekommer når en ascii tast aktiveres KeyDown, KeyUp: forekommer ved alle taste kombinationer TextChanged: forekommer når teksten ændres Validating and Validated Validating giver dig mulighed for at afvise invalide input Denmark .NET Workshop © 2003 Joe Hummel

Eksempel: input invalidation Text boxe kræver ofte validering .NET tilbyder Validating event bliver trigget når box’en mister focus cmdOk.CausesValidation = True cmdCancel.CausesValidation = False private void txtName_Validating(object sender, System.ComponentModel.CancelEventArgs e) { if (this.textBox1.Text.Trim() == "") { // invalid input! MessageBox.Show("Please enter name or id..."); e.Cancel = true; // cancel returns focus back to text box }

Caveats Validating event’en har nogle “punkter"… Dels er den fejlbehæftet: hvis cancel knappen er sat til blive trigget af ESC, bliver den stadig valideret hvis brugeren klikker X for at lukke form’en, bliver den stadig valideret Dels, må boksen få fokus: hvad hvis brugeren trigger OK via Enter (default)? hvad hvis brugeren klikker OK før den får fokus?

Work-arounds… Skjul boksen Lad være med at sætte form’ens CancelButton property Sikre validation i OK knap: private void cmdOK_Click(object sender, System.EventArgs e) { foreach (Control c in this.Controls) if (c is TextBox) { // check for valid input... c.Focus(); // give control focus, then validate if (!this.Validate()) return; }

Radio buttons og Check boxes 5. WinForms January 2003 Tillader brugeren at vælge en eller flere options Radio buttons: brugeren kan kun vælge én (mutually-exclusive) Check boxes: brugeren kan vælge en eller flere (uafhængige) Properties & events: Checked: True hvis valgt, False hvis ikke CheckedChanged forekommer når "Checked" ændres Denmark .NET Workshop © 2003 Joe Hummel

Group boxes Visuel gruppering af controls 5. WinForms January 2003 Visuel gruppering af controls Tillader iteration gennem gruppens elementer… foreach (RadioButton rb in this.groupBox1.Controls) if (rb.Checked) MessageBox.Show(rb.Name); Denmark .NET Workshop © 2003 Joe Hummel

List Boxes God til at vise /vedligeholde en liste af data liste af strings liste af object (list box kalder selv ToString()) Customer[] customers; . . // create & fill array with objects... // display customers in list box foreach (Customer c in customers) this.listBox1.Items.Add(c); // display name of selected customer (if any) Customer c; c = (Customer) this.listBox1.SelectedItem; if (c == null) return; else MessageBox.Show(c.Name);

Advarsler Skriv ikke kode der afhænger af rækkefølgen af events… rækkefølgen er aldrig garanteret Hver event behandles uafhængigt af andre Noget kode trigger events bagved koden… en naturlig sideeffekt af event-drevet programmering this.textBox1.Text = "new value" // triggers TextChanged

Kun toppen af isbjerget… Menuer, dialoger, toolbars, etc. Tusinder af andre controls .NET and ActiveX højreklik på Toolbox "Customize Toolbox"

Opsamling Event-drevet programmering er meget intuitivt i GUI apps 5. WinForms January 2003 Event-drevet programmering er meget intuitivt i GUI apps Forms er det første skridt i GUI design hver form repræsenterer et vindue på skærmen Konstruktion af GUI foregår ved drag-and-drop Brugeren interagerer primært med formens control-objekter labels, text boxes, buttons, etc. GUI programmering er control programmering!!! Denmark .NET Workshop © 2003 Joe Hummel

Referencer Books: S. Lippman, "C# Primer" 5. WinForms January 2003 Books: S. Lippman, "C# Primer" R. Grimes, "Developing Applications with Visual Studio .NET" De bedste bøger om GUI er pt VB-baserede: J. Savage, "The VB.NET Coach" (introductory) F. Balena, "Programming Microsoft VB .NET (Core Reference)" (broad coverage, intermediate level) Denmark .NET Workshop © 2003 Joe Hummel