Skip to content

6. GUI — گرافیکل انٹرفیس

Difficulty: Advanced — اعلیٰ
Time: ~40 minutes

Importing — درآمد

درآمد {
    گوئی, کنٹینر, ردیف, کالم, فریم,
    لیبل, بٹن, ان_پٹ, ٹیکسٹ_ایریا,
    ڈراپ_ڈاؤن, چیک_بکس, ریڈیو, سلائڈر,
    پروگریس_بار, جدول, نیوی_بار, الرٹ,
    ٹیب_ویو, مودل, ڈائیلاگ, کینوس
} سے "اردو/گوئی";

اردو: یہ لائبریری Bootstrap سے متاثر ڈیسک ٹاپ GUI بناتی ہے — tkinter کے اوپر۔ ہر ایپ گوئی سے شروع ہوتی ہے اور .چلائیں() سے۔

Hello World — پہلی ایپ

درآمد { گوئی, لیبل, بٹن } سے "اردو/گوئی";

متغیر ایپ = نیا گوئی("میری ایپ", 400, 300);

نیا لیبل(ایپ, "سلام دنیا!");

نیا بٹن(ایپ, "دبائیں", پر_کلک=فنکشن() {
    لکھو("بٹن دبا!");
});

ایپ.مرکز();    // centre on screen
ایپ.چلائیں();  // start event loop

گوئی — Main Window

// Full signature
متغیر ایپ = نیا گوئی(
    "ایپ کا نام",   // title
    900,             // width
    600,             // height
    تاریک=جھوٹ     // dark mode
);
Method Description
.عنوان(title) Set window title
.سائز(w, h) Resize window
.کم_سائز(w, h) Set minimum size
.آئیکن(path) Set .png icon
.مرکز() Centre on screen
.بند_پر(fn) Callback when user closes
.چلائیں() Start event loop (blocking)
.بند_کریں() Close window
.تازہ_کریں() Force redraw 
متغیر ایپ = نیا گوئی("ایپ", 600, 400);
ایپ.بند_پر(فنکشن() {
    لکھو("بند ہو رہا ہے...");
    ایپ.بند_کریں();
});
ایپ.مرکز().چلائیں();

Layout — ترتیب

Widgets are stacked vertically inside their parent by default. Use ردیف + کالم for side-by-side layouts.

فریم — Grouped Section

متغیر باکس = نیا فریم(ایپ, عنوان="رجسٹریشن");
نیا لیبل(باکس, "نام:");
نیا ان_پٹ(باکس);

ردیف + کالم — Columns

متغیر ق = نیا ردیف(ایپ);
متغیر بائیں = نیا کالم(ق);
متغیر دائیں = نیا کالم(ق);

نیا لیبل(بائیں, "بائیں طرف");
نیا لیبل(دائیں, "دائیں طرف");

کنٹینر — Padded Container

متغیر ڈبہ = نیا کنٹینر(ایپ, پیڈنگ=20);
نیا لیبل(ڈبہ, "مواد");

لیبل — Text Label

متغیر ل = نیا لیبل(ایپ, "سلام");
لکھو(ل.حاصل_کریں());    // سلام

// Update text
ل.مقرر_کریں("نیا متن");
ل.متن("نئی قدر");         // chainable shortcut

// Style with Bootstrap classes
نیا لیبل(ایپ, "سرخی", کلاس="سرخی-1 موٹا");
نیا لیبل(ایپ, "خطرہ!",  کلاس="متن-خطرہ");
نیا لیبل(ایپ, "نیلا",   کلاس="متن-بنیادی");

بٹن — Button

// With callback
نیا بٹن(ایپ, "محفوظ کریں", پر_کلک=فنکشن() {
    لکھو("محفوظ!");
});

// With Bootstrap style
نیا بٹن(ایپ, "حذف",  کلاس="دکمہ دکمہ-خطرہ");
نیا بٹن(ایپ, "ٹھیک", کلاس="دکمہ دکمہ-کامیاب");

// Disable and re-enable
متغیر ب = نیا بٹن(ایپ, "ارسال");
ب.غیر_فعال();
ب.فعال();

// Chain callback later
ب.پر_کلک(فنکشن() { لکھو("کلک!"); });

Button class tokens — رنگ:

کلاس Color
دکمہ-بنیادی Blue (primary)
دکمہ-کامیاب Green (success)
دکمہ-خطرہ Red (danger)
دکمہ-تنبیہ Yellow (warning)
دکمہ-ثانوی Gray (secondary)
دکمہ-گہرا Dark
دکمہ-خاکہ-بنیادی Outlined primary
دکمہ-چھوٹا Small
دکمہ-بڑا Large

ان_پٹ — Text Input

// Basic
متغیر ان = نیا ان_پٹ(ایپ);
ان.مقرر_کریں("پہلے سے لکھا");
لکھو(ان.حاصل_کریں());

// With placeholder
متغیر نام_ان = نیا ان_پٹ(ایپ, placeholder="آپ کا نام");

// Password field
متغیر پاس_ان = نیا ان_پٹ(ایپ, قسم="پاس_ورڈ", placeholder="پاس ورڈ");

// Clear
ان.صاف_کریں();

ٹیکسٹ_ایریا — Multi-line Text

متغیر ٹ = نیا ٹیکسٹ_ایریا(ایپ, قطاریں=6);
ٹ.مقرر_کریں("ابتدائی متن");
ٹ.لگائیں("\nمزید متن");   // append
لکھو(ٹ.حاصل_کریں());

ڈراپ_ڈاؤن — Select / Dropdown

متغیر ڈ = نیا ڈراپ_ڈاؤن(ایپ, ["کراچی", "لاہور", "اسلام آباد"]);
لکھو(ڈ.حاصل_کریں());    // کراچی (first item selected)

// Callback on selection change
ڈ.پر_تبدیلی(فنکشن(انتخاب) {
    لکھو(`منتخب: ${انتخاب}`);
});

ڈ.مقرر_کریں("لاہور");

چیک_بکس — Checkbox

متغیر چ = نیا چیک_بکس(ایپ, "شرائط قبول ہیں");
لکھو(چ.حاصل_کریں());    // False

چ.مقرر_کریں(سچ);
لکھو(چ.حاصل_کریں());    // True

ریڈیو — Radio Buttons

// Vertical (default)
متغیر ر = نیا ریڈیو(ایپ, ["مرد", "عورت", "دیگر"]);
لکھو(ر.حاصل_کریں());    // مرد (first selected)

// Horizontal
متغیر ر2 = نیا ریڈیو(ایپ, ["چھوٹا", "درمیانہ", "بڑا"], افقی=سچ);

ر.مقرر_کریں("عورت");

سلائڈر — Range Slider

متغیر س = نیا سلائڈر(ایپ, کم=0, زیادہ=100, قدر=50,
    پر_تبدیلی=فنکشن(قدر) {
        لکھو(`قدر: ${قدر}`);
    }
);
لکھو(س.حاصل_کریں());    // 50.0
س.مقرر_کریں(75);

پروگریس_بار — Progress Bar

متغیر پ = نیا پروگریس_بار(ایپ);   // 0–100
پ.مقرر_کریں(60);

// Coloured variants
متغیر پ2 = نیا پروگریس_بار(ایپ, کلاس="ترقی-کامیاب");
پ2.مقرر_کریں(100);

جدول — Data Table

متغیر ج = نیا جدول(ایپ, ["نام", "عمر", "شہر"]);

ج.شامل_کریں(["احمد",   25, "کراچی"]);
ج.شامل_کریں(["فاطمہ", 22, "لاہور"]);
ج.شامل_کریں(["علی",   30, "اسلام آباد"]);

// Get all rows
متغیر صفوف = ج.حاصل_کریں();
لکھو(لمبائی(صفوف));    // 3

ج.صاف_کریں();           // remove all rows

نیوی_بار — Navigation Bar

متغیر نیوی = نیا نیوی_بار(ایپ, عنوان="میری ایپ");
نیوی.لنک("ہوم",    فنکشن() { لکھو("ہوم"); });
نیوی.لنک("بارے",   فنکشن() { لکھو("بارے"); });
نیوی.لنک("رابطہ",  فنکشن() { لکھو("رابطہ"); });

الرٹ — Alert / Notification

// Success
نیا الرٹ(ایپ, "فائل محفوظ ہو گئی", کلاس="اطلاع اطلاع-کامیاب");

// Danger
نیا الرٹ(ایپ, "خطا: فائل نہیں ملی", کلاس="اطلاع اطلاع-خطرہ");

// No close button
نیا الرٹ(ایپ, "یاد دہانی", کلاس="اطلاع اطلاع-تنبیہ", بند=جھوٹ);

ٹیب_ویو — Tabs

متغیر ٹیبز = نیا ٹیب_ویو(ایپ);

متغیر ٹ1 = ٹیبز.ٹیب("ذاتی معلومات");
نیا لیبل(ٹ1, "نام:");
نیا ان_پٹ(ٹ1);

متغیر ٹ2 = ٹیبز.ٹیب("اکاؤنٹ");
نیا لیبل(ٹ2, "ای میل:");
نیا ان_پٹ(ٹ2);

متغیر م = نیا مودل(ایپ, "تصدیق کریں", چوڑائی=400, اونچائی=200);
نیا لیبل(م, "کیا آپ واقعی حذف کرنا چاہتے ہیں؟");

نیا بٹن(م, "ہاں", کلاس="دکمہ دکمہ-خطرہ", پر_کلک=فنکشن() {
    لکھو("حذف ہوا");
    م.بند_کریں();
});

نیا بٹن(م, "نہیں", پر_کلک=فنکشن() {
    م.بند_کریں();
});

م.انتظار();    // block until closed

ڈائیلاگ — System Dialogs

Static methods — no instance needed:

// Info / warning / error popups
ڈائیلاگ.معلومات("فائل کامیابی سے محفوظ ہوئی");
ڈائیلاگ.تنبیہ("ڈیٹا خالی ہے");
ڈائیلاگ.غلطی("کنکشن ناکام");

// Yes/No question
متغیر جواب = ڈائیلاگ.تصدیق("کیا آپ جاری رکھنا چاہتے ہیں؟");
لکھو(جواب);    // True or False

// File pickers
متغیر فائل = ڈائیلاگ.فائل_کھولیں([["متنی فائلیں", "*.txt"], ["تمام", "*.*"]]);
متغیر راستہ = ڈائیلاگ.فائل_محفوظ();
متغیر فولڈر_م = ڈائیلاگ.فولڈر();

// Colour picker
متغیر رنگ = ڈائیلاگ.رنگ("#ff0000");    // returns hex string
Method Returns Description
.معلومات(msg) — Info popup
.غلطی(msg) — Error popup
.تنبیہ(msg) — Warning popup
.تصدیق(msg) bool Yes/No dialog
.فائل_کھولیں(types) str Open file picker
.فائل_محفوظ(types) str Save file picker
.فولڈر() str Folder picker
.رنگ(init) str Colour picker, returns hex

کینوس — Drawing Canvas

متغیر ک = نیا کینوس(ایپ, چوڑائی=400, اونچائی=300, پس_منظر="white");

// Circle — دائرہ(x, y, radius, colour)
ک.دائرہ(200, 150, 80, "blue");

// Rectangle — مستطیل(x1, y1, x2, y2, colour)
ک.مستطیل(10, 10, 100, 80, "green");

// Line — لکیر(x1, y1, x2, y2, colour, thickness)
ک.لکیر(0, 0, 400, 300, "red", 3);

// Text — متن(x, y, text, colour, size)
ک.متن(200, 150, "اردو", "black", 18);

ک.صاف_کریں();    // remove all shapes

اردو: کینوس کے رنگ کے لیے انگریزی رنگ نام ("blue", "red", "green") یا hex ("#ff5500") استعمال کریں۔

Bootstrap Colours — رنگ

Pass these to .رنگ(bg, fg) on any widget, or use in کلاس= strings:

اردو English Hex
بنیادی primary #0d6efd
کامیاب success #198754
خطرہ danger #dc3545
تنبیہ warning #ffc107
معلومات info #0dcaf0
ثانوی secondary #6c757d
گہرا dark #212529
ہلکا light #f8f9fa
سفید white #ffffff 
// .رنگ() uses Urdu Bootstrap names
لیبل_م.رنگ(bg="گہرا", fg="سفید");

Practical Example: Login Form — عملی مثال

درآمد { گوئی, فریم, لیبل, ان_پٹ, بٹن, الرٹ, ڈائیلاگ } سے "اردو/گوئی";

متغیر ایپ = نیا گوئی("لاگ ان", 380, 320);
متغیر فارم = نیا فریم(ایپ, عنوان="اکاؤنٹ میں داخل ہوں");

نیا لیبل(فارم, "صارف نام:");
متغیر صارف_ان = نیا ان_پٹ(فارم, placeholder="ای میل یا صارف نام");

نیا لیبل(فارم, "پاس ورڈ:");
متغیر پاس_ان = نیا ان_پٹ(فارم, قسم="پاس_ورڈ", placeholder="پاس ورڈ");

متغیر پیغام_ل = نیا لیبل(فارم, "");

فنکشن لاگ_ان_کریں() {
    متغیر صارف = صارف_ان.حاصل_کریں();
    متغیر پاس = پاس_ان.حاصل_کریں();

    اگر (صارف == "" یا پاس == "") {
        پیغام_ل.رنگ(fg="خطرہ").مقرر_کریں("سب خانے پُر کریں");
        واپس;
    }

    // Simulate auth check
    اگر (صارف == "احمد" اور پاس == "12345") {
        ڈائیلاگ.معلومات("خوش آمدید، احمد!");
        ایپ.بند_کریں();
    } ورنہ {
        پیغام_ل.رنگ(fg="خطرہ").مقرر_کریں("غلط صارف نام یا پاس ورڈ");
        پاس_ان.صاف_کریں();
    }
}

نیا بٹن(فارم, "لاگ ان", کلاس="دکمہ دکمہ-بنیادی", پر_کلک=لاگ_ان_کریں);

ایپ.مرکز().چلائیں();

Widget Visibility — نظر اور چھپاؤ

Any widget inherits these from the base class:

لیبل_م.چھپائیں();    // hide
لیبل_م.دکھائیں();    // show again
لیبل_م.ہٹائیں();     // destroy permanently

Quick Reference — فوری حوالہ

Class Purpose
گوئی Main window
فریم Grouping box / card
ردیف + کالم Side-by-side layout
کنٹینر Padded container
لیبل Text display
بٹن Clickable button
ان_پٹ Single-line text entry
ٹیکسٹ_ایریا Multi-line text
ڈراپ_ڈاؤن Select / combobox
چیک_بکس Boolean toggle
ریڈیو Single-choice group
سلائڈر Range slider
پروگریس_بار 0–100 progress
جدول Scrollable data table
نیوی_بار Top navigation
الرٹ Inline notification
ٹیب_ویو Tab container
مودل Modal popup window
ڈائیلاگ System file/colour/message dialogs
کینوس 2D drawing surface

← Previous: Databases | Next: Web Framework →