إنشاء ودجت خاص بك: 6 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:41

سيعلمك هذا Instructable كيفية إنشاء قاعدة بيانات Yahoo! القطعة. بنهاية هذا البرنامج التعليمي ، ستكون قد تعلمت بعض JavaScript و XML.

الخطوة الأولى: البدء

بعض الأدوات التي ستحتاجها لإنشاء عنصر واجهة مستخدم هي: - جهاز كمبيوتر يعمل بنظام التشغيل Mac OS X أو Windows Xp / Vista - برنامج تحرير نصوص. (برنامج المفكرة مثالي.) - برنامج لتحرير الصور. (Microsoft Paint جيد.) - الصبر والوقت. - Yahoo Widgets - Widget Converter Widget بمجرد أن يكون لديك هذه البرامج والأدوات ، فأنت جاهز للانتقال إلى الخطوة الثانية.

الخطوة 2: إنشاء بنية المجلد

الآن ستحتاج إلى إنشاء بنية المجلد لإيواء جميع الملفات التي تشكل عنصر واجهة مستخدم. تبدو البنية على النحو التالي: -Widget Name | المحتويات | Widget.kon Main.js الموارد | جميع الصور التي ستستخدمها الأداة يمكنك تنزيل هذه الأداة لإنشاء بنية المجلد تلقائيًا - Reinier KaperSet تفضيلات عنصر واجهة المستخدم بالنقر بزر الماوس الأيمن فوق أي جزء منها ، والنقر فوق التفضيلات. قم بتغيير تفضيلات الهيكل إلى ما يلي: الجذر: انتقل إلى مجلد عناصر واجهة المستخدم. (موجود في "المستندات" على نظام التشغيل Windows) يمكنك الآن النقر فوق الأداة وسيظهر مربع حوار يطلب منك اسم الأداة.

الخطوة 3: إنشاء كافة الملفات الضرورية

سنبدأ بإنشاء ملف widget.xml ، والذي يخبر معلومات محرك عنصر واجهة المستخدم عن عنصر واجهة المستخدم الخاص بك. قم بتنزيل نموذج تم إنشاؤه لتستخدمه. رابط التنزيل أدناه. ضع الملف في مجلد "المحتويات" الموجود في المجلد الذي يحمل الاسم الذي اخترته سابقًا. افتح الملف باستخدام محرر النصوص الذي تختاره واستبدل YourNameHere باسمك. حفظ وإغلاق: بعد ذلك سننشئ ملف.kon وهو الملف الرئيسي الذي يخبر الأداة بما يجب القيام به. ملف.kon هو مجرد ملف XML بامتداد تمت إعادة تسميته. قم بتنزيل ملف widget.kon الأساسي هذا وضعه أيضًا في مجلد "المحتويات". مرة أخرى ، افتح الملف باستخدام محرر نصوص. يشير السطر الأول إلى أن الملف عبارة عن ملف XML تم إنشاؤه بترميز UTF-8. العلامة التالية المراد إضافتها هي علامة القطعة ؛ ثم تعلن الإعدادات الخاصة بك ، مثل التصحيح ؛. أنت الآن جاهز لإضافة عناصر النافذة الخاصة بك ؛. تحتوي الأدوات الذكية على كائنات متعددة تقوم بأشياء معينة ولها خصائص معينة. على سبيل المثال ، يقوم كائن النص بإنشاء نص. فيما يلي قائمة ببعض خصائص كائن النص: -اسم (شرح ذاتي) -نافذة (مهملة) -بيانات (نص لعرضه) -لون (شرح ذاتيًا) -الحجم -الخط -h الإزاحة (ويعرف أيضًا باسم x) -vOffset (ويعرف أيضًا باسم y) -العرض -الارتفاع مع ذلك ، فلنبدأ في الترميز. أضف التعليمات البرمجية التالية إلى ملف kon ، في العلامات: myTextHello World! blueArial18left252 باللغة الإنجليزية ، يقوم هذا بإعداد كائن نص باسم myText ، يعرض "Hello World!" في الخط Arial ، واللون الأزرق ، والحجم 12. احفظ ملف kon الخاص بك ، واستمر في الخطوة الرابعة.

الخطوة 4: استمتعي

انقر نقرًا مزدوجًا فوق ملف kon وسيتم تحميل عنصر واجهة المستخدم الخاص بك. تهانينا! لقد قمت بإنشاء أول عنصر واجهة مستخدم. لكننا لم ننتهي من البرمجة بعد. ربما تفكر ، "هذا كل شيء؟" ، أليس كذلك؟ تابع إلى الخطوة 5 لإضافة بعض الوظائف إلى عنصر واجهة المستخدم الخاص بك.

الخطوة 5: إضافة الوظيفة

الآن نحن بصدد جعل القطعة تعرض الوقت الحالي. سيتطلب هذا مؤقتًا يتم تحديثه كل دقيقة وملف آخر. سيكون الملف التالي عبارة عن ملف JavaScript ، يتم إدخاله في مجلد "المحتويات". افتح محرر النصوص وأنشئ ملفًا يسمى main.js. لإضافة الوقت ، سنستخدم "كائن التاريخ". لإعداد كائن التاريخ ، يمكنك إنشاء وظيفة. أضف هذه الوظيفة إلى ملف js: function updateText () '{theTime = new Date ()؛ theHour = String (theTime.getHours ()) ، theMinutes = String (theTime.getMinutes ()) ، myText.data = "الوقت هو:" + theHour + ":" + theMinutes؛ print ('update')؛} لن تعرض عنصر واجهة المستخدم الوقت بعد ، لأنه لا يعرف ما يجب فعله بملف js. للعناية بهذا ، نضيف معالج الحدث هذا إلى ملف Kon ، في العلامات ولكن ليس في العلامات: include ('main.js') ؛ لتحديث الوقت ، نحتاج إلى إنشاء مؤقت ، والذي يدخل ملف Kon ، في العلامات وليس في العلامات: احفظ الملفات وقم بتحميل الأداة. يجب أن تظهر الوقت. إذا لم ينجح الأمر ، فقم بتنزيل كل من kon و js من الأسفل واستبدله بالأخرى القديمة.

الخطوة 6: تلخيص كل شيء

استخدم أداة تحويل عناصر واجهة المستخدم لتحويل عنصر واجهة المستخدم إلى ملف.widget. ملاحظة: اسحب المجلد الذي يحمل اسم عنصر واجهة المستخدم إلى المحول ، وليس ملف kon. إذا كنت ترغب في المضي قدمًا في استخدام عنصر واجهة المستخدم الخاص بك ، فاحصل على بعض الموارد هنا ، وفيما يلي قائمة بالأشياء التي يمكنك محاولة تحقيقها باستخدام عنصر واجهة المستخدم الخاص بك: -إضافة تفضيلات للتحكم في الخط باستخدام العلامة والعلامة الفرعية للخط- أضف بعض معالجات الأحداث مثل onClick باستخدام العلامات. - اعرض صورة من ملف محلي باستخدام كائن الصورة ، آمل أن تكون هذا البرنامج التعليمي مفيدًا وستستمتع بالإمكانيات اللانهائية للأدوات ، Hunter