1.4. (A) Izrada grafičkog sučelja

1.4. (A) Izrada grafičkog sučelja

SUČELJE

Nekada, ne tako davno…

• CLI

(Command Line Interface)

Danas

• GUI

(Graphical User Interface)

Grafičko sučelje(GUI - graphical user interface)

• način komunikacije čovjeka s računalom kroz upotrebu grafičkih elemenata i dodataka uz pomoć tekstualnih poruka i obavijesti, i to:

ikona (sličice na desktopu, tj. pozadini)

prozora

gumbi s tekstom i/ili slikama

okviri za unos teksta

kvadratići za odabir i tipa (moguće je odabrati više kvadratića - eng. check box)

kružići za odabir ili tipa (moguće je odabrati samo jedan kružić - eng. radio button)

Grafičko sučelje

- skup grafičkih kontrola - služe za intuitivnu, jasnu i preglednu interakciju sa živim korisnikom

– unos podataka u računalo (posredstvom “kvalitativnih” mjera, poput povlačenja kliznih grafičkih naredaba ili odabira radiogumba)

– ispis podataka (kvačice koje se u zavisnosti od rada programa postavljaju u zakvačeno ili prazno stanje)

- grafičke kontrole - dijelovi prikaza na zaslonu monitora koji služe za interakciju s korisnikom, mijenjaju svoj izgled te utječu na izmjenu vrijednosti nepoznanica ili funkcionalnost programa

Prozor

- u većini modernih operacijskih sustava osnovni i najjednostavniji element grafičkog sučelja- Microsoft Windows- X-Term grafičko sučelje za

Linux sustav- KDE grafičko sučelje za

Linux sustav- G-NOME grafičko sučelje

za Linux sustav- MacOS- Solaris

Grafičke kontrole

• polje za unos

• padajući izbornik

• kvačica

• grupa radiogumba

• kliznik

• gumb

“Roditelj” – “dijete” organizacija prozora i grafičkih kontrola

- svaki prozor koji se nalazi na zaslonu monitora, “dijete” je nekog drugog prozora

- to je onaj prozor koji prikazuje ili nudi mogućnost izmjene informacija koje su “nadređene” ili opširnije, općenitije od informacija prikazane u prozoru “ djetetu “

- “dijete” prozori najčešće se pojavljuju kao posljedica interakcije s nekom grafičkom kontrolom iz prozora “roditelja” (primjerice, pritiskom gumba)

- prozori koji naizgled nisu “dijete” nijednog prozora (npr. osnovni prozor neke aplikacije) “dijete“su nepostojećeg, zamišljenog prozora koji sadrži sve što se vidi na zaslonu monitora, a koji se zove “korijen” ili “root”

Vrste prozora:

1. Prozor RODITELJ (parent)

- prozor iz kojeg se otvara trenutačni

prozor

2. Prozor DIJETE (child)

- prozor ili prozori koji nastaju interakcijom s grafičkim naredbama

u trenutačnom prozoru

Modalitet odnosa “roditelj” - “dijete”

- prozor ”dijete” može prema “roditelju” biti:• modalan• nemodalan (bez modaliteta)

- ako je prozor “dijete” modalan, tada je interakcija s prozorom “roditeljem” onemogućena

- “roditelj” je prikazan u pozadini u bojama koje su karakteristične za onemogućene grafičke kontrole, “zasivljen”

- “roditelj” se ponovno aktivira kada se zatvori “dijete”

- ako je prozor “dijete” bez modaliteta, tada je interakcija s prozorom “roditeljem” moguća

- ” roditelj” se može aktivirati pritiskom miša na bilo koji dio prozora (ako je potrebno, prozor “dijete” pomaknuti na zaslonu tako da ne zaklanja pogled na prozor “roditelj”)

Naredbe za rad s grafičkim elementima:

• WINDOWCREATE – stvaranje novog prozora• WINDOWDELETE – brisanje prozora• BUTTONCREATE – stvaranje gumba• BUTTONDELETE – brisanje gumba• BUTTONENABLE – postavljanje stanja gumba;

omogućeno ili onemogućeno• BUTTONUPDATE – izmjena natpisa na gumbu

Izrada grafičkih objekata:• kreiranje• određivanje svojstava

(0, 0 )

Naredba za prikaz novog prozora

WINDOWCREATE :roditelj :ime :natpis :x :y :vis :sir :lista_naredbi

:roditelj – ime roditelja; ako se želi stvoriti osnovni prozor, upisuje se “root

:ime – jedinstveno ime prozora koji se stvara; :natpis – znakovni niz ili lista riječi koje se postavljaju u traku imena

prozora:x i :y – koordinate gornjega lijevog kuta prozora u koordinatnom

sustavu desno-dolje vezanom za gornji lijevi kut zaslona monitora

:vis i :sir – visina i širina prozora na zaslonu:lista_naredbi – lista naredaba koje se vrše neposredno prije

iscrtavanja prozora- mogu biti neke naredbe od kojih zavisi grafički izgled prozora ili naredbe

za iscrtavanje nekih grafičkih kontrola u inače praznom prozoru

Nareba za brisanje prozora

WINDOWDELETE :ime

:ime – jedinstveno ime (može biti kratica ili mnemonik) prozora koji se želi izbrisati

Naredba za stvaranje grafičke kontrole tipa gumba

BUTTONCREATE :prozor :ime :natpis :x :y :sir :vis :lista_naredbi

:prozor – ime (ne naslov) prozora u koji se želi smjestiti gumb:ime – jedinstveno ime (može biti skraćenica ili mnemonik) gumba:natpis – natpis koji se želi napisati na gumb da bi se znalo što se radi:x i :y – koordinate gornjeg lijevog kuta gumba (desno-dolje u odnosu

na gornji lijevi kut prozora) u koji se gumb želi smjestiti:sir i :vis – širina i visina gumba u pikselima:lista_naredbi – lista naredaba koje se vrše kada se gumb pritisne

Naredba za postavljanje statusa gumba (omogućivanje -

onemogućivanje)

BUTTONENABLE :ime :stanje

:ime – ime gumba koji se želi omogućiti ili onemogućiti

:stanje – “true ako se gumb želi postaviti u omogućeno stanje ili “false ako se želi postaviti u onemogućeno

Naredba za brisanje gumba

BUTTONDELETE :ime

:ime – ime gumba koji se želi obrisati

Projekt

Napravit ćemo prozor koji će u sebi imati dva gumba - gornji i donji. Gornjim gumbom “Završi” prozor će se izbrisati (i čitav program završiti). Donji gumb “Dijete” služit će za otvaranje prozora “djeteta”.

U prozoru “djetetu” bit će tri gumba složena vodoravno.

Krajnjim lijevim gumbom, kojemu će se natpis mijenjati između inačica “Onemogući srednji” i “Omogući srednji”, naizmjence će se (sukladno natpisu) omogućivati i onemogućivati srednji gumb.

Srednji gumb služit će kako bi se izbrisao krajnji lijevi gumb te će imati natpis “Izbriši”.

Krajnji desni gumb “Završi” služit će za brisanje prozora “djeteta”.

Postavljanje gumba u prozor “roditelj”

Algoritam

1. Napravi gumb “Zavrsi1” s natpisom “Zavrsi” na poziciji 0, 16, širine 100 i visine 56 koji prilikom pritiska briše prozor “Roditelj”.

2. Napravi gumb “Stvori dijete” s natpisom “Dijete” na poziciji 0, 76, širine 100 i visine 56 koji prilikom pritiska pokreće proceduru STVORI_DIJETE.

Program

TO POSTAVI_GUMBE_RODITELJ

BUTTONCREATE “Roditelj “Zavrsi “Zavrsi 0 16 100 56 [WINDOWDELETE “Roditelj]

BUTTONCREATE “Roditelj “Dijete “Dijete 0 76 100 56 [STVORI_DIJETE]

END

Postavljanje gumba u prozoru “djetetu”

Algoritam1. Napravi gumb “Omoguci” u prozoru

“Dijete” s natpisom “Omoguci lijevi” na položaju 0, 16, širine 40 i visine 32 koji prilikom pritiska rezultat funkcije IZMIJENI_SREDNJI, kojoj je ulazna vrijednost STANJE_SREDNJEG, sprema u nepoznanicu STANJE_SREDNJEG.

2. Napravi gumb “Izbrisi” u prozoru “Dijete” s istovjetnim natpisom na položaju 47, 16, širine 40 i visine 32 koji kod pritiska briše gumb “Omoguci”.

3. Napravi gumb “Zavrsi2” u prozoru “Dijete” s natpisom “Zavrsi” na položaju 94, 16, širine 40 i visine 32 koji kod pritiska briše prozor “Dijete”.

ProgramTO POSTAVI_GUMBE_DIJETEBUTTONCREATE “Dijete “Omoguci

“Omoguci 0 16 40 32 [ MAKE “STANJE_SREDNJEG IZMJENI_SREDNJI :STANJE_SREDNJEG ]

BUTTONCREATE “Dijete “Izbrisi “Izbrisi 47 16 40 32 [BUTTONDELETE “Omoguci ]

BUTTONCREATE “Dijete “Zavrsi “Zavrsi 94 16 40 32 [WINDOWDELETE “Dijete]

END

Izmjena stanja srednjeg gumba u prozoru “djetetu”

Algoritam

1. Provjeri PRETHODNO_STANJE

2. Ako je “true”, tada postavi stanje gumba “Izbrisi” na “false” i izvan funkcije vrati vrijednost “false”.

3. Ako je “false”, tada postavi stanje gumba “Izbrisi” na “true” i izvan funkcije vrati vrijednost “true”.

Program

TO IZMJENI_SREDNJI :PRETHODNO_STANJE

TEST :PRETHODNO_STANJE=“true

IFTRUE [

BUTTONENABLE “Izbrisi “false

OUTPUT “false ]

IFFALSE [

BUTTONENABLE “Izbrisi “true

OUTPUT “true ]

END

Procedura za izradu prozora “djeteta”

Algoritam

1. Stvori prozor kojemu je roditelj “Roditelj”, zove se “Dijete”, a naslov mu je “Dijete” na položaju 75, 75, širine 137 i visine 48, a koji u listi naredaba poziva naredbu za prvo dodjeljivanje vrijednosti nepoznanici STANJE_SREDNJEG i proceduru POSTAVI_GUMBE_DIJETE.

Program

TO STVORI_DIJETE

WINDOWCREATE “Roditelj “Dijete “Dijete 75 75 137 48 [

MAKE “STANJE_SREDNJEG “true

POSTAVI_GUMBE_DIJETE]

END

Glavni program – stvaranje prozora “Roditelj”

Algoritam

1. Napravi prozor kojemu je roditelj “root”, imena “Roditelj”, s naslovom “Roditelj” na položaju 30, 30, širine 103 i visine 128, koji u listi naredaba poziva proceduru POSTAVI_GUMBE_RODITELJ.

Program

TO GLAVNI

WINDOWCREATE “root “Roditelj “Roditelj 30 30 100 72 [POSTAVI_GUMBE_RODITELJ]

END

Rad s vašim prvim programom s grafičkim kontrolama

Nakon što programirate sve procedure te pokrenete onu naslovljenu GLAVNI, isprobajte funkcionalnost svojih gumba.