عبود عبود
01-02-2016, 01:58 AM
السلام عليكم ورحمة الله وبركاته
http://i.imgur.com/Fl8Z6JK.gif
سلسلة رقم 1 تصميم إسطوانة قرآن كريم
إخوانى أعضاء وزوار المنتدى الكرام أقدم لكم سلسلة رقم 1 لشرح تصميم إسطوانة قرآن كريم وذلك لمحاولة تبسيط شرح بعض الطرق وبعض الأكواد الممكن إستخدامها فى هذا العمل
نبدأ إن شاء الله
إفتح مشروع جديد فارغ ونسمية على سبيل المثال "نموذج تصميم إسطوانة قرآن كريم" كما هو موضح بالصور التالية :
http://i.imgur.com/LJTOTX0.png
http://i.imgur.com/BDdyKXT.png
بعد فتح مشروع جديد كما سبق نعمل على إضافة العناصر التى نريدها فى المشروع وفى هذا المثال سوف أستخدم عنصر الشجرة المتفرعة "Tree" كأحد هذه العناصر حيث سوف يستخدم لعرض قائمة بأسماء السور "سور القرآن الكريم" والتى سوف نقسمها إلى آيات أى أن كل سورة سوف تقسم لعدد من الآيات القرآنية طبقا لعددها فى السورة المحددة فكلنا نعرف أن عدد آيات سورة الفاتحة 7 آيات وذلك على سبيل المثال للتوضيح .
الصورة التالية صورة توضيحية لكيفية إدراج العنصر "Tree" فى المشروع :
http://i.imgur.com/aXYu2sh.png
بعد إدراج العنصر فى المشروع نقوم بالضغط علية 2 كليك بالماوس ليظهر لنا خصائص العنصر فى نافذة التحكم الخاصة بة كما بالصور التالية :
http://i.imgur.com/CfjIeoB.png
بعد ظهور هذه النافذة قم بتحديد الإسم الإفتراضى للشجرة الأولى وقم بمسحة أو حذفة من القائمة وذلك بالضغط على الزر Delete من لوحة المفاتيح أو بأى طريقة تعرفها للحذف فيصبح العنصر فارغا تماما ومستعد لتعبئته يدويا وعلى ذلك لاحظ أننا سوف ندرج أو نكتب فية أسماء السور وذلك على شكل قائمة شجرية أى أقسام رئيسية ويتفرع منها " القسم الرئيسى سيكون إسم السورة نفسها والقسم الفرعى سيكون آياتها بحسب عدد الآيات التى تحتوى عليها
وفى الصورة التالية يظهر لنا العنصر بعد حذف ما بداخلة من كتابة ويكون فى الصورة أيضا توضيح للزر المسئول عن تعبئة العنصر بالكتابة سواء للأقسام الرئيسية أو الفرعية التى نريد إنشائها :
http://i.imgur.com/mJ0v7fa.png
نبدأ فى تعبئة العنصر أو الكتابة فية وذلك بالضغط على الزر الموضح فى الصورة السابقة http://i.imgur.com/Tg90ySl.png ليظهر لنا نافذة تعبئة أو كتابة الحقول كما يلى بالصورة التالية :
http://i.imgur.com/odz1olJ.png
قم بالكتابة داخل المستطيل الملون باللون الأحمر وإكتب إسم السورة الأولى وهى سورة الفاتحة وفى هذا المثال لن أستخدم سوى هذا الحقل فقط "item text" وذلك لعدم الحاجة للحقل الآخر الذى هو "item data" ثم قم بالضغط على الزر OK فتكون النتيجة كما بالصورة التالية ولاحظ أن ما قمنا بكتابتة هو القسم الرئيسى :
http://i.imgur.com/xO5bpek.png
الآن وبعد كتابة القسم الرئيسى لسورة الفاتحة لاحظ أنة إذا تم الضغط بالماوس على أى مكان فارغ داخل العنصر سوف يتم إلغاء التظليل الذى هو باللون الأزرق تحت الكتابة السابقة " وعلى هذا إذا كررنا إضافة كتابة أخرى سوف تكون الكتابة قسم رئيسى وليس فرعى " لذلك إذا لم يكن هناك تظليل باللون الأزرق تحت كتابة إسم سورة الفاتحة كما هومبين بالصورة السابقة قم بالضغط على الكتابة بالزر الأيسر للماوس حتى يتم التظليل وهذا التظليل يسمى تحديدا
أو قم بالضغط بيمين الماوس ليظهر لنا قائمة نختار منها add item
حيث سوف نقوم بإنشاء أحد الأقسام الفرعية لسورة الفاتحة ونبدأها بكتابة " الأية 1 " فبنفس زر الإضافة السابق وهو زر الزائد نقوم بكتابة الفرع الأول للقسم الأول الذى كان "سورة الفاتحة" سوف تظهر لنا نافذة الكتابة كالتى شاهدناها سابقا نقوم بالكتابة فيها بنفس الطريقة السابقة فى الحقل الأول إنظر إلى الصورة التوضيحية :
http://i.imgur.com/N4jPDk6.png
بعد كتابة " الآية 1 " فى الحقل الأول كما بالصورة السابقة إضغط على الزر OK فيظهر لنا النتيجة وهى ظهور قسم فرعى من القسم الرئيسى كما بالصورة التالية :
http://i.imgur.com/vJxwRgr.png
على نفس المنوال السابق أو بنفس الطريقة السابق للكتابة نكرر ما تم سابق لإنشاء قسم آخر فرعى من القسم الرئيسى لسورة الفاتحة مع مراعاة أننا نريد إنشاء قسم فرعى من القسم الرئيسى السابق وعلى ذلك يجب التأكد من الضغط على القسم الرئيسى بيسار الماوس حتى يتم تظليلة باللون الأزرق أو نقوم بالضغط علية بيمين الماوس وإختيار add item أيهما يحلو لك كما ذكرنا سابقا فتكون النتيجة بعد إضافة باقى آيات سورة الفاتحة وهم 7 آيات كما بالصورة التالية التوضيحية :
http://i.imgur.com/C5Hes6e.png
بعد الإنتهاء من كتابة السور والآيات قم بالضغط على زر "OK" وسحب أو تغيير مكان عنصر "Tree" إلى اليمين فى المشروع فتكون النتيجة كما بالصورة التالية وطبعا لا تنسى ضبط اللغه العربية من زر "Font" حتى تظهر الكتابة بالشكل السليم :
http://i.imgur.com/He2ZqIB.png
:abc_156: وطبعا يمكن محاذاة الكتابة التى تظهر أو التى كتبناها أى جعل العنصر يقرأ من اليمين إلى اليسار وذلك بإستخدام كود يقوم بعكس الهاندل الخاص بالعنصر tree ويكون الكود كالتالى ويوضع فى خصائص الصفحة فى "On Show" :
--
hWnd = Tree.GetProperties("Tree1").WindowHandle
DLL.CallFunction("User32.dll", "SetWindowLongA", hWnd..", -20, 4194304", DLL_RETURN_TYPE_LONG, DLL_CALL_STDCALL);
Page.Redraw();
وتظهر نتيجة هذا الكود عند المعاينة للمشروع كالتالى كما بالصورة فتجد المحاذاة إلى اليمين :
http://i.imgur.com/ws3qC3D.png
:abc_156: الأن نريد وضع عنصر يتم تشغيل الصوتيات بداخلة ونختار العنصر ميديا بلير على سبيل المثال والصورة التالية توضح كيفية إدراج هذا العنصر فى المشروع :
http://i.imgur.com/N1asoGL.png
فيصبح الشكل بعد إدراج عنصر الميديا بلير فى المشروع ومحاذاتة وتحجيمة كما بالشكل التالى :
http://i.imgur.com/ksHUdPx.png
الأن نريد أن نضع عنصر آخر يقوم بعرض نصوص آيات السور القرآنية بداخلة أثناء الإستماع إليها فنستخدم على سبيل المثال عنصر الإينبوت
الصورة التالية توضح كيفية إدراج هذا العنصر بداخل المشروع :
http://i.imgur.com/ZeEJXQf.png
فتكون النتيجة بعد إضافة عنصر الإينبوت فى المشروع وتحجيمة بما يناسبنا وإختيار خط مناسب كما هو موضح بالصورة التالية :
http://i.imgur.com/0RBj1ZD.png
:abc_156: بما تم سابقا فقد إنتهينا من وضع العناصر التى نريد إستخدامها فى المشروع ونأتى إلى مرحلة البرمجة ووضع الأكواد اللازمة
أولا : التعامل مع عنصر الشجرة "Tree" وبرمجتة ووضع الأكواد المناسبة :
فى محرر الأكشن الخاص بالعنصر سوف نقوم ببرمجة ووضع الأكواد اللازمة للتعامل معه كما توضح الصورة التالية :
http://i.imgur.com/Jw0KA2t.png
فى هذا الحدث "On Select" نجد هناك متغير محجوز يسمى "e_NodeIndex" هذا المتغير يعبر عن رقم الإندكس الذى يتم إختيارة عند الضغط على أحد الإختيارات التى كتبناها على هيئة سورة وآيات فى بداية الشرح
وتذكر أننا ذكرنا أن العنصر عند الكتابة فية كان هناك أقسام جعلنا إسم السورة هو قسم رئيسى و آياتها هى الأقسام الفرعية من هذا القسم
وفى الصورة التالية يوضح رقم الإندكس لكل آية من آيات السورة التى نعمل عليها الآن :
http://i.imgur.com/S1AIYxH.png
إذن يتضح من السور السابق عند الضغط على كلمة "سورة الفاتحة" يكون رقم الإندكس هو 1
وعند الضغط على كلمة "الآية 1" يكون رقم الإندكس هو 1.1 أى الإندكس رقم 1 من القسم رقم 1 وهكذا باقى الآيات الخاصة بالسورة
إذن نحن قمنا بتقسيم سورة الفاتحة كآيات منفردة بأى برنامج تقطيع صوتيات قم بوضع هذة الآيات داخل فولدر بإسم رقم السورة فى العنصر
"Tree" وهنا رقم سورة الفاتحة 1 http://i.imgur.com/CKvO3TZ.png أيضا قم بتسمية الأيات تسمية رقمية من 1 حتى نهاية الأيات أى من 1 إلى 7 حسب ترتيبها http://i.imgur.com/6KsVQLm.png
بهذا الشكل السابق سوف يسهل علينا إيجاد وتحديد ما نريد تشغيلة داخل عنصر الميديا بلير عند الضغط على أو عند إختيار أى إندكس
وما يلزمنا فى هذه الحالة هو التعامل رقميا مع كل إختيار وفصل القسم الرئيسى عن الفرعى فى العنصر "Tree"
نعود لمحرر الأكشن الخاص بالعنصر "Tree" ونتعامل معة بالكود التالى لفصل كل من القسم الرئيسى عن الفرعى كل على حدى فنضع كود للبحث عن علامة " . " فى كل إندكس يتم إختيارة يدويا أو أوتوماتيكيا فيما سوف نعرضة بمتابعة الشرح
result = String.Find(e_NodeIndex, ".", 1, false);
الكود السابق هو كود للبحث ويتعامل مع المخرجات النصية وجدير بالذكر أن المتغير e_NodeIndex هو متغير نصى وليس رقمى وعلى ذلك إستخدمنا الكود الذى يمكنة البحث فى مثل هذه الحالات وهو String.Find
النتيجة التى يحصل عليها الكود السابق سوف يتم تخزينها أوتوماتيكيا فى المتغير result فإذا تم العثور على علامة " . " التى نريد التأكد من وجودها سوف يخزن فى المتغير result ترتيب هذا الحرف أو العلامة رقميا من اليسار فعلى سبيل المثال نبحث فى هذا "1.222" يكون ترتيب العلامة هو 2 من جهة اليسار
وفى حالة ما إذا لم يتم العثور على العلامة أو كان النص المبحوث فية لا يحتوى على هذه العلامة يكون المتغير result مخزن فية القيمة 1-
إذا بعد وضع هذا الكود وجب التأكد من أن المتغير result قد عثر على المطلوب أم لا
فنستعمل الشرط التالى :
if result~=-1 then
أى أننا نشترط إذا كان الكود وجد ما نبحث عنة ينفذ ما يوضع لاحقا وهو :
leng = String.Length(e_NodeIndex);
الكود السابق هو أيضا من أكواد التعامل النصى أو مع النصوص ووظيفتة هو تحديد طول النص كم يحتوى على عدد أحرف ويتم تخزين الناتج الذى يتوصل إلية فى المتغير leng
soura = String.Left(e_NodeIndex, result-1);
طبعا كان يلزمنا معرفة رقم السورة التى يتم تشغيل آياتها لاحقا فى عنصر الميديا بلير ولذلك قمت بوضع الكود السابق ووظيفتة هو معرفة الحرف الموجود على يسار المبحوث عنه مسبقا "علامة . " ويتم تخزين الناتج فى المتغير soura
aya = String.Right(e_NodeIndex, leng-result);
وطبعا وجب معرفة رقم الآية التى تعمل أو يتم إختيارها وتحديد ما إذا كانت هى الآية 1 أم 2 أم إلخ ..........
ولذلك إستخدمت الكود السابق لتحديد ما هو موجود على يمين العلامة المبحوث عنها مسبقا "علامة . " ويخزن الناتج فى المتغير aya
بما سبق أصبح لدينا رقم السورة و الآية المحددة أو المختارة أو التى يتم تشغيلها كل على حدى
ولأننا كمبرمجين يجب علينا التدقيق لمنع حدوث مشاكل أو لتفادى المشاكل نحب أن نتأكد من وجود الفولدر الذى يحتوى على الآيات فى المسار على سبيل المثال كان الفولدر فى مجلد الدوكس فى البرنامج فنستخدم الكود التالى :
dt_soura = Folder.DoesExist("AutoPlay\\Docs\\"..soura);
فائدة الكود السابق هو التحقق فى كل مرة من وجود المجلد المحتوى على الآيات أو آيات السورة التى يتم إختيارها وحفظ النتيجة كنتيجة بولينية إما true فى حالة التأكد أو التحقق من وجود الفولدر بداخل المسار المحدد أو false فى حالة عدم وجود الفولدر داخل المسار المحدد
وعلى ذلك نقوم بوضع شرط إذا كان الفولدر موجود فعلا ينفذ ما يوضع من أكواد تالية فيكون كود الشرط هو :
if dt_soura~=false then
ولأننا نريد أيضا ونحرص على تلافى أى أخطاء محتملة نريد التأكد من وجود الملف أو الآية التى سنحتارها أو إخترناها فى داخل فولدر السورة الخاصة بها فى المسار المحدد لمجلد السورة داخل مجلد الدوكس فيكون كود التحقق كما يلى :
dt_aya = File.DoesExist("AutoPlay\\Docs\\"..soura.."\\"..aya..".mp3");
فائدة الكود السابق هو التحقق من وجود ملف الآية داخل مجلد السورة المحددة وتكون النتيجة المخزنة فى المتغير dt_aya فى حالة التأكد من وجود الملف true وإذا لم يكن موجودا false وعلى ذلك سوف نستخدم الكود التالى كشرط فى حالة وجود الملف ينفذ الأكواد التالية له :
if dt_aya~=false then
إذن إذا وجد الملف داخل مجلد السورة الخاصة بة داخل مجلد الدوكس نعمل عل إعطاء أمر تشغيل هذا الملف فى عنصر الميديا بلير بالأمر التالى :
MediaPlayer.Load("Plugin1", "AutoPlay\\Docs\\"..soura.."\\"..aya..".mp3");
http://www.abc4web.net/vb/images/icons/icon_z.gif إذن الكود التالى هو تجميع كل ما ذكرناه سابقا تفصيليا :
--
result = String.Find(e_NodeIndex, ".", 1, false);
if result~=-1 then
leng = String.Length(e_NodeIndex);
soura = String.Left(e_NodeIndex, result-1);
aya = String.Right(e_NodeIndex, leng-result);
dt_soura = Folder.DoesExist("AutoPlay\\Docs\\"..soura);
if dt_soura~=false then
dt_aya = File.DoesExist("AutoPlay\\Docs\\"..soura.."\\"..aya..".mp3");
if dt_aya~=false then
MediaPlayer.Load("Plugin1", "AutoPlay\\Docs\\"..soura.."\\"..aya..".mp3");
end
end
end
:abc_156: إليك عزيزى القارى ترجمة ما قمنا بشرحة كملف مفتوح فيمكنك المعاينة والإستماع إلى الآية بعد إختيارها فى العنصر tree :
http://i.imgur.com/2dxLQmN.gif
مثال مفتوح لنموذج تصميم برنامج قرآن كريم (https://dl.dropboxusercontent.com/u/29881160/%D9%86%D9%85%D9%88%D8%B0%D8%AC%20%D8%AA%D8%B5%D9%8 5%D9%8A%D9%85%20%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D8% AC%20%D9%82%D8%B1%D8%A2%D9%86%20%D9%83%D8%B1%D9%8A %D9%851.rar)
http://i.imgur.com/NahjYou.gif
كيفية عرض نص الآية القرآنية داخل عنصر الإينبوت
سوف نستخدم قاعدة بيانات سكيوليت SQL تمت تصميمها بواسطة الأخ العزيز أبوبلقيس
وتحتوى هذه القاعدة على نصوص الآيات القرآنية مكتوبة بالتشكيل السليم إن شاء الله
وتجد هذه القاعدة للبيانات فى هذا الموضوع http://www.abc4web.net/vb/showthread.php?t=31876
أيضا قمت بإعادة رفع هذة القاعدة للبيانات على سيرفر آخر يمكنك تحميلها من هنا https://dl.dropboxusercontent.com/u/29881160/belkiss.rar
بعد تحميل قاعدة البيانات وفك الضغط عنها ضعها فى المسار التالى فى مجلد الدوكس :
"AutoPlay\\Docs\\belkiss.db"
ثم نتجه إلى الملف المفتوح الذى نعمل علية الآن ونضع فى الحدث "On Show" الكود التالى :
--
db = SQLite.Open("AutoPlay\\Docs\\belkiss.db");
s=SQLite.QueryToTable(db, "select * from rabie");
فائدة هذا الكود السابق هو العمل على فتح قاعدة البيانات والإستعلام منها على كل محتواياتها وتخزين النتيجة كمصفوفة داخل المتغير S
فيصبح الكود الموجود فى الحدث "On Show" من أحداث الصفحة بالكامل كما يلى :
--
hWnd = Tree.GetProperties("Tree1").WindowHandle
DLL.CallFunction("User32.dll", "SetWindowLongA", hWnd..", -20, 4194304", DLL_RETURN_TYPE_LONG, DLL_CALL_STDCALL);
Page.Redraw();
db = SQLite.Open("AutoPlay\\Docs\\belkiss.db");
s=SQLite.QueryToTable(db, "select * from rabie");
الآن نحن نريد عند إختيار آية من آيات سورة معينة من عنصر "Tree" عرض نصها داخل عنصر الإينبوت أثناء تشغيلها كمقطع صوتى فى الميديا بلير وعلى ذلك سوف نضف الكود التالى :
--
for i,v in pairs(s.Data) do
if s.Data[i]["soura"]==Tree.GetNode("Tree1", soura).Text and s.Data[i]["naya"]==aya then
Input.SetText("Input1", s.Data[i]["alaya"]);
break
end
end
فائدة الكود السابق هو عمل حلقة تكرار بحثى داخل البيانات التى تم التحصل عليها من المصفوفة S السابق تخزين البيانات بها وهذا ما يوضحة السطر الأول من الكود والذى كان :
for i,v in pairs(s.Data) do
أما السطر الثانى الذى هو :
if s.Data[i]["soura"]==Tree.GetNode("Tree1", soura).Text and s.Data[i]["naya"]==aya then
فائدتة هى جملة شرطية نطلب فيها فى حالة تساوى إسم السورة الموجود فى قاعدة البيانات مع الإسم النصى لها فى العنصر "Tree" وفى حالة تساوى رقم الآية فى قاعدة البيانات مع رقم الآية التى تم إختيارها فى عنصر "Tree"
يتم عرض النص المطابق للآية التى يتم قراءتها أو تشغيلها فى الميديا بلير عن طريق هذا الكود :
Input.SetText("Input1", s.Data[i]["alaya"]);
الكود السابق هو أمر عرض النص داخل عنصر الإينبوت بعدما تحقق الشرط السابق وضعه
إذن بما سبق كان هناك عملية تكرار بحثى داخل بيانات قاعدة البيانات وحصلنا على النص المطابق المراد الحصول علية لكل آية يتم إختيارها
فهنا وجب عند تحقق الشرط وعرض النص داخل الإينبوت أن لا ندع الحلقة تستمر إلى آخرها لأننا ببساطة لم نعد بحاجة لإستمرارها فى البحث
وعلى ذلك نستخدم التعليمة البرمجية الخاصة بكسر الحلقة التكرارية ومنعها من الإستمرار بعدما تحقق الشرط المطلوب والتعليمة البرمجية هى :
break
إلى هنا أعزائى المتابعين وإخوانى المبتدئين يكون الكود بالكامل متضمن جميع ما سبق طرحة فى هذا الشرح فى الحدث "On Select" من أحداث العنصر "Tree" كالتالى :
--
result = String.Find(e_NodeIndex, ".", 1, false);
if result~=-1 then
leng = String.Length(e_NodeIndex);
soura = String.Left(e_NodeIndex, result-1);
aya = String.Right(e_NodeIndex, leng-result);
dt_soura = Folder.DoesExist("AutoPlay\\Docs\\"..soura);
if dt_soura~=false then
dt_aya = File.DoesExist("AutoPlay\\Docs\\"..soura.."\\"..aya..".mp3");
if dt_aya~=false then
MediaPlayer.Load("Plugin1", "AutoPlay\\Docs\\"..soura.."\\"..aya..".mp3");
for i,v in pairs(s.Data) do
if s.Data[i]["soura"]==Tree.GetNode("Tree1", soura).Text and s.Data[i]["naya"]==aya then
Input.SetText("Input1", s.Data[i]["alaya"]);
break
end
end
end
end
end
طبعا وجب تفعيل الإضافة الخاصة بالتعامل مع قاعدة البيانات SQL وهى إضافة أكشن إن لم تكن تمتلكها يمكنك تحميلها من الرابط التالى :
http://i.imgur.com/2dxLQmN.gif
إضافة الأكشن SQLite (https://dl.dropboxusercontent.com/u/29881160/SQLite.rar)
بعد تحميلها وفك الضغط عنها ضعها فى مسارها فى مجلد برنامج الأتوبلاى ميديا ستوديو فى مجلد البليجينز فى مجلد الأكشن كالتالى :
C:\Program Files\AutoPlay Media Studio 8\Plugins\Actions
ثم قم بتفعيل الإضافة كما بالصورة التالية :
http://i.imgur.com/YnEdxLV.png
فتظهر لنا نافذة أخرى نبحث فيها عن إسم الإضافة المراد تفعيلها وهى SQLite ونؤشر بعلامة صح عليها كما بالصورة التالية :
http://i.imgur.com/5ZRyXm5.png
:abc_156: قم بمعاينة مشروعك وسوف ترى عند إختيار آية سوف يتم تشغيل المقطع الصوتى الخاص بها فى مشغل الميديا بلير وفى نفس الوقت يتم عرض النص مكتوبا فى الإينبوت الخاص بعرض النص للآية المحددة
:abc_156: أو قم بتحميل المثال المفتوح التالى وقم بالمعاينة لترى النتيجة بنفسك :
http://i.imgur.com/2dxLQmN.gif
نموزج تصميم برنامج قرآن كريم 2 (https://dl.dropboxusercontent.com/u/29881160/نموذج تصميم برنامج قرآن كريم2.rar)
إن شاء الله نضع السلسلة مرحلة مرحلة تدريجيا
تحياتى أخوكم عبود
http://i.imgur.com/Nz3B0Vj.gif
أجزاء السلسلة التى تم شرحها أيضا
:abc_156: سلسلة رقم 2 تصميم إسطوانة قرآن كريم (http://www.abc4web.net/vb/showthread.php?t=33146)
http://i.imgur.com/Fl8Z6JK.gif
سلسلة رقم 1 تصميم إسطوانة قرآن كريم
إخوانى أعضاء وزوار المنتدى الكرام أقدم لكم سلسلة رقم 1 لشرح تصميم إسطوانة قرآن كريم وذلك لمحاولة تبسيط شرح بعض الطرق وبعض الأكواد الممكن إستخدامها فى هذا العمل
نبدأ إن شاء الله
إفتح مشروع جديد فارغ ونسمية على سبيل المثال "نموذج تصميم إسطوانة قرآن كريم" كما هو موضح بالصور التالية :
http://i.imgur.com/LJTOTX0.png
http://i.imgur.com/BDdyKXT.png
بعد فتح مشروع جديد كما سبق نعمل على إضافة العناصر التى نريدها فى المشروع وفى هذا المثال سوف أستخدم عنصر الشجرة المتفرعة "Tree" كأحد هذه العناصر حيث سوف يستخدم لعرض قائمة بأسماء السور "سور القرآن الكريم" والتى سوف نقسمها إلى آيات أى أن كل سورة سوف تقسم لعدد من الآيات القرآنية طبقا لعددها فى السورة المحددة فكلنا نعرف أن عدد آيات سورة الفاتحة 7 آيات وذلك على سبيل المثال للتوضيح .
الصورة التالية صورة توضيحية لكيفية إدراج العنصر "Tree" فى المشروع :
http://i.imgur.com/aXYu2sh.png
بعد إدراج العنصر فى المشروع نقوم بالضغط علية 2 كليك بالماوس ليظهر لنا خصائص العنصر فى نافذة التحكم الخاصة بة كما بالصور التالية :
http://i.imgur.com/CfjIeoB.png
بعد ظهور هذه النافذة قم بتحديد الإسم الإفتراضى للشجرة الأولى وقم بمسحة أو حذفة من القائمة وذلك بالضغط على الزر Delete من لوحة المفاتيح أو بأى طريقة تعرفها للحذف فيصبح العنصر فارغا تماما ومستعد لتعبئته يدويا وعلى ذلك لاحظ أننا سوف ندرج أو نكتب فية أسماء السور وذلك على شكل قائمة شجرية أى أقسام رئيسية ويتفرع منها " القسم الرئيسى سيكون إسم السورة نفسها والقسم الفرعى سيكون آياتها بحسب عدد الآيات التى تحتوى عليها
وفى الصورة التالية يظهر لنا العنصر بعد حذف ما بداخلة من كتابة ويكون فى الصورة أيضا توضيح للزر المسئول عن تعبئة العنصر بالكتابة سواء للأقسام الرئيسية أو الفرعية التى نريد إنشائها :
http://i.imgur.com/mJ0v7fa.png
نبدأ فى تعبئة العنصر أو الكتابة فية وذلك بالضغط على الزر الموضح فى الصورة السابقة http://i.imgur.com/Tg90ySl.png ليظهر لنا نافذة تعبئة أو كتابة الحقول كما يلى بالصورة التالية :
http://i.imgur.com/odz1olJ.png
قم بالكتابة داخل المستطيل الملون باللون الأحمر وإكتب إسم السورة الأولى وهى سورة الفاتحة وفى هذا المثال لن أستخدم سوى هذا الحقل فقط "item text" وذلك لعدم الحاجة للحقل الآخر الذى هو "item data" ثم قم بالضغط على الزر OK فتكون النتيجة كما بالصورة التالية ولاحظ أن ما قمنا بكتابتة هو القسم الرئيسى :
http://i.imgur.com/xO5bpek.png
الآن وبعد كتابة القسم الرئيسى لسورة الفاتحة لاحظ أنة إذا تم الضغط بالماوس على أى مكان فارغ داخل العنصر سوف يتم إلغاء التظليل الذى هو باللون الأزرق تحت الكتابة السابقة " وعلى هذا إذا كررنا إضافة كتابة أخرى سوف تكون الكتابة قسم رئيسى وليس فرعى " لذلك إذا لم يكن هناك تظليل باللون الأزرق تحت كتابة إسم سورة الفاتحة كما هومبين بالصورة السابقة قم بالضغط على الكتابة بالزر الأيسر للماوس حتى يتم التظليل وهذا التظليل يسمى تحديدا
أو قم بالضغط بيمين الماوس ليظهر لنا قائمة نختار منها add item
حيث سوف نقوم بإنشاء أحد الأقسام الفرعية لسورة الفاتحة ونبدأها بكتابة " الأية 1 " فبنفس زر الإضافة السابق وهو زر الزائد نقوم بكتابة الفرع الأول للقسم الأول الذى كان "سورة الفاتحة" سوف تظهر لنا نافذة الكتابة كالتى شاهدناها سابقا نقوم بالكتابة فيها بنفس الطريقة السابقة فى الحقل الأول إنظر إلى الصورة التوضيحية :
http://i.imgur.com/N4jPDk6.png
بعد كتابة " الآية 1 " فى الحقل الأول كما بالصورة السابقة إضغط على الزر OK فيظهر لنا النتيجة وهى ظهور قسم فرعى من القسم الرئيسى كما بالصورة التالية :
http://i.imgur.com/vJxwRgr.png
على نفس المنوال السابق أو بنفس الطريقة السابق للكتابة نكرر ما تم سابق لإنشاء قسم آخر فرعى من القسم الرئيسى لسورة الفاتحة مع مراعاة أننا نريد إنشاء قسم فرعى من القسم الرئيسى السابق وعلى ذلك يجب التأكد من الضغط على القسم الرئيسى بيسار الماوس حتى يتم تظليلة باللون الأزرق أو نقوم بالضغط علية بيمين الماوس وإختيار add item أيهما يحلو لك كما ذكرنا سابقا فتكون النتيجة بعد إضافة باقى آيات سورة الفاتحة وهم 7 آيات كما بالصورة التالية التوضيحية :
http://i.imgur.com/C5Hes6e.png
بعد الإنتهاء من كتابة السور والآيات قم بالضغط على زر "OK" وسحب أو تغيير مكان عنصر "Tree" إلى اليمين فى المشروع فتكون النتيجة كما بالصورة التالية وطبعا لا تنسى ضبط اللغه العربية من زر "Font" حتى تظهر الكتابة بالشكل السليم :
http://i.imgur.com/He2ZqIB.png
:abc_156: وطبعا يمكن محاذاة الكتابة التى تظهر أو التى كتبناها أى جعل العنصر يقرأ من اليمين إلى اليسار وذلك بإستخدام كود يقوم بعكس الهاندل الخاص بالعنصر tree ويكون الكود كالتالى ويوضع فى خصائص الصفحة فى "On Show" :
--
hWnd = Tree.GetProperties("Tree1").WindowHandle
DLL.CallFunction("User32.dll", "SetWindowLongA", hWnd..", -20, 4194304", DLL_RETURN_TYPE_LONG, DLL_CALL_STDCALL);
Page.Redraw();
وتظهر نتيجة هذا الكود عند المعاينة للمشروع كالتالى كما بالصورة فتجد المحاذاة إلى اليمين :
http://i.imgur.com/ws3qC3D.png
:abc_156: الأن نريد وضع عنصر يتم تشغيل الصوتيات بداخلة ونختار العنصر ميديا بلير على سبيل المثال والصورة التالية توضح كيفية إدراج هذا العنصر فى المشروع :
http://i.imgur.com/N1asoGL.png
فيصبح الشكل بعد إدراج عنصر الميديا بلير فى المشروع ومحاذاتة وتحجيمة كما بالشكل التالى :
http://i.imgur.com/ksHUdPx.png
الأن نريد أن نضع عنصر آخر يقوم بعرض نصوص آيات السور القرآنية بداخلة أثناء الإستماع إليها فنستخدم على سبيل المثال عنصر الإينبوت
الصورة التالية توضح كيفية إدراج هذا العنصر بداخل المشروع :
http://i.imgur.com/ZeEJXQf.png
فتكون النتيجة بعد إضافة عنصر الإينبوت فى المشروع وتحجيمة بما يناسبنا وإختيار خط مناسب كما هو موضح بالصورة التالية :
http://i.imgur.com/0RBj1ZD.png
:abc_156: بما تم سابقا فقد إنتهينا من وضع العناصر التى نريد إستخدامها فى المشروع ونأتى إلى مرحلة البرمجة ووضع الأكواد اللازمة
أولا : التعامل مع عنصر الشجرة "Tree" وبرمجتة ووضع الأكواد المناسبة :
فى محرر الأكشن الخاص بالعنصر سوف نقوم ببرمجة ووضع الأكواد اللازمة للتعامل معه كما توضح الصورة التالية :
http://i.imgur.com/Jw0KA2t.png
فى هذا الحدث "On Select" نجد هناك متغير محجوز يسمى "e_NodeIndex" هذا المتغير يعبر عن رقم الإندكس الذى يتم إختيارة عند الضغط على أحد الإختيارات التى كتبناها على هيئة سورة وآيات فى بداية الشرح
وتذكر أننا ذكرنا أن العنصر عند الكتابة فية كان هناك أقسام جعلنا إسم السورة هو قسم رئيسى و آياتها هى الأقسام الفرعية من هذا القسم
وفى الصورة التالية يوضح رقم الإندكس لكل آية من آيات السورة التى نعمل عليها الآن :
http://i.imgur.com/S1AIYxH.png
إذن يتضح من السور السابق عند الضغط على كلمة "سورة الفاتحة" يكون رقم الإندكس هو 1
وعند الضغط على كلمة "الآية 1" يكون رقم الإندكس هو 1.1 أى الإندكس رقم 1 من القسم رقم 1 وهكذا باقى الآيات الخاصة بالسورة
إذن نحن قمنا بتقسيم سورة الفاتحة كآيات منفردة بأى برنامج تقطيع صوتيات قم بوضع هذة الآيات داخل فولدر بإسم رقم السورة فى العنصر
"Tree" وهنا رقم سورة الفاتحة 1 http://i.imgur.com/CKvO3TZ.png أيضا قم بتسمية الأيات تسمية رقمية من 1 حتى نهاية الأيات أى من 1 إلى 7 حسب ترتيبها http://i.imgur.com/6KsVQLm.png
بهذا الشكل السابق سوف يسهل علينا إيجاد وتحديد ما نريد تشغيلة داخل عنصر الميديا بلير عند الضغط على أو عند إختيار أى إندكس
وما يلزمنا فى هذه الحالة هو التعامل رقميا مع كل إختيار وفصل القسم الرئيسى عن الفرعى فى العنصر "Tree"
نعود لمحرر الأكشن الخاص بالعنصر "Tree" ونتعامل معة بالكود التالى لفصل كل من القسم الرئيسى عن الفرعى كل على حدى فنضع كود للبحث عن علامة " . " فى كل إندكس يتم إختيارة يدويا أو أوتوماتيكيا فيما سوف نعرضة بمتابعة الشرح
result = String.Find(e_NodeIndex, ".", 1, false);
الكود السابق هو كود للبحث ويتعامل مع المخرجات النصية وجدير بالذكر أن المتغير e_NodeIndex هو متغير نصى وليس رقمى وعلى ذلك إستخدمنا الكود الذى يمكنة البحث فى مثل هذه الحالات وهو String.Find
النتيجة التى يحصل عليها الكود السابق سوف يتم تخزينها أوتوماتيكيا فى المتغير result فإذا تم العثور على علامة " . " التى نريد التأكد من وجودها سوف يخزن فى المتغير result ترتيب هذا الحرف أو العلامة رقميا من اليسار فعلى سبيل المثال نبحث فى هذا "1.222" يكون ترتيب العلامة هو 2 من جهة اليسار
وفى حالة ما إذا لم يتم العثور على العلامة أو كان النص المبحوث فية لا يحتوى على هذه العلامة يكون المتغير result مخزن فية القيمة 1-
إذا بعد وضع هذا الكود وجب التأكد من أن المتغير result قد عثر على المطلوب أم لا
فنستعمل الشرط التالى :
if result~=-1 then
أى أننا نشترط إذا كان الكود وجد ما نبحث عنة ينفذ ما يوضع لاحقا وهو :
leng = String.Length(e_NodeIndex);
الكود السابق هو أيضا من أكواد التعامل النصى أو مع النصوص ووظيفتة هو تحديد طول النص كم يحتوى على عدد أحرف ويتم تخزين الناتج الذى يتوصل إلية فى المتغير leng
soura = String.Left(e_NodeIndex, result-1);
طبعا كان يلزمنا معرفة رقم السورة التى يتم تشغيل آياتها لاحقا فى عنصر الميديا بلير ولذلك قمت بوضع الكود السابق ووظيفتة هو معرفة الحرف الموجود على يسار المبحوث عنه مسبقا "علامة . " ويتم تخزين الناتج فى المتغير soura
aya = String.Right(e_NodeIndex, leng-result);
وطبعا وجب معرفة رقم الآية التى تعمل أو يتم إختيارها وتحديد ما إذا كانت هى الآية 1 أم 2 أم إلخ ..........
ولذلك إستخدمت الكود السابق لتحديد ما هو موجود على يمين العلامة المبحوث عنها مسبقا "علامة . " ويخزن الناتج فى المتغير aya
بما سبق أصبح لدينا رقم السورة و الآية المحددة أو المختارة أو التى يتم تشغيلها كل على حدى
ولأننا كمبرمجين يجب علينا التدقيق لمنع حدوث مشاكل أو لتفادى المشاكل نحب أن نتأكد من وجود الفولدر الذى يحتوى على الآيات فى المسار على سبيل المثال كان الفولدر فى مجلد الدوكس فى البرنامج فنستخدم الكود التالى :
dt_soura = Folder.DoesExist("AutoPlay\\Docs\\"..soura);
فائدة الكود السابق هو التحقق فى كل مرة من وجود المجلد المحتوى على الآيات أو آيات السورة التى يتم إختيارها وحفظ النتيجة كنتيجة بولينية إما true فى حالة التأكد أو التحقق من وجود الفولدر بداخل المسار المحدد أو false فى حالة عدم وجود الفولدر داخل المسار المحدد
وعلى ذلك نقوم بوضع شرط إذا كان الفولدر موجود فعلا ينفذ ما يوضع من أكواد تالية فيكون كود الشرط هو :
if dt_soura~=false then
ولأننا نريد أيضا ونحرص على تلافى أى أخطاء محتملة نريد التأكد من وجود الملف أو الآية التى سنحتارها أو إخترناها فى داخل فولدر السورة الخاصة بها فى المسار المحدد لمجلد السورة داخل مجلد الدوكس فيكون كود التحقق كما يلى :
dt_aya = File.DoesExist("AutoPlay\\Docs\\"..soura.."\\"..aya..".mp3");
فائدة الكود السابق هو التحقق من وجود ملف الآية داخل مجلد السورة المحددة وتكون النتيجة المخزنة فى المتغير dt_aya فى حالة التأكد من وجود الملف true وإذا لم يكن موجودا false وعلى ذلك سوف نستخدم الكود التالى كشرط فى حالة وجود الملف ينفذ الأكواد التالية له :
if dt_aya~=false then
إذن إذا وجد الملف داخل مجلد السورة الخاصة بة داخل مجلد الدوكس نعمل عل إعطاء أمر تشغيل هذا الملف فى عنصر الميديا بلير بالأمر التالى :
MediaPlayer.Load("Plugin1", "AutoPlay\\Docs\\"..soura.."\\"..aya..".mp3");
http://www.abc4web.net/vb/images/icons/icon_z.gif إذن الكود التالى هو تجميع كل ما ذكرناه سابقا تفصيليا :
--
result = String.Find(e_NodeIndex, ".", 1, false);
if result~=-1 then
leng = String.Length(e_NodeIndex);
soura = String.Left(e_NodeIndex, result-1);
aya = String.Right(e_NodeIndex, leng-result);
dt_soura = Folder.DoesExist("AutoPlay\\Docs\\"..soura);
if dt_soura~=false then
dt_aya = File.DoesExist("AutoPlay\\Docs\\"..soura.."\\"..aya..".mp3");
if dt_aya~=false then
MediaPlayer.Load("Plugin1", "AutoPlay\\Docs\\"..soura.."\\"..aya..".mp3");
end
end
end
:abc_156: إليك عزيزى القارى ترجمة ما قمنا بشرحة كملف مفتوح فيمكنك المعاينة والإستماع إلى الآية بعد إختيارها فى العنصر tree :
http://i.imgur.com/2dxLQmN.gif
مثال مفتوح لنموذج تصميم برنامج قرآن كريم (https://dl.dropboxusercontent.com/u/29881160/%D9%86%D9%85%D9%88%D8%B0%D8%AC%20%D8%AA%D8%B5%D9%8 5%D9%8A%D9%85%20%D8%A8%D8%B1%D9%86%D8%A7%D9%85%D8% AC%20%D9%82%D8%B1%D8%A2%D9%86%20%D9%83%D8%B1%D9%8A %D9%851.rar)
http://i.imgur.com/NahjYou.gif
كيفية عرض نص الآية القرآنية داخل عنصر الإينبوت
سوف نستخدم قاعدة بيانات سكيوليت SQL تمت تصميمها بواسطة الأخ العزيز أبوبلقيس
وتحتوى هذه القاعدة على نصوص الآيات القرآنية مكتوبة بالتشكيل السليم إن شاء الله
وتجد هذه القاعدة للبيانات فى هذا الموضوع http://www.abc4web.net/vb/showthread.php?t=31876
أيضا قمت بإعادة رفع هذة القاعدة للبيانات على سيرفر آخر يمكنك تحميلها من هنا https://dl.dropboxusercontent.com/u/29881160/belkiss.rar
بعد تحميل قاعدة البيانات وفك الضغط عنها ضعها فى المسار التالى فى مجلد الدوكس :
"AutoPlay\\Docs\\belkiss.db"
ثم نتجه إلى الملف المفتوح الذى نعمل علية الآن ونضع فى الحدث "On Show" الكود التالى :
--
db = SQLite.Open("AutoPlay\\Docs\\belkiss.db");
s=SQLite.QueryToTable(db, "select * from rabie");
فائدة هذا الكود السابق هو العمل على فتح قاعدة البيانات والإستعلام منها على كل محتواياتها وتخزين النتيجة كمصفوفة داخل المتغير S
فيصبح الكود الموجود فى الحدث "On Show" من أحداث الصفحة بالكامل كما يلى :
--
hWnd = Tree.GetProperties("Tree1").WindowHandle
DLL.CallFunction("User32.dll", "SetWindowLongA", hWnd..", -20, 4194304", DLL_RETURN_TYPE_LONG, DLL_CALL_STDCALL);
Page.Redraw();
db = SQLite.Open("AutoPlay\\Docs\\belkiss.db");
s=SQLite.QueryToTable(db, "select * from rabie");
الآن نحن نريد عند إختيار آية من آيات سورة معينة من عنصر "Tree" عرض نصها داخل عنصر الإينبوت أثناء تشغيلها كمقطع صوتى فى الميديا بلير وعلى ذلك سوف نضف الكود التالى :
--
for i,v in pairs(s.Data) do
if s.Data[i]["soura"]==Tree.GetNode("Tree1", soura).Text and s.Data[i]["naya"]==aya then
Input.SetText("Input1", s.Data[i]["alaya"]);
break
end
end
فائدة الكود السابق هو عمل حلقة تكرار بحثى داخل البيانات التى تم التحصل عليها من المصفوفة S السابق تخزين البيانات بها وهذا ما يوضحة السطر الأول من الكود والذى كان :
for i,v in pairs(s.Data) do
أما السطر الثانى الذى هو :
if s.Data[i]["soura"]==Tree.GetNode("Tree1", soura).Text and s.Data[i]["naya"]==aya then
فائدتة هى جملة شرطية نطلب فيها فى حالة تساوى إسم السورة الموجود فى قاعدة البيانات مع الإسم النصى لها فى العنصر "Tree" وفى حالة تساوى رقم الآية فى قاعدة البيانات مع رقم الآية التى تم إختيارها فى عنصر "Tree"
يتم عرض النص المطابق للآية التى يتم قراءتها أو تشغيلها فى الميديا بلير عن طريق هذا الكود :
Input.SetText("Input1", s.Data[i]["alaya"]);
الكود السابق هو أمر عرض النص داخل عنصر الإينبوت بعدما تحقق الشرط السابق وضعه
إذن بما سبق كان هناك عملية تكرار بحثى داخل بيانات قاعدة البيانات وحصلنا على النص المطابق المراد الحصول علية لكل آية يتم إختيارها
فهنا وجب عند تحقق الشرط وعرض النص داخل الإينبوت أن لا ندع الحلقة تستمر إلى آخرها لأننا ببساطة لم نعد بحاجة لإستمرارها فى البحث
وعلى ذلك نستخدم التعليمة البرمجية الخاصة بكسر الحلقة التكرارية ومنعها من الإستمرار بعدما تحقق الشرط المطلوب والتعليمة البرمجية هى :
break
إلى هنا أعزائى المتابعين وإخوانى المبتدئين يكون الكود بالكامل متضمن جميع ما سبق طرحة فى هذا الشرح فى الحدث "On Select" من أحداث العنصر "Tree" كالتالى :
--
result = String.Find(e_NodeIndex, ".", 1, false);
if result~=-1 then
leng = String.Length(e_NodeIndex);
soura = String.Left(e_NodeIndex, result-1);
aya = String.Right(e_NodeIndex, leng-result);
dt_soura = Folder.DoesExist("AutoPlay\\Docs\\"..soura);
if dt_soura~=false then
dt_aya = File.DoesExist("AutoPlay\\Docs\\"..soura.."\\"..aya..".mp3");
if dt_aya~=false then
MediaPlayer.Load("Plugin1", "AutoPlay\\Docs\\"..soura.."\\"..aya..".mp3");
for i,v in pairs(s.Data) do
if s.Data[i]["soura"]==Tree.GetNode("Tree1", soura).Text and s.Data[i]["naya"]==aya then
Input.SetText("Input1", s.Data[i]["alaya"]);
break
end
end
end
end
end
طبعا وجب تفعيل الإضافة الخاصة بالتعامل مع قاعدة البيانات SQL وهى إضافة أكشن إن لم تكن تمتلكها يمكنك تحميلها من الرابط التالى :
http://i.imgur.com/2dxLQmN.gif
إضافة الأكشن SQLite (https://dl.dropboxusercontent.com/u/29881160/SQLite.rar)
بعد تحميلها وفك الضغط عنها ضعها فى مسارها فى مجلد برنامج الأتوبلاى ميديا ستوديو فى مجلد البليجينز فى مجلد الأكشن كالتالى :
C:\Program Files\AutoPlay Media Studio 8\Plugins\Actions
ثم قم بتفعيل الإضافة كما بالصورة التالية :
http://i.imgur.com/YnEdxLV.png
فتظهر لنا نافذة أخرى نبحث فيها عن إسم الإضافة المراد تفعيلها وهى SQLite ونؤشر بعلامة صح عليها كما بالصورة التالية :
http://i.imgur.com/5ZRyXm5.png
:abc_156: قم بمعاينة مشروعك وسوف ترى عند إختيار آية سوف يتم تشغيل المقطع الصوتى الخاص بها فى مشغل الميديا بلير وفى نفس الوقت يتم عرض النص مكتوبا فى الإينبوت الخاص بعرض النص للآية المحددة
:abc_156: أو قم بتحميل المثال المفتوح التالى وقم بالمعاينة لترى النتيجة بنفسك :
http://i.imgur.com/2dxLQmN.gif
نموزج تصميم برنامج قرآن كريم 2 (https://dl.dropboxusercontent.com/u/29881160/نموذج تصميم برنامج قرآن كريم2.rar)
إن شاء الله نضع السلسلة مرحلة مرحلة تدريجيا
تحياتى أخوكم عبود
http://i.imgur.com/Nz3B0Vj.gif
أجزاء السلسلة التى تم شرحها أيضا
:abc_156: سلسلة رقم 2 تصميم إسطوانة قرآن كريم (http://www.abc4web.net/vb/showthread.php?t=33146)