探索 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&#…
阅读更多...
醒醒，别睡了...讲《数据分析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…
阅读更多...
在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…
阅读更多...
初学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;进入大厂&…
阅读更多...
本地使用Git同步、配合Gitee同步至仓库并下拉到本地（亲手调试，全能跑通）

本地使用Git同步、配合Gitee同步至仓库并下拉到本地（亲手调试，全能跑通）

这几天在公司&#xff0c;同事都在使用Gitee上传项目&#xff0c;进行同步&#xff0c;我也进行了简单学习了解了一下版本控制软件Git&#xff0c;挺不错的&#xff0c;故写个笔记记录一下。 本篇博文主要涉及的内容&#xff1a; 1&#xff0c;本地写代码&#xff0c;通过Git同…
阅读更多...
初阶数据结构1 算法复杂度

初阶数据结构1 算法复杂度

1.数据结构概念 数据结构(Data Structure)是计算机存储、组织数据的⽅式&#xff0c;指相互之间存在⼀种或多种特定关系的数 据元素的集合。没有⼀种单⼀的数据结构对所有⽤途都有⽤&#xff0c;所以我们要学各式各样的数据结构&#xff0c; 如&#xff1a;线性表、树、图、哈…
阅读更多...
【C++】—— 类和对象（一）

【C++】—— 类和对象（一）

【C】—— 类和对象&#xff08;一&#xff09; 1、类的定义1.1、类定义1.1.1、类定义格式1.1.2、成员变量的标识1.1.3、C 中的 s t r u c t struct struct1.1.4、C 中的内联函数1.1.5、总结 1.2、访问限定符1.3、类域 2、实例化2.1、实例化的概念2.2、对象大小2.2.1、对象的大…
阅读更多...
lenovo联想ThinkBook 14 G4+ IAP/ARA(21CX,21D0)笔记本原装出厂Windows11系统预装OEM镜像下载

lenovo联想ThinkBook 14 G4+ IAP/ARA(21CX,21D0)笔记本原装出厂Windows11系统预装OEM镜像下载

ThinkBook 14 G4 IAP【21CX】原厂系统Win11恢复安装包&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1iY9BxidIbv4RnXKaqbydTA?pwd9wc6 提取码&#xff1a;9wc6 ThinkBook 14 G4 ARA【21D0】原厂系统Win11恢复安装包&#xff1a; 链接&#xff1a;https://pan.ba…
阅读更多...
nest学习笔记(一)

nest学习笔记(一)

介绍 nest是一个用于构建高效&#xff0c;可拓展的nodejs服务端应用程序的框架&#xff0c;它使用渐进式javascript&#xff0c;使用Typescript构建并且完全支持Typescript&#xff0c;而且运行开发者使用javascript编写代码&#xff0c;提供了OOP、FP、FRP nest的底层是基于…
阅读更多...
Linux编程：使用python或者shell获取系统信息

Linux编程：使用python或者shell获取系统信息

0. 概要 在日常的系统管理和性能监控中&#xff0c;获取系统信息是一个非常常见的需求。 本文将介绍如何使用Python和Shell脚本来获取这些系统信息。 1. 使用Python获取系统信息 使用psutil库来获取系统的CPU、内存、磁盘和网络信息。 1.1 安装psutil库 首先&#xff0c;我…
阅读更多...
盗梦空间续集（InceptionNeXt）:使用Inception优化加速ConvNeXt实现ImageNet-1K的最佳精度

盗梦空间续集（InceptionNeXt）:使用Inception优化加速ConvNeXt实现ImageNet-1K的最佳精度

Abstract 灵感来自ViT的长距离建模能力&#xff0c;大核卷积最近被广泛研究和采用&#xff0c;以扩大感受野并提高模型性能&#xff0c;例如显著的工作ConvNeXt采用77深度卷积。虽然这种深度算子只消耗少量的FLOPs&#xff0c;但由于高内存访问成本&#xff0c;它在强大计算设…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023