עיצובים

באמצעות עיצובים אפשר להתאים אישית את העיצוב והסגנון של 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, צריך לבצע את הפעולות הבאות:

  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');

הגדרת העיצוב

צריך גם לציין ל-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 מספק כמה ערכות נושא לנגישות, ובמיוחד סוגים מסוימים של לקות בראיית צבעים:

יש לנו גם: