المظاهر

تتيح لك المظاهر تخصيص مظهر تطبيقBlockly ومظهره. يمكنك تخصيص ألوان الحظر وألوان الفئات وبعض المكونات من خلال الفئة Themes. إذا كنت ترغب في تخصيص مكونات إضافية، نقدم اسم المظهر كفئة في قسم div المخصص، مما يسمح للمستخدمين بتغيير مظهر أي مكونات غير متوافقة من خلال CSS. هدفنا الرئيسي من إنشاء النُسُق هو تمكين المطوّرين من إنشاء تجارب يمكن الوصول إليها بسهولة أكبر في Blockly.

خصائص المظهر

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

نمط الكتلة

يتكون نمط الكتلة من أربعة حقول:

  • colourPrimary (مطلوب) - لون خلفية القطعة
  • colourSecondary (اختياري) - لون الخلفية إذا كانت الكتلة عبارة عن كتلة ظل.
  • colourTertiary (اختياري) - لون حدود المربّع أو تمييزه
  • hat (اختياري) - لإضافة قبّعة إلى مجموعة في حال ضبط القيمة على cap. مزيد من المعلومات حول القبعات.

حظر على شكل أسهم تشير إلى اللون الأساسي والثانوي والثالث

const listBlocks = {
   'colourPrimary': '#4a148c',
   'colourSecondary':'#AD7BE9',
   'colourTertiary':'#CDB6E9',
   'hat': 'cap'
}

سيتضمن المظهر تعيين اسم نمط الكتلة لحظر كائن النمط:

const blockStyles = {
   'list_blocks': {
      'colourPrimary': '#4a148c',
      'colourSecondary':'#AD7BE9',
      'colourTertiary':'#CDB6E9'
   },
   'logic_blocks': {
      'colourPrimary': '#01579b',
      'colourSecondary':'#64C7FF',
      'colourTertiary':'#C5EAFF'
   }
}

نمط الفئة

لا يحمل نمط الفئة سوى خاصية اللون.

  • اللون (مطلوب) - لون الفئة في مربع الأدوات. يجب أن تكون هذه الألوان متطابقة مع colourPrimary في معظم القوالب في الفئة. هذا يجعل من السهل على المستخدمين معرفة الكتل التي تنتمي إلى فئة معينة.

لقطة شاشة لصندوق أدوات بألوان مختلفة

const mathCategory = {
   'colour':'290'
}

سيتضمن المظهر تعيين اسم الفئة بكائن نمط الفئة:

const categoryStyles = {
   'list_category': {
      'colour': '#4a148c'
   },
   'logic_category': {
      'colour': '#01579b',
   }
}

أنماط المكوّنات

يمكن للمظهر تحديد لون المكونات التالية أو قيمتها:

  • workspaceBackgroundColour: لون خلفية مساحة العمل
  • toolboxBackgroundColour: لون خلفية مجموعة الأدوات
  • toolboxForegroundColour: لون نص فئة مجموعة الأدوات
  • flyoutBackgroundColour: لون الخلفية المنبثقة
  • flyoutForegroundColour: لون نص التصنيف المنبثق
  • flyoutOpacity: معدل تعتيم للخارج
  • scrollbarColour: لون شريط التمرير
  • scrollbarOpacity: درجة تعتيم شريط التمرير
  • insertionMarkerColour: لون علامة الإدراج (لا يقبل أسماء الألوان)
  • insertionMarkerOpacity: تعتيم علامة الإدراج
  • markerColour: لون العلامة المعروض في وضع التنقل بلوحة المفاتيح
  • cursorColour: لون المؤشر المعروض في وضع التنقل بلوحة المفاتيح

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

const componentStyle = {
   'workspaceBackgroundColour': '#1e1e1e',
   'toolboxBackgroundColour': '#333'
}

أنماط الخط

نمط الخط هو كائن يحتوي على عائلة الخط ووزنه وحجمه.

const fontStyle = {
   'family': 'Georgia, serif',
   'weight': 'bold',
   'size': 12
}

قبعات لبدء السباق

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

المظاهر المخصَّصة

لإضافة مظهر إلى تطبيق Blockly، عليك تنفيذ ما يلي:

  1. إنشاء مظهر
  2. إضافة أسماء الأنماط
  3. ضبط المظهر على مساحة عمل

إنشاء موضوع

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

يمكن أن يكون للمظهر أيضًا مظهر أساسي يوفّر قيمًا تلقائية لأي قيم غير محدّدة في الموضوع المخصّص.

const theme = Blockly.Theme.defineTheme('themeName', {
   'base': Blockly.Themes.Classic,
   'blockStyles': {
      'logic_blocks': {
         'colourPrimary': '#4a148c'
      },
      'math_blocks': {...}
   },
   'categoryStyles': {...},
   'componentStyles': {...},
   'fontStyle': {...},
   'startHats': true
});

إليك مثال على استخدام defineTheme.

إضافة أسماء الأنماط

الآن بعد أن أنشأنا موضوعًا، نحتاج إلى إضافة اسم الأنماط إلى تعريفات الكتلة والفئات.

الفئات

تحدد كيفية تعريف صندوق الأدوات الخاص بك كيف تحتاج إلى إضافة اسم النمط. راجِع صفحة مجموعة الأدوات للحصول على مزيد من المعلومات.

عدد مرّات صدّ القرص

تحدِّد طريقة تحديد الجزء المحدَّد كيف يجب إضافة اسم النمط. يمكنك الاطّلاع على المزيد من المعلومات حول تعريفات الحظر على صفحة الحظر المخصّصة. ستقوم بتعيين أحد أنماط الكتل التي حددتها في سمة blockStyles للمظهر للكتلة.

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

تحديد المظهر

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

المظهر الأولي

إنّ أفضل طريقة لتحديد مظهر أولي هي تضمين options.theme في استدعاء الدالة. يمكنك توفير المظهر بتنسيق JSON أو JavaScript.

JSON

{
   theme: {
      "blockStyles" : {
         "list_blocks": {
            "colourPrimary": "#4a148c",
            "colourSecondary":"#AD7BE9",
            "colourTertiary":"#CDB6E9"
         }
      },
      "categoryStyles" : {
         "list_category": {
            "colour": "#4a148c"
         }
      },
      "componentStyles" : {
         "workspaceBackgroundColour": "#1e1e1e"
      }
   }
}

JavaScript

{
   theme: Blockly.Theme.defineTheme('themeName', {
      'blockStyles': blockStyles,
      'categoryStyles': categoryStyles,
      'componentStyles': componentStyles
   })
}

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

المظاهر الديناميكية

إذا أردت تغيير المظهر بشكل ديناميكي (مثلاً في حال السماح للمستخدمين باختيار مظهر من القائمة المنسدلة)، يمكنك طلب yourWorkspace.setTheme(theme).

إنشاء نص برمجي لأنماط الحظر

يوفر بشكل حظر نصًا برمجيًا يأخذ خريطة للدرجات اللونية أو القيم السداسية العشرية ويحسب الألوان الثانوية والثالثية لها. يمكن العثور على النص البرمجي في المجلد scripts/themes.

المظاهر المدمجة

يوفر تطبيق Blockly عددًا من المظاهر لسهولة الوصول، لا سيما أنواعًا معينة من نقص رؤية الألوان:

لدينا أيضًا: