工具箱

工具箱是用戶可以創(chuàng)建新塊的側(cè)邊菜單。工具箱的結(jié)構(gòu)使用XML指定，XML可以是節(jié)點(diǎn)樹，也可以是字符串表示。
將此XML注入到頁(yè)面中時(shí)，會(huì)將其傳遞給Blockly。如果您不想手動(dòng)輸入XML，我們建議您查看Blockly Developer Tools。有了它，您可以構(gòu)建一個(gè)工具箱并使用可視化界面自動(dòng)生成其工具箱XML。

這是一個(gè)使用節(jié)點(diǎn)樹的最小示例：

<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>

以下是使用字符串表示的相同示例：

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

以上兩者都創(chuàng)建了具有兩個(gè)塊的相同工具箱：

toolbox-minimal.png

如果存在少量塊，則可以顯示它們而沒(méi)有任何類別（如上面的最小示例中所示）。在此簡(jiǎn)單模式下，所有可用塊都顯示在工具箱中，主工作區(qū)上沒(méi)有滾動(dòng)條，并且不需要垃圾桶。

分類

工具箱中的塊可以按類別組織。這里有兩個(gè)類別（'Control'和'Logic'），每個(gè)類別包含三個(gè)塊：

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

下面是生成的工具箱，單擊“邏輯”類別，以便可以看到彈出窗口中的三個(gè)邏輯塊：

toolbox-categories.png

類別的存在改變了Blockly的UI以支持更大的應(yīng)用程序。出現(xiàn)滾動(dòng)條，允許無(wú)限大的工作空間。上下文菜單包含更多高級(jí)選項(xiàng)，例如添加注釋或折疊塊?？梢允褂门渲眠x項(xiàng)覆蓋所有這些功能。

可以使用可選的顏色屬性為每個(gè)類別指定顏色。請(qǐng)注意英國(guó)拼寫。顏色是定義色調(diào)的數(shù)字（0-360）。

<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>

此顏色顯示為類別左側(cè)的矩形，并作為當(dāng)前所選類別的突出顯示：

toolbox-colours.png

主題

如果您已經(jīng)開始使用Blockly主題，那么您將需要添加categorystyle屬性而不是color屬性，如下所示。

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

有關(guān)主題的更多信息，請(qǐng)查看《主題》。

動(dòng)態(tài)類別

有兩類具有特殊行為。變量和函數(shù)類別定義為沒(méi)有內(nèi)容，但具有'custom'屬性 'VARIABLE'或'PROCEDURE'分別。這些類別將使用適當(dāng)?shù)膲K自動(dòng)填充。

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

開發(fā)人員還可以使用該custom屬性創(chuàng)建動(dòng)態(tài)填充的彈出類別。例如，要?jiǎng)?chuàng)建具有自定義顏色塊集的彈出按鈕：

使用自定義屬性創(chuàng)建類別。

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

定義回調(diào)以提供類別內(nèi)容。此回調(diào)應(yīng)該在工作空間中返回并返回XML塊元素的數(shù)組。

/**
 * Construct the blocks required by the flyout for the colours category.
* @param {!Blockly.Workspace} workspace The workspace this flyout is for.
* @return {!Array.<!Element>} Array of XML block elements.
*/
myApplication.coloursFlyoutCallback = function(workspace) {
// Returns an array of hex colours, e.g. ['#4286f4', '#ef0447']
var colourList = myApplication.getPalette();
var xmlList = [];
if (Blockly.Blocks['colour_picker']) {
    for (var i = 0; i < colourList.length; i++) {
    var blockText = '<block type="colour_picker">' +
        '<field name="COLOUR">' + colourList[i] + '</field>' +
        '</block>';
    var block = Blockly.Xml.textToDom(blockText);
    xmlList.push(block);
    }
}
return xmlList;
};

在工作區(qū)上注冊(cè)回調(diào)。

myWorkspace.registerToolboxCategoryCallback(
'COLOUR_PALETTE', myApplication.coloursFlyoutCallback);

樹類別

類別可以嵌套在其他類別中。這里有兩個(gè)頂級(jí)類別（'Core'和'Custom'），每個(gè)類別包含兩個(gè)子類別，每個(gè)子類別包含塊：

<xml id="toolbox" style="display: none">
  <category name="Core">
    <category name="Control">
      <block type="controls_if"></block>
      <block type="controls_whileUntil"></block>
    </category>
    <category name="Logic">
      <block type="logic_compare"></block>
      <block type="logic_operation"></block>
      <block type="logic_boolean"></block>
    </category>
  </category>
  <category name="Custom">
    <block type="start"></block>
    <category name="Move">
      <block type="move_forward"></block>
      <block type="move_backward"></block>
    </category>
    <category name="Turn">
      <block type="turn_left"></block>
      <block type="turn_right"></block>
    </category>
  </category>
</xml>

請(qǐng)注意，類別可以包含子類別和塊。在上面的例子中，'Custom'有兩個(gè)子類別（'Move'和'Turn'），以及它自己的一個(gè)塊（'start'）。

擴(kuò)展

默認(rèn)情況下，加載Blockly時(shí)會(huì)顯示折疊類別，但可以使用擴(kuò)展類別。

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

塊分組

XML可以包含自定義塊或塊組。下面是四個(gè)塊：

一個(gè)簡(jiǎn)單的 logic_boolean 塊：

true.png
一個(gè)已修改為顯示數(shù)字42而不是默認(rèn)值0的math_number塊：

42.png
一個(gè)controls_for塊，它連接了三個(gè)math_number塊：

count-with.png
一個(gè)math_arithmetic塊，它連接了兩個(gè)math_number陰影塊：

1plus1.png

以下是在工具箱中生成這四個(gè)塊的代碼：

<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>

這些自定義塊或組的XML與Blockly的XML保存格式相同。因此，為這些塊構(gòu)造XML的最簡(jiǎn)單方法是使用Code應(yīng)用程序構(gòu)建塊，然后切換到XML選項(xiàng)卡并復(fù)制結(jié)果。工具箱會(huì)忽略x，y和id屬性，并且可能會(huì)將其刪除。

陰影塊

陰影塊是占位符塊，可執(zhí)行多種功能：

它們指示其父塊的默認(rèn)值。
它們?cè)试S用戶直接鍵入值，而無(wú)需獲取數(shù)字或字符串塊。
與常規(guī)塊不同，如果用戶在其上放置塊，則會(huì)替換它們。
它們告知用戶預(yù)期的值類型。

無(wú)法直接使用代碼應(yīng)用程序構(gòu)建陰影塊。相反，可以使用常規(guī)塊，然后將XML中的<block ...>和</ block>更改為<shadow ...>和</ shadow>。

注意：陰影塊可能不包含變量字段或具有不是陰影的子項(xiàng)。

變量

大多數(shù)字段都很容易在工具箱中設(shè)置，只需要名稱屬性及其值。

<field name="NUM">1</field>

但是，變量具有其他可選屬性，這些屬性會(huì)影響它們的創(chuàng)建方式。變量字段可以具有id和variabletype。請(qǐng)注意，variabletype不使用駝峰式命名。

<field name="VAR" id=".n*OKd.u}2UD9QFicbEX" variabletype="Panda">Bai Yun</field>

如果設(shè)置了id，那么在創(chuàng)建塊時(shí)，variabletype（如果設(shè)置）和值必須匹配具有該id的任何現(xiàn)有變量。如果不存在具有該id的變量，則將創(chuàng)建新變量。通常，id不應(yīng)包含在工具箱XML中。省略id允許變量在具有相同值和variabletype的情況下引用現(xiàn)有變量。

如果設(shè)置了variabletype，則將使用該類型創(chuàng)建變量。如果未設(shè)置variabletype，則變量將具有默認(rèn)的''類型。如果使用類型變量，則必須設(shè)置variabletype，因?yàn)锽lockly不會(huì)推斷類型。

更多信息請(qǐng)參閱《變量》

分離器

在任意兩個(gè)類別之間添加<sep> </ sep>標(biāo)記將創(chuàng)建一個(gè)分隔符。

toolbox-separator.png

默認(rèn)情況下，每個(gè)塊與其下鄰居分開24個(gè)像素?？梢允褂?gap'屬性更改此分隔，該屬性將替換默認(rèn)間隙。

<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>

調(diào)整塊之間的間隙允許在工具箱中創(chuàng)建邏輯塊組。

toolbox-gap.png

按鈕和標(biāo)簽

您可以在任何可以將塊放入工具箱的位置放置按鈕或標(biāo)簽。

<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>

label-and-button.png

您可以指定要應(yīng)用于按鈕或標(biāo)簽的CSS類名稱。在上面的示例中，第一個(gè)標(biāo)簽使用自定義樣式，而第二個(gè)標(biāo)簽使用默認(rèn)樣式。

按鈕應(yīng)該有回調(diào)函數(shù)，而標(biāo)簽不需要。要為給定按鈕設(shè)置回調(diào)函數(shù)，使用

yourWorkspace.registerButtonCallback(yourCallbackKey, yourFunction).

您的函數(shù)應(yīng)該接受點(diǎn)擊的按鈕作為參數(shù)。變量類別中的“創(chuàng)建變量...”按鈕是帶回調(diào)函數(shù)的按鈕的一個(gè)很好的示例。

禁用項(xiàng)

可以使用可選的disabled屬性單獨(dú)禁用工具箱中的塊：

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

禁用塊可用于限制用戶的選擇。也許高級(jí)塊可能會(huì)在某些成就后解鎖。

toolbox-disabled.png

更改工具箱

應(yīng)用程序可以通過(guò)單個(gè)函數(shù)調(diào)用隨時(shí)更改工具箱中可用的塊：

workspace.updateToolbox(newTree);

與初始配置期間的情況一樣，newTree可以是節(jié)點(diǎn)樹或字符串表示。唯一的限制是模式不能改變;也就是說(shuō)，如果最初定義的工具箱中有類別，則新工具箱也必須具有類別（盡管類別可能會(huì)更改）。同樣，如果最初定義的工具箱沒(méi)有任何類別，則新工具箱可能沒(méi)有任何類別。

請(qǐng)注意，此時(shí)更新工具欄會(huì)導(dǎo)致一些小的UI重置：

在具有類別的工具箱中，彈出按鈕在打開時(shí)將關(guān)閉。
在沒(méi)有類別的工具箱中，用戶更改的任何字段（例如下拉列表）將恢復(fù)為默認(rèn)值。
任何工具箱長(zhǎng)到超出頁(yè)面時(shí)，將使其滾動(dòng)條跳到頂部。

這是一個(gè)包含類別和塊組的樹的現(xiàn)場(chǎng)演示。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

blockly二次開發(fā)中文文檔——3.4Toolbox工具箱

blockly二次開發(fā)中文文檔——3.4Toolbox工具箱

工具箱

分類

主題

動(dòng)態(tài)類別

樹類別

擴(kuò)展

塊分組

陰影塊

變量

分離器

按鈕和標(biāo)簽

禁用項(xiàng)

更改工具箱

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

blockly二次開發(fā)中文文檔——3.4Toolbox工具箱

工具箱

分類

主題

動(dòng)態(tài)類別

樹類別

擴(kuò)展

塊分組

陰影塊

變量

分離器

按鈕和標(biāo)簽

禁用項(xiàng)

更改工具箱

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av