באמצעות עיצובים אפשר להתאים אישית את העיצוב והסגנון של 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
ישירות באובייקט עיצוב, יתווסף כובע לכל הבלוקים
בלי חיבורים קודמים או פלט. כדי שתהיה לכם יותר שליטה על בחירת הבלוקים בדיוק שמתאימים לכובע, אפשר להשתמש במאפיין block style.
עיצובים מותאמים אישית
כדי להוסיף עיצוב לאפליקציה שלכם ב-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');
הגדרת העיצוב
צריך גם לציין ל-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/Topics.
עיצובים מובנים
הצוות של blockly מספק כמה ערכות נושא לנגישות, ובמיוחד סוגים מסוימים של לקות בראיית צבעים:
יש לנו גם: