azizsoft
07-06-2015, 05:07 PM
بسم الله الرحمن الرحيم
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
اخوتي الكرام نتطرق في هذا الموضوع الي كيفية التعامل مع المكون الجاهز في برنامج فلاش 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)
{
// تنفيذ اي أوامر اخرى
}
}
الى حين شرح الجزء الثاني
استودعكم الله
الحمدلله والصلاة والسلام على رسول الله وعلى آله وصحبه أجمعين
السلام عليكم ورحمة الله وبركاته
اخوتي الكرام نتطرق في هذا الموضوع الي كيفية التعامل مع المكون الجاهز في برنامج فلاش 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)
{
// تنفيذ اي أوامر اخرى
}
}
الى حين شرح الجزء الثاني
استودعكم الله