تتيح لك المظاهر تخصيص مظهر تطبيق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، عليك تنفيذ ما يلي:
- إنشاء مظهر
- إضافة أسماء الأنماط
- ضبط المظهر على مساحة عمل
إنشاء موضوع
يمكن إنشاء مظهر باستخدام الدالة الإنشائية أو باستخدام 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 عددًا من المظاهر لسهولة الوصول، لا سيما أنواعًا معينة من نقص رؤية الألوان:
لدينا أيضًا:
- مظهر كلاسيكي
- حديث
- الوضع الداكن