wolf

Custom Blocks: Style Guide多年来，区块和区块游戏团队已经吸取了许多教训，适用于开发新区块。以下是我们所犯的错误，或其他人常犯的错误的集合。这些是我们在使用Blockly的视觉风格时学到的一般经验，可能并不适用于所有的用例或设计。其他解决方案存在。这也不是用户可能遇到的问题以及如何避免这些问题的详尽列表。每个案例都有点不同，都有自己的取舍。1. Conditio...

Custom Blocks: Block Paradigms当设计一个使用块的应用程序时，有几个范例可供选择。应该尽早考虑这些选择，因为它们会影响用户需要的块。Configuration许多块应用程序用于描述配置，而不是可执行程序。配置应用程序通常从初始化工作区上的一个根级别块开始。一个很好的例子是Blockly开发工具的Block Factory选项卡：var xml = ...

Generating Code大多数块应用程序需要将块转换为执行代码。本页介绍如何将代码生成器添加到自定义块。首先，转到generators/目录并选择与要生成的语言相对应的子目录（JavaScript、Python、PHP、Lua、Dart等）。假设您的块不适合现有的类别，则创建一个新的JavaScript文件。这个新的JavaScript文件需要包含在编辑器HTML文件的<scr...

Localize BlocksBlockly支持可以本地化为用户语言的块定义。通过使用字符串表，JSON块定义中的消息字符串可以调整输入、字段和标签，以反映语言的词汇表、单词顺序和方向。所有这些情况都共享相同的JSON块定义：/ Block for creating a list with one element repeated.{ "type": "lists_r...

Block colour大多数区块应用程序使用各种区块颜色，以视觉方式将区块分类。Blockly附带的块包括八个类别，颜色由演示中的各种工具栏类别反映：许多工具箱项还包括作为默认输入值的阴影块。例如，蓝色加法块的数字。阴影块的颜色来自于块的标准颜色，但不饱和。Defining the block colour块颜色可以用JSON或JavaScript中定义：//json...

定义块块定义描述了块的外观和行为，包括文本，颜色，形状以及它可以连接的其他块。定义自定义块后，每个平台都会以不同的方式加载这些定义，详细信息请参见网络和Android特定配置指南。JSON格式与JavaScript APIBlockly有两种定义块的方式：JSON对象和JavaScript函数。JSON格式是跨平台的，因此可以使用相同的代码在Web，Android和iO...

本文档面向希望在Blockly中创建新块的开发人员。假定有人拥有一个可以编辑的Blockly本地副本，一个通常熟悉Blockly的用法，另一个则对JavaScript有基本的了解。Blockly带有大量预定义的块。从数学函数到循环结构，应有尽有。但是，为了与外部应用程序接口，必须创建自定义块以形成API。例如，创建绘图程序时，可能需要创建一个“半径为R的绘图圆”块。在大多数情况下，...

MoveBlockly的主工作区可以使用三种不同的方法移动：the scrollbars, the mouse, or the mouse wheel.(滚动条、鼠标或鼠标滚轮)。移动设置由Blockly配置的一部分对象定义。下面是一个例子：var workspace = Blockly.inject('blocklyDiv', {move:{ scrollb...

主题主题是一种定制Blockly外观和感觉的方法。目前我们支持在块和类别上自定义某些样式。我们创建主题的主要目标是授权开发人员创建更容易访问的块体验。然而，伴随着强大的力量而来的是巨大的责任。如果不需要控制块的所有三种样式值（块颜色、边框颜色和阴影块颜色），我们强烈建议用户坚持使用块颜色。很难找到协调一致的颜色，所以最简单的方法仍然是使用色调定义颜色，并允许Blockly计算边框和阴影块的...

事件工作区上的每个更改都会触发一个事件。这些事件充分描述了每个更改的前后状态。监听事件工作区具有addChangeListener和removeChangeListener方法，可用于侦听事件流。一个示例是实时生成代码。另一个示例是最大块限制演示。通常，这两个示例都不关心触发事件是什么。他们只是查看工作区的当前状态。一个更复杂的事件侦听器将查看触发事件。下面的示例检测用户何时...

缩放Blockly的主工作区可以是可伸缩的，可以由用户动态扩展，也可以由开发人员静态扩展。缩放设置由Blockly配置的一部分对象定义。下面是一个例子：var workspace = Blockly.inject('blocklyDiv', {toolbox: document.getElementById('toolbox'), zoom: {c...

网格Blockly的主工作区可以选择有一个网格。可以使块捕捉到网格，从而实现更清晰的布局。这在具有分布在大区域上的多个代码组的大型应用程序中特别有用。网格的设置是由Blockly配置的一部分对象定义的。下面是一个例子：var workspace = Blockly.inject('blocklyDiv', {toolbox: document.getElementById('...

代码生成器大多数Blockly应用程序都要求将用户程序翻译成JavaScript、Python、PHP、Lua、Dart或其他语言。此操作在客户端上被分块执行。生成代码第一步是包含所讨论语言的生成器。主要包括以下几种：javascript_compressed.js python_compressed.js php_compressed.js lua_compresse...

工具箱工具箱是用户可以从中创建新块的侧面菜单。工具箱的结构由XML指定，它可以是节点树或字符串表示形式。当该XML注入页面时，它将传递给Blockly。如果您不喜欢手动输入XML，建议您查看Blockly Developer Tools。使用它，您可以构造一个工具箱并使用可视界面自动生成其工具箱XML。这是一个使用节点树的最小示例：<xml id="toolbox" styl...

添加自定义块虽然Blockly定义了许多标准块，但是大多数应用程序需要定义和实现至少几个与域相关的块。块由三个组件组成：块定义对象：定义块的外观和行为，包括文本，颜色，字段和连接。 工具箱引用：对工具箱XML中块类型的引用，因此用户可以将其添加到工作区中。 生成器功能：生成此块的代码字符串。即使目标语言不是JavaScript，甚至对于Blockly for Android，它始...

固定大小的工作区将Blockly放到网页中的最简单方法是将其注入到空的“ div”标签中。注射首先，包括核心Blockly脚本和核心块集。请注意，路径可能会有所不同，具体取决于您的页面相对于Blockly的位置：<script src = “ blockly_compressed.js” > </ script> <script src = “ b...

开始使用本文档面向希望创建自己的应用程序的开发人员，这些应用程序将Blockly集成为代码编辑器。假定人们通常熟悉Blockly的用法，并且对HTML和JavaScript有基本的了解。总览Blockly旨在轻松安装到您的Web应用程序中。用户拖动块，Blockly生成代码，您的应用程序对该代码执行某些操作。从您的应用程序的角度来看，Blockly只是一个文本区域，用户可以在其中键入...

1. 创建ToolBox要创建一个ToolBox非常简单，只需要在定义workspace的时候进行设置即可。var workspace = Blockly.inject(blocklyDiv, { media: 'blockly/media/', toolbox: document.getElementById('toolbox'), // 定义ToolBox});...

. 什么是Blockly的workspaceworkspace是Blockly中非常重要的对象，它是其他组件运行的基础，所有其他Blockly的组件都必须在workspace中才能工作。以下图为例，图中蓝框以内的范围都是workspace，左侧的ToolBox（下一节的内容）、中间的积木块组合（blocks）、右下方的垃圾桶和滑动条都是workspace的子对象。通常来说，一个应用只需要创建一...

1.什么是Blockly？Blockly是一个JavaScript可视化编程编辑器开发框架。目前，它是一个开源项目，由Google公司发起并维护。2.Blockly能做什么？官方解释是，Blockly是一个用于给web或者手机app添加可视化程序编辑器的框架。它采用图形化的咬合拼接的积木块表示变量、逻辑表达式、循环以及其他编程概念。它能让用户在不关心语法的情况下进行编程练习，同时摆脱那...