1

GUI Programmering i .NET

WinForms

2

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 programmeringVisual Studio .NETWinFormsControls

3

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…

GUI App

4

Eksempler på GUI-baserede events

Mouse moveMouse clickMouse double-clickKey pressButton clickMenu selectionChange in focusWindow activationetc.

5

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…

6

Call-backs

Events er et call fra et objekt back til os…Hvordan oprettes forbindelsen?

Visual Studio etablerer forbindelsen via auto-genereret kode

7

Visual Studio .NET

Ét IDE til alle former for .NET udviklingFra klassebiblioteker over form-baserede apps til web servicesDu kan bruge C#, VB, C++, J#, etc.

8

Grundlæggende Tilstande

Visual Studio opererer i 1 af 3 tilstande:1) Design2) Run3) Break

Se VS title bar hvis du er i tvivl…

design run

break

9

Eksempel: Et Windows-program

GUI apps baseres på forms og controls…En form repræsenterer et vindueEn form indeholder 0 eller flere controlsEn control interagerer med brugeren

Lad os implementere en GUI app trin for trin…

10

Trin 1 – Opret projekt i VS

Opret et nyt projekt af typen “Windows Forms Application”

VS opretter automatisk en form…

11

Trin 2 – GUI Design

Vælg de ønskede controls fra toolbox’en…Placér musen over toolbox for at se controlsDrag-and-drop til formenPlacér og tilpas størrelsen på dine controls

12

Trin 2 – GUI Design

En simpel regnemaskine:

Placér og konfigurer controlsKlik for at vælgeSæt properties via Properties-vinduet

13

Trin 3 - Koden

Implementer formens “Code behind”…Dobbeltklik på den control du vil implementere

Kodevinduet popper automatisk frem

14

Trin 4 – Kør!

Tryk F5 for at kompilere koden og starte programmet

15

Break mode?

Igangsættes beregningen med forkert indtastning…

16

Arbejde med Visual Studio

I Visual Studio arbejder vi med source files, projects & solutions

Source files indeholder kodeExtension .cs, .vb, etc.

Et projekt repræsenterer 1 assemblyBruges af VS til at holde styr på source filesAlle source files skal skrives i samme sprogExtension .csproj, .vbproj, etc.

Solution (*.sln) files holder styr på projekterSå man kan arbejde med flere projekter

17

WinForms

Et andet navn for traditionelle, Windows-agtige GUI-applikationer

I modsætning til WebForms, som er web-baserede

Implementeres vha. FCLDvs. portabelt til enhver .NET platform

18

Abstraktion

FCL fungerer som abstraktionAdskiller WinForm app fra den underlæggende platform

System.Windows.Forms.Form

CLR

Windows OS

instance of

FCL classobject

19

Form Properties

Form properties styrer formens visuelle fremtræden:

AutoScrollBackgroundImageControlBoxFormBorderStyle (sizable?)IconLocationSizeStartPositionText (fx window's caption)WindowState (minimized, maximized, normal)

Form1 form;form = new Form1();form.WindowState = FormWindowState.Maximized;form.Show();

20

Form Metoder

Actions der kan udføres på en form:

Activate: Giv denne form fokusClose: Luk & frigør tilknyttede ressourcerHide: Gem, men hold fast i ressourcerne til senere visning. Refresh: RedrawShow: Gør formen synlig på skærmen &

activate

form.Hide(); . . .form.Show();

21

Form Events

Events der kan reageres på:Find properties-vinduetDobbeltklik på event-navnet

Load: lige før formen vises første gangClosing: når formen lukkes (mulighed for cancel)Closed: når formen helt sikkert lukkesResize: når brugerer ændrer på formstørrelsenClick: når brugeren klikker på formens baggrundKeyPress: når brugeren trykker en tast mens formen har fokus

22

Eksempel

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

23

Controls

Brugerinterface-objekter på formen:

LabelsButtonsText boxesMenusList & combo boxesOption buttonsCheck boxesEtc.

24

Abstraktion

Forms, er controls baseret på klasser i FCL:System.Windows.Forms.LabelSystem.Windows.Forms.TextBoxSystem.Windows.Forms.Buttonetc.

Controls er objekter af disse klasser

object

object

object

object

object

object

25

Hvem opretter alle disse objekter?

Hvem er ansvarlig for oprettelsen af control-objekter?

Koden auto-genereres af Visual StudioEfter form-objektet er oprettet oprettes control-objekterne…

26

Naming Conventions

Sæt dine controllers navne via Name propertyThe Microsoft Naming Convention:cmdOK refererer til en command-knaplstNames refererer til en List Box ControltxtFirstName refererer til en Textbox Control

27

Labels

Til statisk visning af tekstBruges til at label andre ting på formenEller til visning af read-only resultater

Interessante properties:Text: Det som brugeren serFont: Hvordan brugeren ser det

28

Command-knapper

Til at klikke på og derved få udført en handling

Interessante properties:Text: KnaptekstFont: Hvordan knapteksten visesEnabled: Kan den klikkes på?

AcceptButton: Sat til at klikke knappen på ENTERCancelButton: Sat til at klikke knappen på ESC

Interessante events:Click: Når der trykkes på knappen

29

Tekstfelter

Mest almindelige control!Til visning af tekstTil data fra eksempelvis database

Masser af features…

30

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 linierLines: array of strings, en for hver linie i tekstboksenScrollBars: none, horizontal, vertical, horiz. + vert.

AcceptsReturn & AcceptsTab: skal brugeren kunne bruge tabulator og return

31

Text box methods

Interessante metoder:Clear: fjern indholdetCut, Copy, Paste: interaktion med clipboard’etUndo: undo sidste rettelse i tekstboksenSelect, SelectAll: vælg noget af/alt indholdet

32

Text Box Events

Interesante eventsEnter, Leave: forekommer, når fokus ændresKeyPress: forekommer når en ascii tast aktiveresKeyDown, KeyUp: forekommer ved alle taste kombinationerTextChanged: forekommer når teksten ændres

Validating and ValidatedValidating giver dig mulighed for at afvise invalide input

33

Eksempel: Input Validering

Text boxe kræver ofte validering.NET tilbyder Validating eventBliver sendt når box’en mister focus

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

34

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 ikkeCheckedChanged forekommer når "Checked" ændres

35

Group Boxes

Visuel gruppering af controlsTillader iteration gennem gruppens elementer…

foreach (RadioButton rb in this.groupBox1.Controls) if (rb.Checked) MessageBox.Show(rb.Name);

36

List Boxes

God til at vise/vedligeholde en liste af dataListe af stringsListe af objects (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);

37

Advarsel!

1. Skriv ikke kode der afhænger af rækkefølgen af events…

Rækkefølgen er aldrig garanteretHver event behandles uafhængigt af andre

2. Noget kode trigger events bagved koden…En naturlig bivirkning af event-drevet programmering

this.textBox1.Text = "new value" // triggers TextChanged

38

Kun toppen af isbjerget…

Menuer, dialoger, toolbars, etc.

Tusinder af andre controls.NET and ActiveXHøjreklik på Toolbox"Customize Toolbox"

39

Opsamling

Event-drevet programmering er meget intuitivt i GUI apps

Forms er det første skridt i GUI designHver form repræsenterer et vindue på skærmenKonstruktion 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!!!