מבנה של בלוקים ב-JavaScript

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

אפשר גם להגדיר את הקלטים, השדות והחיבורים ב-JSON.

הוספת קלט

‫JavaScript API כולל שיטת append לכל סוג קלט:

JavaScript

init: function() {
  // ...
  this.appendEndRowInput()
      .appendField('for each')
      .appendField('item')
      .appendField(new Blockly.FieldVariable(), 'VAR');
  this.appendValueInput('LIST')
      .setCheck('Array')
      .setAlign(Blockly.inputs.Align.RIGHT)
      .appendField('in list');
  this.appendStatementInput('DO')
      .appendField('do');
  this.appendDummyInput()
      .appendField('end');
}

בלוק עם ארבע שורות. בשורה הראשונה יש את התוויות 'for each' ו-'item' ותפריט נפתח של משתנה עם האפשרות 'x' שנבחרה. בשורה השנייה מזינים את התווית 'in list' ואת ערך הקלט. בשורה השלישית יש את התווית 'do' ואמצעי קלט של הצהרה. ובשורה האחרונה יש את התווית 'end'.

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

בנוסף, JavaScript API כולל שיטה גנרית appendInput לצירוף קלט בהתאמה אישית. שימו לב שבמקרה הזה, צריך להעביר את המזהה ישירות לקונסטרוקטור של הקלט המותאם אישית.

JavaScript

init: function() {
  // ...
  this.appendInput(new MyCustomInput('INPUT_NAME'))
      .appendField('an example label')
}

כל השיטות (גם הגנריות וגם הלא גנריות) מחזירות את אובייקט הקלט, כך שאפשר להגדיר אותן עוד באמצעות שרשור שיטות.appendInput יש שלוש שיטות מובנות להגדרת קלט.

הוספת שדות

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

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello');
}

בלוק עם התווית

השדה הפשוט ביותר הוא תווית. המוסכמה ב-Blockly היא להשתמש בטקסט באותיות קטנות, למעט שמות פרטיים (לדוגמה, Google,‏ SQL).

שורה של קלט יכולה להכיל כל מספר של שדות. יכול להיות שיהיו כמה קריאות appendField שמקושרות זו לזו כדי להוסיף כמה שדות לאותה שורת קלט בצורה יעילה.

JavaScript

init: function() {
  // ...
  this.appendDummyInput()
      .appendField('hello')
      .appendField(new Blockly.FieldLabel('Neil', 'person'));
}

בלוק עם התווית 'hello' בטקסט פשוט והתווית 'Neil' בכתב נטוי.

הקריאה appendField('hello') היא למעשה קיצור דרך לשימוש בבונה FieldLabel מפורש: appendField(new Blockly.FieldLabel('hello')). השימוש היחיד שבו כדאי להשתמש בבונה הוא כשמציינים שם מחלקה כדי שאפשר יהיה לעצב את התווית באמצעות כלל CSS.

בדיקות חיבור

JavaScript

init: function() {
  // ...
  this.appendValueInput('NUM')
      .setCheck('Number');
}

השיטה setCheck משמשת לבדיקת סוגי חיבורים. אם נותנים ארגומנט של null, שהוא ברירת המחדל, אפשר לחבר את הקלט הזה לכל בלוק. לפרטים נוספים על בדיקות החיבור

יישור שדות

JavaScript

init: function() {
  // ...
  this.appendValueInput('LIST')
      .appendField('in list')
      .setAlign(Blockly.inputs.Align.RIGHT);
}

השיטה setAlign משמשת ליישור שדות בתוך קלט. יש שלושה ערכים שמתארים את עצמם שאפשר להעביר כארגומנט לפונקציה הזו: Blockly.inputs.Align.LEFT,‏ Blockly.inputs.Align.RIGHT ו-Blockly.inputs.Align.CENTER.

כשבלוק מעובד במצב מימין לשמאל (למשל, ערבית ועברית), הכיוונים שמאלה וימינה מתהפכים. לכן, Blockly.inputs.Align.RIGHT יגרום ליישור השדות לשמאל.