WinForms: GUI Programmering i .NET

Præsentationer af emnet: "WinForms: GUI Programmering i .NET"— Præsentationens transcript:

1 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

2 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

3 Del 1 Event-drevet, code-behind programmering…

4 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

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

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

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

8 Del 2 Visual Studio .NET…

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

10 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

11 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

12 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

13 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

14 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

15 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

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

17 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

18 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

19 Del 3 WinForms…

20 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

21 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

22 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

23 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

24 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

25 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

26 Part 4 Controls…

27 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

28 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

29 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

30 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

31 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

32 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

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

34 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

35 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

36 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

37 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 }

38 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?

39 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; }

40 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

41 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

42 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);

43 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

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

45 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

46 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