Google blockly简介（一）Simple Blockly操作

谷歌官网的有一些比较简单的demo，大家可以试一下。

https://developers.google.cn/blockly/guides/configure/web/fixed-size

一、包括核心Blockly脚本和核心块集。（请注意，路径可能会有所不同，这取决于您的页面与Blockly相关的位置：）

<script src="blockly_compressed.js"></script>
<script src="blocks_compressed.js"></script>

二、然后设置用户语言的消息(在本例中为英语)：

<script src="msg/js/en.js"></script>

将以上的代码放入html文件中的<head> ***** <\head>中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Blockly</title> <script src="blockly_compressed.js"></script>
<script src="blocks_compressed.js"></script>
<script src="en.js"></script></head>

三、在页面正文中的某个位置添加一个空div并设置其大小（放在 <body>***** <\body>中）：

<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>

四、添加工具箱的结构(请参阅 Defining the Toolbox(欲了解更多信息)页面上的任何地方：

<xml id="toolbox" style="display: none"><block type="controls_if"></block><block type="controls_repeat_ext"></block><block type="logic_compare"></block><block type="math_number"></block><block type="math_arithmetic"></block><block type="text"></block><block type="text_print"></block>
</xml>

五、调用JavaScript 脚本，将注入Blockly注入空div。此脚本应位于页面底部，或由onload事件调用。

<script>var workspace = Blockly.inject('blocklyDiv',{toolbox: document.getElementById('toolbox')});
</script>

或者

  <script>var demoWorkspace = Blockly.inject('blocklyDiv',{media: '../../media/',maxBlocks: 5,toolbox: document.getElementById('toolbox')});function onchange(event) {document.getElementById('capacity').textContent =demoWorkspace.remainingCapacity();}demoWorkspace.addChangeListener(onchange);onchange();</script>

以上就是整个例子完成，显示结果如下图：

所有代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Blockly</title> <script src="blockly_compressed.js"></script>
<script src="blocks_compressed.js"></script>
<script src="en.js"></script></head><body><div id="blocklyDiv" style="height: 480px; width: 600px;"></div><xml id="toolbox" style="display: none"><block type="controls_if"></block><block type="controls_repeat_ext"></block><block type="logic_compare"></block><block type="math_number"></block><block type="math_arithmetic"></block><block type="text"></block><block type="text_print"></block>
</xml><script>var workspace = Blockly.inject('blocklyDiv',{toolbox: document.getElementById('toolbox')});
</script></body>
</html>

Google blockly简介（一）Simple Blockly操作相关推荐

Google blockly简介（二）Blockly Developer Tools使用
现在国内Google官网打不开Blockly Developer Tools,要想使用此工具,那就用别的办法了. https://blockly-demo.appspot.com/static/dem ...
blockly 代码html,【blockly入门指引】2，在网页中使用blockly
原文:https://developers.google.com/blockly/guides/get-started/web blockly可以在web,android,ios端使用.下面介绍的是如 ...
Google Perftools简介与使用
一. 安装与简介从主页http://code.google.com/p/google-perftools/downloads/list下载源码包,解压后使用命令序列./configure;make; ...
google driver 上传文件等操作
google driver 上传文件等操作 from __future__ import print_function import pickle import os.path from google ...
Google Sites 简介
Google Sites 简介本文地址: http://blog.csdn.net/caroline_wendy Google Sites is the easiest way to make in ...
Google blockly简介（三）puzzle游戏的制作
完成puzzle游戏的制作(一)相关的案例之后,来正式开始着手做puzzle游戏. Puzzle游戏界面 1. 新建代码块使用Blockly Developer Tools新建拼图所涉及的代码块. ...
来算google的可视化编程工具——Blockly，不仅仅是玩具
Blockly - 来自Google的可视化编程工具 Google Blockly 是一款基于Web的.开源的.可视化程序编辑器.你可以通过拖拽块的形式快速构建程序,而这些所拖拽的每个块就是组成程序的 ...
blockly android教程,【blockly入门指引】3，android-入门
开始本指南面向希望创建自己的应用程序并将Blockly作为代码编辑器的Android开发人员.假设他们熟悉Blockly的使用,并且基本了解使用Android Studio的Java和应用程序开发. ...
OpenStack/Gnocchi简介——时间序列数据聚合操作提前计算并存储起来，先算后取的理念...
先看下 http://www.cnblogs.com/bonelee/p/6236962.html 这里对于环形数据库的介绍,便于理解归档这个操作! 转自:http://blog.sina.com.c ...

Google blockly简介（一）Simple Blockly操作

Google blockly简介（一）Simple Blockly操作相关推荐

最新文章

热门文章