أداة رسومية

gtk3-demo، برنامج لعرض الأدوات في GTK + الإصدار 3

في واجهة المستخدم الرسومية (GUI)، تُعدّ الأداة الرسومية ( أو عنصر التحكم الرسومي ) عنصرًا تفاعليًا ، مثل زر أو شريط تمرير . عناصر التحكم هي مكونات برمجية يتفاعل معها مستخدم الحاسوب من خلال التلاعب المباشر لقراءة أو تعديل معلومات حول تطبيق ما. تحتوي مكتبات واجهة المستخدم، مثل Windows Presentation Foundation و Qt و GTK و Cocoa ، على مجموعة من عناصر التحكم والمنطق اللازم لعرضها. [ 1 ]

تُسهّل كل أداة نوعًا مُحددًا من التفاعل بين المستخدم والحاسوب، وتظهر كجزء مرئي من واجهة المستخدم الرسومية للتطبيق وفقًا للنمط المُحدد والمُقدّم بواسطة مُحرك العرض. يضمن النمط التزام جميع الأدوات بتصميم جمالي موحد، مما يُضفي إحساسًا بالتماسك العام. تدعم بعض الأدوات التفاعل مع المستخدم، مثل التسميات والأزرار ومربعات الاختيار . بينما تعمل أدوات أخرى كحاويات تُجمّع الأدوات المُضافة إليها، مثل النوافذ واللوحات وعلامات التبويب.

إن هيكلة واجهة المستخدم باستخدام مجموعات أدوات الأدوات تسمح للمطورين بإعادة استخدام التعليمات البرمجية لمهام مماثلة، وتوفر للمستخدمين لغة مشتركة للتفاعل، مما يحافظ على الاتساق في جميع أنحاء نظام المعلومات بأكمله.

تُسهّل أدوات إنشاء واجهات المستخدم الرسومية تصميم واجهات المستخدم الرسومية بطريقة WYSIWYG باستخدام لغة ترميز واجهة المستخدم . وهي تُولّد تلقائيًا جميع التعليمات البرمجية المصدرية لعنصر واجهة المستخدم من الأوصاف العامة التي يُقدّمها المطور، عادةً من خلال التعديل المباشر .

تاريخ

في حوالي عام 1920، دخلت كلمة widget إلى اللغة الإنجليزية الأمريكية، كمصطلح عام لأي جهاز مفيد، وخاصة منتج مصنع للبيع؛ أداة .

في عام 1988، ورد مصطلح "الودجت" في سياق مشروع أثينا ونظام نوافذ X. في كتاب "نظرة عامة على مجموعة أدوات X" لجول ماكورماك وبول أسينتي، ورد ما يلي: [ 2 ]

توفر مجموعة الأدوات مكتبة من مكونات واجهة المستخدم ("الأدوات") مثل تسميات النصوص وأشرطة التمرير وأزرار الأوامر والقوائم؛ وتمكن المبرمجين من كتابة أدوات جديدة؛ وتوفر الرابط لتجميع الأدوات في واجهة مستخدم كاملة.

وفي نفس العام، في الدليل X Toolkit Widgets - C Language X Interface من تأليف رالف ر. سويك وتيري وايزمان، يقول: [ 3 ]

في مجموعة أدوات X، فإن الأداة عبارة عن مزيج من نافذة X أو نافذة فرعية ودلالات الإدخال والإخراج المرتبطة بها.

وأخيرًا، وفي نفس العام، يشرح رالف ر. سويك ومارك س. أكرمان من أين جاء مصطلح widget : [ 4 ]

اخترنا هذا المصطلح لأن جميع المصطلحات الشائعة الأخرى كانت تحمل دلالات غير مناسبة. ومع ذلك، نلاحظ للمتشككين أن الوظيفة الأساسية لأي أداة هي نافذة X المرتبطة بها، وأن الحرف الأول الشائع ليس عديم الفائدة.

الاستخدام

مثال على الأدوات المفعلة والمعطلة؛ الإطار الموجود في الأسفل معطل، وهي مظللة باللون الرمادي.

تعرض أي أداة معلومات ترتيبًا معلوماتيًا قابلًا للتغيير من قِبل المستخدم، مثل نافذة أو مربع نص . وتتمثل السمة المميزة للأداة في توفير نقطة تفاعل واحدة لمعالجة نوع معين من البيانات بشكل مباشر . بعبارة أخرى، تُعد الأدوات لبنات بناء بصرية أساسية، تُدمج معًا في تطبيق واحد، وتحتوي على جميع البيانات التي يعالجها التطبيق والتفاعلات المتاحة عليها.

عناصر واجهة المستخدم الرسومية هي عناصر تُستخدم لبناء واجهة التفاعل بين الإنسان والآلة في البرنامج. تُنفذ عناصر واجهة المستخدم الرسومية كمكونات برمجية . تحتوي مجموعات أدوات العناصر الرسومية وأطر العمل البرمجية، مثل GTK+ أو Qt ، على هذه العناصر في مكتبات برمجية، مما يُمكّن المبرمجين من استخدامها لبناء واجهات المستخدم الرسومية لبرامجهم.

تطورت مجموعة من الأدوات البرمجية الشائعة والقابلة لإعادة الاستخدام لعرض المعلومات العامة، استنادًا إلى أبحاث مركز بالو ألتو للأبحاث الخاصة بواجهة مستخدم زيروكس ألتو . غالبًا ما تُجمع تطبيقات مختلفة لهذه الأدوات البرمجية العامة في مجموعات أدوات برمجية ، يستخدمها المبرمجون لبناء واجهات المستخدم الرسومية. تتضمن معظم أنظمة التشغيل مجموعة من الأدوات البرمجية الجاهزة للتخصيص، والتي يمكن للمبرمج دمجها في التطبيق، وتحديد كيفية عملها. [ 5 ] يُعرَّف كل نوع من أنواع الأدوات البرمجية عادةً كفئة في البرمجة كائنية التوجه . لذلك، تُشتق العديد من الأدوات البرمجية من وراثة الفئات.

في سياق التطبيق، يمكن تفعيل أو تعطيل عنصر واجهة المستخدم في أي وقت. العنصر المُفعّل قادر على الاستجابة للأحداث، مثل ضغطات المفاتيح أو حركات الماوس. أما العنصر غير القادر على الاستجابة لهذه الأحداث فيُعتبر مُعطّلاً. يختلف مظهر العنصر عادةً باختلاف حالته؛ فعند تعطيله، قد يظهر بلون أفتح (" رمادي ") أو يُخفى بصريًا بطريقة ما. انظر الصورة المجاورة كمثال.

تكمن فائدة تعطيل عناصر التحكم غير المتاحة بدلاً من إخفائها تمامًا في إظهار وجود عنصر التحكم للمستخدمين، مع الإشارة إلى أنه غير متاح حاليًا (مما يعني ضمناً أن تغيير عنصر تحكم آخر قد يجعله متاحًا)، بدلاً من ترك المستخدم في حيرة من أمره بشأن مكان العثور على عنصر التحكم. في النوافذ المنبثقة، قد تظهر الأزرار باللون الرمادي بعد وقت قصير من ظهورها لمنع النقر العرضي أو النقر المزدوج غير المقصود.

يتم أحيانًا تصنيف الأدوات على أنها افتراضية لتمييزها عن نظيراتها المادية، على سبيل المثال الأزرار الافتراضية التي يمكن النقر عليها باستخدام مؤشر ، مقابل الأزرار المادية التي يمكن الضغط عليها بإصبع (مثل تلك الموجودة على فأرة الكمبيوتر ).

يُعدّ مفهوم أداة سطح المكتب مفهومًا ذا صلة (وإن كان مختلفًا) ، وهو عبارة عن تطبيق صغير متخصص بواجهة مستخدم رسومية يوفر بعض المعلومات المرئية و/أو يسهل الوصول إلى الوظائف شائعة الاستخدام مثل الساعات والتقاويم ومجمعات الأخبار والآلات الحاسبة وملاحظات سطح المكتب. ويتم استضافة هذه الأنواع من الأدوات بواسطة محرك أدوات .

قائمة الأدوات العامة الشائعة

أدوات متنوعة معروضة في أوبونتو
يتم عرض عناصر واجهة المستخدم Qt وفقًا لثلاثة أشكال مختلفة (تصميم فني): Plastik و Keramik و Windows

اختيار وعرض المجموعات

  • الزر – عنصر تحكم يمكن النقر عليه لتنفيذ إجراء ما. وهو مكافئ لزر الضغط الموجود في الأجهزة الميكانيكية أو الإلكترونية.
    • زر الاختيار – عنصر تحكم يُمكن النقر عليه لاختيار خيار واحد من بين مجموعة خيارات، على غرار اختيار محطة راديو من مجموعة أزرار مخصصة لضبط الراديو. تظهر أزرار الاختيار دائمًا في أزواج أو مجموعات أكبر، ولا يُمكن اختيار سوى خيار واحد من المجموعة في كل مرة؛ كما أن اختيار عنصر جديد من أزرار المجموعة يُلغي تحديد الزر المُختار سابقًا.
    • مربع الاختيار – عنصر تحكم يُمكن النقر عليه لتفعيل أو تعطيل خيار ما. يُسمى أيضًا مربع تحديد. يُشير المربع إلى حالة "تشغيل" أو "إيقاف" عبر علامة صح ☑ أو علامة خطأ ☒. يُمكن عرضه في حالة وسيطة (مظلل أو بخط متقطع) للإشارة إلى أن العناصر المختلفة في تحديد متعدد لها قيم مختلفة للخاصية التي يُمثلها مربع الاختيار. يُمكن تحديد عدة مربعات اختيار في مجموعة واحدة، على عكس أزرار الاختيار.
    • مفتاح تبديل - يشبه في وظيفته مربع الاختيار. يمكن تشغيله وإيقافه، ولكن على عكس مربعات الاختيار، يكون تأثيره فوريًا في العادة.
    • زر التبديل - يعمل بشكل مشابه لمربع الاختيار، ويعمل كمفتاح تشغيل/ إيقاف، على الرغم من ظهوره كزر. يمكن تشغيله وإيقافه.
    • زر مقسم – عنصر تحكم يجمع بين زر (يستدعي عادةً إجراءً افتراضيًا) وقائمة منسدلة تحتوي على إجراءات ثانوية ذات صلة.
    • زر التبديل - زر يقوم بتبديل محتواه عبر قيمتين أو أكثر، مما يتيح اختيار قيمة واحدة من مجموعة من العناصر.
  • شريط التمرير – أداة تحكم بمقبض يمكن تحريكه لأعلى ولأسفل (شريط تمرير رأسي) أو لليمين ولليسار (شريط تمرير أفقي) على شريط لتحديد قيمة (أو نطاق إذا كان هناك مقبضان). يتيح الشريط للمستخدمين إجراء تعديلات على قيمة أو عملية ضمن نطاق القيم المسموح بها.
  • مربع القائمة - عنصر تحكم رسومي يسمح للمستخدم بتحديد عنصر واحد أو أكثر من قائمة موجودة داخل مربع نص ثابت متعدد الأسطر.
  • أداة تحكم دوارة - أداة إدخال قيمة تحتوي على أزرار صغيرة لأعلى ولأسفل للتنقل بين مجموعة من القيم
  • قائمة منسدلة – قائمة بالعناصر التي يمكن الاختيار من بينها. عادةً ما تعرض القائمة العناصر فقط عند النقر على زر أو مؤشر خاص.
  • القائمة – عنصر تحكم يتضمن إجراءات متعددة يمكن النقر عليها لاختيار عنصر لتفعيله
    • قائمة السياق - نوع من القوائم التي يعتمد محتواها على السياق أو الحالة السارية عند استدعاء القائمة.
    • قائمة دائرية – قائمة سياقية دائرية يعتمد فيها الاختيار على الاتجاه
  • شريط القوائم – عنصر تحكم رسومي يحتوي على قوائم منسدلة
  • شريط الأدوات – عنصر تحكم رسومي توضع عليه الأزرار أو الأيقونات أو القوائم أو عناصر الإدخال أو الإخراج الأخرى على الشاشة
    • الشريط - مزيج من القائمة وشريط الأدوات، يعرض مجموعة كبيرة من الأوامر في تخطيط مرئي من خلال واجهة علامات تبويب.
  • مربع التحرير والسرد ( مربع نص مع قائمة مرفقة أو مربع قائمة ) - مزيج من مربع نص من سطر واحد وقائمة منسدلة أو مربع قائمة ، مما يسمح للمستخدم إما بكتابة قيمة مباشرة في عنصر التحكم أو الاختيار من قائمة الخيارات الموجودة.
  • الأيقونة - رمز سهل الفهم لأداة برمجية أو وظيفة أو ملف بيانات.
  • عرض الشجرة – عنصر تحكم رسومي يعرض عرضًا هرميًا للمعلومات
  • عرض الشبكة أو شبكة البيانات - عرض جدولي للبيانات يشبه جدول البيانات ، يسمح بإدخال الأرقام أو النصوص في الصفوف والأعمدة.
  • الرابط - نص يحتوي على نوع من المؤشر (عادةً ما يكون خطًا تحته و/أو لونًا) يشير إلى أن النقر عليه سينقل المستخدم إلى شاشة أو صفحة أخرى.
  • علامة تبويب – عنصر تحكم رسومي يسمح بتضمين عدة مستندات أو لوحات داخل نافذة واحدة
  • شريط التمرير – عنصر تحكم رسومي يمكن من خلاله تمرير النصوص أو الصور أو أي محتوى آخر بشكل مستمر في اتجاه محدد مسبقًا (أعلى، أسفل، يسار، أو يمين).

إدخال نص/قيمة

  • مربع النص – (حقل التحرير) – عنصر تحكم رسومي يهدف إلى تمكين المستخدم من إدخال النص

الناتج

  • التسمية - نص يُستخدم لوصف عنصر واجهة مستخدم آخر
  • تلميح الأدوات – نافذة معلوماتية تظهر عند تحريك مؤشر الماوس فوق عنصر تحكم آخر
  • مساعدة البالون
  • شريط الحالة – ​​عنصر تحكم رسومي يمثل منطقة معلومات توجد عادةً في أسفل النافذة
  • شريط التقدم – عنصر تحكم رسومي يُستخدم لعرض تقدم عملية حاسوبية مطولة، مثل التنزيل أو نقل الملفات أو التثبيت
  • شريط المعلومات – عنصر تحكم رسومي تستخدمه العديد من البرامج لعرض معلومات غير أساسية للمستخدم

حاوية

  • النافذة – عنصر تحكم رسومي يتكون من منطقة مرئية تحتوي على بعض عناصر واجهة المستخدم الرسومية للبرنامج الذي ينتمي إليه
  • لوحة قابلة للطي - لوحة يمكنها تخزين المحتوى بشكل مضغوط، والتي يتم إخفاؤها أو إظهارها بالنقر فوق علامة تبويب الأداة.
    • الدرج : الألواح الجانبية أو الأسطح التي تحتوي على محتوى إضافي يمكن تثبيتها أو سحبها أو دفعها بعيدًا عن الحافة اليسرى أو اليمنى للشاشة. [ 6 ]
  • الأكورديون – قائمة مُكدسة عموديًا من العناصر، مثل التصنيفات أو الصور المصغرة، حيث يمكن "توسيع" كل عنصر لعرض المحتوى المرتبط به.
  • النافذة المشروطة - عنصر تحكم رسومي تابع للنافذة الرئيسية للتطبيق، والذي يُنشئ وضعًا لا يمكن فيه استخدام النافذة الرئيسية.
  • مربع الحوار – نافذة صغيرة تعرض معلومات للمستخدم وتطلب منه الرد
  • نافذة لوحة الأدوات - والمعروفة أيضًا باسم "نافذة الأدوات المساعدة" - هي عنصر تحكم رسومي يطفو فوق جميع النوافذ العادية ويوفر وصولاً سريعًا إلى الأدوات أو الأوامر أو المعلومات الخاصة بالتطبيق الحالي
    • نافذة الفحص – نوع من نوافذ الحوار التي تعرض قائمة بالخصائص الحالية للكائن المحدد، وتسمح بتغيير هذه الخصائص أثناء التشغيل.
  • الإطار – نوع من الصناديق التي يمكن من خلالها تجميع مجموعة من عناصر التحكم الرسومية كوسيلة لإظهار العلاقات بصريًا
  • لوحة الرسم - عنصر رسم عام لتمثيل المعلومات الرسومية
  • Cover Flow – عنصر ثلاثي الأبعاد متحرك للتنقل بصريًا عبر لقطات من المستندات أو إشارات المواقع الإلكترونية أو أغلفة الألبومات أو الصور الفوتوغرافية.
  • تدفق الفقاعات - عنصر ثنائي الأبعاد متحرك يسمح للمستخدمين بتصفح والتفاعل مع عرض الشجرة الكامل لسلسلة المناقشة.
  • كاروسيل (الحوسبة) - أداة رسومية تُستخدم لعرض البطاقات المرئية بطريقة سريعة ليسهل على المستخدمين تصفحها، سواء على مواقع الويب أو تطبيقات الجوال

انظر أيضاً

مراجع

  1. "مايكروسوفت: العناصر الرسومية" . msdn.microsoft.com . مايكروسوفت . تم الاطلاع عليه بتاريخ 27 أبريل 2015 .
  2. ماكورماك، جويل؛ أسينتي، بول (1988). "نظرة عامة على مجموعة أدوات X" . وقائع الندوة السنوية الأولى لجمعية ACM SIGGRAPH حول برمجيات واجهة المستخدم . الصفحات 46-55 . doi : 10.1145/62402.62407 . ISBN  0897912837. S2CID 12924752 . 
  3. سويك، رالف ر.؛ وايس مان، تيري (1988). أدوات X Toolkit - واجهة X للغة C. ص 1 . 
  4. رالف ر. سويك، مارك س. أكرمان (1988). " مجموعة أدوات X: المزيد من اللبنات لبناء واجهات المستخدم - أو - أدوات جاهزة للتوظيف" . مؤتمر USENIX الشتوي . الصفحات 221-228 . تاريخ الاسترجاع: 20 نوفمبر 2022 . 
  5. "ما هي الأداة؟ - تعريف من موقع WhatIs.com" . WhatIs.com . تم الاطلاع عليه بتاريخ 3 يونيو 2020 .
  6. https://material-ui.com/demos/drawers/ مكون Drawer React - Material-UI