استطلاع بحثي: أخبِرنا عن تجربتك مع تطبيق Blockly .

تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

المظاهر

التصميمات هي طريقة لتخصيص مظهر 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
}

Start Hats

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

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

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

إنشاء مظهر
إضافة أسماء الأنماط
ضبط المظهر في مساحة عمل

إنشاء مظهر

يمكن إنشاء مظهر باستخدام الدالة الإنشائية أو باستخدام 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.

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

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

الفئات

لاستخدام أحد أنماط الفئات المحدّدة في categoryStyles المخصّص لثيمك، أضِف هذا النمط إلى تعريف الفئة:

JSON

{
  "kind": "category",
  "name": "Logic",
  "categorystyle": "logic_category"
}

XML

<category name="Logic" categorystyle="logic_category"></category>

Blocks

لاستخدام أحد أنماط الوحدات المحدّدة في blockStyles لمظهرك، أضِفه إلى تعريف الوحدة:

JSON

"style":"logic_blocks"

JavaScript

this.setStyle('logic_blocks');

ضبط المظهر

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

الموضوع الأوّلي

إنّ أفضل طريقة لضبط موضوع أولي هي تضمين 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).

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

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

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

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

لدينا أيضًا:

المظهر الكلاسيكي
حديث
الوضع الداكن