Android-blockly增加定製程式碼塊（Custom Blocks）
阿新 • • 發佈：2019-02-03
————————————————增加定製程式碼塊——————————————
網頁版的Blockly也支援在JavaScript中構建塊定義實體，但是在安卓當中不支援。
——————block定義——————
最簡單的方法是使用
使用圖形化介面去編寫一個新的block並且把它生成的程式碼貼上進你的應用程式中。
|inputs:
|[external]inputs:
|[no conection]:
|color:
開始寫自己的個性化程式碼塊：
———color———
有三種不同的inputs，
|value input [name]
|fields [left]
|type
如果把value input放入到input缺口下，右邊preview介面的block就會出現一個缺口，表示讓你輸入資料，可以定義輸入的資料型別
inputs還會有fields，最簡單的fields型別是text型別，直接輸入文字‘xxx’，block就會
顯示出（相當於一個lable）。
|statement input [name]
|fields [left]
|type
statement input主要是用於加入語句的，比如迴圈語句等等。
先放入statement input 在放入value input就會形成do-while迴圈。
|dummy input
|fields [left]
dummy input會形成一個帶有fields的空白的行，不與其他block有任何connection的部分。
fields就是域的意思，你可以通過選擇
|left
|right
|center
來調整inputs的位置。
———connection———
四種選擇
|no connections
|left output
|top+bottom connections
|top connection
2、left output 左邊會有突出、然後表明這個block的將會被計算出來，作為一個值傳到左邊的塊中。
3、top+bottom connections 是最常見的statements，block的上面有凹進，下面有突出，表示的是中間執行塊（就是上下都有block）
|external
|inline
text表示像label一樣的靜態的文字。
text Input表示一個使用者輸入text的域，在這裡使用者可以輸入任何他們想要的東西。需要輸入他的預設值，和值的name。
angle input:角度輸入，0~360度區間。
dropdown：可以給出一個下拉選項，需要給出dropdown的值、選項內容和選項name。有意思的是，如果三個選項有公共的字首，那麼這個字首就會直接寫在dropdown下面的label中。
checkbox：選擇預設值為勾選/不夠選，checkbox的名字是name
color：可以選擇預設顏色和設定name
variable：自動會在下拉框裡面顯示出來所有在應用中出現過的變數。也可以在下拉框中選擇重新命名變數（rename variable）或者是定義新的變數（new variable）。
image：可以放入圖片地址（URL），設定圖的高、寬和可選文字。
————————————Type——————————————
數值型別的可以放在平方根（square root）後面
equality block 等式型別的可以放在repeat的後面
每一個塊都有自己定義的型別
any of 表示的是 兩種型別皆可行，主要用於限定input的輸入規則的，比如說，length of長度函式可以接受的list/string 型別的值。
other：可以輸入一種新的、你自己定義的型別。
比如說隨意建立一個block：
https://blockly-demo.appspot.com/static/demos/blockfactory/index.html#5s7fhr 這個就是中文版的if語句
[聽英文的視訊聽到的內容，有一半是猜的，大概內容沒問題，如果想看視訊視訊連結，當然，必須要翻牆的~為了避免我不專業的翻譯給大家帶來困擾，很多單詞保留了原文]
程式碼塊包括三個部分
1、程式碼定義實體：定義一個程式碼塊的外觀和行為，包括text、color、fields & connections.
2、toolbox參考：為了讓使用者能夠加入到工作區中，需要xml檔案裡寫一個程式碼塊型別的參考
3、Generator 函式：生成函式，為這個block生成程式碼，即使目標語言不是JavaScript也會把這個寫成JavaScript網頁版的Blockly也支援在JavaScript中構建塊定義實體，但是在安卓當中不支援。
——————block定義——————
最簡單的方法是使用
使用圖形化介面去編寫一個新的block並且把它生成的程式碼貼上進你的應用程式中。
Block Factory介面講解
Block Factory 右邊的preview介面是你現在正在建立的block
下面的language code 是你可以複製到你的app中間的程式碼
最下面的generator stub是根據不同的目標語言生成的程式碼，有JavaScript、python、dart對於一個基礎的程式碼塊來講，有以下幾個內容：
|name:|inputs:
|[external]inputs:
|[no conection]:
|color:
開始寫自己的個性化程式碼塊：
———color———
最簡單的是，定義一個顏色，把左邊colour選單中選中你想要的顏色，然後拖動到中間colour屬性右邊，拼起來。同時，相關的程式碼會被寫進language code。
———————————inputs———————————
接下來是inputs：有三種不同的inputs，
value input、statement input、dummy input
value input的組織內容有|value input [name]
|fields [left]
|type
如果把value input放入到input缺口下，右邊preview介面的block就會出現一個缺口，表示讓你輸入資料，可以定義輸入的資料型別
inputs還會有fields，最簡單的fields型別是text型別，直接輸入文字‘xxx’，block就會
顯示出（相當於一個lable）。
|statement input [name]
|fields [left]
|type
statement input主要是用於加入語句的，比如迴圈語句等等。
先放入statement input 在放入value input就會形成do-while迴圈。
|dummy input
|fields [left]
dummy input會形成一個帶有fields的空白的行，不與其他block有任何connection的部分。
fields就是域的意思，你可以通過選擇
|left
|right
|center
來調整inputs的位置。
———connection———
四種選擇
|no connections
|left output
|top+bottom connections
|top connection
|bottom connection
1、no connections意思就是上、下、左都沒有突出或者凹進2、left output 左邊會有突出、然後表明這個block的將會被計算出來，作為一個值傳到左邊的塊中。
3、top+bottom connections 是最常見的statements，block的上面有凹進，下面有突出，表示的是中間執行塊（就是上下都有block）
4、top connection & bottom connection 一個是開始執行塊，一個是結束執行塊
———[external]inputs———|external
|inline
兩種不同的輸入格式
這個就是inline格式的，
————————————fields————————————text表示像label一樣的靜態的文字。
text Input表示一個使用者輸入text的域，在這裡使用者可以輸入任何他們想要的東西。需要輸入他的預設值，和值的name。
angle input:角度輸入，0~360度區間。
dropdown：可以給出一個下拉選項，需要給出dropdown的值、選項內容和選項name。有意思的是，如果三個選項有公共的字首，那麼這個字首就會直接寫在dropdown下面的label中。
checkbox：選擇預設值為勾選/不夠選，checkbox的名字是name
color：可以選擇預設顏色和設定name
variable：自動會在下拉框裡面顯示出來所有在應用中出現過的變數。也可以在下拉框中選擇重新命名變數（rename variable）或者是定義新的變數（new variable）。
image：可以放入圖片地址（URL），設定圖的高、寬和可選文字。
————————————Type——————————————
大概意思就是
string型別的block可以放在length of 後面，不能放在square root 後面、數值型別的可以放在平方根（square root）後面
equality block 等式型別的可以放在repeat的後面
每一個塊都有自己定義的型別
any of 表示的是 兩種型別皆可行，主要用於限定input的輸入規則的，比如說，length of長度函式可以接受的list/string 型別的值。
other：可以輸入一種新的、你自己定義的型別。
比如說隨意建立一個block：
https://blockly-demo.appspot.com/static/demos/blockfactory/index.html#5s7fhr 這個就是中文版的if語句