خادم المسلمين
30-05-2014, 01:43 PM
بسم الله الرحمن الرحيم
السلام عليكم ورحمة الله وبركاته
سوف نتعرف من خلال هذا الدرس على كيفية تعامل الفلاش أو تحديداً الأكشن سكريبت 3 مع ملفات XML...
في البداية ما الفائدة من استخدام XML في الفلاش...؟!
الحقيقة أن العمل مع ملفات XML في الفلاش سوف يجعل من محتوى أكثر مرونة وسهل التحديث مستقبلاً على سبيل المثال لنفترض أنك تريد عمل عارض للصور باستخدام الفلاش في البداية تقوم باستيراد الصور إلى الفلاش سواء كانت 4, 5 أو حتى 10 بعد ذلك تقوم بإعداد ملف الفلاش لكي يقوم بعرض الصور بالطريقة التي تريد ثم تنتج الملف النهائي swf وتقوم برفعه على الانترنت, هذا جيد ولكن ماذا لو أنك أردت إضافة صوره جديدة أو عدد من الصور أو إزاله أحدها سوف نضطر في هذه الحالة إلى تعديل ملف الملفات واستيراد بعد الإضافية أو حذف بعضها ثم تنتج العمل وتقوم برفعه على الانترنت. هذا شيء متعب قليلاً لاسيما إذا كان حجم الملف المنتج كبير وسرعه النت لديك بطيئه لذلك ما رأيك أن نقوم بإنتاج العمل مره واحده فقط مع تقليل الحجم واستخدام XML لتحديد عدد الصور وعرضها. مثال آخر لنفترض أن لديك قاعدة بيانات قمت بإنشائها باستخدام مايكروسوفت أكسس تحتوي على معلومات عن مجموعه من الطلاب فيها اسم الطالب والرقم المدني ودرجات الطالب في بعض المواد وتريد أن تقوم بعرض هذه البيانات باستخدام الفلاش أسهل طريقة لعمل ذلك هي بتحويل قاعده البيانات أو بمعنى أصح أحد الجداول إلى ملف XML باستخدام برنامج الأكسس بعد ذلك تقوم عن طريق الفلاش بعرض هذه البيانات.
لنتعرف في البداية على شكل ملف XML...؟!
أبسط مثال ممكن أن نبدأ به كـ توضيح لملف XML هي قاعد بيانات للطلاب تحتوي على اسم الطالب ورقمه المدني بالإضافة لدرجته في بعض المواد بالشكل التالي:
<?xml version="1.0" encoding="UTF-8"?>
<grade>
<student>
<st_id>297020280492</st_id>
<st_name>عبدالله محمد عبدالله العنزي</st_name>
<quran>11</quran>
<islamic>24</islamic>
<arabic>36</arabic>
<english>31.5</english>
</ student >
< student >
<st_id>296087601625</st_id>
<st_name>منصور ناصر محمد الخالدي</st_name>
<quran>3</quran>
<islamic>22</islamic>
<arabic>36</arabic>
<english>26</english>
</ student >
< student >
<st_id>296032401125</st_id>
<st_name>ناصر فايز عبدالحميد العتيبي</st_name>
<quran>13</quran>
<islamic>24.5</islamic>
<arabic>35</arabic>
<english>35</english>
</ student >
</grade>الملف السابق يمثل ملف XML في بداية الملف هو تعريف للغة XML يبدأ برقم الإصدار ثم نوع ترميز الملف. ننتقل بعد ذلك للجزء الأهم وهو تعريف tage أو لنقل العنصر الأساسي لملف xml وبداخله جميع معلومات الملف وهو هنا يبدأ <grade> وينتهي بنفس الرمز ولكن تسبقه علامه باك سلاش </grade> بداخل هذا العنصر نقوم بتعريف عدد العناصر التي نريدها لنفترض أن لدينا ثلاث طلاب إذا نقوم بإنشاء ثلاث عناصر رئيسية باسم student بداخل كل عنصر من هذه العناصر الثلاث يحتوي على بيانات طالب واحد على سبيل المثال العنصر الأول < student> يحتوي على بيانات الطالب عبدالله محمد عبدالله العنزي كـ الرقم المدني ودرجته في مادة القرآن الكريم والتربية الإسلامية واللغة العربية والانجليزية وبإمكانك إضافة بيانات أخرى ولكن سوف نكتفي هنا بهذه البيانات فقط. كما لاحظنا أن تعريف أو بمعنى أصح إنشاء ملف XML سهل جداً وتبدل وكأنها شكل شجري. وكل هذا يمكن عمله باستخدام Notepad مع حفظ الملف بصيغه XML.
حسناً. لنعد مجدداً للحديث عن الفلاش بعد أن تعرفنا على لغة XML أو طريقة كتابة ملف XML. في الحقيقة بإمكاننا إنشاء ملف XML عن طريق الفلاش وباستخدام أوامر الأكشن سكريبت 3 وذلك من خلال تعريف متغير باسم sGrade من نوع XML ثم نضع علامه يساوي وننشئ كائن من نوع XML باستخدام الأمر new ثم نوع الكائن وهو XML وبداخل الأقواس نضع العنصر الأساسي كائن XML لنفترض أنه grade إذا سوف نضع بداخل القوسين <grade/> هذا الأمر يقوم بتعريف العنصر ويغلقه في نفس الوقت. ليكون الأمر في النهاية بهذا الشكل:
var sGrade:XML = new XML(<grade/>);بإمكاننا بعد ذلك إضافة العناصر والبيانات للـ XML وذلك من خلال كتابه اسم العنصر الأساسي بعد ذلك اسم العنصر الفرعي ثم علامة يساوي ونكتب البيانات التي نريدها بين علامتي تنصيص. لنفترض أننا نريد إضافة الرقم المدني st_id نقوم أولاً بكتابه أسم العنصر الأساسي وهو sGrade ثم نقطة ونكتب العنصر الفرعي وهو st_id ثم يساوي ونكتب الرقم المدني بين علامتي تنصيص وليكن “297020280492” ليكون الأمر في النهاية بالشكل التالي:
sGrade.st_id = "297020280492";وبإمكاننا إضافة اسم الطالب بنفس الطريقة السابقة ليكون الأمر في النهاية بهذا الشكل:
sGrade.st_name = "عبدالله محمد عبدالله العنزي";
والآن نقوم بعرض البيانات في نافذة المخرجات Output لنختبر العمل وذلك بكتابه الأمر trace وبداخل القوسين نضع أسم الكائن وهو sGrade كما يلي:
trace(sGrade);
لعرض لنا البيانات كما قمنا بإنشائها وبنفس نمط ملفات XML كما يلي:
<grade>
<st_id>297020280492</st_id>
<st_name>عبدالله محمد عبدالله العنزي</st_name>
</grade>بعد إنشاء ملف XML باستخدام الأكشن سكريبت 3 يمكننا الآن عرض البيانات في ملف الفلاش. يجب أولاً أن يكون لدينا مربع نص يعمل اسم instance name وليكن اسم مربع النص info_txt ثم نضع النص في هذا المربع باستخدام الخاصية text ثم يساوي ونكتب اسم الكائن وهو sGrade ثم نضع نقطه بعد ذلك نكتب العنصر الذي نريد عرض بياناته في مربع النص ولنفترض أنه st_id ليكون الأمر في النهاية بهذا الشكل:
Info_txt.text = sGrade.st_id;قم باختبار العمل لترى أن الرقم المدني تم عرضة في مربع النص. هناك أمور كثير يمكن أن نقوم بها لنفترض أننا نريد أن يكون الرقم المدني خاصية أو ما يعرف باسم attributes بدلاً من أن يكون عنصر ببساطه قبل كتابة اسم العنصر نضع علامة @ ليكون الأمر بالنهاية بهذا الشكل:
sGrade.@st_id = "297020280492";الآن عندما نقوم باختبار العمل باستخدام الأمر trace لترى أن الرقم المدني أصبح خاصيه أو attributes للعنصر grade ولكي نقوم بعرض هذه الخاصية في مربع النص نقوم بنفس الخطوات السابقة أي كتابه اسم الخاصية تسبقها علامه @ ليكون الأمر كما يلي:
info_txt.text = sGrade.@st_id;لنتحدث الآن عن الخصائص الموجودة في لغة الأكشن سكريبت 3 تتيح لنا التعامل مع XML أحد هذه الخصائص هي خاصية appendChild وهي تقوم بإضافة عنصر جديد في آخر الملف ويمكن استخدام هذه الخاصية بكتابه اسم الكائن أولاً وهو sGrade ثم نقطة ونكتب اسم الخاصية appendChild وبين القوسين نقوم بكتابة العنصر الجديد ولكن quran ويحتوي على درجة القرآن الكريم وهي 11 ليكون الأمر في النهاية بالشكل التالي:
sGrade.appendChild(<quran>11</quran>);الآن عندما نقوم بعرض الملف باستخدام الأمر trace سوف تلاحظ إضافة عنصر جديد باسم quran اسفل العناصر السابقة. حسناً لنفترض أننا نريد أن يكون العنصر في البداية وقبل جميع العناصر السابقة بإمكاننا ذلك باستخدام الأمر prependChild وبنفس الطريقة السابقة ليكون الأمر بهذا الشكل:
sGrade.prependChild(<quran>11</quran>);وعندك اختبار للعمل ترى أنه تم إضافة العنصر quran في بداية الملف. لنفترض أننا نريد إضافة عنصر جديد بعد عنصر معين مثلاً إضافة عنصر جديد وهو Islamic بعد العنصر quran بإمكاننا القيام بذلك ببساطه باستخدام الخاصية insertChildAfter هذه الخاصية تستقبل معاملين بين القوسين أولاً اسم العنصر الذي تريد إضافة العنصر الجديد بعده أما المعامل الثاني هو العنصر الجديد الذي تريد إضافته وليكن هو Islamic ونضع 24 كـ بيانات لهذا ليكون الأمر في النهاية بهذا الشكل:
sGrade.insertChildAfter(sGrade.quran, <islamic>24</islamic>);ولكن إذا كنت تريد إضافة عنصر جديد قبل عنصر معين يمكنك ذلك باستخدام الأمر insertChildBefore وذلك بنفس الطريقة السابقة كما يلي:
sGrade.insertChildBefore(sGrade.quran, <islamic>24</islamic>);وهناك العديد من الخصائص بإمكانك الاطلاع عليها من خلال الملفات المساعدة للفلاش. لنتحدث الآن عن تغيير البيانات وحذف عنصر معين لنبدأ أولاً بتغيير البيانات. لنفترض أننا نريد تغيير درجة مادة القرآن الكريم من 11 إلى 13 يمكننا القيام بذلك بسهولة عن طريق إسناد قيمة جديدة لهذا العنصر عن طريقة كتابة اسم الكائن sGrade ثم نقطة بعد ذلك اسم العنصر التي تريد تغيير بياناته وهو quran ثم يساوي ونضع القيمة الجديدة بين علامتي تنصيص بالشكل التالي:
sGrade.quran = "13";الأمر السابق سوف يقوم بحذف البيانات القديمة ووضع البيانات الجديدة بدلاً منها. لنتحدث الآن عن حذف عنصر معين لنفترض أننا نريد حذف درجة مادة التربية الإسلامية بإمكاننا ذلك عن طريقة كتابة الخاصية delete ثم بعد ذلك نكتب اسم الكائن sGrade ثم نقطة ونكتب اسم العنصر الذي نريد حذفة وهو Islamic ليكون الأمر في النهاية بهذا الشكل:
delete sGrade.islamic;
وعند اختبارك للعمل سوف ترى أنه تم حذف العنصر islamic.
من خلال ما استعرضناه سابقاً يتضح أنه بإمكاننا إنشاء ملف XML باستخدام الفلاش والتعامل مع هذا الملف بسهولة من خلال أوامر الأكشن سكريبت ولكن هذه ليست القوة الحقيقية في التعامل مع ملفات XML إذ أنه سوف تواجهنا نفس المشاكل السابقة وهو أننا سوف نضطر إلى تعديل ملف الفلاش وإنتاجه ثم رفعه على الانترنت من جديد. إذ أننا نريد أن يكون ملف XML منفصل عن الفلاش حتى يسهل علينا تحديث البيانات دون تعديل ملف الفلاش باستمرار وهذا ما سوف نتحدث عنه في الدرس القادم.
السلام عليكم ورحمة الله وبركاته
سوف نتعرف من خلال هذا الدرس على كيفية تعامل الفلاش أو تحديداً الأكشن سكريبت 3 مع ملفات XML...
في البداية ما الفائدة من استخدام XML في الفلاش...؟!
الحقيقة أن العمل مع ملفات XML في الفلاش سوف يجعل من محتوى أكثر مرونة وسهل التحديث مستقبلاً على سبيل المثال لنفترض أنك تريد عمل عارض للصور باستخدام الفلاش في البداية تقوم باستيراد الصور إلى الفلاش سواء كانت 4, 5 أو حتى 10 بعد ذلك تقوم بإعداد ملف الفلاش لكي يقوم بعرض الصور بالطريقة التي تريد ثم تنتج الملف النهائي swf وتقوم برفعه على الانترنت, هذا جيد ولكن ماذا لو أنك أردت إضافة صوره جديدة أو عدد من الصور أو إزاله أحدها سوف نضطر في هذه الحالة إلى تعديل ملف الملفات واستيراد بعد الإضافية أو حذف بعضها ثم تنتج العمل وتقوم برفعه على الانترنت. هذا شيء متعب قليلاً لاسيما إذا كان حجم الملف المنتج كبير وسرعه النت لديك بطيئه لذلك ما رأيك أن نقوم بإنتاج العمل مره واحده فقط مع تقليل الحجم واستخدام XML لتحديد عدد الصور وعرضها. مثال آخر لنفترض أن لديك قاعدة بيانات قمت بإنشائها باستخدام مايكروسوفت أكسس تحتوي على معلومات عن مجموعه من الطلاب فيها اسم الطالب والرقم المدني ودرجات الطالب في بعض المواد وتريد أن تقوم بعرض هذه البيانات باستخدام الفلاش أسهل طريقة لعمل ذلك هي بتحويل قاعده البيانات أو بمعنى أصح أحد الجداول إلى ملف XML باستخدام برنامج الأكسس بعد ذلك تقوم عن طريق الفلاش بعرض هذه البيانات.
لنتعرف في البداية على شكل ملف XML...؟!
أبسط مثال ممكن أن نبدأ به كـ توضيح لملف XML هي قاعد بيانات للطلاب تحتوي على اسم الطالب ورقمه المدني بالإضافة لدرجته في بعض المواد بالشكل التالي:
<?xml version="1.0" encoding="UTF-8"?>
<grade>
<student>
<st_id>297020280492</st_id>
<st_name>عبدالله محمد عبدالله العنزي</st_name>
<quran>11</quran>
<islamic>24</islamic>
<arabic>36</arabic>
<english>31.5</english>
</ student >
< student >
<st_id>296087601625</st_id>
<st_name>منصور ناصر محمد الخالدي</st_name>
<quran>3</quran>
<islamic>22</islamic>
<arabic>36</arabic>
<english>26</english>
</ student >
< student >
<st_id>296032401125</st_id>
<st_name>ناصر فايز عبدالحميد العتيبي</st_name>
<quran>13</quran>
<islamic>24.5</islamic>
<arabic>35</arabic>
<english>35</english>
</ student >
</grade>الملف السابق يمثل ملف XML في بداية الملف هو تعريف للغة XML يبدأ برقم الإصدار ثم نوع ترميز الملف. ننتقل بعد ذلك للجزء الأهم وهو تعريف tage أو لنقل العنصر الأساسي لملف xml وبداخله جميع معلومات الملف وهو هنا يبدأ <grade> وينتهي بنفس الرمز ولكن تسبقه علامه باك سلاش </grade> بداخل هذا العنصر نقوم بتعريف عدد العناصر التي نريدها لنفترض أن لدينا ثلاث طلاب إذا نقوم بإنشاء ثلاث عناصر رئيسية باسم student بداخل كل عنصر من هذه العناصر الثلاث يحتوي على بيانات طالب واحد على سبيل المثال العنصر الأول < student> يحتوي على بيانات الطالب عبدالله محمد عبدالله العنزي كـ الرقم المدني ودرجته في مادة القرآن الكريم والتربية الإسلامية واللغة العربية والانجليزية وبإمكانك إضافة بيانات أخرى ولكن سوف نكتفي هنا بهذه البيانات فقط. كما لاحظنا أن تعريف أو بمعنى أصح إنشاء ملف XML سهل جداً وتبدل وكأنها شكل شجري. وكل هذا يمكن عمله باستخدام Notepad مع حفظ الملف بصيغه XML.
حسناً. لنعد مجدداً للحديث عن الفلاش بعد أن تعرفنا على لغة XML أو طريقة كتابة ملف XML. في الحقيقة بإمكاننا إنشاء ملف XML عن طريق الفلاش وباستخدام أوامر الأكشن سكريبت 3 وذلك من خلال تعريف متغير باسم sGrade من نوع XML ثم نضع علامه يساوي وننشئ كائن من نوع XML باستخدام الأمر new ثم نوع الكائن وهو XML وبداخل الأقواس نضع العنصر الأساسي كائن XML لنفترض أنه grade إذا سوف نضع بداخل القوسين <grade/> هذا الأمر يقوم بتعريف العنصر ويغلقه في نفس الوقت. ليكون الأمر في النهاية بهذا الشكل:
var sGrade:XML = new XML(<grade/>);بإمكاننا بعد ذلك إضافة العناصر والبيانات للـ XML وذلك من خلال كتابه اسم العنصر الأساسي بعد ذلك اسم العنصر الفرعي ثم علامة يساوي ونكتب البيانات التي نريدها بين علامتي تنصيص. لنفترض أننا نريد إضافة الرقم المدني st_id نقوم أولاً بكتابه أسم العنصر الأساسي وهو sGrade ثم نقطة ونكتب العنصر الفرعي وهو st_id ثم يساوي ونكتب الرقم المدني بين علامتي تنصيص وليكن “297020280492” ليكون الأمر في النهاية بالشكل التالي:
sGrade.st_id = "297020280492";وبإمكاننا إضافة اسم الطالب بنفس الطريقة السابقة ليكون الأمر في النهاية بهذا الشكل:
sGrade.st_name = "عبدالله محمد عبدالله العنزي";
والآن نقوم بعرض البيانات في نافذة المخرجات Output لنختبر العمل وذلك بكتابه الأمر trace وبداخل القوسين نضع أسم الكائن وهو sGrade كما يلي:
trace(sGrade);
لعرض لنا البيانات كما قمنا بإنشائها وبنفس نمط ملفات XML كما يلي:
<grade>
<st_id>297020280492</st_id>
<st_name>عبدالله محمد عبدالله العنزي</st_name>
</grade>بعد إنشاء ملف XML باستخدام الأكشن سكريبت 3 يمكننا الآن عرض البيانات في ملف الفلاش. يجب أولاً أن يكون لدينا مربع نص يعمل اسم instance name وليكن اسم مربع النص info_txt ثم نضع النص في هذا المربع باستخدام الخاصية text ثم يساوي ونكتب اسم الكائن وهو sGrade ثم نضع نقطه بعد ذلك نكتب العنصر الذي نريد عرض بياناته في مربع النص ولنفترض أنه st_id ليكون الأمر في النهاية بهذا الشكل:
Info_txt.text = sGrade.st_id;قم باختبار العمل لترى أن الرقم المدني تم عرضة في مربع النص. هناك أمور كثير يمكن أن نقوم بها لنفترض أننا نريد أن يكون الرقم المدني خاصية أو ما يعرف باسم attributes بدلاً من أن يكون عنصر ببساطه قبل كتابة اسم العنصر نضع علامة @ ليكون الأمر بالنهاية بهذا الشكل:
sGrade.@st_id = "297020280492";الآن عندما نقوم باختبار العمل باستخدام الأمر trace لترى أن الرقم المدني أصبح خاصيه أو attributes للعنصر grade ولكي نقوم بعرض هذه الخاصية في مربع النص نقوم بنفس الخطوات السابقة أي كتابه اسم الخاصية تسبقها علامه @ ليكون الأمر كما يلي:
info_txt.text = sGrade.@st_id;لنتحدث الآن عن الخصائص الموجودة في لغة الأكشن سكريبت 3 تتيح لنا التعامل مع XML أحد هذه الخصائص هي خاصية appendChild وهي تقوم بإضافة عنصر جديد في آخر الملف ويمكن استخدام هذه الخاصية بكتابه اسم الكائن أولاً وهو sGrade ثم نقطة ونكتب اسم الخاصية appendChild وبين القوسين نقوم بكتابة العنصر الجديد ولكن quran ويحتوي على درجة القرآن الكريم وهي 11 ليكون الأمر في النهاية بالشكل التالي:
sGrade.appendChild(<quran>11</quran>);الآن عندما نقوم بعرض الملف باستخدام الأمر trace سوف تلاحظ إضافة عنصر جديد باسم quran اسفل العناصر السابقة. حسناً لنفترض أننا نريد أن يكون العنصر في البداية وقبل جميع العناصر السابقة بإمكاننا ذلك باستخدام الأمر prependChild وبنفس الطريقة السابقة ليكون الأمر بهذا الشكل:
sGrade.prependChild(<quran>11</quran>);وعندك اختبار للعمل ترى أنه تم إضافة العنصر quran في بداية الملف. لنفترض أننا نريد إضافة عنصر جديد بعد عنصر معين مثلاً إضافة عنصر جديد وهو Islamic بعد العنصر quran بإمكاننا القيام بذلك ببساطه باستخدام الخاصية insertChildAfter هذه الخاصية تستقبل معاملين بين القوسين أولاً اسم العنصر الذي تريد إضافة العنصر الجديد بعده أما المعامل الثاني هو العنصر الجديد الذي تريد إضافته وليكن هو Islamic ونضع 24 كـ بيانات لهذا ليكون الأمر في النهاية بهذا الشكل:
sGrade.insertChildAfter(sGrade.quran, <islamic>24</islamic>);ولكن إذا كنت تريد إضافة عنصر جديد قبل عنصر معين يمكنك ذلك باستخدام الأمر insertChildBefore وذلك بنفس الطريقة السابقة كما يلي:
sGrade.insertChildBefore(sGrade.quran, <islamic>24</islamic>);وهناك العديد من الخصائص بإمكانك الاطلاع عليها من خلال الملفات المساعدة للفلاش. لنتحدث الآن عن تغيير البيانات وحذف عنصر معين لنبدأ أولاً بتغيير البيانات. لنفترض أننا نريد تغيير درجة مادة القرآن الكريم من 11 إلى 13 يمكننا القيام بذلك بسهولة عن طريق إسناد قيمة جديدة لهذا العنصر عن طريقة كتابة اسم الكائن sGrade ثم نقطة بعد ذلك اسم العنصر التي تريد تغيير بياناته وهو quran ثم يساوي ونضع القيمة الجديدة بين علامتي تنصيص بالشكل التالي:
sGrade.quran = "13";الأمر السابق سوف يقوم بحذف البيانات القديمة ووضع البيانات الجديدة بدلاً منها. لنتحدث الآن عن حذف عنصر معين لنفترض أننا نريد حذف درجة مادة التربية الإسلامية بإمكاننا ذلك عن طريقة كتابة الخاصية delete ثم بعد ذلك نكتب اسم الكائن sGrade ثم نقطة ونكتب اسم العنصر الذي نريد حذفة وهو Islamic ليكون الأمر في النهاية بهذا الشكل:
delete sGrade.islamic;
وعند اختبارك للعمل سوف ترى أنه تم حذف العنصر islamic.
من خلال ما استعرضناه سابقاً يتضح أنه بإمكاننا إنشاء ملف XML باستخدام الفلاش والتعامل مع هذا الملف بسهولة من خلال أوامر الأكشن سكريبت ولكن هذه ليست القوة الحقيقية في التعامل مع ملفات XML إذ أنه سوف تواجهنا نفس المشاكل السابقة وهو أننا سوف نضطر إلى تعديل ملف الفلاش وإنتاجه ثم رفعه على الانترنت من جديد. إذ أننا نريد أن يكون ملف XML منفصل عن الفلاش حتى يسهل علينا تحديث البيانات دون تعديل ملف الفلاش باستمرار وهذا ما سوف نتحدث عنه في الدرس القادم.