"Жоғарғы деңгейдегі бағдарлау тілдері" пәні бойынша "Графикалық интерфейсті құру" тақырыбында тәжірибелік тапсырма

Дәріс №10

Сабақтың тақырыбы: Графикалық интерфейсті құру

                                    1. Tkinter. Қосымша терезесін құру

2. Батырмалармен жұмыс

Бүгінгі таңда көптеген бағдарламалар консолге қарағанда интуитивті және ыңғайлы графикалық интерфейсті қолданады. Python бағдарламалау тілінің көмегімен графикалық бағдарламаларды жасауға болады. Ол үшін Python әдепкі бойынша арнайы құралдар жиынтығын қолданады - tkinter деп аталатын компоненттер жиынтығы.

Tkinter құралдар жинағы барлық қажетті графикалық компоненттері бар батырмалар, мәтіндік өрістер және т.б. бар жеке бекітілген модуль түрінде қол жетімді.

Графикалық бағдарламаларды құрудың негізгі сәті терезе жасау болып табылады. Содан кейін терезеге Графикалық интерфейстің барлық қалған компоненттері қосылады. Сондықтан алдымен қарапайым терезе жасаймыз. Бұл үшін келесі скриптті анықтаймыз:

Графикалық терезені құру үшін tkinter модулінде анықталған Tk () конструкторы қолданылады. Жасалған терезе root айнымалысына беріледі және осы айнымалы арқылы біз терезе атрибуттарын басқара аламыз. Атап айтқанда, title() әдісі арқылы терезенің тақырыбын орнатуға болады.

Geometry () әдісі арқылы - терезе өлшемі. Өлшемдерді geometry() әдісіне орнату үшін "ені x биіктік" пішіміндегі жол беріледі. Егер қолданба терезесін жасау кезінде geometry() әдісі шақырылмаса, терезе ішкі мазмұнды орналастыру үшін қажетті кеңістікті алады.

Терезені көрсету үшін, оны пайдаланушымен өзара іс-қимыл жасау үшін терезе оқиғаларын өңдеу циклін іске қосатын mainloop () әдісін шақыру керек.

Нәтижесінде скриптті іске қосу кезінде біз осындай бос терезені көреміз:

Терезенің бастапқы орны

Әдепкі бойынша, терезе экранның жоғарғы сол жақ бұрышына орналастырылады. Бірақ оның орнын geometry() әдісіне керекті мәндерді беру арқылы өзгерте аламыз:

Енді geometry әдісіндегі жол келесі форматқа ие: "ені x Биіктігі + координат X + координат Y". Яғни, іске қосылған кезде, терезе оңға 300 пиксельде және экранның жоғарғы сол жақ бұрышынан төмен 250 пиксельде болады.

Батырмалар

Tkinter тулкиті (құралдар жинағы) компоненттер немесе виджеттер жиынтығын қамтиды, олардың бірі батырма болып табылады. Терезеге батырманы қосыңыз:

Батырманы жасау үшін Button() конструкторы қолданылады. Осы конструкторда text параметрімен батырма мәтінін орнатуға болады.

Элементті көру үшін pack() әдісі бар. Нәтижесінде терезенің жоғарғы жағында батырма болады:

Әрбір виджет, оның ішінде батырма, оның визуализациясына әсер ететін және конструктор арқылы теңшей алатын бірқатар атрибуттар бар:

Pady, padx, font параметрлері сандық мәнді қабылдайды, ал background және foreground параметрлері он алтылық түс мәнін алады. Font параметрінде қаріп анықтамасы бар.

Button конструкторы келесі параметрлерді қабылдай алады:

Master параметрі ата-аналық контейнерге сілтеме жасайды. Жоғарыда келтірілген жағдайда, ол графикалық терезенің өзі болуы мүмкін, ал біз жаза аламыз:

Егер кодта бір терезе құрылса, онда батырма және кез келген басқа элемент әдепкі бойынша осы терезеде орналастырылады. Сондықтан бірінші параметрді жоғарыда көрсетілген мысалдағыдай  түсіре аламыз. Егер кодта бірнеше терезе пайда болса, онда біз Button конструкторына қажетті терезеге сілтемені жібере аламыз.

Options екінші параметрі біз олардың атымен орнатуға болатын нақты параметрлер жиынтығын білдіреді:

·                     activebackground: басылған кезде батырманың түсі

·                     activeforeground: басылған кезде батырманың мәтін түсі

·                     bd: жиектің қалыңдығы (әдепкі 2)

·                     bg/background: батырманың өң (фоновый) түсі

·                     fg/foreground: батырманың мәтінінің түсі

·                     font: мәтіннің қаріпі, мысалы, font= "Arial 14" - биіктігі 14px Arial қаріпі, немесе font=("Verdana", 13," bold") - биіктігі 13px Verdana қаріпі, қалың

·                     height: батырманың биіктігі

·                     highlightcolor: фокуста болған кезде батырманың түсі

·                     image: батырманың суреті

·                     justify: мәтіннің туралануын орнатады. LEFT мәтінді солға, CENTER - ортасына, RIGHT - оңға туралайды.

·                     padx: батырманың жиектерінен оңға және солға мәтінге шегіну

·                     pady: батырманың жиектерінен жоғарыға және астына мәтінге шегіну

·                     relief: шекараның түрін анықтайды, SUNKEN, RAISED, GROOVE, RIDGE мәндерін қабылдай алады

·                     state: батырманың күйін орнатады, DISABLED, ACTIVE, NORMAL мәндерін қабылдай алады

·                     text: батырманың мәтінін орнатады

·                     textvariable: StringVar элементімен байланысады

·                     underline: астындағы сызылған батырма мәтініндегі таңба нөмірін көрсетеді. Әдепкі мәні -1, яғни ешқандай таңба сызылмаған.

·                     width: батырманың ені

·                     wraplength: егер мән оң болса, мәтін жолдары батырмалар кеңістігіне сәйкес келеді

Батырмаға басуды өңдеу

Батырманы басуды өңдеу үшін, басқанда іске қосылатын функцияға сілтеме бере отырып, конструкторда command параметрін орнату қажет:

Мұнда click_button функциясы басу өңдегіші ретінде орнатылған. Бұл функция шертулер санын сақтайтын ғаламдық айнымалы шертулерді өзгертеді және оның мәні терезенің тақырыбында көрсетіледі. Осылайша, батырма басылған сайын, click_button функциясы жанып, шертулер саны артады:

Элементтер қасиеттерін өзгерту

Кейде мәтін сияқты батырмалар төлсипаттарын өзгерту қажет болуы мүмкін. Дегенмен, сол батырмада мәтінді өзгерту үшін ешқандай әдіс жоқ. Оны қалай өзгертуге болады деген сұрақ туындайды?

            Мәтінді өзгерту үшін StringVar аралық компонентін пайдалана аламыз. Бұл компонент жолға байланыстыруды жасауға мүмкіндік береді. Оның екі әдісі бар:

·                    get(): StringVar жолын қайтарады

·                    set(str): StringVar жолын орнатады

StringVar нысанының визуалды элементтің мәтінімен конструктордағы байланысы үшін textvariable параметрін орнату керек. Мысалы, батырманы басу арқылы оның мәтіні өзгертілсін:

Мұнда StringVar түрі бар buttonText айнымалысы құрылады. Ол үшін бастапқы мән белгіленеді, содан кейін btn айнымалы textvariable параметрі арқылы осы мәтінмен байланыстырылады. Нәтижесінде, батырманы басқан кезде оның мәтіні өзгереді.

StringVar компонентінен басқа, басқа мәліметтер типтері үшін ұқсас компоненттер қатары бар:

·                    IntVar

·                    Boolean Var

·                    Double Var

Мысалы, Біз IntVar айнымалысына байланыстырғышты орната аламыз және шерту санын шығара аламыз:

Config әдісі

Бірақ тек мәтінді ғана емес, батырманың немесе басқа компоненттің де басқа параметрлерін өзгерту қажет болса, әсіресе көмектесетін тағы бір әдіс бар. Бұл әдіс қалаған параметрі орнатылған config () әдісінің элементін шақырудан тұрады. Мысалы, біз сценарий кодын өзгерту арқылы config әдісін қолданамыз:

Элементті орналастыру

Pack әдісі

Терезеде элементтерді орналастыру үшін әртүрлі әдістер қолданылады, ал қарапайым әдіс - бұл элементке pack() әдісін шақыру. Бұл әдіс келесі параметрлерді алады:

·      expand: егер True мәнін қабылдаса, виджет бүкіл контейнер кеңістігін толтырады.

·      fill: виджеттің айналадағы бос кеңістікті толтыратындығын анықтайды. Бұл параметр келесі мәндерді қабылдауы мүмкін: NONE (элемент әдепкі бойынша созылмайды), X (элемент тек көлденеңінен созылған), Y (элемент тек тігінен созылады) және BOTH (элемент тігінен және көлденеңінен созылған).

·      side:виджетті контейнердің бір жағына туралайды. Ол келесі мәндерді қабылдауы мүмкін: TOP (әдепкі бойынша, контейнердің жоғарғы жағымен тураланады), BOTTOM (төменгі жағы бойынша туралау), LEFT (сол жағымен туралау), RIGHT (оң жағымен туралау).

Мысалы, біз expand және fill опцияларын пайдаланып, батырманы бүкіл пішінге созамыз:

Side параметрін қолданамыз:

Side және fill параметрлерін біріктіріп, элементті тігінен созуға болады:

                   Place әдісі

                   Place() әдісі позициялау параметрлерін дәл реттеуге мүмкіндік береді. Ол келесі параметрлерді қабылдайды:

·      height және width: сәйкесінше элементтің биіктігі мен енін пикселдермен орнатыңыз

·      relheight және relwidth: сәйкесінше элементтің биіктігі мен енін орнатады, бірақ мәні ата-аналық контейнердің биіктігі мен енінің бөлігін көрсететін 0.0 және 1.0 аралығындағы float саны

·      x және y: контейнердің сол жақ жоғарғы бұрышына қатысты сәйкесінше элементтің көлденең және тік ығысуын орнатады

·      relx және rely: олар сонымен қатар элементтің көлденең және тік ығысуын анықтайды, бірақ мәні - бұл ата-аналық контейнердің биіктігі мен енінің бөлігін көрсететін 0.0 және 1.0 арасындағы float саны

·      bordermode: элементтің жиек пішімін орнатады. Ол INSIDE (әдепкі) және OUTSIDE мәнін қабылдауы мүмкін.

·      anchor: элементті созудың параметрлерін орнатады. Ол n, e, s, w, ne, nw, se, sw, c  мәндерін қабылдауы мүмкін, олар North (солтүстік - жоғары), South (оңтүстік - төменгі), East (шығыс - оң жақ), West (батыс - сол жағы) және Center (ортасы) аббревиатуралары болып табылады. Мысалы, nw сол жақ жоғарғы бұрышын білдіреді.

Мысалы, терезенің ортасында 130 пиксель ені мен 30 пиксель биіктігі бар батырманы орналастырамыз:

Place() әдісін қолданғанда, элементті көрінетін ету үшін  pack () әдісін пайдаланбау керек.

Немесе үш батырманы орналастырамыз:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

from tkinter import *   root = Tk() root.title("GUI на Python") root.geometry("300x250")   btn1 = Button(text="x=10, y=20", background="#555", foreground="#ccc", padx="14", pady="7", font="13") btn1.place(x=10, y=20)   btn2 = Button(text="x=50, y=100", background="#555", foreground="#ccc", padx="14", pady="7", font="13") btn2.place(x=50, y=100)   btn3 = Button(text="x=140, y=160", background="#555", foreground="#ccc", padx="14", pady="7", font="13") btn3.place(x=140, y=160)   root.mainloop()

Grid әдісі

Grid әдісі элементті шартты тордың немесе гридтің белгілі бір ұяшығына орналастыруға мүмкіндік беретін place әдісіне қарағанда элементтерді жайғастыруға басқа тәсілді қолданады.

Grid әдісі келесі параметрлерді қолданады:

·                     column: баған нөмірі, санау нөлден басталады

·                     row: жол нөмірі, санау нөлден басталады

·                     columnspan: элемент неше бағаннан тұруы керек

·                     rowspan: элемент неше жолдан тұруы керек

·                     ipadx және ipady: көлденеңінен және тігінен шегіну элементтің шекарасынан оның мәтініне дейін

·                     padx және pady: көлденең және тігінен шегініс, тордың ұяшықтарының шекарасынан элемент шекараларына дейін

·                     sticky: егер ұяшық элементтен үлкен болса, элементті ұяшыққа туралау. Ол n, e, s, w, ne, nw, se, sw мәндерін қабылдауы мүмкін, олар туралаудың тиісті бағытын көрсетеді.

Мысалы, 9 батырмадан гридты анықтаймыз: