استطلاع بحثي: أخبِرنا عن تجربتك مع تطبيق 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.

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

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

الفئات

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

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 نصًا برمجيًا سيستخدِم خريطة لتدرّجات الألوان أو القيم السداسية العشرية وسي حساب الألوان الثانوية والثالثية لها. يمكن العثور على النص البرمجي في مجلد النصوص/المظاهر.

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

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

لدينا أيضًا:

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