Araç Kutusu

Araç kutusu, kullanıcıların blokları aldıkları yerdir. Genellikle çalışma alanının bir tarafında gösterilir. Bazen kategorileri vardır, bazen değildir.

Bu sayfa temel olarak araç kutunuzun yapısını nasıl belirteceğinize (ör. sahip olduğu kategorilere ve hangi blokları içerdiğine) odaklanmaktadır. Araç kutunuzun kullanıcı arayüzünü nasıl değiştireceğiniz hakkında daha fazla bilgi edinmek için Bloklu araç kutusu codelab'ini özelleştirme ve 2021 Toolbox API'leri konuşmasına göz atın.

Formatlar

Blockly, birkaç farklı biçimi kullanarak araç kutunuzun yapısını belirtmenize olanak tanır. Önerilen yeni biçim JSON, eski biçim ise XML kullanır.

Yukarıdaki araç kutusunu belirtebileceğiniz farklı yollar aşağıda verilmiştir:

JSON

Eylül 2020 sürümünden itibaren araç kutuları JSON kullanılarak tanımlanabilir.

var toolbox = {
    "kind": "flyoutToolbox",
    "contents": [
      {
        "kind": "block",
        "type": "controls_if"
      },
      {
        "kind": "block",
        "type": "controls_whileUntil"
      }
    ]
  };
var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

XML

<xml id="toolbox" style="display: none">
  <block type="controls_if"></block>
  <block type="controls_whileUntil"></block>
</xml>
<script>
  var workspace = Blockly.inject('blocklyDiv',
      {toolbox: document.getElementById('toolbox')});
</script>

XML Dizesi

var toolbox = '<xml>' +
    '<block type="controls_if"></block>' +
    '<block type="controls_whileUntil"></block>' +
    '</xml>';
var workspace = Blockly.inject('blocklyDiv', {toolbox: toolbox});

Kategoriler

Araç kutusundaki bloklar kategoriler halinde düzenlenebilir.

Her biri blokları içeren iki kategoriye ("Control" ve "Logic") sahip yukarıdaki araç kutusunu şu şekillerde tanımlayabilirsiniz:

JSON

{
  "kind": "categoryToolbox",
  "contents": [
    {
      "kind": "category",
      "name": "Control",
      "contents": [
        {
          "kind": "block",
          "type": "controls_if"
        },
      ]
    },
    {
      "kind": "category",
      "name": "Logic",
      "contents": [
        {
          "kind": "block",
          "type": "logic_compare"
        },
        {
          "kind": "block",
          "type": "logic_operation"
        },
        {
          "kind": "block",
          "type": "logic_boolean"
        }
      ]
    }
  ]
}

XML

<xml id="toolbox" style="display: none">
  <category name="Control">
    <block type="controls_if"></block>
  <category name="Logic">
    <block type="logic_compare"></block>
    <block type="logic_operation"></block>
    <block type="logic_boolean"></block>
  </category>
</xml>

İç içe yerleştirilmiş kategoriler

Kategoriler, diğer kategorilerin içine yerleştirilebilir. Aşağıda, iki üst düzey kategori ("Temel" ve "Özel") verilmiştir. İkincisi, her biri bloklar içeren iki alt kategori içerir:

Bir kategorinin hem alt kategoriler hem de bloklar içerebileceğini unutmayın. Yukarıdaki örnekte "Özel", iki alt kategoriye ("Taşı" ve "Döndür") ve kendi bir bloğuna ("başlangıç") sahiptir.

JSON

{
  "kind": "categoryToolbox",
  "contents": [
    {
      "kind": "category",
      "name": "Core",
      "contents": [
        {
          "kind": "block",
          "type": "controls_if"
        },
        {
          "kind": "block",
          "type": "logic_compare"
        },
      ]
    },
    {
      "kind": "category",
      "name": "Custom",
      "contents": [
        {
          "kind": "block",
          "type": "start"
        },
        {
          "kind": "category",
          "name": "Move",
          "contents": [
            {
              "kind": "block",
              "type": "move_forward"
            }
          ]
        },
        {
          "kind": "category",
          "name": "Turn",
          "contents": [
            {
              "kind": "block",
              "type": "turn_left"
            }
          ]
        }
      ]
    }
  ]
}

XML

<xml id="toolbox" style="display: none">
  <category name="Core">
    <block type="controls_if"></block>
    <block type="logic_compare"></block>
  </category>
  <category name="Custom">
    <block type="start"></block>
    <category name="Move">
      <block type="move_forward"></block>
    </category>
    <category name="Turn">
      <block type="turn_left"></block>
    </category>
  </category>
</xml>

Dinamik kategoriler

Dinamik kategoriler, her açıldıklarında bir işleve göre dinamik olarak yeniden doldurulan kategorilerdir.

Blockly, kayıtlı bir dize anahtarı aracılığıyla bir kategoriyi bir işlevle ilişkilendirmenize olanak tanıyarak bunu destekler. İşlev, bir kategorinin içeriğinin (bloklar, düğmeler, etiketler vb.) tanımını döndürmelidir. İçerik JSON veya XML olarak belirtilebilir ancak JSON önerilir.

Ayrıca, işleve, hedef çalışma alanı bir parametre olarak sağlanır. Böylece dinamik kategorinizdeki bloklar, çalışma alanının durumunu temel alabilir.

JSON

Eylül 2021 sürümü itibarıyla, 'blockxml' kullanmadan engellemelerin durumunu belirtebilirsiniz.

// Returns an array of objects.
var coloursFlyoutCallback = function(workspace) {
  // Returns an array of hex colours, e.g. ['#4286f4', '#ef0447']
  var colourList = getPalette();
  var blockList = [];
  for (var i = 0; i < colourList.length; i++) {
    blockList.push({
      'kind': 'block',
      'type': 'colour_picker',
      'fields': {
        'COLOUR': colourList[i]
      }
    });
  }
  return blockList;
};

// Associates the function with the string 'COLOUR_PALETTE'
myWorkspace.registerToolboxCategoryCallback(
    'COLOUR_PALETTE', coloursFlyoutCallback);

Eski JSON

Eylül 2021 sürümünden önce, engellemelerin durumunu belirtmek için 'blockxml' özelliğini kullanmanız gerekiyordu.

// Returns an array of objects.
var coloursFlyoutCallback = function(workspace) {
  // Returns an array of hex colours, e.g. ['#4286f4', '#ef0447']
  var colourList = getPalette();
  var blockList = [];
  for (var i = 0; i < colourList.length; i++) {
    blockList.push({
      'kind': 'block',
      'type': 'colour_picker', // Type is optional if you provide blockxml
      'blockxml': '<block type="colour_picker">' +
          '<field name="COLOUR">' + colourList[i] + '</field>' +
          '</block>'
    });
  }
  return blockList;
};

// Associates the function with the string 'COLOUR_PALETTE'
myWorkspace.registerToolboxCategoryCallback(
    'COLOUR_PALETTE', coloursFlyoutCallback);

XML

// Returns an arry of XML nodes.
var coloursFlyoutCallback = function(workspace) {
  // Returns an array of hex colours, e.g. ['#4286f4', '#ef0447']
  var colourList = getPalette();
  var blockList = [];
  for (var i = 0; i < colourList.length; i++) {
    var block = document.createElement('block');
    block.setAttribute('type', 'colour_picker');
    var field = document.createElement('field');
    field.setAttribute('name', 'COLOUR');
    field.innerText = colourList[i];
    block.appendChild(field);
    blockList.push(block);
  }
  return blockList;
};

// Associates the function with the string 'COLOUR_PALETTE'
myWorkspace.registerToolboxCategoryCallback(
    'COLOUR_PALETTE', coloursFlyoutCallback);

Dinamik kategori işlevleri bir dize anahtarıyla (kayıtlı olarak da bilinir) ilişkilendirildikten sonra, kategoriyi dinamik hale getirmek için bu dize anahtarını kategori tanımınızın custom özelliğine atayabilirsiniz.

JSON

{
  "kind": "category",
  "name": "Colours",
  "custom": "COLOUR_PALETTE"
}

XML

<category name="Colours" custom="COLOUR_PALETTE"></category>

Yerleşik dinamik kategoriler

Blockly, üç yerleşik dinamik kategori sağlar.

  • 'VARIABLE', yazılmamış değişkenler için bir kategori oluşturur.
  • 'VARIABLE_DYNAMIC', türlü değişkenler için bir kategori oluşturur. Dizeler, sayılar ve renkler oluşturmak için düğmeler vardır.
  • 'PROCEDURE', fonksiyon blokları için bir kategori oluşturur.

JSON

{
  "kind": "category",
  "name": "Variables",
  "custom": "VARIABLE"
},
{
  "kind": "category",
  "name": "Variables",
  "custom": "VARIABLE_DYNAMIC"
},
{
  "kind": "category",
  "name": "Functions",
  "custom": "PROCEDURE"
}

XML

<category name="Variables" custom="VARIABLE"></category>
<category name="Variables" custom="VARIABLE_DYNAMIC"></category>
<category name="Functions" custom="PROCEDURE"></category>

Not: "Prosedür" kelimesi Blockly kod tabanında kullanılıyor, ancak "function" kelimesinin öğrenciler tarafından daha anlaşılır olduğu ortaya çıktı. Bu uyumsuzluk için özür dileriz.

Devre dışı bırakılıyor

Devre dışı bırakılan bir kategori, kullanıcının kategoriyi açmasına izin vermez ve klavyeyle gezinirken atlanır.

var category = toolbox.getToolboxItems()[0];
category.setDisabled('true');

Bir kategori devre dışı bırakıldığında DOM öğesine 'disabled' özelliği eklenir. Böylece, devre dışı bırakılan bir kategorinin görünümünü kontrol edebilirsiniz.

.blocklyToolboxCategory[disabled="true"] {
  opacity: .5;
}

Gizleniyor

Gizlenmiş kategoriler araç kutusunun parçası olarak gösterilmez. Gizli kategoriler daha sonra JavaScript aracılığıyla gösterilebilir.

JSON

{
  "kind": "category",
  "name": "...",
  "hidden": "true"
}

XML

<category name="..." hidden="true"></category>

JavaScript

var category = toolbox.getToolboxItems()[0];
category.hide();
// etc...
category.show();

Genişletildi

Bu yalnızca diğer iç içe yerleştirilmiş kategorileri içeren kategoriler için geçerlidir.

Genişletilmiş bir kategori size bu kategorinin alt kategorilerini gösterir. Varsayılan olarak, iç içe yerleştirilmiş kategoriler daraltılmıştır ve genişletilebilmeleri için tıklanmaları gerekir.

JSON

{
  "kind": "category",
  "name": "...",
  "expanded": "true"
}

XML

<category name="..." expanded="true"></sep>

Stil

Blockly, varsayılan kategoriler için bir kullanıcı arayüzü ve stil için bazı temel seçenekler sunar. Kullanıcı arayüzü için daha gelişmiş stil veya yapılandırma işlemlerinin nasıl yapılacağı hakkında bilgi edinmek istiyorsanız Blockly toolbox codelab'ini özelleştirme ve 2021 Toolbox API'leri hakkındaki konuşmalara göz atın.

Temalar

Temalar, kategorilerimizin renkleri de dahil olmak üzere çalışma alanınızın tüm renklerini aynı anda belirtmenize olanak tanır.

Bunları kullanmak için kategorinizi belirli bir kategori stiliyle ilişkilendirmeniz gerekir:

JSON

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

XML

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

Renkler

Rengi doğrudan da belirtebilirsiniz, ancak bu önerilmez. Renk, tonu belirten dizeli bir sayıdır (0-360). İngilizce yazıya dikkat edin.

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>

Yerelleştirilebilir renk referanslarının kullanılmasını da desteklediğimizi unutmayın.

CSS kategorisi

Daha güçlü özelleştirme istiyorsanız Blockly, varsayılan kullanıcı arayüzünün farklı öğeleri için CSS sınıfları belirtmenize de olanak tanır. Ardından, bunların stilini CSS'yi kullanarak biçimlendirebilirsiniz.

Aşağıdaki öğe türlerine CSS sınıfları uygulanabilir:

  • container - Kategorinin üst div öğesinin sınıfı. Varsayılan blocklyToolboxCategory.
  • row - Kategori etiketini ve simgesini içeren div için sınıf. Varsayılan blocklyTreeRow.
  • icon - Kategori simgesinin sınıfı. Varsayılan blocklyTreeIcon.
  • label - Kategori etiketinin sınıfı. Varsayılan blocklyTreeLabel.
  • selected - Seçildiğinde kategoriye eklenen sınıf. Varsayılan blocklyTreeSelected.
  • Openicon - Kategori, iç içe yerleştirilmiş kategoriler içerdiğinde ve açık olduğunda simgeye eklenen sınıf. Varsayılan blocklyTreeIconOpen.
  • officon - Kategori iç içe yerleştirilmiş kategoriler içerdiğinde ve kapatıldığında bir simgeye eklenen sınıf. Varsayılan blocklyTreeIconClosed.

Ayrıca, şu biçimlerden birini kullanarak sınıfları nasıl belirteceğiniz açıklanmaktadır:

JSON

cssConfig özelliğini kullanarak belirli bir öğe türünün CSS sınıfını ayarlayın.

{
  "kind": "category",
  "name": "...",
  "cssConfig": {
    "container": "yourClassName"
  }
}

XML

Belirli bir öğe türünün CSS sınıfını, başına "css-" ekleyerek ayarlayın.

<category name="..." css-container="yourClassName"></category>

Erişim

Bir kategoriye programatik olarak erişmenin iki yolu vardır. Sayfaya dizinden erişebilirsiniz (burada 0 en üst kategoridir):

var category = toolbox.getToolboxItems()[0];

Veya kimliğe göre:

var category = toolbox.getToolboxItemById('categoryId');

Kimlik, araç kutusu tanımında belirtilir:

JSON

{
  "kind": "category",
  "name": "...",
  "toolboxitemid": "categoryId"
}

XML

<category name="..." toolboxitemid="categoryId"></category>

Önceden Ayarlanmış Bloklar

Araç kutusu tanımı, alanları varsayılan değere ayarlanmış veya önceden birbirine bağlanmış olan bloklar içerebilir.

İşte dört blok:

  1. Önceden ayarlanmış değerleri olmayan basit bir logic_boolean bloğu:
  2. Varsayılan 0 yerine 42 sayısını gösterecek şekilde değiştirilmiş bir math_number bloğu:
  3. Kendisine bağlı üç math_number bloğu olan bir controls_for bloğu:
  4. Kendisine bağlı iki math_number gölge bloğu olan bir math_arithmetic bloğu:

Aşağıda, bu dört bloğu içeren bir araç kutusu tanımı verilmiştir:

JSON

Eylül 2021 sürümünden itibaren, 'blockxml' kullanarak blokların durumunu belirtebilirsiniz.

{
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type": "logic_boolean"
    },
    {
      "kind": "block",
      "type": "math_number",
      "fields": {
        "NUM": 42
      }
    },
    {
      "kind": "block",
      "type": "controls_for",
      "inputs": {
        "FROM": {
          "block": {
            "type": "math_number",
            "fields": {
              "NUM": 1
            }
          }
        },
        "TO": {
          "block": {
            "type": "math_number",
            "fields": {
              "NUM": 10
            }
          }
        },
        "BY": {
          "block": {
            "type": "math_number",
            "fields": {
              "NUM": 1
            }
          }
        },
      }
    },
    {
      "kind": "block",
      "type": "math_arithmetic",
      "fields": {
        "OP": "ADD"
      },
      "inputs": {
        "A": {
          "shadow": {
            "type": "math_number",
            "fields": {
              "NUM": 1
            }
          }
        },
        "B": {
          "shadow": {
            "type": "math_number",
            "fields": {
              "NUM": 1
            }
          }
        }
      }
    },
  ]
}

Eski JSON

Eylül 2021 sürümünden önce, engellemelerin durumunu belirtmek için 'blockxml' özelliğini kullanmanız gerekiyordu.

{
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type": "logic_boolean"
    },
    {
      "kind": "block",
      "blockxml":
          '<block type="math_number">' +
          '<field name="NUM">42</field>' +
          '</block>'
    },
    {
      "kind": "block",
      "blockxml":
          '<block type="controls_for">' +
            '<value name="FROM">' +
              '<block type="math_number">' +
                '<field name="NUM">1</field>' +
              '</block>' +
            '</value>' +
            '<value name="TO">' +
              '<block type="math_number">' +
                '<field name="NUM">10</field>' +
              '</block>' +
            '</value>' +
            '<value name="BY">' +
              '<block type="math_number">' +
                '<field name="NUM">1</field>' +
              '</block>' +
            '</value>' +
          '</block>'
    },
    {
      "kind": "block",
      "blockxml":
          '<block type="math_arithmetic">' +
            '<field name="OP">ADD</field>' +
            '<value name="A">' +
              '<shadow type="math_number">' +
                '<field name="NUM">1</field>' +
              '</shadow>' +
            '</value>' +
            '<value name="B">' +
              '<shadow type="math_number">' +
                '<field name="NUM">1</field>' +
              '</shadow>' +
            '</value>' +
          '</block>'
    },
  ]
}

XML

<xml id="toolbox" style="display: none">
  <block type="logic_boolean"></block>

  <block type="math_number">
    <field name="NUM">42</field>
  </block>

  <block type="controls_for">
    <value name="FROM">
      <block type="math_number">
        <field name="NUM">1</field>
      </block>
    </value>
    <value name="TO">
      <block type="math_number">
        <field name="NUM">10</field>
      </block>
    </value>
    <value name="BY">
      <block type="math_number">
        <field name="NUM">1</field>
      </block>
    </value>
  </block>

  <block type="math_arithmetic">
    <field name="OP">ADD</field>
    <value name="A">
      <shadow type="math_number">
        <field name="NUM">1</field>
      </shadow>
    </value>
    <value name="B">
      <shadow type="math_number">
        <field name="NUM">1</field>
      </shadow>
    </value>
  </block>
</xml>

Bu tanımları elle yazmak biraz can sıkıcı olabilir. Bunun yerine bloklarınızı bir çalışma alanına yükleyebilir ve ardından tanımları almak için aşağıdaki kodu çalıştırabilirsiniz. Araç kutusu, bloklar için serileştirme sistemiyle aynı biçimi kullandığından bu çağrılar işe yarar.

JSON

console.log(Blockly.serialization.workspaces.save(Blockly.getMainWorkspace()));

XML

console.log(Blockly.Xml.workspaceToDom(Blockly.getMainWorkspace()));

Ayrıca, araç kutusu tarafından yoksayıldıkları için x, y ve id özelliklerini de kaldırabilirsiniz.

Gölge blokları

Gölge blokları, çeşitli işlevleri yerine getiren yer tutucu bloklardır:

  • Üst blok için varsayılan değerleri belirtirler.
  • Kullanıcıların sayı veya dize bloğu getirmelerine gerek kalmadan değerleri doğrudan yazmalarına olanak tanır.
  • Normal blokların aksine kullanıcı bunların üzerine bir blok bırakırsa bloklar değiştirilir.
  • Kullanıcıya beklenen değer türünü bildirir.

Devre dışı bloklar

Devre dışı bırakılan bloklar araç kutusundan sürüklenemez. Engellemeler, isteğe bağlı disabled özelliği kullanılarak tek tek devre dışı bırakılabilir.

JSON

{
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type":"math_number"
    },
    {
      "kind": "block",
      "type": "math_arithmetic"
    },
    {
      "kind": "block",
      "type": "math_single",
      "disabled": "true"
    }
  ]
}

XML

<xml id="toolbox" style="display: none">
  <block type="math_number"></block>
  <block type="math_arithmetic"></block>
  <block type="math_single" disabled="true"></block>
</xml>

Ayrıca, setEnabled kullanarak bir engellemeyi programatik olarak devre dışı bırakabilir veya etkinleştirebilirsiniz.

Değişken alanları

Araç kutusunda bulunan değişken alanlarının yalnızca seri hâle getirildiklerinde farklı şekilde belirtilmesi gerekebilir.

Özellikle, değişken alanları normalde JSON'a serileştirildiğinde yalnızca temsil ettikleri değişkenin kimliğini içerir. Bunun nedeni, değişkenin adı ve türü ayrı olarak serileştirilmesidir. Ancak araç kutuları bu bilgileri içermediğinden, bilgilerin doğrudan değişken alanına eklenmesi gerekir.

{
  "kind": "flyoutToolbox",
  "content": [
    {
      "type": "controls_for",
      "fields": {
        "VAR": {
          "name": "index",
          "type": "Number"
        }
      }
    }
  ]
}

Ayırıcılar

Herhangi iki kategori arasına bir ayırıcı eklemek, iki kategori arasında bir çizgi ve fazladan boşluk oluşturur.

Ayırıcının sınıfını JSON veya XML araç kutusu tanımınızda değiştirebilirsiniz.

JSON

{
  "kind": "sep",
  "cssConfig": {
    "container": "yourClassName"
  }
}

XML

<sep css-container="yourClassName"></sep>

İki blok arasına bir ayırıcı eklemek, bloklar arasında bir boşluk oluşturur. Varsayılan olarak her blok, alt komşusundan 24 piksel ayrılır. Bu ayırma, varsayılan boşluğun yerini alacak olan "gap" özelliği kullanılarak değiştirilebilir.

Böylece araç kutusunda mantıksal blok grupları oluşturabilirsiniz.

JSON

{
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type":"math_number"
    },
    {
      "kind": "sep",
      "gap": "32"
    },
    {
      "kind": "block",
      "blockxml": "<block type='math_arithmetic'><field name='OP'>ADD</field></block>"
    },
    {
      "kind": "sep",
      "gap": "8"
    },
    {
      "kind": "block",
      "blockxml": "<block type='math_arithmetic'><field name='OP'>MINUS</field></block>"
    }
  ]
}

XML

<xml id="toolbox" style="display: none">
  <block type="math_number"></block>
  <sep gap="32"></sep>
  <block type="math_arithmetic">
    <field name="OP">ADD</field>
  </block>
  <sep gap="8"></sep>
  <block type="math_arithmetic">
    <field name="OP">MINUS</field>
  </block>
</xml>

Düğmeler ve Etiketler

Alet kutusunda blok yerleştirebileceğiniz herhangi bir yere bir düğme veya etiket koyabilirsiniz.

JSON

{
  "kind": "flyoutToolbox",
  "contents": [
    {
      "kind": "block",
      "type":"logic_operation"
    },
    {
      "kind": "label",
      "text": "A label",
      "web-class": "myLabelStyle"
    },
    {
      "kind": "label",
      "text": "Another label"
    },
    {
      "kind": "block",
      "type": "logic_negate"
    },
    {
      "kind": "button",
      "text": "A button",
      "callbackKey": "myFirstButtonPressed"
    },
    {
      "kind": "block",
      "type": "logic_boolean"
    }
  ]
}

XML

<xml id="toolbox" style="display: none">
  <block type="logic_operation"></block>
  <label text="A label" web-class="myLabelStyle"></label>
  <label text="Another label"></label>
  <block type="logic_negate"></block>
  <button text="A button" callbackKey="myFirstButtonPressed"></button>
  <block type="logic_boolean"></block>
</xml>
    <style>
    .myLabelStyle>.blocklyFlyoutLabelText {
      font-style: italic;
      fill: green;
    }
    </style>

Düğmenize veya etiketinize uygulanacak bir CSS sınıf adı belirtebilirsiniz. Yukarıdaki örnekte, ilk etiket özel bir stil kullanırken ikinci etiket varsayılan stili kullanır.

Düğmelerde geri çağırma işlevleri olmalıdır, etiketler bulunmamalıdır. Belirli bir düğme tıklaması için geri çağırmayı ayarlamak üzere

yourWorkspace.registerButtonCallback(yourCallbackKey, yourFunction).

İşleviniz, tıklanan düğmeyi bağımsız değişken olarak kabul etmelidir. Değişken kategorisindeki "Değişken oluştur..." düğmesi, geri çağırma içeren düğmelere iyi bir örnektir.

Araç Kutusunu Değiştirme

Uygulama, tek bir fonksiyon çağrısıyla istediği zaman araç kutusunda bulunan blokları değiştirebilir:

workspace.updateToolbox(newTree);

İlk yapılandırma sırasında olduğu gibi, newTree bir düğüm ağacı, dize gösterimi veya JSON nesnesi olabilir. Tek sınırlama, modun değiştirilememesidir. Yani, başlangıçta tanımlanan araç kutusunda kategoriler varsa yeni araç kutusunda da kategoriler olmalıdır (ancak kategoriler değişebilir). Benzer şekilde, başlangıçta tanımlanan araç kutusunda da kategori yoksa yeni araç kutusunda kategori olmayabilir.

Tek bir kategorinin içeriği şu şekilde güncellenebilir:

var category = workspace.getToolbox().getToolboxItems()[0];
category.updateFlyoutContents(flyoutContents);

flyoutContents; JSON, düğüm ağacı veya dize gösterimi kullanılarak tanımlanan blokların bir listesi olabilir.

Şu anda araç kutusunun güncellenmesinin kullanıcı arayüzünde bazı küçük sıfırlamalara neden olduğunu unutmayın:

  • Kategorilerin yer almadığı bir araç kutusunda, kullanıcı tarafından değiştirilen tüm alanlar (ör. açılır liste) varsayılana geri döndürülür.

Kategorileri ve blok gruplarını içeren bir ağacın canlı demosunu burada bulabilirsiniz.