مكون الزر

جزء من قسم Object Oriented Programming في رحلة Rust على Coddy — الدرس 51 من 61.

التحدي

سهل

لنواصل بناء نظام المستندات الخاص بنا عن طريق إضافة مكون واجهة مستخدم ثانٍ: Button. تماماً مثل TextField، سيقوم هذا المكون بتنفيذ سمة (trait) الـ Draw، مما يوضح كيف يمكن للأنواع المختلفة مشاركة واجهة برمجية مشتركة.

ستقوم بتوسيع مشروعك بملف وحدة (module) آخر:

draw.rs: احتفظ بسمة Draw الخاصة بك من التحديات السابقة.
text_field.rs: احتفظ بهيكل TextField وتنفيذه لسمة Draw.
button.rs: أنشئ هيكل Button بحقلين عامين: label (من نوع String) و width (من نوع u32). قم بتنفيذ سمة Draw لـ Button بحيث يؤدي استدعاء draw() إلى طباعة الزر بهذا التنسيق: Button: {label} (width: {width})
main.rs: قم باستيراد الوحدات الثلاث جميعها. أنشئ كلاً من TextField و Button، ثم استدعِ draw() على كل منهما لتصيير المكونين.

ستحتاج وحدة button الخاصة بك إلى الوصول إلى سمة Draw باستخدام crate::draw::Draw، تماماً كما فعلت مع TextField.

سيتم توفير المدخلات التالية:

السطر الأول: محتوى حقل النص (text field)
السطر الثاني: تسمية الزر (button's label)
السطر الثالث: عرض الزر (كعدد)

يجب أن يعرض مخرجك حقل النص أولاً، ثم الزر، كل منهما في سطر مستقل:

Text: Welcome
Button: Submit (width: 100)

جرّب بنفسك

mod draw;
mod text_field;
mod button;

use draw::Draw;
use text_field::TextField;
use button::Button;

pub struct Label {
    pub text: String,
}

impl Draw for Label {
    fn draw(&self) {
        println!("{}", self.text);
    }
}

fn main() {
    let mut input1 = String::new();
    std::io::stdin().read_line(&mut input1).expect("Failed to read line");
    let content = input1.trim().to_string();

    let mut input2 = String::new();
    std::io::stdin().read_line(&mut input2).expect("Failed to read line");
    let label = input2.trim().to_string();

    let mut input3 = String::new();
    std::io::stdin().read_line(&mut input3).expect("Failed to read line");
    let width: u32 = input3.trim().parse().expect("Failed to parse width");

    let text_field = TextField { content };
    text_field.draw();

    // TODO: قم بإنشاء `Button` باستخدام `label` و `width` ، ثم استدعِ `draw()`
    
}