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 索引從 。預設為 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上，則可以利用此服務。

→有關雲存儲的更多資訊...