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

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

2. SUČELJE Nekada, ne tako davno… • CLI (Command Line Interface) Danas • GUI (Graphical User Interface)

3. 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)

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

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

6. Grafičke kontrole • polje za unos • padajući izbornik • kvačica • grupa radiogumba • kliznik • gumb

7. “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”

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

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

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

11. (0, 0 ) Izrada grafičkih objekata: kreiranje određivanje svojstava

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

13. Nareba za brisanje prozora WINDOWDELETE :ime :ime – jedinstveno ime (može biti kratica ili mnemonik) prozora koji se želi izbrisati

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

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

16. Naredba za brisanje gumba BUTTONDELETE :ime :ime – ime gumba koji se želi obrisati

17. 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”.

18. Postavljanje gumba u prozor “roditelj” Algoritam • Napravi gumb “Zavrsi1” s natpisom “Zavrsi” na poziciji 0, 16, širine 100 i visine 56 koji prilikom pritiska briše prozor “Roditelj”. • 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

19. Postavljanje gumba u prozoru “djetetu” Algoritam • 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. • 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”. • 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”. Program TO POSTAVI_GUMBE_DIJETE BUTTONCREATE “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

20. Izmjena stanja srednjeg gumba u prozoru “djetetu” Algoritam • Provjeri PRETHODNO_STANJE • Ako je “true”, tada postavi stanje gumba “Izbrisi” na “false” i izvan funkcije vrati vrijednost “false”. • 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

21. Procedura za izradu prozora “djeteta” Algoritam • 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

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

23. Rad s vašim prvim programom s grafičkim kontrolama Nakon što programirate sve procedure te pokrenete onu naslovljenu GLAVNI, isprobajte funkcionalnost svojih gumba.