探索 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://xiahunao.cn/news/3270053.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

没打印机怎么打印东西？

没打印机怎么打印东西？

在日常生活中&#xff0c;我们经常会遇到需要打印文件的情况&#xff0c;无论是学习资料、工作文档&#xff0c;还是个人兴趣的资料收集。然而&#xff0c;并不是每个人家里都有打印机&#xff0c;或者打印机出现了故障。在这种情况下&#xff0c;寻找一个高效、经济的打印途径…
阅读更多...
通过 C# 写入数据到Excel表格

通过 C# 写入数据到Excel表格

Excel 是一款广泛应用于数据处理、分析和报告制作的电子表格软件。在商业、学术和日常生活中&#xff0c;Excel 的使用极为普遍。本文将详细介绍如何使用免费.NET库将数据写入到 Excel 中&#xff0c;包括文本、数值、数组、和DataTable数据的输入。 文章目录 C# 在Excel单元格…
阅读更多...
Spring AOP（概念、实战、原理）

Spring AOP（概念、实战、原理）

文章目录 1. 什么是AOP2. AOP体系图3. 术语解释3.1 Aspect&#xff08;切面&#xff09;3.2 Join point&#xff08;连接点&#xff09;3.3 Advice&#xff08;通知&#xff09;3.4 Pointcut&#xff08;切入点&#xff09;3.5 Target&#xff08;目标&#xff09;3.6 Proxy&am…
阅读更多...
文本解码原理--MindNLP

文本解码原理--MindNLP

前言 根据前文预测下一个单词 一个文本序列的概率分布可以分解为每个词基于其上文的条件概率的乘积 Greedy search 在每个时间步&#x1d461;都简单地选择概率最高的词作为当前输出词: &#x1d464;&#x1d461;&#x1d44e;&#x1d45f;&#x1d454;&#x1d45a;&am…
阅读更多...
【泛微E9】统一待办中心集成

【泛微E9】统一待办中心集成

1、什么是统一待办中心集成 概述&#xff1a;目前有很多第3方系统都有流程&#xff0c;操作人都会有待办事宜、已办事宜。但这些待办流程都分散在不同系统中&#xff0c;用户操作不方便&#xff0c;对相应流程也无法及时处理。客户希望能在泛微OA中对所有的第3方流程做统一展示…
阅读更多...
LlamaIndex：向 LLM 添加个人数据

LlamaIndex：向 LLM 添加个人数据

LlamaIndex 是您构建基于 LLM 的应用程序的友好数据助手。您可以使用自然语言轻松地获取、管理和检索私有数据和特定领域的数据。 LlamaIndex 是一个针对大型语言模型 (LLM) 应用程序的数据框架。GPT-4 等 LLM 在海量的公共数据集上进行预训练&#xff0c;开箱即用即可实现令人…
阅读更多...
【.NET 6 实战--孢子记账--从单体到微服务】--开发环境设置

【.NET 6 实战--孢子记账--从单体到微服务】--开发环境设置

在这一小节&#xff0c;我们将设置开发环境。 一、安装SDK 咱们的项目使用的是 .NET6&#xff0c;开发前我们需要从官网上下载.NET6 SDK&#xff08;点击下载&#xff09;&#xff0c;这里要注意的是我们需要下载.NET6 SDK&#xff0c;而不是 .NET6 Runtiem 。SDK 包含 Runti…
阅读更多...
PyCharm 常用 的插件

PyCharm 常用 的插件

Material Theme UI Lite&#xff1a;‌提供多种不同的页面风格&#xff0c;‌为PyCharm界面增添个性化元素。‌Chinese (Simplified) Language Pack&#xff1a;‌为中文用户提供简体中文的界面、‌菜单、‌提示信息&#xff0c;‌提升使用体验。‌Tabnine&#xff1a;‌基于人…
阅读更多...
C# 开发监控方法执行耗时

C# 开发监控方法执行耗时

MethodTimer.Fody 是一个功能强大的库，可以用于测量 .NET 应用程序中的方法的执行时间。允许你在不修改代码的情况下，自动地测量和记录方法的执行时间。 这个工具是基于.NET的 weaving 技术，通过修改IL（Intermediate Language，中间语言）代码来插入计时逻辑，从而在方法调…
阅读更多...
Mac应用快速启动器：Alfred 5 for Mac 激活版

Mac应用快速启动器：Alfred 5 for Mac 激活版

Alfred 5 是一款专为 macOS 系统设计的效率提升工具。这款软件以其快速启动和高效操作功能著称&#xff0c;通过使用快捷键来呼出输入界面&#xff0c;用户可以快速完成各种任务。 最新版本 Alfred 5.5 引入了一些新功能。其中包括整合了 ChatGPT 和 DALL-E&#xff0c;这意味…
阅读更多...
ROS2入门到精通—— 2-13 ROS2实战：实现机器人多目标点导航（附ROS C++代码以及脚本实现）

ROS2入门到精通—— 2-13 ROS2实战：实现机器人多目标点导航（附ROS C++代码以及脚本实现）

0 前言 实现机器人多目标点导航是非常常见的需求，本文将介绍ROS2和Shell脚本两个方法实现多目标点导航，读者可以根据需求对接仿真和实车。 1 yaml-cpp介绍 YAML是专门用来写配置文件的语言，实质上是一种通用的数据串行化格式 1.1 yaml-cpp安装 git clone https://github…
阅读更多...
kail-linux如何使用NAT连接修改静态IP

kail-linux如何使用NAT连接修改静态IP

1、Contos修改静态IP vi /etc/sysconfig/network-scripts/ifcfg-ens33&#xff0c; 标记红色处可能序号会变动 参考linux配置网络不通解决方案_kylinv10sp2 网关不通-CSDN博客https://tanrt06.blog.csdn.net/article/details/132430485?spm1001.2014.3001.5502 Kail时候NAT连…
阅读更多...
Java SE 文件上传和文件下载的底层原理

Java SE 文件上传和文件下载的底层原理

1. Java SE 文件上传和文件下载的底层原理 文章目录 1. Java SE 文件上传和文件下载的底层原理2. 文件上传2.1 文件上传应用实例2.2 文件上传注意事项和细节 3. 文件下载3.1 文件下载应用实例3.2 文件下载注意事项和细节 4. 总结&#xff1a;5. 最后: 2. 文件上传 文件的上传和…
阅读更多...
ElasticSearch(三)—文档字段参数设置以及元字段

ElasticSearch(三)—文档字段参数设置以及元字段

一、 字段参数设置 analyzer&#xff1a; 指定分词器。elasticsearch 是一款支持全文检索的分布式存储系统&#xff0c;对于 text类型的字段&#xff0c;首先会使用分词器进行分词&#xff0c;然后将分词后的词根一个一个存储在倒排索引中&#xff0c;后续查询主要是针对词根…
阅读更多...
模拟实现c++中的vector模版

模拟实现c++中的vector模版

目录 一vector简述&#xff1a; 二vector的一些接口函数&#xff1a; 1初始化&#xff1a; 2.vector增长&#xff1a; 3vector增删查改&#xff1a; 三vector模拟实现部分主要函数&#xff1a; 1.size,capacity,empty,clear接口&#xff1a; 2.reverse的实现&#xff1…
阅读更多...
springboot招生宣传管理系统论文源码调试讲解

springboot招生宣传管理系统论文源码调试讲解

2 相关技术 2.1 VUE介绍 Vue (读音 /vjuː/&#xff0c;类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是&#xff0c;Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层&#xff0c;不仅易于上手&#xff0c;还便于与第三方库或既有项目…
阅读更多...
Github 2024-07-27开源项目日报 Top10

Github 2024-07-27开源项目日报 Top10

根据Github Trendings的统计，今日(2024-07-27统计)共有10个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量非开发语言项目2C++项目2C项目2TypeScript项目1JavaScript项目1Java项目1Python项目1C#项目1免费编程学习平台：freeCodeCamp.org 创建周期：33…
阅读更多...
SpringBoot入门实战：SpringBoot整合Shiro

SpringBoot入门实战：SpringBoot整合Shiro

1.背景介绍 SpringBoot是一个用于快速开发Spring应用程序的框架。它的核心是对Spring框架的一层封装&#xff0c;使其更加简单易用。SpringBoot整合Shiro是一种将SpringBoot与Shiro整合的方法&#xff0c;以实现身份验证和授权功能。 Shiro是一个强大的Java安全框架&#xff0c…
阅读更多...
电影院售票网站

电影院售票网站

你好呀&#xff0c;我是计算机学姐码农小野&#xff01;如果有相关需求&#xff0c;可以私信联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SSM框架 工具&#xff1a;IDEA/Eclipse、Navicat、Maven 系统展示 首页 用户管理界面 正在上映管…
阅读更多...
正则表达式 先行/后发断言

正则表达式 先行/后发断言

参考资料 正则表达式的先行断言(lookahead)和后行断言(lookbehind)正则表达式中分组功能高级用法前瞻断言与后瞻断言初心者歓迎&#xff01;手と目で覚える正規表現入門・その&#xff14;&#xff08;最終回&#xff09;「中級者テクニックをマスターしよう」 目录 一. Posit…
阅读更多...
最新文章

Copyright @ 2022~2023