[ حصريا ] طريقة اسخدام الجافا سكربت في الزين فورو

[shqawe]

بسم الله الرحمن الرحيم

الحمد لله والصلاة والسلام على رسول الله نبينا محمد عليه افضل الصلاة واتم التسليم

اللهم لا علم لنا إلا ما علمتنا، إنك أنت العليم الحكيم، اللهم علمنا ما ينفعنا، وانفعنا بما علمتنا، وزدنا علما،

اسعد الله اوقاتكم بكل خير واتمنى ان يكون جميع اعضائنا وزوارنا بصحة وعافية وسالمين معافين ان شاء الله احببت ان اقدم لكم اليوم طريقة استخدام الجافا سكربت في الزين فورو فالزين فورو لها مكتبة خاصة لاستخدام الجاف سكربت ولم ارى كثير من اخواننا العرب يستخدمون نفس الطريقة بل يستخدمون ال jQuery وهو يعمل بدون مشاكل اذا كانت اﻻكواد ﻻ تحتاج الى ارسال او استقبال البيانات او استخدام بعض خصائص مكتبة الزين فورو

وان شاء الله اليوم سوف احاول شرح وتبسيط الطريقة بقدر المستطاع عسى ان تعم الفائدة للجميع ان شاء الله

ملاحظة: يحتاج هذا الدرس الى معرفة في الجافا سكربت وبعض دوالها.

بداية ً متأكد ان كل من تعامل مع قوالب الزين فورو قد مر عليه هذ الكود

data-xf-init

وهذا هو مربط الفرس في درسنا لهذا اليوم ومدخلنا لمعرفة طريقة استخدام مكتبة الجافا سكربت الخاصة بالزين فورو

دعونا نأخذ فكرة عن طريقة كتابة الفنكشن الخاصة بالزين فورو وكيفية استدعائها

بداية يتوجب علينا انشاء ملف في مجلد js الموجود في رئيسية النسخة ويفضل دائما ً ان تنشأ مجلد خاص باسمك وداخل هذه المجلد تضع لكل اضافة مجلد خاص بها يحمل جميع ملفات الاضافة

لذا سوف انشئ مجلد باسم xenarabia وداخل هذا المجلد سوف انشأ ملف باسم testjs.js

ويتم استدعاء جميع الملفات الموجودة داخل مجلد js داخل القوالب بهذه الطريقة

<xf:js src="xenarabia/testjs.js" />

ﻻحظوا اننا لم نقم بكتابة مجلد js لان الزين فورو مثل ما اشرت سابقاً تتعرف على جميع الملفات داخل مجلد js

ملاحظة: يفضل عند محاولة استدعاء اي ملف javascript ان يتم وضع اﻻستدعاء داخل قالب helper_js_global بعد هذا الكود

<!--XF:JS-->

اﻻن نأتي الى ملف testjs.js وكيفية كتابة الفنكشن الخاص بالزين فورو

اولا ً يجب ان انوه الى ان الزين فورو تستخدم الوضع الصارم او ما يسمى use strict

وهذا الوضع بشكل مختصر يستخدم للحماية حسب فهمي المتواضع شكل الملف سوف يكون كالتالي:

!(function ($, window, document, _undefined) {
    "use strict";
    XF.ShowUserName = XF.Element.newHandler({
        eventNameSpace: "ShowUserName",

        options: {
            target: null,
        },

        init: function () {
            this.$target.on("click", $.proxy(this, "click"));
        },

        click: function (e) {
            e.preventDefault();

        },
    });
    XF.Element.register("show-user-name", "XF.ShowUserName");
})(jQuery, window, document);

لنشرح اﻻكواد بشكل مفصل لكي يسهل فهمها

في بداية الكود سوف تجدون هذا الكود وانا وضعت بدايته ونهايته

!(function ($, window, document, _undefined) {
    "use strict";

})(jQuery, window, document);

وهذا بالضبط يشبه كود jQuery التالي:

$(document).ready(function() {
   
});

اﻻن نأتي للسطر الثالث والرابع وهو هذا الكود:

XF.ShowUserName = XF.Element.newHandler({
        eventNameSpace: "ShowUserName",

});

وهنا قمنا باستخدام الفريم ورك الخاص بالزين فورو في كتابة الجافا سكربت ويتم بداية باختيار اسم للحدث Event الخاص بهذا الكود ويكون عن طريق اضافة XF قبل اسم الحدث Event وكما تلاحظون في مثالنا قمنا بتعريف الحدث الخاص بنا بالشكل التالي: XF.ShowUserName

ومن ثم اخبرنا الزين فورو ان هذا الحدث سوف يقوم ببعض العمليات وذلك عن طريق اسناد اسم الحدث Event الى الكود في السطر الرابع بالطريقة التالية:

XF.Element.newHandler({
eventNameSpace: "ShowUserName",
});

الان تم تعريف الحدث Event الخاص بنا واصبح جاهز للاستخدام النقطة التالية في الكود وهي options وكيفية استخدامها.

يمكن شرح options على انها عبارة عن متغيرات افتراضية يتم تعريفها بداية كل حدث ويمكن اسناد بعض القيم لها حسب الحاجة ونستطيع هنا مثلا ً تعريف متغير واسناد قيمة عنصر له مثل كلاس class او id لاي عنصر html لكي يتم تنفيذ الحدث الخاص بنا عليه

فلو تلاحظون في مثالنا قمنا بتعريف متغير واحد فقط وهو target واسندنا له قيمة null

اﻻن نأتي الى اهم نقطة في موضوعنا وهي دالة init وهذه الدالة تعتبر القلب النابض بالحدث Event الخاص بنا فمن خلال هذه الدالة يتم تعريف المتغيرات التي تم انشاءها في options ويتم تعريف الدوال الخاصة بالحدث Event

فنلاحظ في مثالنا ان في الدالة init يوجد هذا الكود

this.$target.on("click", $.proxy(this, "click"));

فالكود ببساطة يقول عند الضغط على الزر قم بتنفيذ الدالة click والتي تم تعريفها بعد دالة init

وهذه الطريقة لو احببنا تنفيذها بال jQuery سوف تكون بالشكل التالي:

$(selector).click(click);

او ايضا ً عن طريق فانيلا جافا سكربت فسوف يكون الكود بالشكل التالي:

selector.addEventListener(click);

طبعا ً الفرق بين ال jQuery والزين فورو ان ال jQuery تم تعريف كلاس العنصر الذي سوف يتم الضغط عليه وهو selector بينما في الزين فورو يتم تعريف العنصر بالشكل التالي:

XF.Element.register("show-user-name", "XF.ShowUserName");

لنشرح الكود قليلا ً

اولا ً لابد ان يتم تسجيل عنصر لكل حدث وهذا ما نراه في بداية السطر في كودنا السابق فنحن نخبر الزين فورو بان تقوم بتسجيل العنصر show-user-name للحدث ShowUserName والذي قمنا بتعريفة في السطر الرابع في ملفنا عن طريق الكود التالي:

eventNameSpace: "ShowUserName",

ومن ثم نقوم بوضع العنصر الذي تم انشاءه في القالب بهذه الطريقة:

<a href="#" class="button" data-xf-init="show-user-name" data-user="{$xf.visitor.username}">
                                اضغط لعرض اسم المستخدم
                            </a>

تلاحظون اننا قمنا باضافة العنصر الذي قمنا بتسجيله show-user-name الى data-xf-init والتي تم ذكرها في بداية الموضوع على انها مدخلنا للزين فورو

والى هنا نكون قد قمنا بتسجيل الحدث الخاص بنا واصبح جاهز للاستخدام في النهاية متأكد ان الجميع لاحظ ان مثالنا في الدرس هو عبارة عن عرض اسم المستخدم فقد قمت بزرع اسم المستخدم في كود ال html ومن ثم قمت باستدعائة في ملف الجافا سكربت الخاص بنا ليكون الكود النهائي بهذه الطريقة

!(function ($, window, document, _undefined) {
    "use strict";
    XF.ShowUserName = XF.Element.newHandler({
        eventNameSpace: "ShowUserName",

        options: {
            target: null,
            userName: null,
        },

        init: function () {
            this.$target.on("click", $.proxy(this, "click"));
            this.options.userName = this.$target[0].dataset.user;
        },

        click: function (e) {
            e.preventDefault();
            let t = this;
            XF.flashMessage(t.options.userName, 3000);
            console.log(t.options.userName);
        },
    });
    XF.Element.register("show-user-name", "XF.ShowUserName");
})(jQuery, window, document);

طبعا ً قمت باضافة متغير لل options ﻻبين كيفية استخدامها ومن ثم قمت بتعريف هذا المتغير كما ذكرت سابقا ً في دالة init ومن ثم قمت باضافة بعض الاكواد في دالة click والتي اريد تنفيذها عند الضغط على الزر

شكل الزر في القالب كالتالي:



وعند الضغط عليه يتم اظهار اسم المستخدم على شكل رسالة نجاح كالتالي:




والى هنا ينتهي درسنا واتمنى من الله العلي القدير انني استطعت ايصال الطريقة لكم بشكل مبسط واعلم انني اكثرت الحديث واطلت فيه ولكن احببت ان ابسط الطريقة بقدر المستطاع

فان اصبت فهذا من فضل الله علي وان اخطأت فجل من ﻻ يخطأ

وتقبلوا احترامي وتقديري
اخوكم
شقاوي

 

[Fallag]

ربنا يسعدك خويا شقاوي
كالعادة شرح حصري و فريد من نوعه
شكرا لك

 

[أبو غَيْث]

ما شاء الله عليك أخي تركي مبدع من يومك
شرح ممتاز و موضح بشكل مبسط
وكم اطمح ان ادخل في عالم الجافا سكربت لكن كما يقال رويدا رويدا الى ان نصل
احلى تقييم لك

 

[shqawe]

ربنا يسعدك خويا شقاوي
كالعادة شرح حصري و فريد من نوعه
شكرا لك

اللهم امين واياك اخوي الغالي @Fallag
والعفو ماعملنا شيء وتستاهلون اكثر يالغالي

ما شاء الله عليك أخي تركي مبدع من يومك
شرح ممتاز و موضح بشكل مبسط
وكم اطمح ان ادخل في عالم الجافا سكربت لكن كما يقال رويدا رويدا الى ان نصل
احلى تقييم لك

تسلم تسلم حبيبي محمد

والجافا سكربت ممتعة وجبارة اذا تمكنت منها يكفي ان تعلم ان كثير من اللغات مبنية او معتمده عليها مثل react و veujs

ولكن تحتاج الى قليل من الصبر ﻻنها في البداية تكون متعبة ومرعبة في نفس الوقت

احترامي وتقديري
اخوكم
شقاوي

 

[bousaid]

بارك الله فيك ... شرح مبسط و مميز

وكم اطمح ان ادخل في عالم الجافا سكربت لكن كما يقال رويدا رويدا الى ان نصل

3 أو 4 سنوات و لم تدخل بعد ... يدخلو اللي في المقبرة و لن تدخل أنت

ولكن تحتاج الى قليل من الصبر ﻻنها في البداية تكون متعبة ومرعبة في نفس الوقت

على قول كاظم الساهر

أكرهها وأشتهي فهمها
وإنني أحب كرهي لها
أحب هذا اللؤم في كودها
ورمزها إن بدلت سطرها

 

[MesterPerfect]

درس رائع جدا وجميل
بوركت أخي شقاوي
ما شاء الله مبرمجي xf خصصو له كثير من الأمور لتعمل بشكل داخلي لتيسير العمل وتسهيله
ولكن بصراحة شخصيا لا أحب لغة js على الإطلاق

 

[MesterPerfect]

على قول كاظم الساهر
أكرهها وأشتهي فهمها
وإنني أحب كرهي لها
أحب هذا اللؤم في كودها
ورمزها إن بدلت سطرها

بصراحة أنا لا استطيع الدخول في لغة لا أحبها
فحتى لو لم يكن لدي خبرة كبيرة في اللغة فأحب أن يكون لدي فكرة عامة عنها وعن طريقة استخدامها وغيره
إلا js وكل ما يتعلق بها من قريب أو من بعيد

 

[bousaid]

ولكن بصراحة شخصيا لا أحب لغة js على الإطلاق

هي من اللغات التي أصبحت ضرورة لا غنى عنها و فهمها سيفتح آفاق كثيرة أمامك
لكن كما أشار الأخ تركي رحلة تعلمها مرعبة ... ستضحي بوقتك و جهدك و حتى بالأكسجين الذي تستنشقه لعل و عسى ههههه

 

[MesterPerfect]

هي من اللغات التي أصبحت ضرورة لا غنى عنها و فهمها سيفتح آفاق كثيرة أمامك
لكن كما أشار الأخ تركي رحلة تعلمها مرعبة ... ستضحي بوقتك و جهدك و حتى بالأكسجين الذي تستنشقه لعل و عسى ههههه

انا أخاف من أكوادها ههههههه
عندما أرا كود php أشعر بالتفاؤل والإشراق الداخلي كدا
وإذا رأيت ملف js بجانبه أحس بالبرق والرعد يضربون في نفس الوقت
ولكن فعلا يالغالي لا بد منها فأفاقها واسعة جدا واستخداماتها كثيرة وأفعالها مذهلة

 

[أبو غَيْث]

اخي مصطفى ادعوا لي بحبها وحب اكوادها قبل أن اشيخ وانسى هواها

اخي احمد الرعب مجالك و تحبه كما أخبرتني سابقا فانت لها

 

[MesterPerfect]

اخي احمد الرعب مجالك و تحبه كما أخبرتني سابقا فانت لها

ههههههه ليس كل الرعب يالغالي
فرعب الماورائيات وغير ذلك يسهل التغلب عليه عندي

 

[shqawe]

بارك الله فيك ... شرح مبسط و مميز


3 أو 4 سنوات و لم تدخل بعد ... يدخلو اللي في المقبرة و لن تدخل أنت


على قول كاظم الساهر

أكرهها وأشتهي فهمها
وإنني أحب كرهي لها
أحب هذا اللؤم في كودها
ورمزها إن بدلت سطرها

الله الله الله على الروقان واعجبتني ابيات كاظم خصوصا ً هالبيتين

أحب هذا اللؤم في كودها
ورمزها إن بدلت سطرها

احسها لخصت حبي للجافا سكربت

درس رائع جدا وجميل
بوركت أخي شقاوي
ما شاء الله مبرمجي xf خصصو له كثير من الأمور لتعمل بشكل داخلي لتيسير العمل وتسهيله
ولكن بصراحة شخصيا لا أحب لغة js على الإطلاق

يبارك بعمرك حبيبي احمد

للاسف اذا لم تحب الجافا سكربت فانت لم تتعمق في حب البرمجة هل تصدق انني احيانا ً احاول ادخال الجافا سكربت في البرمجة حتى لو لم يكن لها داعي وذلك من حبي لها هي مشكلتها في بدايتها انك سوف تكرهها ولكن اذا تمكنت منها سوف تعشقها لما فيها من قوة

 

[محمد عكور]

ما شاء الله تبارك الرحمن
الله يعطيك العافية يارب

اخوي شقاوي عندي سؤال
لو اردنا مثلا اضافة ملفات js مع اضافة نقوم ببرمجتها، على سبيل المثال "اضافة الشات" فهي اكيد تستخدم الجافا سكربت والجي كويري في نظامها

فهل يمكن ارفاق ملفات js عن طريقة تصدير الاضافة في شاشة التيرمنال/الدوس (cmd)

وشكرا جزيلا.

 

[shqawe]

اللهم امين واياك اخوي @محمد عكور

بالنسبة لسؤالك فبالتأكيد تقدر تضيف اي ملف او حتى ان اردت مجلد كامل بحيث يتم اضافته كاملا ً عند تصدير اﻻضافة مع ملف اﻻضافة

كل اللي عليك انك تنشأ ملف جديد باسم build.json ويكون في رئيسية مجلد الاضافة يعني يكون بنفس مكان ملف addon.json

ويتم وضع الكود فيه كالتالي:

{
    "additional_files": [
        "js/xenarabia/testjs"
    ]
}

حيث js هو مجلد الجافا سكربت الخاص بالزين فورو
و xenarabia هو مجلد قمت بانشائه داخل هذا المجلد لكي يحتوي جميع مجلدات اﻻضافات التي انشئها
و testjs هو مجلد اﻻضافة الخاص بي ويمكن ان يحتوي المجلد عدة ملفات او حتى عدة مجلدات ﻻ يهم ويمكنك اضافة كذا مسار بنفس الطريقة

ملاحظة : ﻻبد من وضع مسار الملفات والمجلدات كاملاً

وعند تصدير اﻻضافة سوف تجد ان الزين فورو تسوف تقوم باستخراج الملفات كل ملف الى الوجهه المحددة له

اتمنى اني قدرت اوضح لك الصورة وان لم تتضح اخبرني وسوف اشرح لك بالضور

احترامي وتقديري
اخوك
شقاوي

 

[محمد عكور]

اللهم امين واياك اخوي @محمد عكور

بالنسبة لسؤالك فبالتأكيد تقدر تضيف اي ملف او حتى ان اردت مجلد كامل بحيث يتم اضافته كاملا ً عند تصدير اﻻضافة مع ملف اﻻضافة

كل اللي عليك انك تنشأ ملف جديد باسم build.json ويكون في رئيسية مجلد الاضافة يعني يكون بنفس مكان ملف addon.json

ويتم وضع الكود فيه كالتالي:

{
    "additional_files": [
        "js/xenarabia/testjs"
    ]
}

حيث js هو مجلد الجافا سكربت الخاص بالزين فورو
و xenarabia هو مجلد قمت بانشائه داخل هذا المجلد لكي يحتوي جميع مجلدات اﻻضافات التي انشئها
و testjs هو مجلد اﻻضافة الخاص بي ويمكن ان يحتوي المجلد عدة ملفات او حتى عدة مجلدات ﻻ يهم ويمكنك اضافة كذا مسار بنفس الطريقة

ملاحظة : ﻻبد من وضع مسار الملفات والمجلدات كاملاً

وعند تصدير اﻻضافة سوف تجد ان الزين فورو تسوف تقوم باستخراج الملفات كل ملف الى الوجهه المحددة له

اتمنى اني قدرت اوضح لك الصورة وان لم تتضح اخبرني وسوف اشرح لك بالضور

احترامي وتقديري
اخوك
شقاوي

بارك الله فيك على الاجابة الطيبة

طيب عند رفع الاضافة على المنتدى
لو رفعتها zip
هل سيقوم الزين فورو بتوزيع الملفات ام يجب رفعها يدوي

وشكرا جزيلا.

 

[MesterPerfect]

بارك الله فيك على الاجابة الطيبة

طيب عند رفع الاضافة على المنتدى
لو رفعتها zip
هل سيقوم الزين فورو بتوزيع الملفات ام يجب رفعها يدوي

وشكرا جزيلا.

سيعيد توزيعها يالغالي
فالملف الذي يعطيه لك xf بعد إكمال الإضافة يكون zip
داخله مجلد اسمه upload وبداخله ملفات الإضافة
فإن وضعت ملفات في مجلد js ففي مجلد upload ستجد مجلدين هما
js و src
تحياتي لك

 

[محمد عكور]

سيعيد توزيعها يالغالي
فالملف الذي يعطيه لك xf بعد إكمال الإضافة يكون zip
داخله مجلد اسمه upload وبداخله ملفات الإضافة
فإن وضعت ملفات في مجلد js ففي مجلد upload ستجد مجلدين هما
js و src
تحياتي لك

مشكور على الاجابة يا غالي

 

[MesterPerfect]

مشكور على الاجابة يا غالي

العفو أخي تكرم