1 GUI Programmering i.NET WinForms

Mål “.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 2

Event-drevet, code-behind programmering 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… 3 GUI App

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

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

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

Visual Studio.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. 7

Grundlæggende Tilstande Visual Studio opererer i 1 af 3 tilstande: 1)Design 2)Run 3)Break Se VS title bar hvis du er i tvivl… 8 designrun break

Eksempel: Et Windows-program 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 trin for trin… 9

Trin 1 – Opret projekt i VS Opret et nyt projekt af typen “Windows Forms Application” VS opretter automatisk en form… 10

Trin 2 – GUI Design Vælg de ønskede controls fra toolbox’en… Placér musen over toolbox for at se controls Drag-and-drop til formen Placér og tilpas størrelsen på dine controls 11

Trin 2 – GUI Design En simpel regnemaskine: Placér og konfigurer controls Klik for at vælge Sæt properties via Properties-vinduet 12

Trin 3 - Koden Implementer formens “Code behind”… Dobbeltklik på den control du vil implementere Kodevinduet popper automatisk frem 13

Trin 4 – Kør! Tryk F5 for at kompilere koden og starte programmet 14

Break mode? Igangsættes beregningen med forkert indtastning… 15

Arbejde med Visual Studio 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 16

WinForms Et andet navn for traditionelle, Windows-agtige GUI-applikationer I modsætning til WebForms, som er web-baserede Implementeres vha. FCL Dvs. portabelt til enhver.NET platform 17

Abstraktion FCL fungerer som abstraktion Adskiller WinForm app fra den underlæggende platform 18 System.Windows.Forms.Form CLR Windows OS instance of FCL class object

Form Properties Form properties styrer formens visuelle fremtræden: AutoScroll BackgroundImage ControlBox FormBorderStyle (sizable?) Icon Location Size StartPosition Text (fx window's caption) WindowState (minimized, maximized, normal) 19 Form1 form; form = new Form1(); form.WindowState = FormWindowState.Maximized; form.Show(); Form1 form; form = new Form1(); form.WindowState = FormWindowState.Maximized; form.Show();

Form Metoder 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 20 form.Hide();. form.Show(); form.Hide();. form.Show();

Form Events Events der kan reageres på: Find properties-vinduet 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 21

Eksempel Spørg brugeren før formen lukkes: 22 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; } 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; }

Controls Brugerinterface-objekter på formen: Labels Buttons Text boxes Menus List & combo boxes Option buttons Check boxes Etc. 23

Abstraktion 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 24 object

Hvem opretter alle disse objekter? Hvem er ansvarlig for oprettelsen af control- objekter? Koden auto-genereres af Visual Studio Efter form-objektet er oprettet oprettes control- objekterne… 25

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 26

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

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 28

Tekstfelter Mest almindelige control! Til visning af tekst Til data fra eksempelvis database Masser af features… 29

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, horiz. + vert. AcceptsReturn & AcceptsTab : skal brugeren kunne bruge tabulator og return 30

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 31

Text Box Events Interesante events 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 32

Eksempel: Input Validering Text boxe kræver ofte validering.NET tilbyder Validating event Bliver sendt når box’en mister focus 33 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 } 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 } cmdOk.CausesValidation = True cmdCancel.CausesValidation = False

Radio Buttons og Check Boxes 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 34

Group Boxes Visuel gruppering af controls Tillader iteration gennem gruppens elementer… 35 foreach (RadioButton rb in this.groupBox1.Controls) if (rb.Checked) MessageBox.Show(rb.Name); foreach (RadioButton rb in this.groupBox1.Controls) if (rb.Checked) MessageBox.Show(rb.Name);

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

Advarsel! 1.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 2.Noget kode trigger events bagved koden… En naturlig bivirkning af event-drevet programmering 37 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" 38

Opsamling 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!!! 39