עיצובים

עיצובים הם דרך להתאים אישית את המראה והתחושה של 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

אם מגדירים את startHats: true ישירות באובייקט של העיצוב, יתווסף כובע לכל הבלוקים ללא חיבורי קלט או פלט קודמים. אם אתם רוצים לשלוט טוב יותר בבלוק הספציפי שאליו יתווסף הכובע, תוכלו להשתמש במקום זאת במאפיין block style.

עיצובים מותאמים אישית

כדי להוסיף עיצוב לאפליקציית Blockly, צריך לבצע את הפעולות הבאות:

  1. יצירת עיצוב
  2. הוספת שמות של סגנונות
  3. הגדרת העיצוב בסביבת העבודה

יצירת עיצוב

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

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

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

חסימות

כדי להשתמש באחד מסוגי הבלוק שהוגדרו ב-blockStyles של העיצוב, מוסיפים אותו להגדרת הבלוק:

JSONJavaScript
"style":"logic_blocks"

this.setStyle('logic_blocks');

הגדרת העיצוב

צריך גם לציין ל-Blockly באיזה עיצוב להשתמש. הגדרת כמה עיצובים שמשתמשים באותם סגנונות של בלוקים ושמות של קטגוריות מאפשרת למשתמש לבחור את העיצוב שמתאים לו ביותר ולשנות אותו באופן דינמי בלי לשנות את הגדרות הבלוק עצמן.

הנושא הראשוני

הדרך הטובה ביותר להגדיר נושא ראשוני היא לכלול את options.theme בקריאה להזרקה. אפשר לספק את העיצוב ב-JSON או ב-JavaScript.

JSONJavaScript
{
   theme: {
      "blockStyles" : {
         "list_blocks": {
            "colourPrimary": "#4a148c",
            "colourSecondary":"#AD7BE9",
            "colourTertiary":"#CDB6E9"
         }
      },
      "categoryStyles" : {
         "list_category": {
            "colour": "#4a148c"
         }
      },
      "componentStyles" : {
         "workspaceBackgroundColour": "#1e1e1e"
      }
   }
}

{
   theme: Blockly.Theme.defineTheme('themeName', {
      'blockStyles': blockStyles,
      'categoryStyles': categoryStyles,
      'componentStyles': componentStyles
   })
}

אם לא צוין עיצוב, ברירת המחדל תהיה עיצוב קלאסי.

עיצובים דינמיים

אם רוצים לשנות את העיצוב באופן דינמי (למשל, אם רוצים לאפשר למשתמשים לבחור עיצוב מתפריט נפתח), אפשר להפעיל את yourWorkspace.setTheme(theme).

יצירת סקריפט של סגנונות בלוקים

ב-Blockly יש סקריפט שמקבל מפה של גוונים או ערכים הקסדצימליים ומחשב את הצבעים המשניים והשלישונים שלהם. הסקריפט נמצא בתיקייה scripts/themes.

עיצובים מובנים

ב-Blockly יש כמה עיצובים לנגישות, במיוחד לסוגים מסוימים של לקות בראיית צבעים:

יש לנו גם: