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

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

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
1,779
مستوى التفاعل
1,545
النقاط
113
الإقامة
K.S.A
  • التقييمات: 2
  • #1
بسم الله الرحمن الرحيم

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

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

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

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

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

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

HTML:
data-xf-init

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

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

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

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

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

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

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

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

HTML:
<!--XF:JS-->

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

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

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

JavaScript:
!(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);

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

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

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

})(jQuery, window, document);

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

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

اﻻن نأتي للسطر الثالث والرابع وهو هذا الكود:
JavaScript:
XF.ShowUserName = XF.Element.newHandler({
        eventNameSpace: "ShowUserName",

});

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

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

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

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

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

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

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

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

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

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

وهذه الطريقة لو احببنا تنفيذها بال jQuery سوف تكون بالشكل التالي:
JavaScript:
$(selector).click(click);

او ايضا ً عن طريق فانيلا جافا سكربت فسوف يكون الكود بالشكل التالي:
JavaScript:
selector.addEventListener(click);

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

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

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

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

JavaScript:
eventNameSpace: "ShowUserName",

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

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

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

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

JavaScript:
!(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 والتي اريد تنفيذها عند الضغط على الزر

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

1.jpg

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

2.jpg


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

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

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

Fallag

:: الأعضاء ::
[ عُملاء زين العَربية ]
إنضم
20 مارس 2019
المشاركات
208
مستوى التفاعل
48
النقاط
28
الموقع الالكتروني
ربنا يسعدك خويا شقاوي
كالعادة شرح حصري و فريد من نوعه
شكرا لك 🌹
 

XenArabia

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
4,161
مستوى التفاعل
2,580
النقاط
113
العمر
37
الإقامة
المغرب
الموقع الالكتروني
ما شاء الله عليك أخي تركي مبدع من يومك
شرح ممتاز و موضح بشكل مبسط
وكم اطمح ان ادخل في عالم الجافا سكربت لكن كما يقال رويدا رويدا الى ان نصل
احلى تقييم لك
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
1,779
مستوى التفاعل
1,545
النقاط
113
الإقامة
K.S.A
ربنا يسعدك خويا شقاوي
كالعادة شرح حصري و فريد من نوعه
شكرا لك 🌹

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

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

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

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

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

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

bousaid

:: الأعضاء ::
إنضم
27 يناير 2019
المشاركات
146
مستوى التفاعل
312
النقاط
63
بارك الله فيك ... شرح مبسط و مميز

وكم اطمح ان ادخل في عالم الجافا سكربت لكن كما يقال رويدا رويدا الى ان نصل
3 أو 4 سنوات و لم تدخل بعد ... يدخلو اللي في المقبرة و لن تدخل أنت :p

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

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

MesterPerfect

:: مراقب زين العربية ::
طاقم الإدارة
إنضم
27 يناير 2019
المشاركات
1,608
مستوى التفاعل
1,220
النقاط
113
العمر
21
الإقامة
sohag, Egypt
الموقع الالكتروني
درس رائع جدا وجميل
بوركت أخي شقاوي
ما شاء الله مبرمجي xf خصصو له كثير من الأمور لتعمل بشكل داخلي لتيسير العمل وتسهيله
ولكن بصراحة شخصيا لا أحب لغة js على الإطلاق
 

MesterPerfect

:: مراقب زين العربية ::
طاقم الإدارة
إنضم
27 يناير 2019
المشاركات
1,608
مستوى التفاعل
1,220
النقاط
113
العمر
21
الإقامة
sohag, Egypt
الموقع الالكتروني
على قول كاظم الساهر 🥴🤤
أكرهها وأشتهي فهمها
وإنني أحب كرهي لها
أحب هذا اللؤم في كودها
ورمزها إن بدلت سطرها
بصراحة أنا لا استطيع الدخول في لغة لا أحبها
فحتى لو لم يكن لدي خبرة كبيرة في اللغة فأحب أن يكون لدي فكرة عامة عنها وعن طريقة استخدامها وغيره
إلا js وكل ما يتعلق بها من قريب أو من بعيد 😂
 

bousaid

:: الأعضاء ::
إنضم
27 يناير 2019
المشاركات
146
مستوى التفاعل
312
النقاط
63
ولكن بصراحة شخصيا لا أحب لغة js على الإطلاق
هي من اللغات التي أصبحت ضرورة لا غنى عنها و فهمها سيفتح آفاق كثيرة أمامك
لكن كما أشار الأخ تركي رحلة تعلمها مرعبة ... ستضحي بوقتك و جهدك و حتى بالأكسجين الذي تستنشقه لعل و عسى ههههه
 

MesterPerfect

:: مراقب زين العربية ::
طاقم الإدارة
إنضم
27 يناير 2019
المشاركات
1,608
مستوى التفاعل
1,220
النقاط
113
العمر
21
الإقامة
sohag, Egypt
الموقع الالكتروني
هي من اللغات التي أصبحت ضرورة لا غنى عنها و فهمها سيفتح آفاق كثيرة أمامك
لكن كما أشار الأخ تركي رحلة تعلمها مرعبة ... ستضحي بوقتك و جهدك و حتى بالأكسجين الذي تستنشقه لعل و عسى ههههه
انا أخاف من أكوادها ههههههه
عندما أرا كود php أشعر بالتفاؤل والإشراق الداخلي كدا
وإذا رأيت ملف js بجانبه أحس بالبرق والرعد يضربون في نفس الوقت 😂😂
ولكن فعلا يالغالي لا بد منها فأفاقها واسعة جدا واستخداماتها كثيرة وأفعالها مذهلة
 

XenArabia

الحياة محطات فاترك في كل محطة ابتسامة
طاقم الإدارة
إنضم
23 يناير 2019
المشاركات
4,161
مستوى التفاعل
2,580
النقاط
113
العمر
37
الإقامة
المغرب
الموقع الالكتروني
اخي مصطفى ادعوا لي بحبها وحب اكوادها قبل أن اشيخ وانسى هواها :love:

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

MesterPerfect

:: مراقب زين العربية ::
طاقم الإدارة
إنضم
27 يناير 2019
المشاركات
1,608
مستوى التفاعل
1,220
النقاط
113
العمر
21
الإقامة
sohag, Egypt
الموقع الالكتروني
اخي احمد الرعب مجالك و تحبه كما أخبرتني سابقا فانت لها 💪💪
ههههههه ليس كل الرعب يالغالي
فرعب الماورائيات وغير ذلك يسهل التغلب عليه عندي 😂
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
1,779
مستوى التفاعل
1,545
النقاط
113
الإقامة
K.S.A
بارك الله فيك ... شرح مبسط و مميز


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


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

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

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

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

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

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

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

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

محمد عكور

:: الأعضاء ::
إنضم
7 سبتمبر 2019
المشاركات
33
مستوى التفاعل
39
النقاط
18
الموقع الالكتروني
ما شاء الله تبارك الرحمن
الله يعطيك العافية يارب

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

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

وشكرا جزيلا.
 

shqawe

ربي أشرح لي صدري
طاقم الإدارة
إنضم
27 يونيو 2019
المشاركات
1,779
مستوى التفاعل
1,545
النقاط
113
الإقامة
K.S.A
اللهم امين واياك اخوي @محمد عكور

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

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

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

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

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

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

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

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

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

محمد عكور

:: الأعضاء ::
إنضم
7 سبتمبر 2019
المشاركات
33
مستوى التفاعل
39
النقاط
18
الموقع الالكتروني
اللهم امين واياك اخوي @محمد عكور

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

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

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

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

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

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

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

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

احترامي وتقديري
اخوك
شقاوي
بارك الله فيك على الاجابة الطيبة

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

وشكرا جزيلا.
 

MesterPerfect

:: مراقب زين العربية ::
طاقم الإدارة
إنضم
27 يناير 2019
المشاركات
1,608
مستوى التفاعل
1,220
النقاط
113
العمر
21
الإقامة
sohag, Egypt
الموقع الالكتروني
بارك الله فيك على الاجابة الطيبة

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

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

محمد عكور

:: الأعضاء ::
إنضم
7 سبتمبر 2019
المشاركات
33
مستوى التفاعل
39
النقاط
18
الموقع الالكتروني
سيعيد توزيعها يالغالي
فالملف الذي يعطيه لك xf بعد إكمال الإضافة يكون zip
داخله مجلد اسمه upload وبداخله ملفات الإضافة
فإن وضعت ملفات في مجلد js ففي مجلد upload ستجد مجلدين هما
js و src
تحياتي لك
مشكور على الاجابة يا غالي
 

جميع المواضيع والمشاركات المكتوبة تعبّر عن وجهة نظر صاحبها ,, ولا تعبّر بأي شكل من الاشكال عن وجهة نظر إدارة زين العربية .

التعليقات المنشورة لا تعبر عن رأي معهد زين العربية ولا نتحمل أي مسؤولية قانونية حيال ذلك :: يتحمل كاتبها مسؤولية النشر ::

إحصائيات المنتدى

المواضيع
1,331
المشاركات
13,078
الأعضاء
503
آخر عضو مسجل
over221
أعلى