מראה הקטגוריה

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

ארגז כלים עם שש קטגוריות. הקטגוריה Variables (משתנים) פתוחה ומכילה בלוקים של getter ו-setter של משתנים. הצבע של הבלוקים תואם לצבע של הפס האנכי שמימין לשם הקטגוריה Variables (משתנים).

שירות CSS לקטגוריה

אפשר להשתמש ב-CSS כדי לעצב את ארגזי הכלים של הקטגוריות.

ארגז כלים של קטגוריה מורכב מכמה רכיבי HTML, שכל אחד מהם מדמה חלק אחר בארגז הכלים. לדוגמה, לכל קטגוריה יש div משלה ו-span נפרדים לסמל ולתווית שלה. (רשימה מלאה מופיעה בטבלה שלמטה).

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

אפשר להקצות מחלקות CSS מותאמות אישית לחלקים ספציפיים. לדוגמה, אפשר להקצות מחלקות CSS שונות לכל תווית span. אפשר להשתמש במחלקות האלה כדי להגדיר סגנונות שונים לחלקים שונים מאותו סוג, למשל כדי להקצות צבע שונה לכל תווית.

מחלקות CSS שמוגדרות כברירת מחדל

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

סוג החלק תיאור מחלקת CSS שמוגדרת כברירת מחדל
contents הקטגוריה div שמכילה את כל הקטגוריות. blocklyToolboxCategoryGroup
מאגר ‫div שמכיל קטגוריה אחת וקטגוריות המשנה שלה. blocklyToolboxCategoryContainer
שורה הקטגוריה div שמכילה את הקטגוריה. blocklyToolboxCategory
rowcontentcontainer השדה div שמכיל את התווית ואת הסמל. blocklyTreeRowContentContainer
סימן השאלה ה-span שמכיל את הסמל. blocklyToolboxCategoryIcon
תווית ה-span שמכיל את התווית. blocklyToolboxCategoryLabel

בנוסף, משתמשים ב-CSS כדי לתייג את המצב של חלקים מסוימים בארגז הכלים.

מדינה (State) תיאור מחלקת CSS שמוגדרת כברירת מחדל
נבחר התווסף ל'שורה' div כשבוחרים את הקטגוריה. blocklyToolboxSelected
openicon הסמל span מתווסף כשפותחים קטגוריה עם קטגוריות משנה. blocklyToolboxCategoryIconOpen
closedicon הוספנו את הסמל span כשסוגרים קטגוריה עם קטגוריות משנה. blocklyToolboxCategoryIconClosed

מחלקות CSS בהתאמה אישית

כדי להקצות מחלקות CSS מותאמות אישית, משתמשים במאפיין cssConfig בהגדרות של ארגז הכלים ב-JSON או במאפיינים css- בהגדרות של ארגז הכלים ב-XML, ומשתמשים בסוג החלק כדי לזהות את החלק שאליו רוצים להקצות מחלקות.

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

ארגז כלים עם שתי קטגוריות. תוויות הקטגוריות הן לבנות, אבל צבעי הרקע שלהן שונים.

ההגדרות הבאות של קטגוריות מקצות מחלקות CSS מותאמות אישית לכל שורה של קטגוריה. שימו לב שהסיווג של שורות כברירת מחדל (blocklyToolboxCategory) נכלל בכל הגדרה. הסיבה לכך היא ש-Blockly מחליף את המאפיין class של השורה כשהוא מקצה מחלקות. אם לא תכללו את מחלקת ברירת המחדל, לא תקבלו את ה-CSS של ברירת המחדל למחלקה הזו.

JSON

מגדירים מחלקות CSS מותאמות אישית באמצעות המאפיין cssConfig.

{
  "kind": "category",
  "name": "My category",
  "cssConfig": {
    "row": "blocklyToolboxCategory myRow"  // Use the part type ("row") as a key.
  },
  "contents": [...],
},
{
  "kind": "category",
  "name": "Your category",
  "cssConfig": {
    "row": "blocklyToolboxCategory yourRow"
  },
  "contents": [...],
},

XML

הגדרת מחלקות CSS בהתאמה אישית באמצעות מאפיין שהשם שלו הוא סוג החלק עם הקידומת css-.

<category name="My category" css-row="blocklyToolboxCategory myRow">
  ...
</category>
<category name="Your category" css-row="blocklyToolboxCategory yourRow">
  ...
</category>

בקובץ ה-CSS, משתמשים במחלקות בהתאמה אישית כדי להקצות צבעים לשורות, ובמחלקת ברירת המחדל כדי להקצות את צבע התווית:

.myRow {background-color: green}
.yourRow {background-color: red}
.blocklyToolboxCategoryLabel {color: white}

עיצובים

עיצובים מאפשרים לכם לציין את כל הצבעים של סביבת העבודה בבת אחת, כולל הצבעים של הקטגוריות.

כדי להשתמש בהם, צריך לשייך את הקטגוריה לסגנון קטגוריה מסוים:

JSON

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

XML

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

צבעים

אפשר גם לציין את הצבע ישירות, אבל לא מומלץ לעשות את זה. הצבע הוא מספר שמוצג כמחרוזת (0-360) שמציין את הגוון. שימו לב לאיות הבריטי.

JSON

{
  "contents": [
    {
      "kind": "category",
      "name": "Logic",
      "colour": "210"
    },
    {
      "kind": "category",
      "name": "Loops",
      "colour": "120"
    }
  ]
}

XML

<xml id="toolbox" style="display: none">
  <category name="Logic" colour="210">...</category>
  <category name="Loops" colour="120">...</category>
  <category name="Math" colour="230">...</category>
  <category name="Colour" colour="20">...</category>
  <category name="Variables" colour="330" custom="VARIABLE"></category>
  <category name="Functions" colour="290" custom="PROCEDURE"></category>
</xml>

שימו לב שאפשר גם להשתמש בהפניות לתרגום של צבעים.