1.4. (a) izrada grafičkog sučelja
DESCRIPTION
1.4. (A) Izrada grafičkog sučelja. SUČELJE. Nekada, ne tako davno… CLI (Command Line Interface). Danas GUI ( G raphical U ser I nterface). Grafičko sučelje (GUI - graphical user interface). - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: 1.4. (A) Izrada grafičkog sučelja](https://reader033.vdocuments.site/reader033/viewer/2022061612/5681547d550346895dc2942f/html5/thumbnails/1.jpg)
1.4. (A) Izrada grafičkog sučelja
![Page 2: 1.4. (A) Izrada grafičkog sučelja](https://reader033.vdocuments.site/reader033/viewer/2022061612/5681547d550346895dc2942f/html5/thumbnails/2.jpg)
SUČELJE
Nekada, ne tako davno…
• CLI
(Command Line Interface)
Danas
• GUI
(Graphical User Interface)
![Page 3: 1.4. (A) Izrada grafičkog sučelja](https://reader033.vdocuments.site/reader033/viewer/2022061612/5681547d550346895dc2942f/html5/thumbnails/3.jpg)
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)
![Page 4: 1.4. (A) Izrada grafičkog sučelja](https://reader033.vdocuments.site/reader033/viewer/2022061612/5681547d550346895dc2942f/html5/thumbnails/4.jpg)
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
![Page 5: 1.4. (A) Izrada grafičkog sučelja](https://reader033.vdocuments.site/reader033/viewer/2022061612/5681547d550346895dc2942f/html5/thumbnails/5.jpg)
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
![Page 6: 1.4. (A) Izrada grafičkog sučelja](https://reader033.vdocuments.site/reader033/viewer/2022061612/5681547d550346895dc2942f/html5/thumbnails/6.jpg)
Grafičke kontrole
• polje za unos
• padajući izbornik
• kvačica
• grupa radiogumba
• kliznik
• gumb
![Page 7: 1.4. (A) Izrada grafičkog sučelja](https://reader033.vdocuments.site/reader033/viewer/2022061612/5681547d550346895dc2942f/html5/thumbnails/7.jpg)
“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”
![Page 8: 1.4. (A) Izrada grafičkog sučelja](https://reader033.vdocuments.site/reader033/viewer/2022061612/5681547d550346895dc2942f/html5/thumbnails/8.jpg)
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
![Page 9: 1.4. (A) Izrada grafičkog sučelja](https://reader033.vdocuments.site/reader033/viewer/2022061612/5681547d550346895dc2942f/html5/thumbnails/9.jpg)
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”)
![Page 10: 1.4. (A) Izrada grafičkog sučelja](https://reader033.vdocuments.site/reader033/viewer/2022061612/5681547d550346895dc2942f/html5/thumbnails/10.jpg)
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
![Page 11: 1.4. (A) Izrada grafičkog sučelja](https://reader033.vdocuments.site/reader033/viewer/2022061612/5681547d550346895dc2942f/html5/thumbnails/11.jpg)
Izrada grafičkih objekata:• kreiranje• određivanje svojstava
(0, 0 )
![Page 12: 1.4. (A) Izrada grafičkog sučelja](https://reader033.vdocuments.site/reader033/viewer/2022061612/5681547d550346895dc2942f/html5/thumbnails/12.jpg)
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
![Page 13: 1.4. (A) Izrada grafičkog sučelja](https://reader033.vdocuments.site/reader033/viewer/2022061612/5681547d550346895dc2942f/html5/thumbnails/13.jpg)
Nareba za brisanje prozora
WINDOWDELETE :ime
:ime – jedinstveno ime (može biti kratica ili mnemonik) prozora koji se želi izbrisati
![Page 14: 1.4. (A) Izrada grafičkog sučelja](https://reader033.vdocuments.site/reader033/viewer/2022061612/5681547d550346895dc2942f/html5/thumbnails/14.jpg)
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
![Page 15: 1.4. (A) Izrada grafičkog sučelja](https://reader033.vdocuments.site/reader033/viewer/2022061612/5681547d550346895dc2942f/html5/thumbnails/15.jpg)
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
![Page 16: 1.4. (A) Izrada grafičkog sučelja](https://reader033.vdocuments.site/reader033/viewer/2022061612/5681547d550346895dc2942f/html5/thumbnails/16.jpg)
Naredba za brisanje gumba
BUTTONDELETE :ime
:ime – ime gumba koji se želi obrisati
![Page 17: 1.4. (A) Izrada grafičkog sučelja](https://reader033.vdocuments.site/reader033/viewer/2022061612/5681547d550346895dc2942f/html5/thumbnails/17.jpg)
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”.
![Page 18: 1.4. (A) Izrada grafičkog sučelja](https://reader033.vdocuments.site/reader033/viewer/2022061612/5681547d550346895dc2942f/html5/thumbnails/18.jpg)
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
![Page 19: 1.4. (A) Izrada grafičkog sučelja](https://reader033.vdocuments.site/reader033/viewer/2022061612/5681547d550346895dc2942f/html5/thumbnails/19.jpg)
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
![Page 20: 1.4. (A) Izrada grafičkog sučelja](https://reader033.vdocuments.site/reader033/viewer/2022061612/5681547d550346895dc2942f/html5/thumbnails/20.jpg)
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
![Page 21: 1.4. (A) Izrada grafičkog sučelja](https://reader033.vdocuments.site/reader033/viewer/2022061612/5681547d550346895dc2942f/html5/thumbnails/21.jpg)
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
![Page 22: 1.4. (A) Izrada grafičkog sučelja](https://reader033.vdocuments.site/reader033/viewer/2022061612/5681547d550346895dc2942f/html5/thumbnails/22.jpg)
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
![Page 23: 1.4. (A) Izrada grafičkog sučelja](https://reader033.vdocuments.site/reader033/viewer/2022061612/5681547d550346895dc2942f/html5/thumbnails/23.jpg)
Rad s vašim prvim programom s grafičkim kontrolama
Nakon što programirate sve procedure te pokrenete onu naslovljenu GLAVNI, isprobajte funkcionalnost svojih gumba.