探索 Blockly：自定义积木实例

3.实例

3.1.基础块

无输入 , 无输出

3.1.1.json

在这里插入图片描述

var textOneJson = {"type": "sql_test_text_one","message0": " one ","colour": 30,"tooltip":' 无输入 , 无输出'
};javascriptGenerator.forBlock['sql_test_text_one'] = function(block) {return  ' one ';
};Blockly.Blocks['sql_test_text_one'] = {init: function() {this.jsonInit(textOneJson);}
};

3.1.2.js

.appendField(new Blockly.FieldLabelSerializable("显示内容"), "TEXT_NAME");

在这里插入图片描述

Blockly.Blocks['js_base_one'] = {init: function () {this.appendDummyInput().appendField(new Blockly.FieldLabelSerializable("无入, 无出"), "TEXT_NAME");this.setColour(145);this.setTooltip("无入, 无出");}
}
javascriptGenerator.forBlock['js_base_one'] = function(block) {return  ' one ' ;
};

3.2.输出类型 output

3.2.1.json

“output”: 指定类型 如: String | Number | …

注意生成代码函数的设置

在这里插入图片描述

var textBaseOneJson = {"type": "sql_test_base_one","message0": " one ","output": "String","colour": 30,"tooltip":' 返回 字符串 '
};javascriptGenerator.forBlock['sql_test_base_one'] = function(block) {return    [ ' base one ' ,  javascriptGenerator.ORDER_ATOMIC];
};Blockly.Blocks['sql_test_base_one'] = {init: function() {this.jsonInit(textBaseOneJson);}
};

3.2.2.js

this.setOutput(true, "String");

在这里插入图片描述

Blockly.Blocks['js_base_two'] = {init: function () {this.appendDummyInput().appendField(new Blockly.FieldLabelSerializable("无入, 有出"), "TEXT_NAME");this.setColour(145);this.setTooltip("无入, 有出");this.setOutput(true, "String");}
}
javascriptGenerator.forBlock['js_base_two'] = function(block) {return  [ ' base two ' ,  javascriptGenerator.ORDER_ATOMIC];
};

3.3.上下连接

3.3.1.json

previousStatement / nextStatement

在这里插入图片描述

var textFiveJson = {"type": "sql_test_text_five","message0": " five ","colour": 30,"previousStatement": null,"nextStatement": null,
};javascriptGenerator.forBlock['sql_test_text_five'] = function(block) {return  ' five ' ;
};Blockly.Blocks['sql_test_text_five'] = {init: function() {this.jsonInit(textFiveJson);let thisBlock = this;}
};

3.3.2.js

在这里插入图片描述

Blockly.Blocks['js_base_three'] = {init: function () {this.appendDummyInput().appendField(new Blockly.FieldLabelSerializable("上下连接"));this.setColour(145);this.setTooltip("上下连接");// this.setOutput(true, "String");// 下连this.setNextStatement(true);// this.setNextStatement(true, 'Action');// 上连this.setPreviousStatement(true);// this.setPreviousStatement(true, 'Action');}
}
javascriptGenerator.forBlock['js_base_three'] = function(block) {return   ' base three ' ;
};

3.4.输入 input

在 args# 数组内定义

  • name (string): 输入的名称，用于识别输入。

  • type (string): 输入类型，如 'input_value'、'input_statement'。

  • check (string): 限制此输入可以接受的值或语句类型。

  • align (string): 输入的对齐方式，如 'LEFT' 或 'RIGHT'。

3.4.1.input_value

接受一个值输入的槽

3.4.1.1.json

在这里插入图片描述

var textTwoJson = {"type": "sql_test_text_two","message0": " two %1 ","args0": [{"type": "input_value","name": "NAME","check": "String",}],"colour": 30,"tooltip":' 有输入 , 无输出'
};javascriptGenerator.forBlock['sql_test_text_two'] = function(block) {var value_name = javascriptGenerator.valueToCode(block, 'NAME', javascriptGenerator.ORDER_ATOMIC);return  ' two ' + value_name ;
};Blockly.Blocks['sql_test_text_two'] = {init: function() {this.jsonInit(textTwoJson);}
};
3.4.1.2.inputsInline

"inputsInline": true, 输入块 为 内置块

在这里插入图片描述

var textInputFiveJson = {"type": "sql_test_input_five","message0": " input five %1","args0": [{"type": "input_value","name": "NUMBER","align": "RIGHT","check": "Number"}],"inputsInline": true,  // 输入应该与块主体保持在同一行，而不是下一行"colour": 230,"tooltip":' 内置 有输入'
};javascriptGenerator.forBlock['sql_test_input_five'] = function(block) {// 获取输入值var numberInput = javascriptGenerator.valueToCode(block, 'NUMBER', javascriptGenerator.ORDER_ATOMIC);return  ' two ' + numberInput ;
};Blockly.Blocks['sql_test_input_five'] = {init: function() {this.jsonInit(textInputFiveJson);let thisBlock = this;}
};
3.4.1.3.js

在这里插入图片描述

Blockly.Blocks['js_base_four'] = {init: function () {this.appendValueInput('VALUE').setCheck('Number')  // 检测数据类型.appendField(new Blockly.FieldLabelSerializable("计算值为:"));this.setColour(145);this.setTooltip("有入, 无出");// this.setInputsInline(true);}
}
javascriptGenerator.forBlock['js_base_four'] = function(block) {var value_input = javascriptGenerator.valueToCode(block, 'VALUE', javascriptGenerator.ORDER_ATOMIC);return value_input;
};

3.4.2.input_statement

接受另一个块作为输入的槽。

3.4.2.1. 案例 1

var doCode = javascriptGenerator.statementToCode(block, 'DO');

在这里插入图片描述

  var textBaseFourJson = {"type": "sql_test_base_four","message0": "( ) %1 ","args0": [{"type": "input_statement","name": "DO"}],"colour": 120,"tooltip": "包裹 其它块 "};javascriptGenerator.forBlock['sql_test_base_four'] = function(block) {// 获取"DO"部分的代码var doCode = javascriptGenerator.statementToCode(block, 'DO');// 生成循环结构的代码var loopCode = ' ( ' +doCode.replace(/\n/g, '\n  ') + // 缩进内联代码'\n ) ';return loopCode;};Blockly.Blocks['sql_test_base_four'] = {init: function() {this.jsonInit(textBaseFourJson);}};
3.4.2.2. 案例 2

在这里插入图片描述

var textInputFourJson = {"type": "sql_test_input_four","message0": "input four 重复 %1 次：\n%2","args0": [{"type": "input_value","name": "TIMES","check": "Number"},{"type": "input_statement","name": "DO"}],"previousStatement": null,"nextStatement": null,"colour": 120,"tooltip": "重复执行指定次数的代码块。"
};javascriptGenerator.forBlock['sql_test_input_four'] = function(block) {// 获取重复次数var times = javascriptGenerator.valueToCode(block, 'TIMES', javascriptGenerator.ORDER_ATOMIC);// 获取"DO"部分的代码var doCode = javascriptGenerator.statementToCode(block, 'DO');// 生成循环结构的代码var loopCode = 'for (var i = 0; i < ' + times + '; i++) {\n' +doCode.replace(/\n/g, '\n  ') + // 缩进内联代码'\n}';return loopCode;
};Blockly.Blocks['sql_test_input_four'] = {init: function() {this.jsonInit(textInputFourJson);}
};
3.4.2.3.js

在这里插入图片描述

Blockly.Blocks['js_base_six'] = {init: function () {this.appendStatementInput('DO').appendField(new Blockly.FieldLabelSerializable("包括:"));this.setColour(145);}
}
javascriptGenerator.forBlock['js_base_six'] = function(block) {var value_input = javascriptGenerator.statementToCode(block, 'DO' );return value_input;
};
3.4.2.4.三句

在这里插入图片描述

Blockly.Blocks['js_base_seven'] = {init: function () {this.appendDummyInput().appendField(new Blockly.FieldLabelSerializable(" ( "));this.appendStatementInput('DO').appendField(new Blockly.FieldLabelSerializable(""));this.appendDummyInput().appendField(new Blockly.FieldLabelSerializable(" ) "));this.setColour(145);}
}
javascriptGenerator.forBlock['js_base_seven'] = function(block) {var value_input = javascriptGenerator.statementToCode(block, 'DO' );return "(" +  value_input  + ")";
};

3.5.属性 Field

在 args# 数组内定义的特定类型对象

  • type (string): 字段类型，如 'field_input', 'field_dropdown', 'field_label_serializable'。
  • name (string): 字段的变量名，在生成代码时使用。
  • text (string): 显示的默认文本（对于某些字段类型）。
  • options / params (Array): 选项列表（对于下拉菜单等字段类型）。

3.5.1.field_input

可编辑的文本输入字段。

3.5.1.1.json

在这里插入图片描述

 var textInputOneJson = {"type": "sql_test_input_one","message0": " input one %1","args0": [{"type": "field_input","name": "TEXT","text": "默认文本"}],"colour": 60,};javascriptGenerator.forBlock['sql_test_input_one'] = function(block) {var text = block.getFieldValue('TEXT');// 返回生成的代码字符串，这里假设输出就是用户输入的文本return 'input one : "' + text.replace(/"/g, '\\"') + '"';
};Blockly.Blocks['sql_test_input_one'] = {init: function() {this.jsonInit(textInputOneJson);let thisBlock = this;}
};
3.5.1.2.js

new Blockly.FieldTextInput("name")

在这里插入图片描述

      Blockly.Blocks['js_field_one'] = {init: function () {this.appendDummyInput().appendField(new Blockly.FieldLabelSerializable("名称"), "TEXT_NAME").appendField(new Blockly.FieldTextInput("name"), "TEXT_INPUT");this.setColour(85);}}javascriptGenerator.forBlock['js_field_one'] = function(block) {var text = block.getFieldValue('TEXT_INPUT');return "名称 : " +  text  ;};

3.5.2.field_Number

3.5.2.1.json

“value”: 1, “min”: 0, “max”: 100, “precision”: 1

初始值、最小值、最大值和精度

在这里插入图片描述

 var textInputThreeJson = {"type": "sql_test_input_three","message0": " input three %1","args0": [{"type": "field_Number","name": "NUMBER","value": 1,"min": 0,"max": 100,"precision": 1}],"colour": 60,};javascriptGenerator.forBlock['sql_test_input_three'] = function(block) {var number = block.getFieldValue('NUMBER');// 生成计算平方的JavaScript代码var code = 'Math.pow(' + number + ', 2)';// 返回生成的代码return code;};Blockly.Blocks['sql_test_input_three'] = {init: function() {this.jsonInit(textInputThreeJson);let thisBlock = this;}};
3.5.2.2.js

在这里插入图片描述

Blockly.Blocks['js_field_two'] = {init: function () {this.appendDummyInput().appendField(new Blockly.FieldNumber(0), "NUM_INPUT");this.setOutput(true, "Number");this.setColour(85);}
}
javascriptGenerator.forBlock['js_field_two'] = function(block) {var text = block.getFieldValue('NUM_INPUT');return  [ text ,  javascriptGenerator.ORDER_ATOMIC ];
};

3.5.3.field_dropdown

3.5.3.1.json

在这里插入图片描述

 var textInputTwoJson = {"type": "sql_test_input_two","message0": " input Two %1","args0": [{"type": "field_dropdown","name": "TEXT","options":[["狗", "Dog"],["猫", "Cat"],["大象", "Elephant"]]}],"colour": 60,};javascriptGenerator.forBlock['sql_test_input_two'] = function(block) {var value_name =     block.getFieldValue('TEXT');// 返回生成的代码字符串return  ' input Two ' + value_name  ;
};Blockly.Blocks['sql_test_input_two'] = {init: function() {this.jsonInit(textInputTwoJson);}
};
3.5.3.2.js

在这里插入图片描述

  Blockly.Blocks['js_field_three'] = {init: function () {var options = [['选项1', 'option1'],['选项2', 'option2'],['选项3', 'option3']];this.appendDummyInput().appendField(new Blockly.FieldDropdown(options), 'SELECTED_OPTION');this.setOutput(true, 'String'); // 输出类型为字符串this.setColour(85);}}javascriptGenerator.forBlock['js_field_three'] = function(block) {var selectedOption = block.getFieldValue('SELECTED_OPTION');// 生成的代码基于用户选择的选项var code = `'${selectedOption}'`;return [code, javascriptGenerator.ORDER_ATOMIC];};

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/diannao/51344.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数据结构：二叉树(堆)的顺序存储

数据结构：二叉树(堆)的顺序存储

文章目录 1. 树1.1 树的概念和结构1.2 树的相关术语 2. 二叉树2.1 二叉树的概念和结构2.2 二叉树的特点2.3 特殊的二叉树2.3.1 满二叉树2.3.2 完全二叉树 2.4 二叉树的性质 3. 实现顺序结构二叉树3.1 堆的概念和结构3.2 初始化3.3 销毁3.4 插入数据3.5 向上调整算法3.6 删除数据…
阅读更多...
【二叉树】—— 算法题

【二叉树】—— 算法题

一、单值二叉树 题目要求&#xff1a;判断二叉树是不是单值二叉树&#xff08;就是所以节点的值都相等&#xff09;。 思路&#xff1a; 利用二叉树的递归思想&#xff0c;判断每一个节点值与其左右子节点的值是否相等&#xff0c;如果遇到空节点&#xff0c;就返回true&#…
阅读更多...
JavaScript的常见难点（一）

JavaScript的常见难点（一）

1. 异步编程 如何使用&#xff1a;使用回调函数、Promise、async/await 来处理异步操作。面试问题&#xff1a; 解释什么是 Promise&#xff0c;如何使用它。async 和 await 是什么&#xff1f;它们如何简化异步代码&#xff1f;面试问题的答案&#xff1a; Promise&#xff1…
阅读更多...
linux异步操作接口

linux异步操作接口

aiocb数据结构 需要头文件 #include <aiocb.h>结构定义为 struct aiocb {/* The order of these fields is implementation-dependent */int aio_fildes; /* File descriptor */off_t aio_offset; /* File offset */volatile void *ai…
阅读更多...
醒醒，别睡了...讲《数据分析pandas库》了—/—＜7＞

醒醒，别睡了...讲《数据分析pandas库》了—/—＜7＞

一、 1、处理缺失值 1.1 认识缺失值 系统默认的缺失值 None 和 np. nan datapd.Series([3,4,np.nan,1,5,None]) dfpd.DataFrame([[1,2,None],[4,np.nan,6],[5,6,7]]) 1.2 缺失值查看 直接调用info() 方法就会返回每一列的缺失情况。 dfpd.DataFrame([[1,2,np.nan],[4,np.n…
阅读更多...
后端面试题日常练-day12 【Java基础】

后端面试题日常练-day12 【Java基础】

题目 希望这些选择题能够帮助您进行后端面试的准备&#xff0c;答案在文末 Java中的重载&#xff08;Overload&#xff09;和重写&#xff08;Override&#xff09;有何区别&#xff1f; a) 重载是指在同一个类中可以有多个方法同名&#xff0c;但参数列表不同&#xff1b;重写…
阅读更多...
SpringMVC异步处理的 5 种方式

SpringMVC异步处理的 5 种方式

SpringMVC异步处理的 5 种方式 Spring MVC 处理异步请求的主要原因是提高 Web 应用的性能和可扩展性&#xff0c;特别是在处理长时间运行的任务或需要等待外部资源&#xff08;如数据库查询、远程服务调用等&#xff09;时。以下是一些具体原因和优势&#xff1a; 优势 1. 资…
阅读更多...
迁移FastDFS

迁移FastDFS

迁移FastDFS 停止旧集群服务 [rootnode01 fastdfs]# systemctl stop fdfs_tracker [rootnode01 fastdfs]# systemctl stop fdfs_storage [rootnode01 fastdfs]# systemctl stop nginx把旧集群的配置文件复制到新的集群上&#xff0c;并修改对应的IP地址&#xff0c;路径可以保…
阅读更多...
Activity A跳转Activity B，再按返回键，生命周期执行的顺序

Activity A跳转Activity B，再按返回键，生命周期执行的顺序

开A A:onCreate ----> A:onStart ----> A:OnResume 此时startActivity B A.onPause &#xff0d;> B.onCreate &#xff0d;> B.onStart&#xff0d;> B.onResume---->A.onStop 也就是B可见了 A才会stop 这时候back按键&#xff1a; B.onPause —>A。reS…
阅读更多...
在Linux中，MySQL备份与恢复

在Linux中，MySQL备份与恢复

随着自动化办公与电子商务的不断发展&#xff0c;企业对于信息系统的依赖性越来越高&#xff0c;而数据库在信息系统中担任着非常重要的角色。尤其一些对数据可靠性要求非常高的行业,如银行、证券、电信等&#xff0c;如果发生意外宕机或数据丢失&#xff0c;其损失是非常严重的…
阅读更多...
[ACTF2020 新生赛]Upload1

[ACTF2020 新生赛]Upload1

打开靶机&#xff0c;发现什么都没有 查看源码发现有个表单&#xff0c;不过高度为0&#xff0c;所以被隐藏了&#xff0c;我们直接找打css文件&#xff0c;清空&#xff08;也可以设置原始高度&#xff09; 然后提交木马脚本&#xff0c;直接提交PHP不通过 修改为phtml&#x…
阅读更多...
Java | Leetcode Java题解之第299题猜数字游戏

Java | Leetcode Java题解之第299题猜数字游戏

题目&#xff1a; 题解&#xff1a; class Solution {public String getHint(String secret, String guess) {int bulls 0;int[] cntS new int[10];int[] cntG new int[10];for (int i 0; i < secret.length(); i) {if (secret.charAt(i) guess.charAt(i)) {bulls;} e…
阅读更多...
pandoc转换md到pdf遇到的问题

pandoc转换md到pdf遇到的问题

1. pandoc必须要用sudo才能运行这是我没有想到的 sudo pandoc ./results/output.md --pdf-enginexelatex -o ./results/output.pdf 2.pdflatex安装失败&#xff0c;只能安装wkhtmltopdf sudo apt-get install wkhtmltopdf sudo pandoc ./results/output.md --pdf-enginewk…
阅读更多...
初学Mybatis之多对一查询 association 和一对多查询 collection

初学Mybatis之多对一查询 association 和一对多查询 collection

XML 映射器 多对一&#xff1a;关联&#xff08;association&#xff09; 一对多&#xff1a;集合&#xff08;collection&#xff09; mysql 创建教师、学生表&#xff0c;插入数据 create table teacher(id int(10) primary key,name varchar(30) default null ) engineI…
阅读更多...
OpenSource - Ip2region 离线IP地址定位库和IP定位数据管理框架

OpenSource - Ip2region 离线IP地址定位库和IP定位数据管理框架

文章目录 Ip2region 是什么Ip2region 特性1、IP 数据管理框架2、数据去重和压缩3、极速查询响应 xdb 数据查询xdb 数据生成xdb 数据更新手动编辑更新检测自动更新 相关备注1、并发查询必读2、技术资源分享 Release Ip2region 是什么 https://github.com/lionsoul2014/ip2regio…
阅读更多...
【C++】使用哈希表封装unordered_map与unordered_set

【C++】使用哈希表封装unordered_map与unordered_set

文章目录 1. unordered系列关联式容器1.1 unordered_set1.2 unordered_map 2. unordered_set/map的封装2.1 基本接口2.2 迭代器2.2.1 迭代器的结构2.2.2 set迭代器的封装2.2.3 map迭代器的封装 3.完整代码3.1HashTable3.2unordered_set3.3unordered_map 1. unordered系列关联式…
阅读更多...
Windows Redis启动方式及保持服务运行方法

Windows Redis启动方式及保持服务运行方法

1. Redis启动方法 1. cmd进入redis文件夹下&#xff0c;输入&#xff1a;redis-server.exe redis.windows.conf&#xff0c;出现如下界面启动成功。但此cmd窗口要一直保持打开状态&#xff0c;一旦关闭redis也就关闭了。要想cmd关闭&#xff0c;但redis处于打开状态&#xff…
阅读更多...
医疗器械上市欧美，需要什么样的网络安全相关申报文件？

医疗器械上市欧美，需要什么样的网络安全相关申报文件？

医疗器械在欧美上市时&#xff0c;需要提交的网络安全相关申报文件主要包括以下几个方面&#xff0c;这些要求基于欧美地区的法律法规和监管机构的指导文件。 一、美国FDA要求 1. 网络安全管理计划 内容&#xff1a;制造商需要提交一份网络安全管理计划&#xff0c;该计划应包含…
阅读更多...
【人工智能】人工智能概论（一）:人工智能基本概概念、学派、发展历程与新一代人工智能

【人工智能】人工智能概论（一）:人工智能基本概概念、学派、发展历程与新一代人工智能

文章目录 1. 人工智能的基本概念与定义2. 人工智能的主要学派及主旨思想2.1. 符号主义学派&#xff1a;AI源自数学逻辑2.2. 连接主义学派&#xff1a;AI源自仿生学2.3. 行为主义学派&#xff1a;AI源自控制论 3. 人工智能的起源及发展历程4. 驱动新一代人工智能快速发展的因素 …
阅读更多...
【C语言】C语言期末突击/考研--导学篇

【C语言】C语言期末突击/考研--导学篇

前言 我将把C语言的知识要点&#xff0c;学习收获以文章形式发表&#xff0c;由于我目前也还是一个菜鸟&#xff0c;难以避免错误和存在观点片面的部分&#xff0c;非常感谢读者指正&#xff01;希望能在这里与大家共同进步&#xff0c;早日成为大牛&#xff01;进入大厂&…
阅读更多...
最新文章

Copyright @ 2022~2023