container is where the Blockly workspace should be placed on the page.The function to call is Blockly.inject(container, options), which takes two arguments: InjectionĪdding a Blockly workspace to a page is called injection, because the workspace is injected into a div that already exists on the page. We set the display style of the toolbox to none, because we do not intend to display the XML structure on our web page - it will be just used to construct the toolbox programmatically. This XML defines a toolbox with a single "repeat loop" block.
Define the toolboxĪdd the structure of the toolbox just after the blocklyDiv: A well-organized toolbox helps the user to explore the available blocks and understand the capabilities of the underlying system.Ī toolbox is defined in XML and passed into the workspace constructor through an options struct.įor more information on this XML format and toolbox configuration, including category creation, click here. The toolbox may be organized into categories, and may contain both single blocks and groups of blocks. A toolbox that contains all blocks that are available to the user (the grey area).The area where the user assembles their blocks (the white area).The Blockly toolboxĪ Blockly workspace has two main components:
In this section you will learn how to add a workspace to your app, including how to define a toolbox. You can also define your imports more carefully to get different generators and locales. For samples that show how to integrate Blockly in your project, look at the examples folder in blockly-samples. There are many ways to import a library in JavaScript, and this tutorial does not cover all of them.
You can get the sample code for this code by either downloading the zip here: The app structure, non-relevant concepts and code are glossed over and are provided for you to simply copy and paste. Basic knowledge of HTML, CSS and JavaScript.MusicMaker, a web app where you can program buttons to play different sounds, using Blockly. Each block represents a chunk of code that can be easily stacked and translated into code. What is Blockly?īlockly is a library for building block programming apps.īlock programming allows users to create scripts and programs by using visual blocks, even if they do not know any programming language.īlockly includes everything you need for defining and rendering blocks in a drag-n-drop editor.
This codelab will teach you how to modify a simple web app to include the Blockly visual programming library. Getting started with Blockly What you'll learn