blockly 学习----1.工作区域、块、工具箱

blockly学习

1.来源：https://developers.google.com/blockly/guides/get-started/web
在github下载源码 https://github.com/google/blockly
2.简单的例子

1.固定宽高

2.改变宽高

3.自定义块

//json表示
Blockly.Blocks['string_length'] = {
  init: function() {
    this.jsonInit({
      "message0": 'length of %1',
      "args0": [
        {
          "type": "input_value",
          "name": "VALUE",
          "check": "String"
        }
      ],
      "output": "Number",
      "colour": 160,
      "tooltip": "Returns number of letters in the provided text.",
      "helpUrl": "http://www.w3schools.com/jsref/jsref_length_string.asp"
    });
  }
};
//javascript表示

Blockly.Blocks['string_length'] = {
  init: function() {
    this.appendValueInput('VALUE')
        .setCheck('String')
        .appendField('length of');
    this.setOutput(true, 'Number');
    this.setColour(160);
    this.setTooltip('Returns number of letters in the provided text.');
    this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
  }
};

添加到工具中

  
    
  
  ...

添加自定义函数

Blockly.JavaScript['text_length'] = function(block) {
  // String or array length.
  var argument0 = Blockly.JavaScript.valueToCode(block, 'VALUE',
      Blockly.JavaScript.ORDER_FUNCTION_CALL) || '\'\'';
  return [argument0 + '.length', Blockly.JavaScript.ORDER_MEMBER];
};

4.工具箱
用js表示工具箱

工具分类 Categories

自定义颜色 colour 从0-360

  ...
  ...
  ...
  ...
  
  

自定义 分类 categories

比如自定义颜色分类

//分类工具xml

//自定义颜色组的实现
var myApplication={};
myApplication.getPalette=function(){
	return ["#FF0000","#00FF00"];
};
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 = '' +
          '' +
          '' + colourList[i] + '' +
          '' +
          '';
      var block = Blockly.Xml.textToDom(blockText).firstChild;
      xmlList.push(block);
    }
  }
  return xmlList;
};
//注册下
demoWorkspace.registerToolboxCategoryCallback(
							  'COLOUR_PALETTE', myApplication.coloursFlyoutCallback);

分类的树形表示

块组

  

  
    42
  

  
    
      
        1
      
    
    
      
        10
      
    
    
      
        1
      
    
  

  
    ADD
    
      
        1
      
    
    
      
        1
      
    
  

暗影块 shadow

阴影块是占位符块，可执行多种功能：

• 它们指示其父块的默认值。
• 它们允许用户直接键入值，而无需获取数字或字符串块。
• 与常规块不同，如果用户在其上放置块，则会替换它们。
• 它们告知用户预期的值类型。

无法直接使用代码应用程序构建阴影块。相反，可以使用普通块，然后更改并在XML中和。
注意：阴影块可能不包含变量字段或具有不是阴影的子项。

分离器
在任意两个类别之间添加标记将创建分隔符。
默认情况下，每个块与其下邻居分开24个像素。可以使用’gap’属性更改此分隔，该属性将替换默认间隙。

按钮和标签

按钮应该有回调函数; 标签不应该。要为给定按钮设置回调，请单击，使用

yourWorkspace.registerButtonCallback(yourCallbackKey, yourFunction).

禁用块 disabled

更改工具箱

应用程序可以通过单个函数调用随时更改工具箱中可用的块：
workspace.updateToolbox(newTree);
限制是模式不能改变;
多工具演示：
https://blockly-demo.appspot.com/static/demos/toolbox/index.html