title: 創(chuàng)建自定義塊 - 塊開發(fā)工具
Create Custom Blocks - Blockly Developer Tools
原文鏈接:https://developers.google.com/blockly/guides/create-custom-blocks/blockly-developer-tools
Blockly開發(fā)工具Blockly Developer Tools是一個基于Web的開發(fā)工具斩披,可自動完成Blockly配置過程的各個部分,包括創(chuàng)建自定義塊裙品,構(gòu)建工具箱和配置Web Blockly工作區(qū)喊积。
使用該工具的Blockly開發(fā)者進(jìn)程包括三個部分:
- 使用塊工廠和塊導(dǎo)出器創(chuàng)建自定義塊颖御。
- 使用Workspace Factory構(gòu)建工具箱和默認(rèn)工作空間扎阶。
- 使用Workspace Factory配置工作空間(當(dāng)前是僅限Web的功能)躲胳。
“塊工廠”
“塊工廠”選項(xiàng)卡可幫助您為自定義塊創(chuàng)建塊定義和代碼生成器。在此選項(xiàng)卡上胯努,您可以輕松地創(chuàng)建昼牛,修改和保存自定義塊术瓮。
定義塊
此視頻詳細(xì)介紹了定義塊的步驟。 UI是過時了贰健,但它突出的塊功能仍然準(zhǔn)確。
www.youtube.com/embed/s2_xaEvcVI0?autohide=1&showinfo=0&enablejsapi=1
管理庫
塊由其名稱引用恬汁,因此要創(chuàng)建的每個塊都必須具有唯一的名稱伶椿。 UI強(qiáng)制執(zhí)行此操作,并在您正在“保存”新塊或“更新”現(xiàn)有塊時清除氓侧。

您可以在先前保存的塊之間切換脊另,或通過單擊庫按鈕創(chuàng)建新的空塊。更改現(xiàn)有塊的名稱是快速創(chuàng)建具有類似定義的多個塊的另一種方法约巷。
導(dǎo)出和導(dǎo)入庫
塊被保存到瀏覽器的本地存儲偎痛。清除瀏覽器的本地存儲將刪除您的塊。要無限期保存您的塊独郎,您必須下載您的庫踩麦。您的塊庫將下載為可導(dǎo)入的XML文件,以將您的塊庫設(shè)置為下載文件時的狀態(tài)氓癌。請注意谓谦,導(dǎo)入塊庫將替換當(dāng)前的庫,因此您可能希望先導(dǎo)出贪婉。
導(dǎo)入和導(dǎo)出功能也是維護(hù)和共享不同組的自定義塊的推薦方法反粥。
塊導(dǎo)出器選項(xiàng)卡
一旦你設(shè)計(jì)了塊,你將需要導(dǎo)出塊定義和生成器存根在應(yīng)用程序中使用它們疲迂。這是在塊導(dǎo)出器選項(xiàng)卡上完成的才顿。
存儲在塊庫中的每個塊都將顯示在塊選擇器中。單擊塊以選擇或取消選擇要導(dǎo)出的塊尤蒿。如果要選擇庫中的所有塊郑气,請使用“Select”→“All Stored In Block Library”選項(xiàng)。
導(dǎo)出設(shè)置允許您選擇要定位的生成語言优质,以及是否需要所選塊的定義竣贪,生成器樁或兩者。選擇這些文件后巩螃,點(diǎn)擊“導(dǎo)出”即可下載文件演怎。
注意:如果在Mac上使用保存對話框,則一次只能下載一個文件one file at a time避乏。
工作區(qū)工廠選項(xiàng)卡
工作區(qū)工廠可以方便地配置工具箱和工作區(qū)中的默認(rèn)塊組爷耀。您可以使用“Toolbox”和“Workspace”按鈕在編輯工具箱和起始工作區(qū)之間切換。
構(gòu)建工具箱
此選項(xiàng)卡有助于構(gòu)建工具箱的XML拍皮。該材料假定熟悉工具箱Toolbox的功能歹叮。如果您已在此處要編輯工具箱的XML跑杭,可以通過單擊“Load to Edit”加載它。
沒有類別的工具箱
如果您有幾個塊咆耿,并希望顯示它們沒有任何類別德谅,只需將它們拖動到工作區(qū)中,您將看到您的塊出現(xiàn)在預(yù)覽中的工具箱中萨螺。
帶類別的工具箱
如果要顯示類別中的塊窄做,請單擊“+”按鈕并選擇新類別的下拉項(xiàng)。這將向您的類別列表中添加一個類別慰技,您可以選擇和編輯椭盏。選擇“標(biāo)準(zhǔn)類別 tandard Category ”以添加單個標(biāo)準(zhǔn)塊類別(邏輯,循環(huán)等)或“標(biāo)準(zhǔn)工具箱Standard Toolbox”以添加所有標(biāo)準(zhǔn)塊類別吻商。使用箭頭按鈕重新排序類別掏颊。
注意:標(biāo)準(zhǔn)類別和工具箱包括Playground中的所有塊。這組塊不適用于大多數(shù)應(yīng)用程序艾帐,應(yīng)根據(jù)需要進(jìn)行修剪乌叶。此外,某些塊在移動設(shè)備上尚不支持掩蛤。
要更改所選類別的名稱或顏色枉昏,請使用“編輯類別Edit Category”下拉菜單。將塊拖動到工作區(qū)中將將其添加到所選類別揍鸟。
高級塊
默認(rèn)情況下兄裂,您可以將庫中的任何標(biāo)準(zhǔn)塊或任何塊添加到工具箱中。如果您在JSON中定義了不在庫中的塊阳藻,則可以使用“導(dǎo)入自定義塊”按鈕導(dǎo)入它們晰奖。一些塊應(yīng)該一起使用或包括默認(rèn)值。這是通過組和陰影groups and shadows來完成的腥泥。在編輯器中連接的任何塊都將作為一個組添加到工具箱中匾南。附加到另一個塊的塊也可以通過選擇子塊并單擊“創(chuàng)建陰影”按鈕更改為陰影塊。注意:只有不包含變量的子塊才可以更改為陰影塊蛔外。
如果在其工具箱中包含變量或功能塊蛆楞,請?jiān)诠ぞ呦渲邪白兞俊被颉昂瘮?shù)”類別,以允許用戶充分利用塊夹厌。詳細(xì)了解“變量”或“函數(shù)”類別“Variables” or “Functions" categories豹爹。
配置工作區(qū)(for Web Blockly)
要配置工作區(qū)的不同部分,請轉(zhuǎn)到“工作區(qū)工廠Workspace Factory”選項(xiàng)卡并選擇“工作區(qū)Workspace”矛纹。
選擇工作區(qū)選項(xiàng)
為配置選項(xiàng)設(shè)置configuration options不同的值臂聋,并在預(yù)覽區(qū)域中查看結(jié)果。啟用網(wǎng)格或縮放會顯示更多配置選項(xiàng)。此外孩等,切換到使用類別通常需要更復(fù)雜的工作空間;當(dāng)您添加第一個類別時艾君,會自動添加垃圾桶和滾動條。
將預(yù)加載塊添加到工作區(qū)
這是可選的肄方,但如果要在工作空間中顯示一組塊冰垄,則可能需要:
- 當(dāng)應(yīng)用程序加載時。
- 當(dāng)觸發(fā)事件(提高級別权她,單擊幫助按鈕等)時播演。
塊拖動到編輯空間中,以在預(yù)覽中在工作空間中查看它們伴奥。您可以創(chuàng)建塊組,禁用塊翼闽,以及在選擇某些塊時創(chuàng)建陰影塊拾徙。
https://developers.google.com/blockly/images/load_workspace_blocks.png
導(dǎo)出
Workspace Factory提供以下導(dǎo)出選項(xiàng):
- 入門代碼:生成入門html和javascript以注入您的自定義Blockly工作區(qū)。
- 工具箱生成XML以指定您的工具箱感局。
- 工作區(qū)塊生成可以加載到工作區(qū)中的XML尼啡。