GUI — foydalanuvchi dastur bilan oynalar, tugmalar, menyular, ikonlar va boshqa grafik elementlar orqali ishlaydigan interfeys. Uning to‘liq nomi Graphical User Interface hisoblanadi.
GUI matnli buyruqlarni eslab qolmasdan, vizual obyektlar va bevosita manipulyatsiya orqali vazifalarni bajarishga yordam beradi.
Desktop, mobil, kiosk, avtomobil va embedded qurilmalarda turli GUI tizimlari mavjud.
Asosiy elementlar
GUI odatda quyidagi komponentlardan tashkil topadi:
- window;
- button;
- label;
- text field;
- checkbox;
- radio button;
- menu;
- toolbar;
- dialog;
- list;
- table;
- tab;
- slider;
- notification;
- icon.
Ular umumiy nom bilan widget yoki control deb atalishi mumkin.
Window
Window applicationning mustaqil grafik hududi.
Window manager:
- joylashuv;
- o‘lcham;
- fokus;
- minimizatsiya;
- maksimal holat;
- qatlam;
- virtual desktop
ni boshqaradi.
Mobile platformada har ekran alohida view yoki activity sifatida tashkil qilinishi mumkin.
Event-driven model
GUI foydalanuvchi hodisalariga javob beradi.
Hodisalar:
- mouse click;
- key press;
- touch;
- scroll;
- resize;
- focus;
- drag-and-drop;
- timer;
- system notification.
Application event loop orqali hodisalarni qabul qiladi va tegishli handlerni chaqiradi.
Event loop
Event loop:
- queue’dan hodisa oladi;
- kerakli widgetni aniqlaydi;
- handlerni bajaradi;
- ekranni yangilaydi;
- keyingi hodisaga o‘tadi.
Handler uzoq vaqt bloklansa GUI javob bermay qoladi.
Network yoki disk ishi background thread yoki asynchronous taskga beriladi.
Main thread
Ko‘p GUI framework widgetlarni faqat main thread’da o‘zgartirishga ruxsat beradi.
Background worker natijani message yoki dispatcher orqali main threadga yuboradi.
Bir nechta thread bir vaqtda widget state’ini o‘zgartirsa race condition yuz berishi mumkin.
Layout
Layout manager elementlarning joylashuvini hisoblaydi.
Usullar:
- fixed position;
- row va column;
- grid;
- flex;
- constraint;
- stack;
- responsive layout.
Turli ekran o‘lchami va DPI uchun fixed pixel koordinatalar yetarli emas.
Responsive GUI
Window yoki ekran o‘lchami o‘zgarganda interfeys moslashadi.
Elementlar:
- qayta joylashadi;
- qisqaradi;
- yashiriladi;
- boshqa navigatsiyaga o‘tadi;
- text wrap qiladi.
Responsive dizayn mobil va desktop o‘rtasida bir xil emas, ammo moslashuv tamoyili umumiy.
Rendering
GUI elementlari ekranga raster yoki vector grafik orqali chiziladi.
Rendering pipeline:
- layout;
- paint;
- compositing;
- GPU acceleration;
- display.
Har frame’da butun oynani qayta chizish shart emas. O‘zgargan region yangilanadi.
Retained mode
Framework widget tree va sahna holatini saqlaydi. Dasturchi “nima” ko‘rsatilishini belgilaydi, framework “qanday” chizishni boshqaradi.
Ko‘p desktop va mobil frameworklar retained mode’dan foydalanadi.
Immediate mode
Dastur har frame’da elementlarni qayta tavsiflaydi.
GUI state application tomonidan boshqariladi.
Game tool va debug panelda keng uchraydi.
Accessibility
GUI faqat ko‘rish va mouse bilan boshqarishga tayanmasligi kerak.
Accessibility imkoniyatlari:
- keyboard navigation;
- focus order;
- screen reader nomi;
- semantic role;
- contrast;
- zoom;
- scalable text;
- caption;
- touch target hajmi.
Custom widget accessibility tree’ga to‘g‘ri ma’lumot berishi kerak.
Keyboard navigation
Tab tugmasi fokusni mantiqiy tartibda o‘tkazadi.
Button Enter yoki Space bilan ishlashi mumkin.
Shortcutlar:
- tezkor amal;
- menyu;
- dialog;
- editing
uchun qo‘llanadi.
Faqat mouse hover orqali mavjud funksiyalar keyboard foydalanuvchi uchun yopiq bo‘lishi mumkin.
DPI va scaling
Yuqori aniqlikdagi ekranlarda bitta logical unit bir nechta physical pixelga teng.
GUI framework scaling factorni hisobga oladi.
Noto‘g‘ri DPI handling:
- loyqa text;
- juda kichik element;
- noto‘g‘ri mouse coordinate;
- kesilgan dialog
keltirib chiqaradi.
Theme
GUI light, dark yoki system theme’ga mos bo‘lishi mumkin.
Theme:
- rang;
- font;
- spacing;
- icon;
- border;
- animation
ni belgilaydi.
Faqat rang bilan holatni ifodalash accessibility uchun yetarli emas.
Localization
Interfeys turli tilga moslashganda:
- matn uzunligi;
- o‘ngdan chapga yo‘nalish;
- sana;
- son;
- valyuta;
- plural;
- font
o‘zgaradi.
Button eni faqat bitta til matniga qattiq bog‘lanmaydi.
State
GUI state foydalanuvchi tanlovi va application ma’lumotini aks ettiradi.
State noto‘g‘ri boshqarilsa:
- ekran eski ma’lumot ko‘rsatadi;
- bir amal ikki marta bajariladi;
- button holati backendga mos kelmaydi;
- navigatsiya buziladi.
Unidirectional data flow ayrim frameworklarda state boshqaruvini soddalashtiradi.
Validation
Form input vizual va dasturiy tekshiriladi.
Yaxshi xato holati:
- qaysi field;
- nima noto‘g‘ri;
- qanday format kutiladi;
- ma’lumot saqlanib qolishi
ni ko‘rsatadi.
Faqat client-side validation xavfsizlik uchun yetarli emas; server ham tekshiradi.
GUI va CLI
| Jihat | GUI | CLI |
|---|---|---|
| Boshqaruv | Vizual elementlar | Matnli buyruq |
| O‘rganish | Ko‘pincha osonroq | Buyruqlarni bilish kerak |
| Automation | Cheklangan bo‘lishi mumkin | Juda qulay |
| Masofaviy ish | Grafik kanal talab qiladi | SSH orqali yengil |
| Murakkab vizual data | Qulay | Text bilan cheklangan |
Ko‘p dastur GUI va CLI’ni bir backend ustida taqdim etadi.
Testlash
GUI test turlari:
- unit test;
- widget test;
- screenshot test;
- accessibility test;
- end-to-end;
- input simulation;
- performance test.
Faqat pixel bo‘yicha screenshot solishtirish theme va platforma farqi sabab beqaror bo‘lishi mumkin.
Diagnostika
GUI muammosida:
- event loop;
- main thread;
- layout;
- state;
- rendering;
- DPI;
- input focus;
- accessibility tree;
- platform theme;
- log;
- GPU driver
tekshiriladi.
“Oyna qotdi” holatida ko‘pincha main thread uzoq I/O yoki hisob bilan band bo‘ladi.
Bog‘liq tushunchalar
User interface, Widget, Event loop, Window manager, Layout, Rendering, Accessibility, Theme, CLI, Main thread