76 Tkinteri kasutajaliidese planeerimine

Kasutajaliidese planeerimine

Elemente sellele kasutajaliidesele saab paigutada nii meetodiga place() kui ka grid(). Järgnevalt vaatamegi mõlemat varianti.

Kasutajaliidese disainimine paigutusmeetodiga place

  • Funktsioon ttk.Entry loob ühe tekstisisestuskasti (vidina teksti sisestamiseks):

Funktsiooni esimese argumendiga näitame, et me soovime seda silti kasutada loodud raamis. Käsk place(…) paigutab loodud tekstisisestuskasti soovitud koordinaatidele (ühikuteks on pikslid, punkt (0,0) paikneb akna sisuosa ülemises vasakus nurgas ning koordinaadid kasvavad paremale/alla liikudes).

Joonis 1. Koordinaadid aknas

  • Järgmises plokis loome ja seame paika tekstisildid (ttk.Label), mis on vidiad teksti näitamiseks. Nende paigutamisel näitame ära ka soovitud laiuse. Sarnaselt tekstisisestuskastile kasutatakse ka siin vidinate koordinaatidega raami asetamist.
  • Kolmanda komponendina lisatakse koordinaatide abiga ekraanile ka nupp (ttk.Button), millel kuvatakse ka tekst “Arvuta!”.

Lisaks on programmis read, mis olid juba eelmise osa näidetes ja on üldjuhul olemas igas Tkinteri programmis. Programmi sisuline olemus sõltub sellest, milliseid vidinaid aknasse paigutatakse ning kuidas kasutaja tegevustele reageeritakse. Võimalike vidinate valimiseks võid uurida lehekülge aadressil http://www.tkdocs.com/tutorial/widgets.html.

Programmi näide kasutades paigutusmeetodit place näeks välja selline:

from tkinter import *            # tkinteri põhivahendid
from tkinter import ttk          # platvormi ühise stiili saamiseks
raam = Tk()
raam.title("Meetrite teisendamine")
raam.geometry("300x150")

ttk.Entry(raam, width = 7).place(x = 100, y = 0)

ttk.Label(raam).place(x = 200, y = 50)
ttk.Button(raam, text="Arvuta!").place(x = 200, y = 100)

ttk.Label(raam, text="meetrit").place(x = 200, y = 0)
ttk.Label(raam, text="on võrdne").place(x = 0, y = 50)
ttk.Label(raam, text="kilomeetriga.").place(x = 200, y = 50)

raam.mainloop()

Tulemus peaks olema selline:

PS! Selles programmis pole nupu funktsionaalsust veel programmeeritud! Nupule funktsionaalsuse lisamist ja kasutajaliidese väljanägemise kohendamist vaatame järgmises osas.

Kasutajaliidese disainimine paigutusmeetodiga grid

Eelmist näiteprogrammi käivitades ei pruugi olla kõige mugavam vidinaid paigutada koordinaatide abil sest paigutuse muutmiseks tuleb pidevalt arvutada etteantud koordinaate ja komponentide mõõtmeid. Lisaks sellele on pikselhaaval timmimine tänamatu töö, kuna mõnes teises operatsioonisüsteemis (või teistsuguste seadetega arvutis) ei pruugi paigutus samasugune välja näha.

Vidinate paigutust on võimalik muuta üldisemalt kui pikslite tasemel, lubades Tkinteril valida vastavalt olukorrale kõige parema konkreetse paigutuse. Järgnevas programmis on vidinate paigutamiseks kasutatud meetodi place asemel meetodit grid, mis jagab kasutajaliidese mõtteliselt ruudustikuks ning paigutab iga vidina soovitud lahtrisse vastavalt argumentidele column ja row.

Selleks tuleks planeerida kasutajaliidese disain kasutades nn ruudustikulist disaini, kus elemendid paigutuksid ruudustikku järgnevalt:

Pane tähele, et:

  • esimesel real on tekstisisestuskast (2. veerus) ja tekstisilt (3. veerus),
  • teisel real on kolm tekstisilti (1., 2. ja 3. veerus) ja
  • kolmandal real on nupp (3. veerus)

Selle programmi näide kasutades grid paigutusmeetodit näeks välja selline

from tkinter import *            # tkinteri põhivahendid
from tkinter import ttk          # platvormi ühise stiili saamiseks
raam = Tk()
raam.title("Meetrite teisendamine")

ttk.Entry(raam, width=7).grid(column=2, row=1)

ttk.Label(raam).grid(column=2, row=2)
ttk.Button(raam, text="Arvuta!").grid(column=3, row=3)

ttk.Label(raam, text="meetrit").grid(column=3, row=1)
ttk.Label(raam, text="on võrdne").grid(column=1, row=2)
ttk.Label(raam, text="kilomeetriga.").grid(column=3, row=2)

raam.mainloop()

Tulemus peaks olema selline:

PS! Selles programmis pole nupu funktsionaalsust veel programmeeritud! Nupule funktsionaalsuse lisamist ja kasutajaliidese väljanägemise kohendamist vaatame järgmises osas.

Lisaks meetoditele place ja grid võib kohata veel paigutusmeetodit pack. Rohkem infot saab siit: http://www.tkdocs.com/tutorial/concepts.html#geometry.

Litsents

Icon for the Creative Commons Attribution 4.0 International License

Tarkvaraarendus. 2. trükk on loodud Eno Tõnisson, Tauno Palts, Kaarel Tõnisson, Heidi Meier, Merilin Säde, ja Säde Mai Krusberg jt poolt Creative Commons Attribution 4.0 International License litsentsi alusel, kui pole teisiti märgitud.

Jaga seda raamatut