blockly开始使用

开始使用

本文档面向希望创建自己的应用程序的开发人员，这些应用程序将Blockly集成为代码编辑器。假定人们通常熟悉Blockly的用法，并且对HTML和JavaScript有基本的了解。

总览

Blockly旨在轻松安装到您的Web应用程序中。用户拖动块，Blockly生成代码，您的应用程序对该代码执行某些操作。从您的应用程序的角度来看，Blockly只是一个文本区域，用户可以在其中键入语法上完美的JavaScript，Python，PHP，Lua，Dart或其他语言。

Blockly是100％的客户端，不需要服务器的任何支持（除非有人想使用云存储功能）。没有第三方依赖关系（除非有人想重新编译内核）。一切都是开源的。

获取代码

首先，从GitHub下载源代码。如果您知道如何使用Git或Subversion，我们强烈建议您从存储库中进行同步，以使您的代码保持最新。

获得代码后，将浏览器指向demos/fixed/index.html并确认可以拖动块。

块状注射

在您验证Blockly的安装正常工作后，使用固定大小将Blockly注入到网页中div。

→有关注入固定大小的块的更多信息...

更高级的网页可能希望允许Blockly调整大小以填充页面。

→有关注入可调整大小的块的更多信息...

组态

Blockly.inject上面示例中使用的行将名称-值对字典作为第二个参数。这些用于配置。支持以下选项：

名称	类型	描述
collapse:	布尔值	允许折叠或扩展块。true如果工具箱具有类别，false则默认为，否则为。
comments:	布尔值	允许块具有注释。true如果工具箱具有类别，false则默认为，否则为。
css:	布尔值	如果为false，则不要注入CSS（假设CSS成为文档的责任）。默认为true。
disable:	布尔值	允许禁用块。true如果工具箱具有类别，false则默认为，否则为。
grid:	宾语	配置一个块可能会捕捉到的网格。请参阅网格 ...
horizontalLayout：	布尔值	如果true工具箱是水平的，如果false工具箱是垂直的。默认为false。
maxBlocks:	数	可以创建的最大块数。对学生练习有用。默认为Infinity。
maxInstances:	宾语	从块类型映射到可以创建的那种类型的最大块数。未声明的类型默认为Infinity。
media:	串	从页面（或框架）到Blockly媒体目录的路径。默认为。"https://blockly-demo.appspot.com/static/media/"
move:	宾语	配置用户如何在工作空间中移动的行为。请参阅移动 ...
oneBasedIndex:	布尔值	如果true列表和字符串操作应从索引1，如果false索引从0。默认为true。
readOnly:	布尔值	如果为true，则禁止用户进行编辑。禁止工具箱和垃圾桶。默认为false。
rtl:	布尔值	如果为true，则镜像编辑器（对于阿拉伯语或希伯来语区域设置）。请参阅RTL演示。默认为false。
scrollbars:	布尔值	设置工作区是否可滚动。true如果工具箱具有类别，false则默认为，否则为。
sounds:	布尔值	如果为false，则不播放声音（例如，单击并删除）。默认为true。
theme:	块状主题	如果未提供主题，则默认为经典主题。查看主题
toolbox:	XML节点或字符串	用户可用的类别和块的树形结构。请参阅下面的详细信息。
toolboxPosition:	串	如果"start"工具箱位于顶部（水平）或左侧（垂直和LTR）或右侧（垂直和RTL）。如果"end"工具箱在另一侧。默认为"start"。
trashcan:	布尔值	显示或隐藏垃圾桶。true如果工具箱具有类别，false则默认为，否则为。
maxTrashcanContents:	数	垃圾箱弹出框中显示的已删除项目的最大数量。“ 0”禁用该功能。默认为“ 32”。
zoom:	宾语	配置缩放行为。参见缩放 ...

最重要的选择是toolbox。这是一棵XML树，用于指定工具箱（侧面菜单）中可用的块，如何分组以及是否存在类别。

→有关定义工具箱的更多信息...

除了Blockly随附的默认块之外，还需要构建自定义块来调用Web应用程序的API。一个例子是这个迷宫游戏，它具有自定义的移动块。

→有关创建自定义块的更多信息...

代码生成器

Blockly不是一种编程语言，无法“运行” Blockly程序。相反，Blockly可以将用户的程序转换为JavaScript，Python，PHP，Dart或其他某种语言。

→有关代码生成器的更多信息...

导入和导出块

如果您的应用程序需要保存和存储用户的块并在以后访问时恢复它们，请使用此调用导出到XML：

var xml = Blockly 。Xml 。workspaceToDom （工作空间）; var xml_text = 阻止。Xml 。domToText （xml ）; 
 

 

这将产生一个最小（但难看）的字符串，其中包含用户块的XML。如果希望获得更易读（但更大）的字符串，请 Blockly.Xml.domToPrettyText改用。

从XML字符串还原到块很简单：

var xml = Blockly 。Xml 。textToDom （xml_text ）; 块状。Xml 。domToWorkspace （xml ，工作区）; 

 

云储存

Blockly带有可选的云存储功能。它使用户可以保存，加载，共享和发布他们的程序。如果您的项目托管在App Engine上，则可以利用此服务。

→有关云存储的更多信息...