slash0781的专栏

所有的Block都被分类归纳在ToolBox中。Blockly为工具箱定义的默认的风格，如下所示：这里我们试着来改改这个风格，让他变个样子。

基本过程Blockly中提供了很多预先定义好的小积木，但当你涉及具体的领域的时候，这些预定义好的积木可能不能满足你的需求，这样，就需要定义自己独特的小积木来满足需求了。这一节，将会添加一个计算字符串长度的小积木来演示整个过程。自定义Block的流程包括以下三个步骤：1、定义积木：Blockly是可以通过外观来判断Block作用以及行为，这里就定义Block外观的步骤。2、添加到工具箱中：定义好了以后需要添加到工具箱中以便后续引用。3、为这个积木编写一段翻译代码，这段代码用于把BLOCK翻译成为响应

内容概要在“积木开发系列----Blockly起步”中简单的Blockly的Workspace引入并显示到网页中。在这个代码中我们对Workspace做了简单的设定，包括简单样式以及Workspace的位置等等。这里说一说如何对Workspace进行一些更细节化的设定。Workspace注入属性设定想要在网页中显示Blockly你需要调用Blcokly的注入方法。例如：var primaryWorkspace = Blockly.inject( 'div_1',//容器ID {//注入

介绍这一节将会使用Blockly来创建一个最基础的可视化编程环境。这个应用的网页将会包含一个目前Blockly支持的所有Block的Workspace、实时生成JavaScript代码。其中，Workspace中包含：支持所有Blocks的工具箱，编程区域、支持一些基本操作的上下文菜单等等。这里按照如下的步骤进行：1、集成Blockly的API库2、绘制HTML布局3、配置Workspace的基础属性，网页中注入Blockly4、编写实时代码翻译代码完成了这4个步骤，你会得到如下所示的页面

写在前面的话这个系列的文章写的是是基于Google Blockly API来实现WEB端的可视化编程工具。这套API是基于JAVA SCRIPT开发的，使用简单功能强大。笔者也在一步一步的在学习，希望和对此感兴趣的博友一起学习进步。Blockly已经被应用到很多场景中。比如，适合少儿编程的scratch以及适合少儿学习硬件编程，由微软推出的Micro:Bit中。而scratch已经被许多少儿编程教育机构使用，比如核桃编程。Blockly 介绍Blockly 是一个可视化编程工具库，它可以加载到 We