[听英文的视频听到的内容,有一半是猜的,大概内容没问题,如果想看视频视频链接,当然,必须要翻墙的~为了避免我不专业的翻译给大家带来困扰,很多单词保留了原文]
代码块包括三个部分
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语句