Den grundlæggende interface til de fleste vinduede programmer , en grafisk brugergrænseflade (eller GUI ) gør det muligt for brugerne at arbejde med og manipulere en ansøgning fra en visuel grænseflade med et input-enhed , såsom en mus eller touchscreen . GUIs er event-driven - med andre ord , de kun handle som svar på en bruger kommando. Opdeling din kode i en visning og controller vil hjælpe dig med at visualisere hver fase af GUI design. Synspunkter og controllere

Først bør du tænke på de data, du ønsker at præsentere for brugeren, og hvordan de vil manipulere det . For eksempel er det GUI i et tekstbehandlingsprogram præsenterer dokumentet , og brugeren interagerer med den ved at skrive bogstaver og vælge kommandoer fra en menu . Du kan få brug ekstra vinduer for at redigere undersektioner i dokumentet såsom billeder eller regneark . Det hjælper til at skitsere et diagram adskille de forskellige måder brugeren kan se og manipulere data , herunder en liste over de grundlæggende handlinger, som brugeren kan tage.
Definition Handlinger

Efter du har overvejet de måder brugerne vil interagere med dit program , skal du definere de kommandoer, de vil bruge til at udføre handlingen. Mange GUIs definere flere måder at udføre den samme handling . For eksempel , at oprette en ny fil i nogle programmer en bruger har valget for at klikke på en knap , gå til hovedmenuen og vælge handling eller ved hjælp af en tastaturgenvej. En ansøgning skabt til en enhed, såsom en smartphone kan have endnu flere muligheder, såsom en stemmekommando eller en touchscreen handling. For hver aktion , en liste over genvejen og kommandoer, der bruges til at udføre det.
Definerende begivenheder

Kommandoer er udløst af begivenhederne . Typisk er disse hændelser genereres fra input-enheder , såsom en computer mus , tastatur eller touchscreen . Når brugeren klikker på en museknap , for eksempel, genererer det et to begivenheder : et " mus ned" , når der trykkes på knappen og en " mus op" begivenhed, når knappen slippes . Kombinere disse lavniveau- begivenheder danner en enkelt højniveaumøde kaldet " musen nede " eller " mus klikkede . " For hver af dine kommandoer , skal du definere de tilknyttede begivenheder.
Kontrol flow diagram

Når du har defineret de begivenheder, du vil bruge , skal du oprette en kontrol flow diagram til at modellere det fulde spektrum af brugerens input til en bestemt kommando eller subinterface . Som GUI modtager begivenheder , vil det ændre stater. For eksempel, når en bruger klikker på menuen vil programmet skifte fra en " klar " tilstand til en "åben menu " tilstand , visning af menuen til brugeren. I en kontrolgruppe flowdiagram , er staterne kasserne i diagrammet, og begivenhederne er pilene.
Integration GUI komponenter

Det sidste trin er at overveje, hvilke komponenter at bruge i din GUI. En komponent er et enkelt GUI element, såsom en knap , vindue eller scrollbar . Et layout organiserer disse komponenter i et hierarki : for eksempel indeholder hovedvinduet et panel , som indeholder flere knapper , og så videre. For hvert højniveaumøde du har, såsom at klikke på en knap , skal du designe den tilsvarende komponent eller gennemføre en komponent fra en API . Denne fase er, hvor du laver dit design beslutninger, såsom det grundlæggende layout for paneler og hele interfacet udseende og føler. Igen , brug en skitse til at visualisere det endelige design .