最新消息:

Android-blockly增加定制代码块(Custom Blocks)

Blockly 少儿编程 2927浏览 0评论

[听英文的视频听到的内容,有一半是猜的,大概内容没问题,如果想看视频视频链接,当然,必须要翻墙的~为了避免我不专业的翻译给大家带来困扰,很多单词保留了原文]

代码块包括三个部分

1、代码定义实体:定义一个代码块的外观和行为,包括text、color、fields & connections.

2、toolbox参考:为了让用户能够加入到工作区中,需要xml文件里写一个代码块类型的参考

3、Generator 函数:生成函数,为这个block生成代码,即使目标语言不是JavaScript也会把这个写成JavaScript

网页版的Blockly也支持在JavaScript中构建块定义实体,但是在安卓当中不支持。

——————block定义——————
最简单的方法是使用Block Factory

使用图形化界面去编写一个新的block并且把它生成的代码粘贴进你的应用程序中。

Block Factory界面讲解

Block Factory 右边的preview界面是你现在正在创建的block

下面的language code 是你可以复制到你的app中间的代码

最下面的generator stub是根据不同的目标语言生成的代码,有JavaScript、Python、dart

对于一个基础的代码块来讲,有以下几个内容:

|name:
|inputs:
|[external]inputs:
|[no conection]:
|color:

开始写自己的个性化代码块:

———color———

最简单的是,定义一个颜色,把左边colour菜单中选中你想要的颜色,然后拖动到中间colour属性右边,拼起来。同时,相关的代码会被写进language code。

———————————inputs———————————

接下来是inputs:
有三种不同的inputs,

value input、statement input、dummy input

value input的组织内容有
|value input [name]
|fields [left]
|type

如果把value input放入到input缺口下,右边preview界面的block就会出现一个缺口,表示让你输入数据,可以定义输入的数据类型

inputs还会有fields,最简单的fields类型是text类型,直接输入文本‘xxx’,block就会

显示出(相当于一个lable)。

|statement input [name]
|fields [left]
|type

statement input主要是用于加入语句的,比如循环语句等等。
先放入statement input 在放入value input就会形成do-while循环。

|dummy input
|fields [left]

dummy input会形成一个带有fields的空白的行,不与其他block有任何connection的部分。

fields就是域的意思,你可以通过选择
|left
|right
|center
来调整inputs的位置。


———connection———

四种选择
|no connections
|left output
|top+bottom connections
|top connection

|bottom connection

1、no connections意思就是上、下、左都没有突出或者凹进
2、left output 左边会有突出、然后表明这个block的将会被计算出来,作为一个值传到左边的块中。
3、top+bottom connections 是最常见的statements,block的上面有凹进,下面有突出,表示的是中间执行块(就是上下都有block)

4、top connection & bottom connection 一个是开始执行块,一个是结束执行块

———[external]inputs———
|external
|inline

两种不同的输入格式

这个就是inline格式的,

————————————fields————————————
text表示像label一样的静态的文字。

text Input表示一个用户输入text的域,在这里用户可以输入任何他们想要的东西。需要输入他的默认值,和值的name。

angle input:角度输入,0~360度区间。

dropdown:可以给出一个下拉选项,需要给出dropdown的值、选项内容和选项name。有意思的是,如果三个选项有公共的前缀,那么这个前缀就会直接写在dropdown下面的label中。

checkbox:选择默认值为勾选/不够选,checkbox的名字是name

color:可以选择默认颜色和设置name

variable:自动会在下拉框里面显示出来所有在应用中出现过的变量。也可以在下拉框中选择重命名变量(rename variable)或者是定义新的变量(new variable)。

image:可以放入图片地址(URL),设置图的高、宽和可选文字。

————————————Type——————————————

大概意思就是

string类型的block可以放在length of 后面,不能放在square root 后面、
数值类型的可以放在平方根(square root)后面
equality block 等式类型的可以放在repeat的后面
每一个块都有自己定义的类型

any of 表示的是 两种类型皆可行,主要用于限定input的输入规则的,比如说,length of长度函数可以接受的list/string 类型的值。

other:可以输入一种新的、你自己定义的类型。

比如说随意创建一个block:
https://Blockly-demo.appspot.com/static/demos/blockfactory/index.html#5s7fhr 这个就是中文版的if语句

您必须 登录 才能发表评论!