این سند قسمت های مختلف یک بلوک را بررسی می کند.
اتصالات
اتصالات مشخص می کنند که بلوک ها می توانند به کجا متصل شوند و به چه نوع بلوک هایی می توانند متصل شوند.
چهار نوع اتصال وجود دارد:
نوع اتصال | تصویر |
---|---|
اتصال خروجی | ![]() |
اتصال ورودی | ![]() |
اتصال قبلی | ![]() |
اتصال بعدی | ![]() |
اتصالات خروجی و اتصالات ورودی می توانند به یکدیگر متصل شوند و اتصالات بعدی و اتصالات قبلی می توانند به یکدیگر متصل شوند. شما می توانید اتصالات را با بررسی های اتصال محدودتر کنید.
شما می توانید اشکال اتصالات را با استفاده از یک رندر سفارشی سفارشی کنید .
اتصالات سطح بالا
بلوک ها دارای سه اتصال هستند که استفاده از آنها اختیاری است.
یک بلوک ممکن است یک اتصال خروجی داشته باشد که به عنوان یک اتصال دهنده اره منبت کاری اره مویی نر در لبه جلویی یک بلوک نشان داده می شود. یک اتصال خروجی مقدار یک بلوک (عبارت) را به بلوک دیگری ارسال می کند. بلوک با اتصال خروجی، بلوک ارزش نامیده می شود.
یک بلوک ممکن است یک اتصال قبلی در بالای خود (به عنوان یک بریدگی) و یک اتصال بعدی در پایین (به عنوان یک زبانه) داشته باشد. اینها به بلوکها اجازه میدهند که به صورت عمودی روی هم چیده شوند و دنبالهای از عبارات را نشان دهند. بلوک بدون اتصال خروجی، بلوک دستور نامیده می شود و معمولاً دارای هر دو اتصال قبلی و بعدی است.
برای اطلاعات بیشتر، اتصالات سطح بالا را ببینید.
فیلدها
فیلدها اکثر عناصر UI را در یک بلوک تعریف می کنند. اینها شامل برچسبهای رشته، فهرستهای بازشو، چک باکس، تصاویر و ورودیهای دادههای تحت اللفظی مانند رشتهها و اعداد است. به عنوان مثال، این بلوک حلقه از فیلدهای برچسب، یک فیلد کشویی و فیلدهای شماره استفاده می کند.
Blockly تعدادی فیلد داخلی از جمله ورودی متن، انتخابگر رنگ و تصاویر را ارائه میکند. شما همچنین می توانید فیلدهای خود را ایجاد کنید .
برای اطلاعات بیشتر، فیلدها را ببینید.
ورودی ها
ورودی ها محفظه هایی برای فیلدها و اتصالات هستند. یک بلوک با رندر کردن ورودی های آن در یک یا چند ردیف مانند آجر ساخته می شود.
چهار نوع ورودی مختلف وجود دارد که همگی میتوانند شامل فیلدها (شامل برچسبها) باشند و دو نوع ورودی شامل یک اتصال واحد هستند. همچنین می توانید ورودی های سفارشی ایجاد کنید که از رندر سفارشی پشتیبانی می کنند.
نوع ورودی | نوع اتصال | تصویر |
---|---|---|
ورودی ساختگی | هیچ کدام | ![]() |
ورودی انتهای ردیف | هیچ کدام | ![]() |
ارزش ورودی | اتصال ورودی | ![]() |
ورودی بیانیه | اتصال بعدی | ![]() |
ما این ورودی ها را از طریق یک سری مثال معرفی خواهیم کرد. برای اطلاعات در مورد تعریف ورودیها، اتصالات و فیلدهایی که یک بلوک را تشکیل میدهند، به ساختار بلوک در JSON و ساختار بلوک در جاوا اسکریپت مراجعه کنید.
ورودی های ساختگی
ورودی ساختگی فقط یک محفظه برای فیلدها است -- اتصالی ندارد. به عنوان مثال، بلوک اعداد زیر دارای یک ورودی ساختگی است که حاوی یک فیلد عددی واحد است.
به عنوان مثال پیچیده تر، بلوکی را در نظر بگیرید که دو عدد را با هم جمع می کند. این می تواند از یک ورودی ساختگی با سه فیلد (عدد، برچسب، شماره) ساخته شود:
یا سه ورودی ساختگی که هر کدام یک فیلد دارند:
ورودی های انتهای ردیف
Blockly از اکتشافی استفاده می کند تا تصمیم بگیرد که آیا همه ورودی ها را در یک ردیف ارائه کند یا هر ورودی را در ردیف خودش ارائه دهد. اگر می خواهید مطمئن شوید که یک ورودی یک ردیف جدید را شروع می کند، از ورودی انتهای ردیف به عنوان ورودی قبلی استفاده کنید.
مانند ورودیهای ساختگی، ورودیهای انتهای ردیف میتوانند حاوی فیلدهایی باشند اما اتصالی ندارند. برای مثال، در اینجا بلوک جمع ساخته شده از یک ورودی انتهای ردیف با دو فیلد و یک ورودی ساختگی با یک فیلد ساخته شده است. ورودی انتهای ردیف، ورودی ساختگی را مجبور میکند که در یک ردیف جدید ارائه شود.
ارزش ورودی ها
زمینه ها در مواردی که می توانند بپذیرند محدود است. به عنوان مثال، فیلدهای شماره فقط اعداد را می پذیرند. اما اگر بخواهید دو متغیر را با هم اضافه کنید چه؟ یا نتیجه یک فراخوانی رویه را به نتیجه یک محاسبه متفاوت اضافه کنید؟ برای حل این مشکل به جای فیلدها از اتصالات ورودی استفاده کنید. این به کاربران اجازه می دهد تا از بلوک های ارزش به عنوان مقادیر ورودی استفاده کنند.
یک مقدار ورودی حاوی صفر یا چند فیلد است و به یک اتصال ورودی ختم می شود. بلوک زیر فیلدهای شماره در بلوک جمع را با اتصالات ورودی جایگزین می کند. این از دو ورودی مقدار ساخته شده است - اولی حاوی هیچ فیلدی نیست و دومی حاوی یک فیلد برچسب است. هر دو به اتصالات ورودی ختم می شوند.
ورودی های بیانیه
آخرین نوع ورودی یک ورودی عبارت است که حاوی صفر یا چند فیلد است و با اتصال بعدی به پایان می رسد. اتصال بعدی به شما امکان می دهد پشته ای از بلوک های دستوری را در داخل بلوک خود قرار دهید. به عنوان مثال، بلوک تکرار زیر را در نظر بگیرید. ردیف دوم این بلوک شامل یک ورودی عبارت با یک فیلد برچسب و یک اتصال بعدی است.
ورودی های بیانیه همیشه در ردیف خودشان ارائه می شوند. این را می توانید در بلوک if-then-else زیر مشاهده کنید که دارای ورودی مقدار در ردیف اول و ورودی دستورات در دو ردیف بعدی است.
Inline در مقابل ورودی های خارجی
ورودی ها می توانند به صورت درون خطی یا خارجی ارائه شوند. این کنترل میکند که آیا کانکتورهای ورودی مقدار در داخل بلوک (در خط) یا در لبه بیرونی (خارجی) رندر شوند، و همچنین اینکه آیا ورودیها در ردیفهای یکسان یا متفاوت ارائه شوند.
هنگامی که یک بلوک سفارشی ایجاد می کنید، می توانید تعیین کنید که از کدام یک استفاده کنید یا اجازه دهید Blockly برای شما تصمیم بگیرد. برای اطلاعات بیشتر، ورودیهای داخلی در مقابل ورودیهای خارجی را ببینید.
برو بازی کن
بهترین راه برای یادگیری در مورد ورودیها، فیلدها و اتصالات، ساختن بلوکها در ابزارهای توسعهدهنده Blockly و انتخاب تنظیمات مختلف برای inputs
( automatic
، external
، inline
) است.
نمادها
علاوه بر ورودیها، اتصالات و فیلدها، بلوکها میتوانند یک یا چند نماد داشته باشند. اینها کاربردهای مختلفی دارند، مانند نمایش هشدارها، وارد کردن نظرات در سطح بلوک یا نمایش رابط کاربری mutator. به عنوان مثال، در اینجا یک بلوک با نماد نظر و ویرایشگر مربوط به آن وجود دارد.
برای اطلاعات بیشتر، نمادها را ببینید.
بلوک ها و اشیاء جاوا اسکریپت
بلوک ها، ورودی ها، اتصالات، فیلدها و آیکون ها همه اشیاء جاوا اسکریپت هستند.
جزء بلوکی | کلاس پایه | زیر کلاس ها |
---|---|---|
مسدود کردن | Block | BlockSvg |
ورودی | Input | DummyInput |
EndRowInput | ||
ValueInput | ||
StatementInput | ||
ورودی سفارشی | ||
اتصال | Connection | RenderedConnection |
میدان | Field | FieldTextInput |
FieldNumber | ||
FieldLabel | ||
فیلد سفارشی | ||
و غیره | ||
نماد | Icon | CommentIcon |
MutatorIcon | ||
WarningIcon | ||
نماد سفارشی |
اشیاء موجود در یک بلوک یک جسم درختی شکل را تشکیل می دهند. درک اینکه چگونه نمایش گرافیکی یک بلوک با این درخت مطابقت دارد، هنگام نوشتن کد برای دستکاری بلوک ها به صورت برنامه ای مفید است. به عنوان مثال، یک بلوک controls_for
:
مربوط به درخت زیر از اشیاء جاوا اسکریپت است.
// <Object> means an instance of an Object.
{ // Block
nextConnection: <Connection>, // ConnectionType NEXT_STATEMENT
outputConnection: null,
previousConnection: <Connection>, // ConnectionType PREVIOUS_STATEMENT
inputList: [ // Array of Inputs in block
{ // ValueInput
connection: <Connection>, // ConnectionType INPUT_VALUE
fieldRow: [ // Array of fields in Input
<FieldLabel>, // 'count with'
<FieldVariable>, // i
<FieldLabel>, // 'from'
],
},
{ // ValueInput
connection: <Connection>, // ConnectionType INPUT_VALUE
fieldRow: [
<FieldLabel>, // 'to'
],
},
{ // ValueInput
connection: <Connection>, // ConnectionType INPUT_VALUE
fieldRow: [
<FieldLabel>, // 'by'
],
},
{ // StatementInput
connection: <Connection>, // ConnectionType NEXT_STATEMENT
fieldRow: [
<FieldLabel>, // 'do'
],
},
]
}
این سند قسمت های مختلف یک بلوک را بررسی می کند.
اتصالات
اتصالات مشخص می کنند که بلوک ها می توانند به کجا متصل شوند و به چه نوع بلوک هایی می توانند متصل شوند.
چهار نوع اتصال وجود دارد:
نوع اتصال | تصویر |
---|---|
اتصال خروجی | ![]() |
اتصال ورودی | ![]() |
اتصال قبلی | ![]() |
اتصال بعدی | ![]() |
اتصالات خروجی و اتصالات ورودی می توانند به یکدیگر متصل شوند و اتصالات بعدی و اتصالات قبلی می توانند به یکدیگر متصل شوند. شما می توانید اتصالات را با بررسی های اتصال محدودتر کنید.
شما می توانید اشکال اتصالات را با استفاده از یک رندر سفارشی سفارشی کنید .
اتصالات سطح بالا
بلوک ها دارای سه اتصال هستند که استفاده از آنها اختیاری است.
یک بلوک ممکن است یک اتصال خروجی داشته باشد که به عنوان یک اتصال دهنده اره منبت کاری اره مویی نر در لبه جلویی یک بلوک نشان داده می شود. یک اتصال خروجی مقدار یک بلوک (عبارت) را به بلوک دیگری ارسال می کند. بلوک با اتصال خروجی، بلوک ارزش نامیده می شود.
یک بلوک ممکن است یک اتصال قبلی در بالای خود (به عنوان یک بریدگی) و یک اتصال بعدی در پایین (به عنوان یک زبانه) داشته باشد. اینها به بلوکها اجازه میدهند که به صورت عمودی روی هم چیده شوند و دنبالهای از عبارات را نشان دهند. بلوک بدون اتصال خروجی، بلوک دستور نامیده می شود و معمولاً دارای هر دو اتصال قبلی و بعدی است.
برای اطلاعات بیشتر، اتصالات سطح بالا را ببینید.
فیلدها
فیلدها اکثر عناصر UI را در یک بلوک تعریف می کنند. اینها شامل برچسبهای رشته، فهرستهای بازشو، چک باکس، تصاویر و ورودیهای دادههای تحت اللفظی مانند رشتهها و اعداد است. به عنوان مثال، این بلوک حلقه از فیلدهای برچسب، یک فیلد کشویی و فیلدهای شماره استفاده می کند.
Blockly تعدادی فیلد داخلی از جمله ورودی متن، انتخابگر رنگ و تصاویر را ارائه میکند. شما همچنین می توانید فیلدهای خود را ایجاد کنید .
برای اطلاعات بیشتر، فیلدها را ببینید.
ورودی ها
ورودی ها محفظه هایی برای فیلدها و اتصالات هستند. یک بلوک با رندر کردن ورودی های آن در یک یا چند ردیف مانند آجر ساخته می شود.
چهار نوع ورودی مختلف وجود دارد که همگی میتوانند شامل فیلدها (شامل برچسبها) باشند و دو نوع ورودی شامل یک اتصال واحد هستند. همچنین می توانید ورودی های سفارشی ایجاد کنید که از رندر سفارشی پشتیبانی می کنند.
نوع ورودی | نوع اتصال | تصویر |
---|---|---|
ورودی ساختگی | هیچ کدام | ![]() |
ورودی انتهای ردیف | هیچ کدام | ![]() |
ارزش ورودی | اتصال ورودی | ![]() |
ورودی بیانیه | اتصال بعدی | ![]() |
ما این ورودی ها را از طریق یک سری مثال معرفی خواهیم کرد. برای اطلاعات در مورد تعریف ورودیها، اتصالات و فیلدهایی که یک بلوک را تشکیل میدهند، به ساختار بلوک در JSON و ساختار بلوک در جاوا اسکریپت مراجعه کنید.
ورودی های ساختگی
ورودی ساختگی فقط یک محفظه برای فیلدها است -- اتصالی ندارد. به عنوان مثال، بلوک اعداد زیر دارای یک ورودی ساختگی است که حاوی یک فیلد عددی واحد است.
به عنوان مثال پیچیده تر، بلوکی را در نظر بگیرید که دو عدد را با هم جمع می کند. این می تواند از یک ورودی ساختگی با سه فیلد (عدد، برچسب، شماره) ساخته شود:
یا سه ورودی ساختگی که هر کدام یک فیلد دارند:
ورودی های انتهای ردیف
Blockly از اکتشافی استفاده می کند تا تصمیم بگیرد که آیا همه ورودی ها را در یک ردیف ارائه کند یا هر ورودی را در ردیف خودش ارائه دهد. اگر می خواهید مطمئن شوید که یک ورودی یک ردیف جدید را شروع می کند، از ورودی انتهای ردیف به عنوان ورودی قبلی استفاده کنید.
مانند ورودیهای ساختگی، ورودیهای انتهای ردیف میتوانند حاوی فیلدهایی باشند اما اتصالی ندارند. برای مثال، در اینجا بلوک جمع ساخته شده از یک ورودی انتهای ردیف با دو فیلد و یک ورودی ساختگی با یک فیلد ساخته شده است. ورودی انتهای ردیف، ورودی ساختگی را مجبور میکند که در یک ردیف جدید ارائه شود.
ارزش ورودی ها
زمینه ها در مواردی که می توانند بپذیرند محدود است. به عنوان مثال، فیلدهای شماره فقط اعداد را می پذیرند. اما اگر بخواهید دو متغیر را با هم اضافه کنید چه؟ یا نتیجه یک فراخوانی رویه را به نتیجه یک محاسبه متفاوت اضافه کنید؟ برای حل این مشکل به جای فیلدها از اتصالات ورودی استفاده کنید. این به کاربران اجازه می دهد تا از بلوک های ارزش به عنوان مقادیر ورودی استفاده کنند.
یک مقدار ورودی حاوی صفر یا چند فیلد است و به یک اتصال ورودی ختم می شود. بلوک زیر فیلدهای شماره در بلوک جمع را با اتصالات ورودی جایگزین می کند. این از دو ورودی مقدار ساخته شده است - اولی حاوی هیچ فیلدی نیست و دومی حاوی یک فیلد برچسب است. هر دو به اتصالات ورودی ختم می شوند.
ورودی های بیانیه
آخرین نوع ورودی یک ورودی عبارت است که حاوی صفر یا چند فیلد است و با اتصال بعدی به پایان می رسد. اتصال بعدی به شما امکان می دهد پشته ای از بلوک های دستوری را در داخل بلوک خود قرار دهید. به عنوان مثال، بلوک تکرار زیر را در نظر بگیرید. ردیف دوم این بلوک شامل یک ورودی عبارت با یک فیلد برچسب و یک اتصال بعدی است.
ورودی های بیانیه همیشه در ردیف خودشان ارائه می شوند. این را می توانید در بلوک if-then-else زیر مشاهده کنید که دارای ورودی مقدار در ردیف اول و ورودی دستورات در دو ردیف بعدی است.
Inline در مقابل ورودی های خارجی
ورودی ها می توانند به صورت درون خطی یا خارجی ارائه شوند. این کنترل میکند که آیا کانکتورهای ورودی مقدار در داخل بلوک (در خط) یا در لبه بیرونی (خارجی) رندر شوند، و همچنین اینکه آیا ورودیها در ردیفهای یکسان یا متفاوت ارائه شوند.
هنگامی که یک بلوک سفارشی ایجاد می کنید، می توانید تعیین کنید که از کدام یک استفاده کنید یا اجازه دهید Blockly برای شما تصمیم بگیرد. برای اطلاعات بیشتر، ورودیهای داخلی در مقابل ورودیهای خارجی را ببینید.
برو بازی کن
بهترین راه برای یادگیری در مورد ورودیها، فیلدها و اتصالات، ساختن بلوکها در ابزارهای توسعهدهنده Blockly و انتخاب تنظیمات مختلف برای inputs
( automatic
، external
، inline
) است.
نمادها
علاوه بر ورودیها، اتصالات و فیلدها، بلوکها میتوانند یک یا چند نماد داشته باشند. اینها کاربردهای مختلفی دارند، مانند نمایش هشدارها، وارد کردن نظرات در سطح بلوک یا نمایش رابط کاربری mutator. به عنوان مثال، در اینجا یک بلوک با نماد نظر و ویرایشگر مربوط به آن وجود دارد.
برای اطلاعات بیشتر، نمادها را ببینید.
بلوک ها و اشیاء جاوا اسکریپت
بلوک ها، ورودی ها، اتصالات، فیلدها و آیکون ها همه اشیاء جاوا اسکریپت هستند.
جزء بلوکی | کلاس پایه | زیر کلاس ها |
---|---|---|
مسدود کردن | Block | BlockSvg |
ورودی | Input | DummyInput |
EndRowInput | ||
ValueInput | ||
StatementInput | ||
ورودی سفارشی | ||
اتصال | Connection | RenderedConnection |
میدان | Field | FieldTextInput |
FieldNumber | ||
FieldLabel | ||
فیلد سفارشی | ||
و غیره | ||
نماد | Icon | CommentIcon |
MutatorIcon | ||
WarningIcon | ||
نماد سفارشی |
اشیاء موجود در یک بلوک یک جسم درختی شکل را تشکیل می دهند. درک اینکه چگونه نمایش گرافیکی یک بلوک با این درخت مطابقت دارد، هنگام نوشتن کد برای دستکاری بلوک ها به صورت برنامه ای مفید است. به عنوان مثال، یک بلوک controls_for
:
مربوط به درخت زیر از اشیاء جاوا اسکریپت است.
// <Object> means an instance of an Object.
{ // Block
nextConnection: <Connection>, // ConnectionType NEXT_STATEMENT
outputConnection: null,
previousConnection: <Connection>, // ConnectionType PREVIOUS_STATEMENT
inputList: [ // Array of Inputs in block
{ // ValueInput
connection: <Connection>, // ConnectionType INPUT_VALUE
fieldRow: [ // Array of fields in Input
<FieldLabel>, // 'count with'
<FieldVariable>, // i
<FieldLabel>, // 'from'
],
},
{ // ValueInput
connection: <Connection>, // ConnectionType INPUT_VALUE
fieldRow: [
<FieldLabel>, // 'to'
],
},
{ // ValueInput
connection: <Connection>, // ConnectionType INPUT_VALUE
fieldRow: [
<FieldLabel>, // 'by'
],
},
{ // StatementInput
connection: <Connection>, // ConnectionType NEXT_STATEMENT
fieldRow: [
<FieldLabel>, // 'do'
],
},
]
}