Get the Code

First, download the source code from GitHub. If you know how to use Git or Subversion, we highly recommend syncing from our repository so that your code stays up to date.

Git Hub :: Zip File

Download ZIP File Download TAR Ball View On GitHub

Git Hub :: TarBall File

 

Once you have the code, point your browser at demos/fixed/index.html and verify that blocks can be dragged around.

Injecting Blockly

With your installation of Blockly verified as working, inject Blockly into a web page using a fixed-size div.

→ More info on injecting fixed-sized Blockly

More advanced web pages may wish to allow Blockly to resize to fill the page.

→ More info on injecting resizable Blockly

Configuration

The Blockly.inject line used in the examples above contains as its second argument a dictionary of name-value pairs. These are used for configuration. The following options are supported:

Name Type Description
collapse: boolean Allows blocks to be collapsed or expanded. Defaults to true if the toolbox has categories, false otherwise.
comments: boolean Allows blocks to have comments. Defaults to true if the toolbox has categories, false otherwise.
css: boolean If false, don’t inject CSS (providing CSS becomes the document’s responsibility). Defaults to true.
disable: boolean Allows blocks to be disabled. Defaults to true if the toolbox has categories, false otherwise.
grid: object Configures a grid which blocks may snap to. See Grid
horizontalLayout: boolean If true toolbox is horizontal, if false toolbox is vertical. Defaults to false.
maxBlocks: number Maximum number of blocks that may be created. Useful for student exercises. Defaults to Infinity.
media: string Path from page (or frame) to the Blockly media directory. Defaults to "https://blockly-demo.appspot.com/static/media/".
oneBasedIndex: boolean If true list and string operations should index from 1, if false index from 0. Defaults to true.
readOnly: boolean If true, prevent the user from editing. Supresses the toolbox and trashcan. Defaults to false.
rtl: boolean If true, mirror the editor (for Arabic or Hebrew locales). See RTL demo. Defaults to false.
scrollbars: boolean Sets whether the workspace is scrollable or not. Defaults to true if the toolbox has categories, false otherwise.
sounds: boolean If false, don’t play sounds (e.g. click and delete). Defaults to true.
toolbox: XML nodes or string Tree structure of categories and blocks available to the user. See below for more information.
toolboxPosition: string If "start" toolbox is on top (if horizontal) or left (if vertical and LTR) or right (if vertical and RTL). If "end" toolbox is on opposite side. Defaults to "start".
trashcan: boolean Displays or hides the trashcan. Defaults to true if the toolbox has categories, false otherwise.
zoom: object Configures zooming behaviour. See Zoom

The most important option is toolbox. This is an XML tree that specifies which blocks are available in the toolbox (the side menu), how they are grouped, and whether there are categories.

→ More info on defining the toolbox

In addition to the default blocks that come with Blockly, custom blocks need to be built to call your web application’s API. An example is this maze game which has custom blocks for movement.

→ More info on creating custom blocks

Code Generators

Blockly is not a programming language, one cannot ‘run’ a Blockly program. Instead, Blockly can translate the user’s program into JavaScript, Python, PHP, Dart, or some other language.

→ More info on code generators

Importing and Exporting Blocks

If your application needs to save and store the user’s blocks and restore them at a later visit, use this call for export to XML:

 var xml = Blockly.Xml.workspaceToDom(workspace);
var xml_text = Blockly.Xml.domToText(xml);

This will produce a minimal (but ugly) string containing the XML for the user’s blocks. If one wishes to obtain a more readable (but larger) string, use Blockly.Xml.domToPrettyText instead.

Restoring from an XML string to blocks is just as simple:

 var xml = Blockly.Xml.textToDom(xml_text);
Blockly.Xml.domToWorkspace(xml, workspace);

Cloud Storage

Blockly comes with an optional cloud-storage feature. It enables users to save, load, share, and publish their programs. If your project is hosted on App Engine you can take advantage of this service.

ArvinshBOT & Cloud AppsElectronicsGeneralKnowledgebaseUncategorizedGet the Code First, download the source code from GitHub. If you know how to use Git or Subversion, we highly recommend syncing from our repository so that your code stays up to date. Git Hub :: Zip File Git Hub :: TarBall File   Once you have the code,...Collobrative Intelligence News and updates