ساختار بلوک در جاوا اسکریپت

در این سند، نحوه استفاده از جاوا اسکریپت برای تعریف ورودی‌ها و فیلدها (از جمله برچسب‌ها) در بلوک را مورد بحث قرار خواهیم داد. اگر با این اصطلاحات آشنا نیستید، قبل از ادامه به Anatomy of a block مراجعه کنید.

همچنین می توانید ورودی ها، فیلدها و اتصالات خود را در JSON تعریف کنید.

ورودی ها را اضافه کنید

API جاوا اسکریپت شامل یک متد append برای هر نوع ورودی است:

جاوا اسکریپت

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

هر متد appendInput می تواند یک رشته شناسه بگیرد که توسط تولیدکنندگان کد برای بازیابی کد بلوک متصل به ورودی استفاده می شود. مولدهای کد به ندرت به ورودی های ساختگی و انتهای ردیف ارجاع می دهند، بنابراین به طور کلی دلیلی برای اختصاص شناسه به آنها وجود ندارد.

API جاوا اسکریپت همچنین شامل یک روش appendInput عمومی برای الحاق ورودی های سفارشی است. توجه داشته باشید که در این حالت، شناسه باید مستقیماً به سازنده ورودی سفارشی شما ارسال شود.

جاوا اسکریپت

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

همه متدهای appendInput (اعم از عمومی و غیرعمومی) شی ورودی را برمی‌گردانند تا بتوان با استفاده از روش زنجیره‌ای، پیکربندی بیشتری انجام داد. سه روش داخلی برای پیکربندی ورودی ها استفاده می شود.

فیلدها را اضافه کنید

هنگامی که یک ورودی ایجاد شد و به یک بلوک با appendInput اضافه شد، می‌توانید به صورت اختیاری هر تعداد فیلد را به ورودی اضافه کنید. این فیلدها اغلب به عنوان برچسب برای توصیف اینکه هر ورودی برای چیست استفاده می شود.

جاوا اسکریپت

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

ساده ترین فیلد یک برچسب است. قرارداد Blockly استفاده از تمام متن‌های کوچک، به استثنای نام‌های خاص (مانند Google، SQL) است.

یک ردیف ورودی می تواند شامل هر تعداد فیلد باشد. چندین فراخوان appendField ممکن است به هم متصل شوند تا به طور موثر چندین فیلد را به یک ردیف ورودی اضافه کنند.

جاوا اسکریپت

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

فراخوان appendField('hello') در واقع میانبری برای استفاده از سازنده FieldLabel صریح است: appendField(new Blockly.FieldLabel('hello')) . تنها زمانی که می‌خواهیم از سازنده استفاده کنیم، زمانی است که نام کلاس را مشخص می‌کنیم تا برچسب با استفاده از یک قانون CSS استایل‌بندی شود.

بررسی اتصال

جاوا اسکریپت

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

روش setCheck برای بررسی نوع اتصالات استفاده می شود. اگر آرگومان null، پیش فرض داده شود، این ورودی ممکن است به هر بلوکی متصل شود. برای جزئیات به بررسی های اتصال مراجعه کنید.

فیلدها را تراز کنید

جاوا اسکریپت

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 فیلدها را به سمت چپ تراز می کند.

،

در این سند، نحوه استفاده از جاوا اسکریپت برای تعریف ورودی‌ها و فیلدها (از جمله برچسب‌ها) در بلوک را مورد بحث قرار خواهیم داد. اگر با این اصطلاحات آشنا نیستید، قبل از ادامه به Anatomy of a block مراجعه کنید.

همچنین می توانید ورودی ها، فیلدها و اتصالات خود را در JSON تعریف کنید.

ورودی ها را اضافه کنید

API جاوا اسکریپت شامل یک متد append برای هر نوع ورودی است:

جاوا اسکریپت

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

هر متد appendInput می تواند یک رشته شناسه بگیرد که توسط تولیدکنندگان کد برای بازیابی کد بلوک متصل به ورودی استفاده می شود. مولدهای کد به ندرت به ورودی های ساختگی و انتهای ردیف ارجاع می دهند، بنابراین به طور کلی دلیلی برای اختصاص شناسه به آنها وجود ندارد.

API جاوا اسکریپت همچنین شامل یک روش appendInput عمومی برای الحاق ورودی های سفارشی است. توجه داشته باشید که در این حالت، شناسه باید مستقیماً به سازنده ورودی سفارشی شما ارسال شود.

جاوا اسکریپت

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

همه متدهای appendInput (اعم از عمومی و غیرعمومی) شی ورودی را برمی‌گردانند تا بتوان با استفاده از روش زنجیره‌ای، پیکربندی بیشتری انجام داد. سه روش داخلی برای پیکربندی ورودی ها استفاده می شود.

فیلدها را اضافه کنید

هنگامی که یک ورودی ایجاد شد و به یک بلوک با appendInput اضافه شد، می‌توانید به صورت اختیاری هر تعداد فیلد را به ورودی اضافه کنید. این فیلدها اغلب به عنوان برچسب برای توصیف اینکه هر ورودی برای چیست استفاده می شود.

جاوا اسکریپت

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

ساده ترین فیلد یک برچسب است. قرارداد Blockly استفاده از تمام متن‌های کوچک، به استثنای نام‌های خاص (مانند Google، SQL) است.

یک ردیف ورودی می تواند شامل هر تعداد فیلد باشد. چندین فراخوان appendField ممکن است به هم متصل شوند تا به طور موثر چندین فیلد را به یک ردیف ورودی اضافه کنند.

جاوا اسکریپت

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

فراخوان appendField('hello') در واقع میانبری برای استفاده از سازنده FieldLabel صریح است: appendField(new Blockly.FieldLabel('hello')) . تنها زمانی که می‌خواهیم از سازنده استفاده کنیم، زمانی است که نام کلاس را مشخص می‌کنیم تا برچسب با استفاده از یک قانون CSS استایل‌بندی شود.

بررسی اتصال

جاوا اسکریپت

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

روش setCheck برای بررسی نوع اتصالات استفاده می شود. اگر آرگومان null، پیش فرض داده شود، این ورودی ممکن است به هر بلوکی متصل شود. برای جزئیات به بررسی های اتصال مراجعه کنید.

فیلدها را تراز کنید

جاوا اسکریپت

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 فیلدها را به سمت چپ تراز می کند.