بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
اخوتي الكرام نتطرق في هذا الموضوع الي كيفية التعامل مع المكون الجاهز في برنامج فلاش combobox
لاهميته الكبيرة في انشاء بعض المشاريع
كالعادة نحاول التطبيق معا بالتدرج لفهم طريق التحكم في المكون واضافة التنسيقات .
المطلوب منك فتح مشروع جديد ثم الضغط على Windows أو Ctrl +F7 واضافة عنصر comboBox الى مسرح العمل
ثم حذفه مباشرة
الان بالمكتبة لدينا هذا المكون الجاهز لنتعامل معه برمجيا وندخل عليه تنسيقات الكتابة كما نريد يجب طبعا استيراد كلاسات معينة
وهي كلاس الكمببوكس وكلاسات قائمة البيانات وكلاس تنسيق الكتابة لذلك انسخ الكود الصقه في طبقة الاكشن
كود:
import fl.controls.ComboBox; import flash.text.TextFormat; import fl.data.DataProvider;
كود:
var aCb:ComboBox = new ComboBox();
عنصر الكمببوكس يحتوي على تنسيقات افتراضية من حيث الخط والحجم والمحاذاة يعني لما نضيف
قائمة نجدها تأخذ التنسيقات الافتراضية لكن نحن نريد تنسيقات حسب رغبتنا اذن سنستغل كلاس TextFormat لتنسيق الخط
داخل الكمببوكس وسبق ان تم شرح هذا الكلاس في موضوع التعامل مع النصوص. وبالتالي سيكون الكود كما يلي
كود:
var txtformat:TextFormat = new TextFormat(); txtformat.size = 20; txtformat.bold = true; txtformat.font = "Arial"; txtformat.color = 0x0066CC; txtformat.align = TextFormatAlign.RIGHT;
1انشاء نسخة من هذا الكلاس كما يلي var txtformat:TextFormat = new TextFormat
2 حجم الخط 20 . txtformat.size = 20
3 سمك الخط txtformat.bold = true
4 نوع الخط txtformat.font = Arial
5 لون الخط ازرق txtformat.color = 0x0066CC
6 محاذاة الخط من اليمين txtformat.align = TextFormatAlign.RIGHT
الان سنطبق هاته التنسيقات على عنصر الكمببوكس من خلال هذا الكود
كود:
aCb.textField.setStyle("textFormat", txtformat);
كود:
aCb.dropdown.setRendererStyle("textFormat", txtformat);
1 عرض عنصر القائمة dropdown.rowHeight سيكون مثلا 40
2 عدد عنصار القائمة المفتوحة rowCount ستكون 3
3 نريد ان يظهر الكمبوبكس move في هذه الاحداثيات 20 - 330
4 نريذ ان يكون حجم الكمببوكس setSize طول 200 وعرض 35
5 نريد ان تكون اول كلمة فيه prompt هي " اختر السورة من فضلك "
6 الان نضيف العنصر الى المسرح addChild وسيكون الكود كاما يلي انسخه والصقه
كود:
aCb.dropdown.rowHeight = 40; aCb.prompt = "اختر السورة من فضلك "; aCb.setSize(200, 35); aCb.move(330,20); aCb.rowCount = 3; addChild(aCb);
طبعا سنضيف الان القائمة التي نريدها للكمببوكس من خلالها تخزينها في مصفوفة واضافتها
من خلال كلاس البيانات dataProvider وسيكون الكود كما يلي انسخه والصقه
كود:
var items:Array = [ {label:"سورة الفاتحة", data:"item1"}, {label:"سورة البقرة", data:"item2"}, {label:"سورة ال عمران", data:"item3"}, {label:"سورة النساء", data:"item4"}, {label:"سورة المائدة", data:"item5"} ]; aCb.dataProvider = new DataProvider(items);
قبل أن تعاين النتيجة اضف حقل نصي Dynamic اعطه اسم dt واختر خصائص الخط مع اختيار Use device font
وانسخ والصق الكود التالي :
كود:
aCb.addEventListener(Event.CHANGE, selectedCombo); function selectedCombo (evt:Event) { dt.text = aCb.selectedItem.label; if (aCb.selectedIndex == 0) { // تنفيذ اي أوامر اخرى } }
الى حين شرح الجزء الثاني
استودعكم الله
تعليق