当前位置: 首页 > news >正文

探索 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];};

相关文章:

探索 Blockly:自定义积木实例

3.实例 3.1.基础块 无输入 , 无输出 3.1.1.json var textOneJson {"type": "sql_test_text_one","message0": " one ","colour": 30,"tooltip": 无输入 , 无输出 };javascriptGenerator.forBlock[sql_test_te…...

MongoDB教程(二十三):关于MongoDB自增机制

&#x1f49d;&#x1f49d;&#x1f49d;首先&#xff0c;欢迎各位来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里不仅可以有所收获&#xff0c;同时也能感受到一份轻松欢乐的氛围&#xff0c;祝你生活愉快&#xff01; 文章目录 引言一、MongoD…...

展馆导览系统架构解析,从需求分析到上线运维

在物质生活日益丰富的当下&#xff0c;人们对精神世界的追求愈发强烈&#xff0c;博物馆、展馆、纪念馆等场所成为人们丰富知识、滋养心灵的热门选择。与此同时&#xff0c;人们对展馆的导航体验也提出了更高要求&#xff0c;展馆导览系统作为一种基于室内外地图相结合的位置引…...

Servlet详解(超详细)

Servlet详解 文章目录 Servlet详解一、基本概念二、Servlet的使用1、创建Servlet类2、配置Servleta. 使用web.xml配置b. 使用注解配置 3、部署Web应用4、处理HTTP请求和生成响应5、处理表单数据HTML表单Servlet 6、管理会话 三、servlet生命周期1、加载和实例化2、初始化3、 请…...

Meta AI引入Imagine Me功能,上传图片输入提示词即可实现个性化照片

AITOP100平台获悉&#xff0c;Meta 公司在 AI 领域再次迈出了重要的步伐&#xff0c;其发布的 Llama 3.1 开源 AI 模型以及对 Meta AI 功能的更新扩充引发了广泛关注。 其中&#xff0c;新引入的“Imagine Me”功能尤为引人注目。在这一功能下&#xff0c;美国地区的用户只需上…...

常用自启设置

一、开机自启动 1、编辑 vi /lib/systemd/system/nginx.service 文件&#xff0c;没有创建一个 touch nginx.service 然后将如下内容根据具体情况进行修改后&#xff0c;添加到nginx.service文件中&#xff1a; [Unit] Descriptionnginx Afternetwork.target remote-fs.targ…...

模块与组件、模块化与组件化的理解

在React或其他现代JavaScript框架中&#xff0c;模块与组件、模块化与组件化是核心概念&#xff0c;它们对于提高代码的可维护性、复用性和开发效率具有重要意义。以下是对这些概念的理解&#xff1a; 模块与组件 模块&#xff08;Module&#xff09; 定义&#xff1a;模块是…...

Rust:cargo的常用命令

1.查看版本 $ cargo --version cargo 1.79.0 (ffa9cf99a 2024-06-03) 2.创建新的项目 $ cargo new hello 创建后的目录结构为 $ tree hello/ hello/ ├── Cargo.toml └── src └── main.rs 3.运行项目 $ cd hello $ cargo run Compiling hello v0.1.0 (/home/c…...

LeetCode 3106.满足距离约束且字典序最小的字符串:模拟(贪心)

【LetMeFly】3106.满足距离约束且字典序最小的字符串&#xff1a;模拟&#xff08;贪心&#xff09; 力扣题目链接&#xff1a;https://leetcode.cn/problems/lexicographically-smallest-string-after-operations-with-constraint/ 给你一个字符串 s 和一个整数 k 。 定义函…...

Elasticsearch 与 MySQL 在查询和插入性能上的深度剖析

在当今的数据处理领域&#xff0c;选择合适的数据库对于应用的性能和效率至关重要。Elasticsearch 和 MySQL 作为两款常用的数据库&#xff0c;它们在查询和插入操作上的性能表现各有千秋。本文将对这两款数据库在这两个关键操作上进行详细的对比分析。 一、引言 随着数据量的…...

day4 vue2以及ElementUI

创建vue2项目 可能用到的命令行们 vue create 项目名称 // 创建项目 cd 项目名称 // 只有进入项目下&#xff0c;才能运行 npm run serve // 运行项目 D: //切换盘符 cd .. // 返回到上一级目录 clear // 清空终端 更改 Vue项目的端口配置 基础语法 项目创建完成之后&#…...

把redis用在Java项目

1. Java连接redis Java连接redis的方式是通过jedis&#xff0c;连接redis需要遵循jedis协议。 1.1 引入依赖 <!--引入java连接redis的驱动--><dependency><groupId>redis.clients</groupId><artifactId>jedis</artifactId><version&…...

GORM:优雅的Go语言ORM库

文章目录 引言GORM原理基础使用安装GORM定义模型连接数据库CRUD操作 高级使用关联事务回调 优点结论 引言 在Go语言开发中&#xff0c;数据库操作是不可或缺的一部分。虽然直接使用SQL语句可以灵活地与数据库交互&#xff0c;但随着项目规模的扩大&#xff0c;SQL语句的编写、…...

Golang | Leetcode Golang题解之第279题完全平方数

题目&#xff1a; 题解&#xff1a; // 判断是否为完全平方数 func isPerfectSquare(x int) bool {y : int(math.Sqrt(float64(x)))return y*y x }// 判断是否能表示为 4^k*(8m7) func checkAnswer4(x int) bool {for x%4 0 {x / 4}return x%8 7 }func numSquares(n int) i…...

Oracle系统表空间的加解密

实验环境 数据库选择的是orclpdb1&#xff0c;当前系统表空间未加密&#xff1a; SQL> show con_nameCON_NAME ------------------------------ ORCLPDB1SQL> select TABLESPACE_NAME, STATUS, ENCRYPTED from dba_tablespaces;TABLESPACE_NAME STATUS …...

pytorch backbone

1 简介 在PyTorch深度学习中&#xff0c;预训练backbone&#xff08;骨干网络&#xff09;是一个常见的做法&#xff0c;特别是在处理图像识别、目标检测、图像分割等任务时。预训练backbone通常是指在大型数据集&#xff08;如ImageNet&#xff09;上预先训练好的卷积神经网络…...

uniapp 开发app使用renderjs操作dom

需求&#xff1a;把页面中的对话内容另存为一张图片保存到手机相册。 解决方案&#xff1a;这时我们需要使用到document对象创建一个dom对象计算对话内容的宽高、位置等&#xff0c;再利用canvas能力将内容绘制绘制成一张图保存。 现状&#xff1a;总所周知&#xff0c;非H5端&…...

【面试题】MySQL `EXPLAIN`的`Extra`字段:深入解析查询优化的隐藏信息

MySQL EXPLAIN的Extra字段&#xff1a;深入解析查询优化的隐藏信息 引言 在MySQL的EXPLAIN输出中&#xff0c;Extra字段提供了关于查询执行计划的额外信息。这些信息对于理解查询的内部工作机制和优化查询性能至关重要。本文将详细解析Extra字段中常见的几个关键指标&#xf…...

Jenkins持续部署

开发环境任务的代码只要有更新&#xff0c;Jenkins会自动获取新的代码并运行 1. pycharm和git本地集成 获取到下面的 Git可执行文件路径 2. pycharm和gitee远程仓库集成 先在pycharm中安装gitee插件 在设置中找到gitee&#xff0c;点击添加账户&#xff0c;并将自己的账户添…...

橙单前端项目下载编译遇到的问题与解决

今天下载orange-admin前端项目&#xff0c;不过下载下来运行也出现一些问题。 1、运行出现下面一堆错误&#xff0c;如下&#xff1a; 2、对于下面这个错误 error Expected linebreaks to be LF but found CRLF linebreak-style 这就是eslint的报错了&#xff0c;可能是原作者…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

python执行测试用例,allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

MyBatis中关于缓存的理解

MyBatis缓存 MyBatis系统当中默认定义两级缓存&#xff1a;一级缓存、二级缓存 默认情况下&#xff0c;只有一级缓存开启&#xff08;sqlSession级别的缓存&#xff09;二级缓存需要手动开启配置&#xff0c;需要局域namespace级别的缓存 一级缓存&#xff08;本地缓存&#…...

小木的算法日记-多叉树的递归/层序遍历

&#x1f332; 从二叉树到森林&#xff1a;一文彻底搞懂多叉树遍历的艺术 &#x1f680; 引言 你好&#xff0c;未来的算法大神&#xff01; 在数据结构的世界里&#xff0c;“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的&#xff0c;它…...

k8s从入门到放弃之HPA控制器

k8s从入门到放弃之HPA控制器 Kubernetes中的Horizontal Pod Autoscaler (HPA)控制器是一种用于自动扩展部署、副本集或复制控制器中Pod数量的机制。它可以根据观察到的CPU利用率&#xff08;或其他自定义指标&#xff09;来调整这些对象的规模&#xff0c;从而帮助应用程序在负…...

Windows电脑能装鸿蒙吗_Windows电脑体验鸿蒙电脑操作系统教程

鸿蒙电脑版操作系统来了&#xff0c;很多小伙伴想体验鸿蒙电脑版操作系统&#xff0c;可惜&#xff0c;鸿蒙系统并不支持你正在使用的传统的电脑来安装。不过可以通过可以使用华为官方提供的虚拟机&#xff0c;来体验大家心心念念的鸿蒙系统啦&#xff01;注意&#xff1a;虚拟…...

echarts使用graphic强行给图增加一个边框(边框根据自己的图形大小设置)- 适用于无法使用dom的样式

pdf-lib https://blog.csdn.net/Shi_haoliu/article/details/148157624?spm1001.2014.3001.5501 为了完成在pdf中导出echarts图&#xff0c;如果边框加在dom上面&#xff0c;pdf-lib导出svg的时候并不会导出边框&#xff0c;所以只能在echarts图上面加边框 grid的边框是在图里…...

Redis上篇--知识点总结

Redis上篇–解析 本文大部分知识整理自网上&#xff0c;在正文结束后都会附上参考地址。如果想要深入或者详细学习可以通过文末链接跳转学习。 1. 基本介绍 Redis 是一个开源的、高性能的 内存键值数据库&#xff0c;Redis 的键值对中的 key 就是字符串对象&#xff0c;而 val…...